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.
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
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
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".
<?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".
<?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 :
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