Android Study Notes 3.1 Linear Layout

1. Introduction of new courses

• Android applications include two aspects: interface and function. A good Android application should provide users with a good experience. Interface design is crucial. To design an interface, developers are required to skillfully use layout to place different items in the window. components.

2. Learning new courses

(1) Interface and layout

1. Interface

• The application interface contains everything the user can see and interact with. Android provides a rich variety of preset UI components, such as structured layout objects and UI controls, which you can use to build graphical interfaces for your applications. Android also provides other interface modules for building special interfaces, such as dialog boxes, notifications, and menus.

2. Layout

• Layout defines the interface structure in your application (for example, the interface structure of an Activity). All elements in a layout are built using a hierarchy of View and ViewGroup objects. Views typically draw content that the user can view and interact with. However, ViewGroup is an invisible container that defines the layout structure of View and other ViewGroup objects.

(1) View hierarchy diagram

(2) UI container (Container)

• The UI container refers to ViewGroup, which is also a subclass of View, and ViewGroup has several layout subclasses: LinearLayout, RelativeLayout, AbsoluteLayout, TableLayout, GridLayout, and ConstraintLayout.
  

(3) UI control (Control)

• UI controls refer to Widgets, controls that cannot contain other elements, such as labels (TextView), text boxes (EditText), buttons (Buttons), activity bars (Action Bar), dialog boxes (Dialogs), status bars ( Status), notifications.

(4) Two ways to declare layout

• Declaring interface elements in XML: Android provides a concise XML vocabulary for the View class and its subclasses, such as for widgets and layouts. You can also use Android Studio's Layout Editor and use a drag-and-drop interface to build XML layouts.
• Instantiating layout elements at runtime: Apps can programmatically create View objects and ViewGroup objects (and manipulate their properties).
  

package net.xqf.directui;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ActionBar;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    
    

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        // 创建线性布局
        LinearLayout layout = new LinearLayout(this);
        // 设置布局参数（布局宽度和高度）
        layout.setLayoutParams(new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,
                LinearLayout.LayoutParams.MATCH_PARENT));
        // 设置布局对齐方式 - 居中对齐
        layout.setGravity(Gravity.CENTER);
        // 设置布局背景图片
        layout.setBackground(getResources().getDrawable(R.drawable.background));
        // 创建按钮对象
        Button btnWelcome = new Button(this);
        // 设置按钮文本
        btnWelcome.setText("欢迎");
        // 添加按钮到布局里
        layout.addView(btnWelcome);
        // 设置内容视图，将布局作为用户界面
        setContentView(layout);
        // 给【欢迎】按钮注册单击监听器，实现监听器接口，编写事件处理方法
        btnWelcome.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View view) {
    
    
                Toast.makeText(MainActivity.this, "欢迎访问泸州职业技术学院", Toast.LENGTH_LONG).show();
            }
        });
    }
}

• The Android framework gives you the flexibility to build your app's interface using either or both methods. For example, you can declare your app's default layout in XML and then modify the layout at run time.

(2) Linear layout

• Linear layout (LinearLayout) is a relatively common and simple layout method. In this layout, all sub-elements are arranged on the interface in vertical or horizontal order. If arranged vertically, each child element occupies one row; if arranged horizontally, each child element occupies one column. Linear layout can support nested layout styles to implement complex layout styles.

1. Inheritance diagram

• LinearLayout is a subclass of ViewGroup. Note: the radio button group (RadioGroup) we will learn later is a subclass of linear layout.
  

2. Common attributes

Attributes	meaning
layout_height	Height, unit: dp (wrap_content, match_parent)
layout_weight	Width, unit: dp (wrap_content, match_parent)
orientation	direction (vertical, horizontal)
gravity	Alignment (left, right, center, top, bottom…)
background	Background (color [color], picture [drawable], selector [selector])
weight	Proportion (used to divide the mobile phone screen)
padding	Padding (paddingLeft, paddingRight, paddingTop, paddingBottom)
margin	Margins (marginLeft, marginRight, marginTop, marginBottom)

(3) Case Demonstration: Linear Layout Properties

1. Create an Android application

• Empty ActivityCreate Android applications based on templates-LinearLayoutDemo
  

• Click the [Finish] button
  

2. Main layout resource file

• Main layout resource file activity_main.xml
  

• Change the constraint layout to linear layout and delete the default label
  

• Add two buttons
  

3. String resource file

• String resource file - strings.xml
  

4. Start the application and check the effect

• Found two buttons placed horizontally in the upper left corner of the window
  

5. Set layout properties and view the effect

(1) Set the linear layout direction

• orientationAttributes
  

(2) Set linear layout padding

• padding (paddingTop, paddingBottom, paddingLeft, paddingRight)
  

(3) Set linear layout alignment

• gravity(left, center, right, top, and bottom can be combined to form many alignments)

• Set upper right alignment -right|top
  

• Delete the right margin of [Button 1]
  

• Set center alignment -center
  

• Set bottom left alignment -left|bottom
  

• Set bottom right alignment -right|bottom
  

• Set top-center alignment -center|top
  

• The remaining situations: left-center alignment, right-center alignment and bottom-center alignment

(4) Set linear layout background

• Set background color (using color variable)
  

• Set the background color (using color constants)
  

• Question: If I want to set my favorite color, how do I define a color constant?
  https://m.wang1314.com/doc/webapp/topic/21084865.html
  

• Set background image
  

• Set background selector

• Add a linear layout and set custom borders
  

• Achieve border gradient color effect
  

(4) Case Demonstration: Linear Layout Nesting

1. Create an Android application

• Create an Android application based on Empty Activity-NestedLinearLayout
  

• Click the [Finish] button
  

2. Prepare picture materials

• Copy the three small pictures to the res/drawable directory
  

3. Main layout resource file

• Main layout resource file - activity_main.xml
  

• Change constrained layout to linear layout
  

• Add three linear layouts to divide the mobile phone screen vertically according to the ratio of 1:2:3
  

4. String resource file

• String resource file - strings.xml
  

5. Start the application and check the effect

• Three layouts divide the mobile phone screen vertically according to the ratio of 1:2:3
  

6. Modify the layout and check the effect

• Add three horizontal image views to the first layout
  

• Add a horizontal linear layout to the second layout and add four buttons inside
  

• Add an edit box to the second layout
  

• Add three layouts to the third layout to divide the mobile phone screen horizontally according to the ratio of 1:2:3
  

3. Computer operation

Task 1. Choose fruits

• Click a fruit icon and a toast pops up to prompt the user which fruit they selected.

1. Write the main layout resource file

• Code:

<?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:gravity="center"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">

            <ImageView
                android:id="@+id/BXG"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/bxg"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="百香果"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/LM"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/lm"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="蓝莓"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/MG"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/mg"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="芒果"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/PG"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/pg"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="苹果"/>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/PT"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/pt"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="葡萄"/>

        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/CM"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/cm"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="草莓"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/CZ"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/cz"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="橙子"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="vertical"
            android:paddingLeft="20dp">
            <ImageView
                android:id="@+id/TZ"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/tz"/>

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textSize="15dp"
                android:text="桃子"/>
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

2. Write the main window file and add toast to the picture

• Code:

package net.xqf.choose_fruit;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    
    
    private ImageView BXG;
    private ImageView LM;
    private ImageView MG;
    private ImageView PG;
    private ImageView PT;
    private ImageView CM;
    private ImageView CZ;
    private ImageView TZ;

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

        BXG = findViewById(R.id.BXG);
        LM = findViewById(R.id.LM);
        MG = findViewById(R.id.MG);
        PG = findViewById(R.id.PG);
        PT = findViewById(R.id.PT);
        CM = findViewById(R.id.CM);
        CZ = findViewById(R.id.CZ);
        TZ = findViewById(R.id.TZ);

        BXG.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "百香果", Toast.LENGTH_SHORT).show();
            }
        });
        LM.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "蓝莓", Toast.LENGTH_SHORT).show();
            }
        });
        MG.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "芒果", Toast.LENGTH_SHORT).show();
            }
        });
        PG.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "苹果", Toast.LENGTH_SHORT).show();
            }
        });
        PT.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "葡萄", Toast.LENGTH_SHORT).show();
            }
        });
        CM.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "草莓", Toast.LENGTH_SHORT).show();
            }
        });
        CZ.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "橙子", Toast.LENGTH_SHORT).show();
            }
        });
        TZ.setOnClickListener(new View.OnClickListener() {
    
    
            @Override
            public void onClick(View v) {
    
    
                Toast.makeText(MainActivity.this, "桃子", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

3. Run the program to see the effect