In the last tutorial we have seen the life-cycle of the Android Application . Every Android Activity
will have a set of life cycle methods that will be called based on the state of the Application .
The onCreate(Bundle) is where you will initialize your activity , this is where you will be setting
the content of the Activity using the setContentView(Layout Resource) method.
So we will be covering different type of Layouts in this set of tutorial . Lets start with the most
easy and commonly used layout LinearLayout .
Linear Layout
This will give you a layout as shown below.
Now lets add margin between two the buttons , this can be done using the layout_margintop,
layout_marginbottom attributes. The layout file and the corresponding change is given below.
Suppose we are setting the layout like given below where we will be explicitly setting the
width instead of using wrap_content or fill_parent .
will have a set of life cycle methods that will be called based on the state of the Application .
The onCreate(Bundle) is where you will initialize your activity , this is where you will be setting
the content of the Activity using the setContentView(Layout Resource) method.
So we will be covering different type of Layouts in this set of tutorial . Lets start with the most
easy and commonly used layout LinearLayout .
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btn1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:id="@+id/btn3"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button3" />
<Button
android:id="@+id/btn4"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Button4" />
</LinearLayout>
This will give you a layout as shown below.
 |
| LinearLayoutVertical |
Now lets add margin between two the buttons , this can be done using the layout_margintop,
layout_marginbottom attributes. The layout file and the corresponding change is given below.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btn1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:text="Button2" />
</LinearLayout>
2. Horizontal Linear Layout
We will learn through examples , which is much easier and fast to understand .<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/btn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button3" />
</LinearLayout>
 |
| Simple Horizontal Linear Layout |
Suppose we are setting the layout like given below where we will be explicitly setting the
width instead of using wrap_content or fill_parent .
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/btn1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="Button1" />
<Button
android:id="@+id/btn2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button2" />
<Button
android:id="@+id/btn3"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="Button3" />
</LinearLayout>
 |
| Horizontal Linear |
3. Horizontal Linear Layout : Layout_Weight example
As we can see the third button is out of the screen bounds . A more flexible way of setting
The logic of layout_weight is quite straightforward . The percentage of space taken by a
child element (eg. Btn1 in our case) is equal to
In this scenario the button3 would be taking minimum space required and the remaining space
would be divided equally between the two buttons since the layout_weight percentage is 50%.
the width in the horizontal linear layout would be to use the layout_weight . The most important
thing to notice while playing around with layout_weight is that to set the (layout_width or
layout_height) to be set to 0dp depending on whether you are going to divide the space
horizontally or vertically . In our case we will be setting the layout_width = 0 since we
are dividing the horizontal space .
thing to notice while playing around with layout_weight is that to set the (layout_width or
layout_height) to be set to 0dp depending on whether you are going to divide the space
horizontally or vertically . In our case we will be setting the layout_width = 0 since we
are dividing the horizontal space .
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Btn1" />
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="Btn2" />
<Button
android:id="@+id/btn3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Btn3" />
</LinearLayout>
 |
| layout_weight example |
The logic of layout_weight is quite straightforward . The percentage of space taken by a
child element (eg. Btn1 in our case) is equal to
child element layout_weight / Sum of total layout_weight of all siblings .
In our case Btn2 would be taking 50% and remaining buttons would be taking 25%.
Layout_weight Scenario 2
Suppose we are using a scenario in which one of the elements are not using layout_weight.<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/btn1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Btn1" />
<Button
android:id="@+id/btn2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="Btn2" />
<Button
android:id="@+id/btn3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Btn3" />
</LinearLayout>
In this scenario the button3 would be taking minimum space required and the remaining space
would be divided equally between the two buttons since the layout_weight percentage is 50%.
 |
| Layout Weight Example |