Android Basics: Using Relative layout
Tags: android, java, beginners, androidstudio
Published: 2021-08-07 13:29:04

###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](https://www.udacity.com/course/android-basics-user-interface--ud834). It's the first part of the five parts [Android Basics Nanodegree Program](https://www.udacity.com/course/android-basics-nanodegree-by-google--nd803) 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,

![Design of the UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x7g371ef2ly2e3nqymc.png)


##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)_.

![relative layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oi7ftfmsv5jh4gb2yg6b.png)

##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](https://developer.android.com/reference/android/widget/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

Examples.
![Align parent ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ynx6zgxr2243kniwaen.png)
 
###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. 

Examples.
![Centre parent](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lr8rnqpn5o863mhcdmfd.png)
###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. 

Examples.
![relative child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0au7nbptkxt9a2j8dnuz.png)

###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. 

Examples.
![Align Child](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/azzlpp21yfbawkg5rsyx.png)

#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,
![Design of the UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6x7g371ef2ly2e3nqymc.png)
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  
![overlapping view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11ht4tpthm5mgijlkf5y.png)
#####Insert an image
* Save the image in **`drawable folder`** and use an  attributes  `android: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** to `match_parent` so that ,image take whole space of the screen size
```xml
    <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.
```xml
<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 be `true`
* `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...
![positioning view](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjxtchbf470yiheb2tje.png)
 
###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
![app image ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v67l1ihpn75mj4wi2kfk.png)
*********
Code to write in  `activity_main.xml` inside **Android Studio** 
located inside `res` folder

```xml
<?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: 
* [ImageSource](https://www.studytonight.com/android/relative-layout-in-android)
* [Google's Udacity Course](https://www.udacity.com/course/android-basics-user-interface--ud834)

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,
{% post https://dev.to/rohitk570/what-to-learn-to-get-started-with-android-app-development-19il %}

##Thank You! 😊
You can follow me on 
[Linkedin](https://www.linkedin.com/in/rohitk570/)
[Twitter](https://twitter.com/RohitK_570)