Learn Android Development For Beginners

Linear Layout

The linear layout is the most basic layout in android. It aligns the children in a single direction either vertically or horizontally based on the value of Orientation property.

The orientation attribute is the important attribute of the Linear Layout to understand. It can have two values Vertical or Horizontal.

The default Orientation value of the linear layout is Horizontal. A Horizontal layout align views in a row, while Vertical layout aligns view in a column.

Horizontal Orientation

If Orientation of linear layout is horizontal, it shows all the child in one row. The height and width of the views does not make effect.

Create an activity in your android application and add LinearLayout to design your activity layout. Add some buttons in it. See the layout xml below.

 <linearlayout android:orientation="horizontal"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      xmlns:android="http://schemas.android.com/apk/res/android">
 
       <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1" />

       <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2" />

       <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3" />

       <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 4" />

 </linearlayout>

Vertical Orientation

If orientation of linear layout is vertical, it shows only one child per row, no matter how wide child are.

 <linearlayout android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      android:orientation="vertical"
                      xmlns:android="http://schemas.android.com/apk/res/android">

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 4" />

 </linearlayout>

Layout Weight

The other important attribute of the linear layout is Weight. This attribute assigns the size importance to the child view relative to the other children in the layout container. For horizontal linear layout the weight attribute applies on width and for vertical it applies on height of the view. Suppose layout file has four child view in it and one of them has Weight 1. The child view having weight 1 will consume empty available space of the container.

Add the Linear layout in you activity and set its orientation Horizontal. Add 4 buttons in layout and set different weight for each button. See the layout XML below.

 <linearlayout android:orientation="horizontal"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              xmlns:android="http://schemas.android.com/apk/res/android">

        <button android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text=" 1"
                android:layout_weight="0.1"
                android:background="#ffff0016" />

        <button android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="2"
                android:layout_weight="0.4"
                android:background="#fffff200" />

        <button android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="3"
                android:layout_weight="0.1"
                android:background="#ff0002ff" />

        <button android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:text="4"
                android:layout_weight="0.4"
                android:background="#ff00aa1b" />

 </linearlayout>

As you can see the Button 1 and 3 has same weight and Button 2 and Button 4 has same weight. Button 1 and 3 are consuming less space than Button 2 and 4, because of the weight.

The weight property on horizontal layout only apply on the width of the control, it does not applies on Height. But if layout is Vertical than weight only applies on the height of the control.

Add the linear layout and set it's orientation Vertical. Add some controls/Views in it and set weight for some child element. See the XML layout below.

 <linearlayout android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
                  android:orientation="vertical"
                  xmlns:android="http://schemas.android.com/apk/res/android">

     <button android:id="@+id/btnHorizontalOrientation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Go Back to Main View"
                android:gravity="right" />

    <textview android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text="Enter your Message">        
    </textview>
    
    <edittext android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:text=""
                 android:gravity="top"
                 android:layout_weight="1"
                 android:background="#fffff0b8" />

     <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Send Message"
                android:layout_gravity="right" />

</linearlayout>

If you notice the weight is only applied to EditText using attribute android:layout_weight="1", which means it will consume the available height in the layout.

Layout Gravity

Layout Gravity is other important attribute, which aligns the child view to Left, Right, or Top etc. The Possible values of the gravity are left, center, right, top, bottom, center_vertical, clip_horizontal etc.

The layout gravity supports different value for horizontal and vertical layout orientation. For horizontal linear layout only top, center and bottom is supported and for vertical linear layout left, center and right is supported.

For checking the behavior of linear layout. Create a horizontal linear layout and add three buttons in it. Set the different android:layout_gravity attribute for each button. See the layout xml below

 <linearlayout android:orientation="horizontal"
                      android:layout_width="fill_parent"
                      android:layout_height="fill_parent"
                      xmlns:android="http://schemas.android.com/apk/res/android">

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_gravity="top"
                android:layout_weight="1"
                android:background="#fffff400" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:background="#ff1200ff" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="#ffff0021" />

 </linearlayout>

Same as above, add the three buttons in vertical linear layout and set there layout_gravity attribute. See the layout xml below.

        
 <linearlayout android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical"
              xmlns:android="http://schemas.android.com/apk/res/android">

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 1"
                android:layout_gravity="right"
                android:background="#ff007b1d"
                android:layout_margin="4dp" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 2"
                android:layout_gravity="center"
                android:background="#ff3000ff"
                android:layout_margin="4dp" />

        <button android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Button 3"
                android:layout_gravity="left"
                android:background="#ffff0700"
                android:layout_margin="4dp" />

 </linearlayout>

Download Source Code

You can get the source code. Download Source Code

;