In android, Layout is the basic building block for an application. Layout has two main components View and ViewGroup.

View is the basic class behind every UI components. A view occupies a rectangular area and performs event handling and drawing. All UI components (TextView, EditText, Buttons) are views which are created to make your app more interactive.

ViewGroup is the base class for all the layouts and view containers. A ViewGroup can be seen as a special view which contains other views.

Following are the most commonly used ViewGroup classes :

  • Linear Layout
  • Relative Layout
  • Table Layout 
  • Frame Layout
  • Coordinator Layout

In this article we will learn about LinearLayout the most simple yet most useful layout.

LinearLayout basically arranges all the views either horizontally or vertically. Following is a simple illustration of how LinearLayout is implemented in an XML file.

As you can see there are few main attributes which we have defined these are :

  • layout_width : It is used to specify the overall width of the layout.
  • layout_height  : It is used to specify the overall height of the layout.
  • orientation : It is used to specify  whether child views are displayed in column or row.

There are many other attributes with which you can play to make your layout look more creative. In this article we will list some of the attributes which are commonly used. You can check the official documentation to get an idea about all other attributes that you can use in your XML file.

XML Attributes :

  • layout_weigth  : This attribute assigns an “importance” value to a view in terms of how much space it should occupy on the screen.
  • weightSum : Defines the maximum weight.
  • gravity: Specifies how an object should position its content, on both the X and Y axes, within its own bounds. 
  • padding : Padding  is the space inside the border, between the border and the actual view’s content.
  • layout_margin : Layout margins provide a visual buffer between a view’s content and any content outside of the view’s bounds.
  • baselineAligned : It prevents the layout from aligning children’s baselines when set to false.


Let’s apply what we have absorbed till now and try to implement LinearLayout in our app.

We will build a simple app having a single TextView and two buttons, clicking on these buttons will change the orientation of the LinearLayout. Lets code!

activity_main.xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:id="@+id/myLinearLayout"
    android:layout_margin="10dp"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView1"
        android:layout_margin="5dp"
        android:layout_gravity="center"
        android:text="LinearLayout(Vertical)" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_gravity="center"
        android:text="Vertical "
        android:id="@+id/button_1"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_gravity="center"
        android:text="Horizontal"
        android:id="@+id/button_2"/>

</LinearLayout>

Java

//MainActivity.java

public class MainActivity extends AppCompatActivity {
    private TextView textView1;
    private Button vertical,horizontal;
    private LinearLayout layout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = findViewById(R.id.myLinearLayout);
        textView1 = findViewById(R.id.textView1);
        vertical = findViewById(R.id.button_1);
        horizontal = findViewById(R.id.button_2);

        vertical.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layout.setOrientation(LinearLayout.VERTICAL);
                textView1.setText("LinearLayout(Vertical)");
            }
        });

        horizontal.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                layout.setOrientation(LinearLayout.HORIZONTAL);
                textView1.setText("LinearLayout(Horizontal)");
            }
        });
    }
}

Kotlin

// MainActivity.kt

class MainActivity:AppCompatActivity() {

  private val textView1:TextView
  private val vertical:Button
  private val horizontal:Button
  private val layout:LinearLayout

  protected fun onCreate(savedInstanceState:Bundle) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    layout = findViewById(R.id.myLinearLayout)
    textView1 = findViewById(R.id.textView1)
    vertical = findViewById(R.id.button_1)
    horizontal = findViewById(R.id.button_2)

    vertical.setOnClickListener{

        layout.setOrientation(LinearLayout.VERTICAL)
        textView1.setText("LinearLayout(Vertical)")
    }

    horizontal.setOnClickListener{
     
        layout.setOrientation(LinearLayout.HORIZONTAL)
        textView1.setText("LinearLayout(Horizontal)")
     
    }
  }
}

Now we successfully implemented LinearLayout now it’s time to check what we have implemented.Run the app on your phone or on emulator. The app will look like below –


That’s all I have and thanks a lot for reading. Please let me know if any corrections/suggestions. Please do share and comments if you like the post. Thanks in advance… 😉



Thanks Shubham Pathak for helping us grow day by day. He is passionate to develop the different apps and loves to solve challenging problem in Android.

Categories: Miscellaneous

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Insert math as
Block
Inline
Additional settings
Formula color
Text color
#333333
Type math using LaTeX
Preview
\({}\)
Nothing to preview
Insert