Follow Android 007, get a full set of Free Android development learning materials

What is a LinearLayout

LinearLayout, also known as LinearLayout, is one of the several commonly used layouts in android development. It is used frequently and is very simple. Controls in a layout are arranged in sequence, and can be arranged horizontally or vertically.

Based on the sample

1. Align vertically

rendering

code

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 2" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Text 3" />

</LinearLayout>
Copy the code

Code description:

  1. Set Android: Orientation to Vertical and change the display orientation to vertical
  2. The LinearLayout contains three TextViews that display text.

2. Align horizontally

rendering

code

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

Code description:

  1. The above “…” Some contents are the same as above.
  2. Set Android: Orientation to Horizontal and change the display orientation to horizontal.

3. Adjust the position of child controls (gravity property)

Control the alignment of its children relative to itself via the Android: Gravity property of the LinearLayout.

3.1 Horizontal center

rendering

code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Horizontal center" />
</LinearLayout>
Copy the code

3.2 Vertically centered

rendering

code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Vertical center" />
</LinearLayout>
Copy the code

3.3 Horizontal + vertical center

rendering

code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Horizontal + vertical center" />
</LinearLayout>
Copy the code

Others include: Android :gravity=”start” Android :gravity=”end” Android :gravity=”top” Android :gravity=”bottom” android:gravity=”start” | end right (android: gravity = “bottom”) the centre-right (android: gravity = “center | end”)

4. Adjust the placement of child controls (layout_gravity property)

The child controls in the LinearLayout can use the layout_gravity property to control their alignment relative to the parent control.

4.1 Horizontal center

rendering

  1. The LinearLayout arrangement is set to vertical:android:orientation="vertical"
  2. Set the child control to horizontal center:android:layout_gravity="center_horizontal"

code

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:layout_gravity="center_horizontal"
        android:text="Horizontal center" />
</LinearLayout>
Copy the code

4.2 Vertical center

rendering

code

  1. The LinearLayout is set to horizontal:android:orientation="horizontal"
  2. The child control is centered vertically:android:layout_gravity="center_vertical"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Vertical center" />
</LinearLayout>
Copy the code

4.3 under the

rendering

code

  1. The LinearLayout is set to horizontal:android:orientation="horizontal"
  2. The child control is set to the bottom:android:layout_gravity="bottom"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Under the" />
</LinearLayout>
Copy the code

4.3 the right

rendering

code

  1. The LinearLayout arrangement is set to vertical:android:orientation="vertical"
  2. The child control is set to the right:android:layout_gravity="end"
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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:layout_gravity="end"
        android:text="Right" />
</LinearLayout>
Copy the code

Matters needing attention:

  1. When the LinearLayout is set to vertical (android:orientation="vertical"), the child control can only be left/center/right (Android :layout_gravity set to start,center_horizontal,end), but not up/center/down. Because vertical alignment, in the vertical direction, a single child control is not covered with the parent control.
  2. When the LinearLayout is set to landscape (android:orientation="horizontal"Android: Layout_gravity is set to top,center_vertical,bottom, and not left,center, or right. Because horizontal alignment, in the horizontal direction, the individual child control is not covered with the parent control.

5. Divide space proportionally (layout_weight)

Child controls in a LinearLayout can use the layout_weight property to scale the size of the space (horizontal or vertical). Each control divides the free space according to the proportion of its layout_weight to the sum (some controls do not set layout_weight, then use the fixed value).

5.1 Isometric space

rendering

code

<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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 2" />
</LinearLayout>
Copy the code

1. Both buttons are set to android:layout_weight, and the value is the same, so the space is split.

5.2 On a proportional basis

One control holds a fixed size and one occupies the remaining free space.

rendering

code

<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="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button 1" />
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2" />
</LinearLayout>
Copy the code

Code description:

  1. The second button does not set the Android :layout_weight property and keeps its size.
  2. The first button sets the Android :layout_weight property to take up all remaining free space.

Basic sample complete source code

Gitee.com/cxyzy1/Line…

Common Attributes

The property name use
android:layout_width Set the width of the control to match_parent(same as the parent control),wrap_content(automatic scaling based on the content), fixed values (such as 200dp)
android:layout_height Set the height of the control to match_parent(same as the parent control),wrap_content(automatic scaling based on the content), fixed value (such as 200dp)
android:gravity Start (left),end(right),top(top),bottom(bottom),center_horizontal(horizontal),center_vertical(vertical),center(center)…
android:layout_gravity Control alignment relative to parent control can be located :start(left),end(right),top(top),bottom(bottom),center_horizontal(horizontal),center_vertical(vertical),center(both horizontal and vertical).. .
android:background Set the background, which can be a color value (such as #FF0000) or an image
android:visibility Optional values: Visible (display), invisible(hidden, but still occupies UI space),gone(hidden, and does not occupy UI space)
layout_weight LinearLayout all direct child controls use this property value to divide the remaining available space proportionally

More properties and actual effects can be experienced in the development tool.

About me

Xiamen university computer professional | huawei eight years senior engineer Ten years software development experience, 5 years experience in teaching programming training Currently engaged in the teaching of programming, software development, software class graduation design guidance. All programming materials and open source projects can be found at juejin.cn/post/700279…