Android Layout Types and Examples

In Android XML layout files, there are various types of layouts used to organize and arrange UI

components in an application. Below are the most common layout types with examples and

expected outputs.

1. LinearLayout
The LinearLayout arranges its child elements either vertically or horizontally, based on the

android:orientation attribute.

Example (Vertical LinearLayout):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2" />

</LinearLayout>

Output: Two buttons stacked vertically.

view is placed relative to other views using attributes like android:layout_alignParentTop,

android:layout_toRightOf, etc.

Example:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"

android:layout_alignParentTop="true"

android:layout_alignParentLeft="true" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"

android:layout_below="@id/button1"

android:layout_alignParentRight="true" />

</RelativeLayout>
Output: Button 1 positioned at the top-left and Button 2 positioned below Button 1 at the top-right.

3. ConstraintLayout
The ConstraintLayout allows for flexible positioning and sizing of UI components. It is more powerful

than RelativeLayout and supports complex layouts.

Example:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<Button

android:id="@+id/button1"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintLeft_toLeftOf="parent" />

<Button

android:id="@+id/button2"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"

app:layout_constraintTop_toBottomOf="@id/button1"

app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Output: Button 1 is pinned to the top-left and Button 2 is positioned below Button 1 and aligned to

top-right.

4. FrameLayout
The FrameLayout is used to stack multiple views on top of each other. It's typically used when you

want to overlap views, for example, showing a floating button on top of a background.

Example:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Background Text"

android:layout_gravity="center" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Floating Button"

android:layout_gravity="bottom|end" />

</FrameLayout>

Output: A 'Background Text' at the center and a 'Floating Button' aligned to the bottom-right corner.
5. TableLayout
The TableLayout organizes its children in rows and columns, similar to a table. You can control the

layout of rows using TableRow.

Example:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TableRow>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2" />

</TableRow>

<TableRow>

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 3" />

</TableRow>
</TableLayout>

Output: The first row contains 'Button 1' and 'Button 2' side by side. The second row contains 'Button

3'.

6. GridLayout
The GridLayout arranges its children in a grid-like fashion. You define the number of rows and

columns and specify the positions of elements within the grid.

Example:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:columnCount="2">

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 1"

android:layout_row="0"

android:layout_column="0" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 2"

android:layout_row="0"

android:layout_column="1" />
 <Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 3"

android:layout_row="1"

android:layout_column="0" />

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Button 4"

android:layout_row="1"

android:layout_column="1" />

</GridLayout>

Output: A grid with two rows and two columns, displaying four buttons.

7. ScrollView
The ScrollView allows you to make a layout scrollable. It's typically used when the content exceeds

the screen size.

Example:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent">
 <LinearLayout

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button 1"/>

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button 2"/>

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button 3"/>

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button 4"/>

<Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Button 5"/>

</LinearLayout>

</ScrollView>

Output: A vertically scrollable layout with five buttons stacked on top of each other.