In this article,
We will make a non-interactive app with just using Relative Layout ViewGroup and no line of extra java code
and also learn along the way about Relative Layout .
The entire content is inspired by,
Google's udacity course Android Basics: User Interface. It's the first part of the five parts Android Basics Nanodegree Program series, This course is for basics of Android and Java programming .
So I would be writing a blog series and this is my second blog in this series.
UI design of our app would look like this,
What is Relative Layout❓
A View is a rectangular area on the screen.
A ViewGroup is a big View that can contain smaller Views inside of it. The smaller Views are called the children of the ViewGroup and ViewGroup is called the parent of its children.
Basically, it is used to display more views neatly on the screen.
A RelativeLayout is a common type of ViewGroup that lets us position child views relative to sibling elements (such as to the left-of or below another view) or relative to the parent RelativeLayout area (such as aligned to the bottom, left or center).
Positioning Views
By default, all child views are drawn at the top-left of the layout , so you must define the position of each view using the various layout properties available from RelativeLayout.LayoutParams.
RelativeLayout.LayoutParams
The View within the relative layout, uses the value of these Relative layout parameters to determine where to position the view on the screen.
The value for each layout property is either a boolean to enable a layout position relative to the parent RelativeLayout or an ID that references another view in the layout against which the view should be positioned.
The following are the major attributes
in RelativeLayout available to its view.
They lay across four different categories:
1️⃣Align by the parent view
These types of attributes make the view be fixed to any side of the parent view.
Its attributes have two values either true
or false
boolean value.
XML Attributes | Description |
---|---|
android:layout_alignParentBottom | If true, make the bottom edge of this view match the bottom edge of the parent. |
android:layout_alignParentEnd | If true, makes the end edge of this view match the end edge of the parent. |
android:layout_alignParentLeft | If true, make the left edge of this view match the left edge of the parent. |
android:layout_alignParentRight | If true, make the right edge of this view match the right edge of the parent. |
android:layout_alignParentStart | If true, make the start edge of this view match the start edge of the parent. |
android:layout_alignParentTop | If true, make the top edge of this view match the top edge of the parent |
2️⃣Center relative to Parent View
Its attributes have two values either true
or false
boolean value.
When you want to place your Views in the center relative to the parent, you can use the following 3 attributes:
XML Attributes | Description |
---|---|
android:layout_centerHorizontal | If true, centers this child horizontally within its parent. |
android:layout_centerInParent | If true, centers this child horizontally and vertically within its parent. |
android:layout_centerVertical | If true, centers this child vertically within its parent. |
3️⃣Relative to Child View
We can position the new views relative to other existing views.
We just need to create the id of the Anchor view(the main child view its position should be fixed ) using the attributes android:id
.
Now, these attributes value is the same ID that refers to the anchor view against which the view should be positioned.
For eg.
android:layout_toLeftOf="@id/name_of_anchorView"
Following attributes can be used for doing so.
XML Attributes | Description |
---|---|
android:layout_above | Positions the bottom edge of this view above the given anchor view ID. |
android:layout_below | Positions the top edge of this view below the given anchor view ID. |
android:layout_toEndOf | Positions the start edge of this view to the end of the given anchor view ID. |
android:layout_toLeftOf | Positions the right edge of this view to the left of the given anchor view ID. |
android:layout_toRightOf | Positions the left edge of this view to the right of the given anchor view ID. |
android:layout_toStartOf | Positions the end edge of this view to the start of the given anchor view ID. |
4️⃣Align View relative to Child View
If you want to align the new view relative to any existing view, then you can use the following attributes.
Here also these attributes value will be id which refers to anchor View
XML Attributes | Description |
---|---|
android:layout_alignBaseline | Positions the baseline of this view on the baseline of the given anchor view ID. |
android:layout_alignBottom | Makes the bottom edge of this view match the bottom edge of the given anchor view ID. |
android:layout_alignEnd | Makes the end edge of this view match the end edge of the given anchor view ID. |
android:layout_alignLeft | Makes the left edge of this view match the left edge of the given anchor view ID. |
android:layout_alignRight | Makes the right edge of this view match the right edge of the given anchor view ID. |
android:layout_alignStart | Makes the start edge of this view match the start edge of the given anchor view ID. |
android:layout_alignTop | Makes the top edge of this view match the top edge of the given anchor view ID. |
Now,
We will make a Birthday Card app which will basically be non-interactive i.e. no line of extra java code just an XML code to design the UI of our app, by using Relative Layout.
Whenever ,we write the code of XML Layout ,think of 3 step in mind
Step 1->Select the Views
Step 2->Position the Views
Step 3->Styles the Views
Step 1:Select the View
Before writing the code for the UI, we must design or think about how our layout would look so either make the design or diagram of the UI page, then think about how to make it to code.
Our layout would look like this,
Looking at the image it's clear that,
We will be using 2 TextView 1 ImageView ss, we see there is an image in the background on the image and their Text written at two different places.
Step 2:Position the Views
Now to choose, which ViewGroup we should use to position the views, as we see two TextView are overlapping over the ImageView hence, Relative Layout is perfect for this situation, help in positioning the two text view as they are positioned.
Overlapping View
In Relative Layout ,the Views overlap and stack up from top to down manner correspondingly as written in XML
Insert an image
- Save the image in
drawable folder
and use an attributesandroid:src
to show image - Here we should also
centre crop
to image so that it will scale up the image and encrop it , to make a full bleed image, and give a nice immersive feel, and its width and height tomatch_parent
so that ,image take whole space of the screen size
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/happybirthday" />
Positioning the TextView
Now as we choosed Relative Layout , so think about how to align and position views with respect to other.
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="HAPPY BIRTHDAY" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:text=" ROHIT.K 🎊 " />
-
HAPPY BIRTHDAY
TextView will by default be placed at top right corner we don't need to add any layout parameter to position view -
ROHIT.K
TextView needed to be positioned at the bottom-right corner we will use two attributes as shown above and make that value betrue
-
height and width
should be set to wrap_content as we need to be flexible with the amount of text written
Now the with this code, the layout would look like this...
Step 3: Style the Views
We need to add or change some more attributes, to add some style and make our UI look better.
So add style, to make the UI more beautiful and for better user experience
- For styling, we can change the size, front & color of the text, according to the situation.
- We can also change the color of the background color of the TextView.
- And best is to also add padding or margin so that makes it more readable & not smushed at the corner.
For making Text Larger
Make the size of text 36sp
using attributes,
android:textSize
Setting the Font
Set the Text font to sans-serif-light
using attributes,
android:fontFamily
Setting the color
use the attributes android:textColor
Background of textView
for changing background color we will attributes android:background
Add padding and margin
we will use the attributes android:padding
and android:layout_margin
we can use either of the both or both as per situation.
Styling depends upon how better we can think, to make our app look better and give an aesthetic look
It totally depends upon the experience and our creativity
THIS Image of our app, how it will look like after writing these codes in XML
Code to write in activity_main.xml
inside Android Studio
located inside res
folder
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="@null"
android:scaleType="centerCrop"
android:src="@drawable/happybirthday" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:background="#9E03DAC5"
android:fontFamily="sans-serif-light"
android:padding="30dp"
android:text="HAPPY BIRTHDAY"
android:textColor="@android:color/white"
android:textSize="36sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:background="#C8FFFFFF"
android:fontFamily="sans-serif-light"
android:padding="10dp"
android:layout_margin="30dp"
android:text=" ROHIT.K 🎊 "
android:textColor="@color/teal_200"
android:textSize="36sp" />
</RelativeLayout>
That's all for today!
References:
If you liked my content, plz do share
Also if you got any questions or suggestions feel free to comment down below .
If you are thinking of starting an Android Development you can check this blog,
Top comments (6)
Great content
Thanks!
Good 👍
Thank you very much 😊
Nice article
Thanks !