Layout

1.Frame layout
FrameLayout is designed to block out an area on the screen to display a single item.
Main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout
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"
tools:context=".MainActivity" >

<TextView
android:id="@+id/textView"
android:layout_width="300dp"
android:layout_height="300dp"
android:background="@color/purple_200"
android:text="TextView"/>

<TextView
android:id="@+id/textView2"
android:layout_width="218dp"
android:layout_height="221dp"
android:background="@color/black"/>
</FrameLayout>

2.Linear layout
A box model – widgets or child containers are lined up in a column or row, one after the
next.
Main_activity.xml:

1
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android1="http://schemas.android.com/apk/res/android"
android1:layout_width="match_parent"
android1:layout_height="match_parent"
android1:orientation="horizontal">

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="1"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"
android1:background="@color/purple_200" />

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="2"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"
android1:background="@color/teal_200" />

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="3"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"
android1:background="@color/purple_200" />

<TextView
2
 android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="4"
android1:textAlignment="center"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textStyle="bold"
android1:background="#efcd21"/>
</LinearLayout>

3.Table layout
TableLayout is a ViewGroup that displays child View elements in rows and columns.
Main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">

<TableRow>
<TextView
android:layout_column="1"
android:text="Open..."
android:padding="3dip" />
<TextView
android:text="Ctrl-O"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:layout_column="1"
android:text="Save..."
android:padding="3dip" />
<TextView
android:text="Ctrl-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView

3
 android:layout_column="1"
android:text="Save As..."
android:padding="3dip" />
<TextView
android:text="Ctrl-Shift-S"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<View
android:layout_height="2dip"
android:background="#FF909090" />

<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Import..."
android:padding="3dip" />
</TableRow>

<TableRow>
<TextView
android:text="X"
android:padding="3dip" />
<TextView
android:text="Export..."
android:padding="3dip" />
<TextView
android:text="Ctrl-E"
android:gravity="right"
android:padding="3dip" />
</TableRow>

<View
android:layout_height="2dip"
android:background="#FF909090" />

<TableRow>
<TextView
android:layout_column="1"
android:text="Quit"
android:padding="3dip" />
</TableRow>
</TableLayout>

4
4.Grid layout
GridLayout is used to display elements and views in the form of a rectangular grid
Main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>

<GridLayout
xmlns:android1="http://schemas.android.com/apk/res/android"
android1:layout_width="match_parent"
android1:layout_height="match_parent"
android1:columnCount="2"
android1:rowCount="2">

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="1"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"
android1:background="#8c0520" />

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="2"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"
android1:background="#efcd21" />

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:text="3"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textAlignment="center"
android1:textStyle="bold"

5
 android1:background="@color/teal_200" />

<TextView
android1:layout_width="80dp"
android1:layout_height="80dp"
android1:background="@color/teal_700"
android1:text="4"
android1:textAlignment="center"
android1:textColor="#fff"
android1:textSize="15pt"
android1:textStyle="bold"/>

</GridLayout>

5.Relative layout
RelativeLayout places widgets based on their relationship to other widgets in the
container and the parent container.
Main_activity.xml:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/hop1"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="1"
android:textColor="#fff"
android:textSize="10pt"
android:textAlignment="center"
android:background="@color/black" />

<TextView
android:id="@+id/hop2"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="2"
android:textColor="#fff"

6
 android:textSize="10pt"
android:textAlignment="center"
android:background="@color/teal_200"
android:layout_toRightOf="@+id/hop1"/>

<TextView
android:id="@+id/hop3"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="3"
android:textColor="#fff"
android:background="#8e0917"
android:textSize="10pt"
android:textAlignment="center"
android:layout_below="@+id/hop1"/>

<TextView
android:id="@+id/hop4"
android:layout_width="150dp"
android:layout_height="50dp"
android:text="4"
android:textColor="#fff"
android:textSize="10pt"
android:textAlignment="center"
android:background="#edcb25"
android:layout_below="@+id/hop2"
android:layout_toRightOf="@+id/hop3" />
</RelativeLayout>

6.Constraint layout
ConstraintLayout allows you to create large and complex layouts with a flat view
hierarchy (no nested view groups)
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ConstraintLayoutActivity">

<Button
android:id="@+id/button"

7
 android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="176dp"
android:text="TextView"
app:layout_constraintTop_toTopOf="@+id/button"
tools:layout_editor_absoluteX="176dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

https://developer.android.com/codelabs/constraint-layout#4