Kotlin Android App Development Course, Linear Layout - LinearLayout

Android app development is an attractive experience. Among them, Kotlin combines modern syntax, making app development simple and efficient. In this article, we will explain in detail about LinearLayout, one of the Android UI components. LinearLayout is the most basic layout that can arrange child views vertically or horizontally, depending on the direction.

1. Overview of LinearLayout

LinearLayout is a layout that can arrange child views horizontally or vertically. It is primarily used to align UI elements and is a very powerful tool for grouping multiple views together in a simple way. By using LinearLayout, you can design so that the position of each view does not deviate.

1.1 Key Properties of LinearLayout

orientation: Determines the direction of the LinearLayout. You can choose whether to arrange it horizontally (horizontal) or vertically (vertical).
gravity: Determines the position of child views within the LinearLayout. For example, various positioning settings such as center alignment or end alignment are possible.
layout_width, layout_height: Sets the size of the LinearLayout. Values such as ”match_parent” or ”wrap_content” can be used.
weightSum: Allows you to set the ratio of child views within the LinearLayout. Through this property, you can adjust the proportion of views to create various layouts.

2. Using LinearLayout

LinearLayout can be defined in an XML layout file or programmatically (in code). First, let’s define a LinearLayout in the XML file.

2.1 Defining LinearLayout in XML

The following is a method to define a basic LinearLayout in XML. Open the res/layout/activity_main.xml file in Android Studio and write the code below.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello!"
        android:textSize="24sp"
        android:layout_gravity="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 1"
        android:layout_gravity="center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_gravity="center"/>

</LinearLayout>

2.2 Setting Up LinearLayout in Code

You can also set up LinearLayout using code instead of XML. Below is how to create a LinearLayout in Kotlin and add child views to it.

import android.os.Bundle
import android.widget.Button
import android.widget.LinearLayout
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        // Create LinearLayout
        val linearLayout = LinearLayout(this)
        linearLayout.orientation = LinearLayout.VERTICAL
        linearLayout.layoutParams = LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.MATCH_PARENT
        )

        // Add TextView
        val textView = TextView(this)
        textView.text = "Hello!"
        textView.textSize = 24f
        linearLayout.addView(textView)

        // Add Button 1
        val button1 = Button(this)
        button1.text = "Button 1"
        linearLayout.addView(button1)

        // Add Button 2
        val button2 = Button(this)
        button2.text = "Button 2"
        linearLayout.addView(button2)

        // Set LinearLayout as the content view of the Activity
        setContentView(linearLayout)
    }
}

3. Helpful Tips for Using LinearLayout

3.1 Using Weight

One of the biggest advantages of LinearLayout is that you can adjust the placement of child views through weights. Views with higher weights will take up more space. The example below uses weights to make two buttons occupy half of the screen each.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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="Button A"
        android:layout_weight="1"/>

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

</LinearLayout>

4. Advanced Features of LinearLayout

LinearLayout is very useful for creating complex UIs. However, let’s also look at some advanced features.

4.1 Nested LinearLayouts

You can nest LinearLayouts. The example below shows a vertical LinearLayout with a horizontally nested LinearLayout.

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button A"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button B"/>

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text of Nested Layout"
        android:textSize="18sp"/>

</LinearLayout>

4.2 Adding Various Views to LinearLayout

LinearLayout can include various UI components. For example, views like EditText, ImageView, and CheckBox can be added. Below is an example that adds an EditText and a CheckBox.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    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 your name"/>

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="I agree"/>

</LinearLayout>

5. Conclusion

LinearLayout is one of the foundational layouts in Android app development. By aligning views either horizontally or vertically and adjusting weights, you can design a flexible UI. By understanding and utilizing everything from basic usage to advanced features, you can enrich your app’s UI design. Try using LinearLayout with Kotlin to develop apps that provide a more attractive user experience.

Wishing you good luck on your Kotlin Android app development journey!

Kotlin Android App Development Course, Linear Layout – LinearLayout