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.