Android Layouts

FrameLayout

Suitable situations:

1. stacking UI elements, e.g., “play” icon on images.
2. Fragment containers.
3. When only a single view is needed.

like video previews.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="200dp"
    android:layout_height="200dp">

    <!-- 1. 底层图片 -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher_background"
        android:scaleType="centerCrop" />

    <!-- 2. 居中的播放按钮 -->
    <ImageView
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@android:drawable/ic_media_play"
        android:layout_gravity="center" />

    <!-- 3. 右下角的角标 -->
    <TextView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:background="@drawable/notification_bg"
        android:textColor="@android:color/white"
        android:text="3"
        android:gravity="center"
        android:layout_gravity="bottom|end"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp" />

</FrameLayout>

LinearLayout

LinearLayout arranges all subviews unidirectionally along horizontal axis or vertical axis.

• android:orientation important, because it tells whether to align horizontally or vertically.
• android:layout_weight allows remaining spaces to be allocated to subviews by weights.
• android:gravity controls how all subviews are aligned within the LinearLayout
• android:layout_gravity controls how single subview is aligned within its parent layout.

Typical Scenarios. Navigation bar and tools bar that horizontally arranges multiple buttons and entries; settings page that vertically displays entries; simple tables that vertically displays tags and input box.

Best practices.

1. Performance. When layout_weights are involved, Android will compute twice.
2. Combine layout_weight with 0dp.
3. Avoid using layout weights in nested LinearLayout.
4. match_parent’s behaviour in LinearLayout.

RelativeLayout

Best practices.

1. Do not make dependency chain too long, i.e., A -> B -> C -> D .... As this increases vulnerability and computation complexity.
2. Performant over LinearLayout.

ConstraintLayout

Extremely flexible and powerful. Each subview’s position and size can be constrained by other elements, including sibling subviews, parent views, or auxiliary lines.

The constraints can be categorized into:

1. Relative positional constraint

2. Size constraint

3. Bias and baseline constraint

4. Barrier and Guidelines.

5. Chain

6. Group.

   Group can group multiple views into one group, to control their visibility as an entire entity. By adding IDs of views to app:constraint_referenced_ids="id1,id2" to apply.

1
2
3
4
5
6

<androidx.constraintlayout.widget.Group
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:visibility="visible"
  app:constraint_referenced_ids="A,B,C"
  />	

GridLayout