Java Android App Development Course, Linear Layout - LinearLayout

Java Android App Development Course: Linear Layout – LinearLayout

In Android app development, there are various components that make up the user interface (UI), among which LinearLayout is one of the most basic and important layouts. LinearLayout provides the functionality to arrange child views in a linear fashion, either horizontally or vertically. In this course, we will explain the concept, usage, attributes, and examples of LinearLayout in detail.

1. Understanding LinearLayout

LinearLayout is a view group that allows you to arrange child views in a single row. By default, it allows aligning child views in two directions: horizontal and vertical. This allows for quick and easy configuration of simple layouts.

1.1. Direction of LinearLayout

Vertical Direction: Child views are arranged from top to bottom.
Horizontal Direction: Child views are arranged from left to right.

1.2. Components

LinearLayout has the following characteristics:

orientation: Sets the direction of the LinearLayout. (vertical/horizontal)
layout_width: Sets the width of the LinearLayout. (match_parent/wrap_content)
layout_height: Sets the height of the LinearLayout. (match_parent/wrap_content)
gravity: Controls the position of child views.
padding: Sets the space between the LinearLayout and the child views.
layout_margin: Sets the space between child views and other elements.

2. How to Use LinearLayout

To use LinearLayout, define it in the XML layout file and add other views inside it. The basic structure of a LinearLayout is as follows.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello!" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click me!" />

</LinearLayout>

2.1. Example of LinearLayout Settings

Below is an example of a LinearLayout set in a vertical direction. In this example, we will create a simple app using basic UI elements, namely TextView and Button.

<?xml version="1.0" encoding="utf-8"?>
<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, LinearLayout example!" 
        android:textSize="24sp"
        android:layout_gravity="center"/>

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

</LinearLayout>

2.2. Horizontal Example

LinearLayout can also be set in horizontal direction. The following code is an example of arranging a button and a text view horizontally.

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button: " 
        android:textSize="18sp"/>

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

</LinearLayout>

3. Key Attributes of LinearLayout

Now, let’s explain the key attributes you need to know when using LinearLayout.

3.1. orientation

The orientation attribute sets the direction of the LinearLayout. The default value is vertical direction.

android:orientation="vertical"

android:orientation="horizontal"

3.2. layout_gravity

The layout_gravity attribute sets the position of child views. By default, child views will take the full width or height of the LinearLayout.

android:layout_gravity="center"

3.3. weight

The weight attribute is very useful for setting the proportion of child views. This allows you to adjust the space that child views occupy within the LinearLayout.

Below is an example where two buttons are used, sharing an equal proportion.

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

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

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

</LinearLayout>

4. Example Application Using LinearLayout

Now, let’s create a simple app that uses LinearLayout. The following example shows an app where the user inputs their name, and upon clicking a button, a welcome message is displayed.

4.1. XML Layout File (activity_main.xml)

<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">

    <EditText
        android:id="@+id/editTextName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter your name"/>

    <Button
        android:id="@+id/buttonGreet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Greet"/>

    <TextView
        android:id="@+id/textViewGreeting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:textSize="24sp"/>

</LinearLayout>

4.2. Java Code (MainActivity.java)

package com.example.helloapp;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private EditText editTextName;
    private Button buttonGreet;
    private TextView textViewGreeting;

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

        editTextName = findViewById(R.id.editTextName);
        buttonGreet = findViewById(R.id.buttonGreet);
        textViewGreeting = findViewById(R.id.textViewGreeting);

        buttonGreet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String name = editTextName.getText().toString();
                String greeting = "Hello, " + name + "!";
                textViewGreeting.setText(greeting);
            }
        });
    }
}

5. Precautions When Using LinearLayout

Be cautious not to include too many child views in LinearLayout as it may impact performance. Instead, consider other layouts such as ConstraintLayout.
When using layout_weight, the width or height of child views should be set to ‘0dp’.
Ensure that the layout properties of views are set correctly to achieve the desired UI results.

6. Conclusion

LinearLayout is one of the most basic yet very useful layouts among Android UI components. In this course, we explored the concept, usage, key attributes, and examples related to LinearLayout. You can effectively configure simple user interfaces using LinearLayout. Furthermore, you can use it alongside various layout options to create more complex and sophisticated UIs.

Now, try creating your own app using LinearLayout! It would be great to practice by combining various UI elements and layout properties.

Java Android App Development Course, Linear Layout – LinearLayout