Steps to see the layouts:
Note: Code to copy paste is in RED color.
Follow the steps to see the different layouts.
Steps
1: Create new project as empty views activity
2. Name your project as layoutdemo then select language koltin, min. SDK, build
config. Then finish
3. After finishing gradle configuration, collecting resources select Android from project
explorer
4. Select res layout activity_main.xml
5. Use below code to see demonstration, Copy and paste following layout codes one by
one to see the layouts.
1. LinearLayout Example
LinearLayout is a ViewGroup in Android that arranges its child views either vertically or
horizontally based on the android:orientation attribute. Key points include:
Orientation:
o vertical arranges views in a column.
o horizontal arranges views in a row.
Weight (android:layout_weight):
o Distributes space among child views based on the assigned weight.
Gravity:
o Aligns content within child views (e.g., center, left, right).
Sample Code explanation of Linear Layouts
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent" <!-- LinearLayout fills the entire width of the
screen -->
android:layout_height="match_parent" <!-- LinearLayout fills the entire height of the
screen -->
android:orientation="vertical" <!-- Child views are arranged vertically -->
android:padding="16dp"> <!-- Adds padding of 16dp around the layout -->
<!-- A TextView that displays text -->
<TextView
android:layout_width="wrap_content" <!-- TextView width adjusts to fit its content -->
android:layout_height="wrap_content" <!-- TextView height adjusts to fit its content -->
android:text="LinearLayout (Vertical)" <!-- The text displayed by the TextView -->
android:textSize="18sp" /> <!-- The size of the text -->
<!-- First Button -->
<Button
android:layout_width="wrap_content" <!-- Button width adjusts to fit its content -->
android:layout_height="wrap_content" <!-- Button height adjusts to fit its content -->
android:text="Button 1" /> <!-- The text displayed on the button -->
<!-- Second Button -->
<Button
android:layout_width="wrap_content" <!-- Button width adjusts to fit its content -->
android:layout_height="wrap_content" <!-- Button height adjusts to fit its content -->
android:text="Button 2" /> <!-- The text displayed on the button -->
</LinearLayout>
Example
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="LinearLayout (Vertical)"
android:textSize="18sp" />
<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>
2. GridLayout Example
GridLayout is a ViewGroup in Android that places its child views in a rectangular grid. It
allows you to specify the number of rows and columns, providing a flexible way to organize
UI components.
Key Features:
1. Row and Column Structure:
o The layout is divided into a grid with rows and columns, specified using
android:rowCount and android:columnCount.
2. Child View Positioning:
o Each child view can be placed in specific rows and columns using layout_row
and layout_column attributes.
o Views can also span multiple rows or columns using layout_rowSpan and
layout_columnSpan.
3. Flexibility:
o It is useful for complex layouts, where you need more control over the
positioning of views in a grid-like structure, such as dashboards or forms.
4. Alignment:
o You can control the alignment of child views within each grid cell using
attributes like layout_gravity.
GridLayout positions views in a grid arrangement.
<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:padding="16dp">
<TextView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="GridLayout"
android:textSize="18sp"
android:layout_columnSpan="2"
android:gravity="center" />
<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" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 3" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 4" />
</GridLayout>
3. RelativeLayout Example
RelativeLayout in Android allows you to position child views relative to each other or to the
parent container. Key points:
Relative to Parent: Align views with the parent (e.g., top, bottom, center).
Relative to Sibling Views: Position views next to or below other views (e.g., to the
right of, below).
Flexible: More flexible than LinearLayout, enabling complex arrangements and
overlapping views.
Explanation: The Button with id="button1" is positioned below the TextView. The second
Button (id="button2") is placed to the right of button1, using layout_toEndOf.
RelativeLayout positions its children relative to each other or to the parent.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="RelativeLayout"
android:textSize="18sp" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 1"
android:layout_below="@id/label"
android:layout_alignParentStart="true"
android:layout_marginTop="16dp" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button 2"
android:layout_below="@id/label"
android:layout_toEndOf="@id/button1"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp" />
</RelativeLayout>
