Skip to content

Android LinearLayout Tutorial with Example

  • by

Android LinearLayout is used for application UI. It’s a view group that aligns and contain nested widget or layout in a single direction, vertically or horizontally.

You have to specify the layout orientation with the android:orientation attribute. If you didn’t add orientation then default Horizontal will works.

Android LinearLayout Tutorial With Examples In Android kotlin

Types Of Linear Layout Orientation

There are two types of linear layout orientation:

  • Vertical
  • Horizontal

Note: For better performance , you should build your layout with new ConstraintLayout.

In the LinearLayout you can put all layout – RelativeLayout, FrameLayout, LinearLayout and TableLayout as nested layout. Next, inside the Linear layout, you have to add a widget as your app UI like – TextView, EditText, Button, ImageView, ListView, RecyclerView, etc.

Let’s build simple examples of Android LinearLayouts

We will see one by one example of how to use the different property of Linear Layout.

1.  Horizontal LinearLayout

Android LinearLayout Horizontal orientation

All nested view or widgets will arrange side by side in a Horizontal way. This code has 3 buttons in Horizontal orientation.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />

</LinearLayout>

2.  Vertical LinearLayout

Android LinearLayout vertical orientation example

In a Vertical orientation, elements will come one after one. Below code have 3 buttons with Vertical orientation.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 3" />
</LinearLayout>

Layout Weight in Android 

Layout Weight is an important attribute for app UI design, some time you want to show fill full-screen width or height of the app. But the problem is that you don’t know what size and pixel device is running your app? So you can do it with responsive design, where layout Weight helps to achieve it.

For a Horizontal Layout

And for Horizontal child same amount of space on screen, set the android:layout_width of each view to "0dp" . Then set the android:layout_weight of each view to "1".

Android LinearLayout Horizontal orientation Weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_weight="1"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_weight="1"/>

</LinearLayout>

For a Vertical Layout

To create a linear layout in which each child uses the same amount of space on the screen, set the android:layout_height of each view to "0dp" . Then set the android:layout_weight of each view to "1".

Android LinearLayout vertical orientation example weight
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Button 1"
        android:layout_weight="1"/>
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Button 2"
        android:layout_weight="1"/>
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Button 3"
        android:layout_weight="1"/>
</LinearLayout>

Complete Example of Android LinearLayout :

In this example, we are using nested linear layout and widgets.

Step 1. Create new project “Build Your First Android App in Kotlin

Step 2. Add following code in  activity_main.xml resource file

LinearLayout in LinearLayout in widgets

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="8dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Login"
        android:gravity="center"
        android:textSize="18dp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter id"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Password"/>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp">

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text=" Login " />

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text=" Register" />
    </LinearLayout>

</LinearLayout>

Step 3. Set resource layout file in “MainActivity.kt”

package `in`.eyehunt.linearlayoutkotlin
import android.support.v7.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Step 4. Run the application, in an emulator or On your Android device.

Output screenshot Android LinearLayout example :

Output screenshot Android Linear Layout example

Download source code Android Linear layout in kotlin

https://github.com/EyeHunts/LinearLayoutKotlin

Note: This example (Project) is developed in Android Studio 3.1.3. Tested on Android 9 ( Android-P), compile SDK version API 26: Android 8.0 (Oreo)

MinSdkVersion=”15″

TargetSdkVersion=”27″

Coding in Kotlin

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading