Android RelativeLayout Example

 

In Android RelativeLayout every new component we add will align itself with respect to previously added components or the parent container. The first App (MyFirstApp) we made was itself based on RelativeLayout. Basically there are major 4 parameters – Left, Right, Top & Bottom to align any component. In case of RelativeLayout the child component (i.e. every new component which we add ) derives all the four values from its parent component. Based on where we place the component it modifies the values of these 4-parameters & acquires place over the screen.

 



Download
Source Code : RelativeLayout.zip


Now Let us work on Project : (Refer – Configuring Existing AndroidStudioProject) RelativeLayout which you might have downloaded from above or you can follow the scripts below by copying it to implement  in your Project. To launch Downloaded project, Extract the zip, copy it into AndroidStudioProjects. Now from Android Studio click open Existing Android Studio Project and select the path to extracted file we just copied in AndroidStudioProjects directory. If Sync SDK path prompt comes just click OK and you are ready to work. If still you get error check for AndroidStudioProjects/RelativeLayout/app/build.gradle , it will contain different SDK Version. Change it to SDK Version which you have.

 

 

  • Let us start with placing a Large TextView to the top-centre of the screen, as shown in below fig.

Android RelativeLayout aligning TextView

 

 

  • Now in the same way we will pick 2-EditText (TextBox) & 1-Button and place it as shown in next Fig. by dragging to their respective places.

Android RelativeLayout

 

 

Tip : While we add any component inside Android RelativeLayout using Drag & Drop, we don’t have to worry about technical coding parameters, eclipse will do that for you.

 

 

Our XML Layout file generated by Eclipse will be as follows : 

1. activity_main.xml : Layout file

Explanation of above Code :

  • Line 1-5 We have declared our RelativeLayout filling up the whole screen with height-width to fill_parent. It ends on Line-49, so everything we add between this will become child of our RelativeLayout.
  • Line 7-16 Our TextView is directly aligned with reference to the parent RelativeLayout. Initially when we drag the TextView, it will derive the 4-parameters( right, left, top & bottom ) from the parent and later on when we drop it on the screen, based on its position the 4-parameters will get updated. Our TextView is placed 26dp from TOP of the parent & 93dp from LEFT. So its relative alignment can be justified with modifying just these two parameters & rest all remains same as that of its parent.
  • Line 18-27 Now comes our 1st EditText which is aligned with respect to the above TextView. So it will inherit all 4 parameters of the TextView. After that when we place it below the TextView it will update the TOP parameter. If we move it in horizontal direction then it will update its LEFT parameter.
  • Line 29-38 The 2nd EditText inherits all 4-values from the above EditText, just we will get TOP parameter updated when we fix its position.
  • Line 40-47 Finally in case of the Login Button, we place it with respect to the 2nd EditText. See its position, we have placed it with respect to right corner of the EditText. So our button will start from right side and will extend itself towards left of the screen depending on the length of the Text. And we place it below 2nd EditText so TOP parameter is updated.

 

 

2. MainActivity.java

 

 

Tip : While we develop our App. for various screen size, Relative Layout might be useful to get same view in all sized screens. But we should develop a habit of using it in combination with other layouts. With practice you will learn how to use such combinations.

 

Output :  Android RelativeLayout

Android LinearLayout Vertical

 

 

Try it yourself :

  • Try adding more components like registration button, forgot password link, etc.  and aligning them in a meaningful manner. Even try re-sizing them, varying the text length, removing some of the component randomly and see its effect on rest components.

 

Report Errors + Bugs & Become Insider for Nestedif.com

We would like to hear you, if you find any error or misspelled phrase while reading our tutorials. By reporting mistakes through email to insider@nestedif.com you could help other peers.