Android Linear Layout is another ViewGroup that can also be used to design the User Interface. Using this linear layout we can align all the child elements either horizontally or vertically. Above all, it provides equal space distribution on the phone screen using the layout_weight attribute. As discussed here.

android linear layout
Linear Layout with both orientations

Anyway, let’s come to the point.



Syntax

Here is how a simple Linear layout looks like in the XML.

<LinearLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:orientation="vertical">
     
    //Child A   
    //Child B  
    //Child C  
</LinearLayout>


Android Linear Layout & Attributes

Check out this below table now. Described all the useful attributes those are related to Linear layout.

Attribute NameValuesShort Description
android:orientation=vertical/horizontalAlign your child elements in both possible ways.
android:layout_weight=integerEqual and unequal distribution.
android:weightSum=integerIt’s optional because by default it is set to the children’s layout_weight sum


Horizontal Orientaion

By default, a Linear layout uses horizontal orientaion to align it’s child elements. As shown below:

android linear layout horizontal

In linear layout, all the child elements are aligned one after another like the first element at the first position, then the second one and it goes because of layout direction. In android, the default layout direction is left to right. If you want to change that then just add android:layoutDirection attribute to the LinearLayout itself. And pass RTL (means right to left).

android linear layout
Example of the Horizontal Linear Layout with the both possible directions.

XML Code: Horizontal linear layout example

Here is an example of a Horizontal linear layout.

<LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
android linear layout


Vertical Orientation

All the things will go as same as we have just discussed above. So this orientation is used to align child elemnts vertically. As shown below:

android linear layout vertical

XML Code: Vertical linear layout example

Here is the example of vertically aligned linear layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vetical">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
android linear layout


Responsive Android Linear Layout

If you see the previous two examples again, you may notice both vertical linear layout and horizontal linear layout are not responsive enough. So to make them responsive, we need to use android:layout_weight attribute and android:orientation and so on.

android linear layout
Example of a non-responsive linear layouts

Three things to remember:

  • Set the android:layout_width or android:layout_height of the children to “0dp”. Although it depends on android:orientation such as horizontal or vertical.
  • Set the android:weightSum of the parent.
  • Set the android:layout_weight of each child proportionally.


Responsive Horizontal Linear Layout

Basically, we are going to learn how to make a linear layout horizontally responsive. So to do that! Just follow these below simple steps.

Step 01:

Set layout orientation horizoltal in the parent layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
Step 02:

Set all the child elements layout_width to 0dp because we are going to create a horizontally responsive linear layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>

Step 03:

Now set the android:layout_weight attribute to children according to your need (e.g. weightSum=”3″, three children: layout_weight=”1″, layout_weight=”1″, layout_weight=”1″). Although, the weightSum attribute is optional because by default it calculates the children’s layout_weight sum.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
android linear layout
Horizontally Responsive Linear Layout

Now you can see all the views or buttons are sharing equal space because every button’s layout_weight is 1. But if we change any button’s layout_weight to 2. Let’s say button B‘s layout_weight is 2 now. So total weightSum is 4. Now, what will happen? See below,

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="A"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="B"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
android linear layout
Responsive Unequal Spacing

The moral of the story is that button B is actually occupying the double space whereas button A and button C both are occupying half-space of button B. However, this is responsive. If you rotate the device you can see the responsiveness.



Responsive Vertical Linear Layout

For this to happen, we have to follow the same three steps. As discussed in the above section. But here we have to set 0dp in each child element’s layout_height instead of layout_width. Because now we are talking about the responsiveness of vertical linear layout.

Step 01:

Set orientation vertical in the parent layout.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
   
</LinearLayout>
Step 02 & Step 03:

Set layout_height to 0dp to all the child elements because we are going to create a vertically responsive linear layout. Finally, set the android:layout_weight attribute to children.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
   <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="A"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="B"
        android:layout_marginLeft="8dp"/>

    <Button
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="C"
        android:layout_marginLeft="8dp"/>
</LinearLayout>
android linear layout responsive
Reponsive Vertival Linear Layout

This is exactly the same example of the previous section. The only difference is the orientation. So this is how you can set up a responsive UI using a Linear layout.


Remember: You can naste multiple linear layout. In order to construct a good user interface.


Gravity Vs Layout_gravity in Linear Layout

There are basically two types of gravity attributes we have,

  • android:gravity – Used to align all the child elements. e.g. If you set gravity centre or right in the parent layout, you will see all the children are moved to the centre or right side of the screen. But always remember parent linear layout’s width and height should have to be bigger than the child elements. So no wrap_content.
  • android:layout_gravity – But in this case, if you use it in the LinearLayout then the layout’s height and width should be wrap_content. So then you can move the whole layout using this attribute. And of course no match_parent in this case.

android linear layout
Aligned all the children using layout_gravity

Conclution

This was the article wherein we understood the Android Linear Layout. How to use it? And also we’ve seen how to make a Linear layout responsive horizontally and vertically in both possible ways. Read more articles..

I hope you got all the points of Android AutoCompleteTextView. Anyway if you liked this article then please Subscribe to our Youtube channel for keeping this talk continue. You can also find us on Facebook and Instagram. Thanks for your support.

android linear layout
Translate »