Android Linear Layout Example with Kotlin | Android studio

Linear Layout is a simple layout used in Android applications. In the Linear Layout All the elements are displayed in linear manners, that means all the child items will be arranged in vertical or horizontal manner. This arrangement can be defined by one of its property orientation. The values of orientation will be decides how to display its child elements Types of Linear Layout Orientations In Android Linear Layout we have two orientations Horizontal Vertical This orientation defines how to display its child items one by one in horizontal line or vetical line. We can set this orientation in two ways
  • By XML layout property
  • By Programmatically

 

By XML layout property
Vertical orientation

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"> <!-- Vertical Orientation set -->

    <!-- Child Views(In this case 2 Button) are here -->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:textColor="#FFF"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:textColor="#FFF"
        android:background="@color/teal_700" />


</LinearLayout>

 

The above layout will display items in Vertical line

 

Horizontal

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"> <!-- Vertical Orientation set -->

    <!-- Child Views(In this case 2 Button) are here -->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:textColor="#FFF"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:textColor="#FFF"
        android:background="@color/teal_700" />


</LinearLayout>

 

The above code will display the layout child items in Horizontal line

 

Linear Layout

 

Linear Layout Vertically

 

 

How to set Orientation Programmatically in Android?

we can set Orienation of Linear Layout programmatically by below code

set Horizontal Orientation
 linearlayout.orientation=LinearLayout.HORIZONTAL

set Vertical Orientation
  linearlayout.orientation=LinearLayout.VERTICAL

 

Example

Kotlin Activity class

class LinearLayout : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_linear_layout)
        radio_group.setOnCheckedChangeListener(RadioGroup.OnCheckedChangeListener { radioGroup, i ->
            when(i)
            {
                R.id.radio_horizontal->{
                    linearlayout.orientation=LinearLayout.HORIZONTAL
                }
                R.id.radio_vertical->{
                    linearlayout.orientation=LinearLayout.VERTICAL
                }

            }
         })

    }
}

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/linearlayout"
   > <!-- Vertical Orientation set -->

    <!-- Child Views(In this case 2 Button) are here -->

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/radio_horizontal"
            android:layout_width="wrap_content"
            android:checked="true"
            android:layout_height="wrap_content"
            />
        <RadioButton
            android:id="@+id/radio_vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
    </RadioGroup>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:textColor="#FFF"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:textColor="#FFF"
        android:background="@color/teal_700" />


</LinearLayout>

 

 

Linear Layout Main Properties

Now we will read all about main properties of Linear Layout which will useful while arrange its child widgets.

Orientation
This property will use to arrange child items in Vertical/Horizontal direction
Linear Layout default orientaion is "Vertical"

 

Gravity
This property will use to arrange the child item position like
left,right,center,top etc...

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="right"
    android:orientation="horizontal">


<!--Button Child View Here--->

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button1"
        android:id="@+id/button"
        android:textColor="#FFF"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button2"
        android:id="@+id/button2"
        android:textColor="#FFF"
        android:background="@color/teal_700" />
</LinearLayout>

 

 

layout_weight

The weight property will set the portion of child widget to take place

Linear Layout weight sum

 

weightSum

weightSum is the sum up of all its child widget weight properties. This property is required if we define weight property of the child widgets

 

Linear Layout without Weight property example

Linear Layout without weight property

<!-- Vertical Orientation is set -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Text Displayed At Top -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Linear Layout (Without Weight)"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <!-- Button Used -->

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:background="@color/purple_200" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:background="@color/purple_900" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:background="@color/purple_700" />
</LinearLayout>

 

Linear Layout without weight

 

With Weight Property

<!-- Vertical Orientation is set -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="5"
    android:orientation="vertical">

    <!-- Text Displayed At Top -->

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Linear Layout (Without Weight)"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal" />

    <!-- Button Used -->

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_weight="1"
        android:background="@color/purple_200" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_weight="1"
        android:background="@color/purple_900" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 3"
        android:layout_weight="1"
        android:background="@color/purple_500" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 4"
        android:layout_weight="1"
        android:background="@color/purple_700" />
</LinearLayout>

 

Linear Layout weight property

Set Linear Layout Properties programmatically

       linearLayout.gravity=Gravity.CENTER
        linearLayout.orientation=LinearLayout.HORIZONTAL
        linearLayout.weightSum=5.0f
        linearLayout.layoutParams= ViewGroup.LayoutParams(100,100)

Conclusion: In this post we learn how use Linear layout in android application and its properties. how to set Linear Layout Properties Programmaticaly in Android with Kotlin.