In this tutorial, we will provide an overview of android layout. We will also explore some of the specific layout controls available for organising the screen content namely – Android LinearLayout and Android RelativeLayout.
Android Layout
The basic building block for user interface is a View object that is created from the View class and occupies a rectangular area on the screen. Views are the base class for UI components like TextView, Button, EditText etc.
The ViewGroup is a subclass of View. One or more Views can be grouped together into a ViewGroup. A ViewGroup provides the android layout in which we can order the appearance and sequence of views. Examples of ViewGroup are LinearLayout, FrameLayout, RelativeLayout etc.
Android Layout Types
Android provides the following ViewGroups or layouts:
LinearLayout: is a ViewGroup that aligns all children in a single direction, vertically or horizontallyRelativeLayout: is a ViewGroup that displays child views in relative positionsAbsoluteLayout: allows us to specify the exact location of the child views and widgetsTableLayout: is a view that groups its child views into rows and columnsFrameLayout: is a placeholder on screen that is used to display a single viewScrollView: is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display. The ScrollView can contain only one child view or ViewGroup, which normally is a LinearLayoutListView: is a view group that displays a list of scrollable itemGridView: is a ViewGroup that displays items in two-dimensional scrolling grid. The items in the grid come from the ListAdapter associated with this view
In this tutorial we’ll focus on the two most used android layout:
- LinearLayout
- RelativeLayout
Android Layout Attributes
- android:id : This is the ID which uniquely identifies the view
- android:layout_width : This is the width of the layout
- android:layout_height : This is the height of the layout
- android:layout_margin : This is the extra space outside of the view. For example if you give
android:marginLeft=20dp, then the view will be arranged after 20dp from left - android:layout_padding : This is similar to android:layout_margin except that it specifies the extra space inside the view
- android:layout_gravity : This specifies how child Views are positioned
- android:layout_weight : This specifies how much of the extra space in the layout should be allocated to the view
- android:layout_x : This specifies the x-coordinate of the layout
- android:layout_y : This specifies the y-coordinate of the layout
android:layout_width=wrap_content tells the view to size itself to the dimensions required by its content.
android:layout_width=match_parent tells the view to become as big as its parent view.
View Identification
The syntax for an ID, inside an XML tag is:
- The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource
- The plus-symbol (+) means that this is a new resource name that must be created and added to our resources
Android LinearLayout
Android LinearLayout organizes elements along a single line. We can specify whether that line is vertical or horizontal using android:orientation. The orientation is horizontal by default.
A vertical LinearLayout will only have one child per row (so it is a column of single elements), and a horizontal LinearLayout will only have one single row of elements on the screen.
android:layout_weight attribute depicts the importance of the element. An element with larger weight occupies more screen space. Here is a sample Layout XML using LinearLayout:
layout_linear.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_margin="@dimen/activity_horizontal_margin"> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 2" android:layout_width="wrap_content" android:textSize="18sp" android:layout_margin="10dp" android:layout_height="wrap_content" /> <TextView android:text="Row 3" android:textSize="18sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 4" android:textSize="18sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 5" android:textSize="18sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:id="@+id/next_button" android:text="next" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 6b" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 6c" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Row 6d" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> |
In this layout we have a Parent LinearLayout which has a vertical orientation and contains buttons, textviews and a nested Linear Layout(having a horizontal orientation) as child views.
Note: Nested layouts don’t have to be of one type. We could, for example, have a LinearLayout as one of the children in a RelativeLayout and vice-versa.
Android RelativeLayout
Android RelativeLayout lays out elements based on their relationships with one another, and with the parent container. This is one of the most complicated layout and we need several properties to actually get the layout we desire.
That is, using RelativeLayout we can position a view to be toLeftOf, toRightOf, below or above its siblings.
We can also position a view with respect to its parent such as centered horizontally, vertically or both, or aligned with any of the edges of the parent RelativeLayout. If none of these attributes are specified on a child view then the view is by default rendered to the top left position.
Android RelativeLayout attributes
The following are the major attributes used across RelativeLayout. They lay across three different categories:
Relative To Container
- android:layout_alignParentBottom : Places the bottom of the element on the bottom of the container
- android:layout_alignParentLeft : Places the left of the element on the left side of the container
- android:layout_alignParentRight : Places the right of the element on the right side of the container
- android:layout_alignParentTop : Places the element at the top of the container
- android:layout_centerHorizontal : Centers the element horizontally within its parent container
- android:layout_centerInParent : Centers the element both horizontally and vertically within its container
- android:layout_centerVertical : Centers the element vertically within its parent container
Relative to Siblings
- android:layout_above : Places the element above the specified element
- android:layout_below : Places the element below the specified element
- android:layout_toLeftOf : Places the element to the left of the specified element
- android:layout_toRightOf : Places the element to the right of the specified element
“@id/XXXXX” is used to reference an element by its id. One thing to remember is that referencing an element before it has been declared will produce an error so @+id/ should be used in such cases.
Alignment With Other Elements
- android:layout_alignBaseline : Aligns baseline of the new element with the baseline of the specified element
- android:layout_alignBottom : Aligns the bottom of new element in with the bottom of the specified element
- android:layout_alignLeft : Aligns left edge of the new element with the left edge of the specified element
- android:layout_alignRight : Aligns right edge of the new element with the right edge of the specified element
- android:layout_alignTop : Places top of the new element in alignment with the top of the specified element
The following xml layout uses RelativeLayout:
layout_relative.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="https://schemas.android.com/apk/res/android"> <Button android:id="@+id/backbutton" android:text="Back" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:id="@+id/firstName" android:text="First Name" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/backbutton" /> <TextView android:id="@+id/editFirstName" android:text="JournalDev" android:textSize="18sp" android:layout_width="wrap_content" android:layout_marginLeft="10dp" android:layout_height="wrap_content" android:layout_toRightOf="@id/firstName" android:layout_below="@id/backbutton"/> <TextView android:id="@+id/editLastName" android:text="Layout Tutorial Example" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/lastName" android:layout_toRightOf="@+id/lastName" android:layout_toEndOf="@+id/lastName" /> <TextView android:id="@+id/lastName" android:text="Last Name" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="48dp" android:layout_below="@+id/firstName" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_marginRight="10dp" android:layout_marginLeft="40dp" android:layout_marginStart="40dp" /> <Button android:id="@+id/next" android:text="Next" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/editLastName" android:layout_alignLeft="@+id/editLastName" android:layout_alignStart="@+id/editLastName" android:layout_marginTop="37dp" /> </RelativeLayout> |
As you can see we can rearrange elements based on their relative positions.
The following xml layout represents a custom layout having nested linear and relative layouts.
layout_mixed.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:android="https://schemas.android.com/apk/res/android"> <TextView android:id="@+id/parent_rl" android:text="Parent RelativeLayout" android:textSize="18sp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/linearLayout" android:layout_below="@id/parent_rl" android:layout_alignParentRight="true" android:layout_alignParentEnd="true"> <TextView android:text="Nested Horizontal" android:textSize="18sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="LL" android:textSize="18sp" android:layout_margin="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <LinearLayout android:orientation="vertical" android:layout_width="wrap_content" android:layout_height="wrap_content"> <TextView android:text="Double Nested" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="Vertical" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <TextView android:text="LL" android:textSize="18sp" android:layout_margin="10dp" android:layout_gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/linearLayout"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAppearance="?android:attr/textAppearanceMedium" android:text="Nested Relative Layout" android:id="@+id/textView" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" /> <Button android:id="@+id/back_button_pressed" android:text="back" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView" android:layout_centerHorizontal="true" android:layout_marginTop="66dp" /> </RelativeLayout> </RelativeLayout> |
Android Layout Project Structure
This project consists of three activities and the respective layouts that were discussed above.
Android Layout Code
The application launches into the MainActivity which loads the layout_linear.xml contents by the following code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.journaldev.layouts; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.Button; public class MainActivity extends AppCompatActivity { Button back,next; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_linear); back=(Button)findViewById(R.id.back_button); next=(Button)findViewById(R.id.next_button); next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(MainActivity.this,SecondActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { finish(); } }); } } |
The SecondActivity and ThirdActivity load the layout_relative.xml and layout_mixed.xml layouts respectively as shown below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
package com.journaldev.layouts; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class SecondActivity extends Activity { Button back,next; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_relative); back=(Button)findViewById(R.id.backbutton); next=(Button)findViewById(R.id.next); next.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(SecondActivity.this,ThirdActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(SecondActivity.this,MainActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
package com.journaldev.layouts; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.Button; public class ThirdActivity extends Activity { Button back; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.layout_mixed); back=(Button)findViewById(R.id.back_button_pressed); back.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent=new Intent(ThirdActivity.this,SecondActivity.class); intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP); startActivity(intent); } }); } } |
The image outputs of the three layout files are shown below:
layout_linear.xml
As you can see the Parent LinearLayout consists of 6 child elements in a single vertical column among which one is a nested LinearLayout child view containing 4 components in horizontal orientation.
layout_relative.xml
The arrows pointing in the image above depict how siblings are positioned relative to each other and relative to the container.
layout_mixed.xml
This Relative Layout consists of a Vertical LinearLayout within a Nested Horizontal LinearLayout along with a Child RelativeLayout.
Note: Components belonging to different layouts are not siblings and hence can’t be positioned relative to each other. It’s their container layouts that are siblings and can be positioned relative to each other.
If you are wondering about the blue lined rectangles and arrows, it’s because the images are from xml layouts in graphical view. When you will run the app, these blue lines and rectangles will not be shown.
This brings an end to android layout tutorial. We’ll cover the other android layouts in the next tutorials. You can download the final Android Layout Project from the link below.
Reference: API Doc