LECTURE 12 Layouts in xml 2

POPULAR LAYOUTS
Layout Type Best Used For
Simple UI with one direction
LinearLayout
(vertical/horizontal).
Older complex UIs (use ConstraintLayout
RelativeLayout
instead).
ConstraintLayou
Most flexible, for complex layouts.
t
FrameLayout Overlapping views, single-child layouts.
Organizing UI elements in a grid-like
GridLayout
structure.
ScrollView Making content scrollable
FRAME LAYOUT
FrameLayout is a simple ViewGroup in Android that is used to place
child views on top of each other
It is useful for displaying single views or overlaying multiple views
KEY FEATURES
Overlapping Views – Child views can be placed on top of one
another
Simpler than RelativeLayout/ConstraintLayout – Suitable for
displaying a single child.
Supports Gravity for Alignment – Use android:layout_gravity to
position elements
Common Use Cases – Loading indicators, overlays, image stacking.
FRAME LAYOUT
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/iiui_logo"
android:scaleType="centerCrop"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
android:layout_gravity="center"/>
</FrameLayout>
IMPORTING IMAGE
To import an image, click on
main menu, then on view and
then on resource manager
IMPORTING IMAGE CONT..
Now click on plus sing to add
new resource and click on
import drawables
IMPORTING IMAGE
Now click on plus sing to add
new resource and click on
import drawables
ADDING IMAGE IN
DRAWABLE
Now import the image just like
you did for launcher icon
Another dialog box will open
Click on next and then on finish
ADDING IMAGE IN CODE
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"

android:background="@drawable/ic_launcher_background"
android:src="@drawable/iiui_logo"
/>
OUTPUT
GRID LAYOUT
Grid Layout is a ViewGroup that arranges its child views in a grid-
like structure
It looks similar to an Excel table
It allows precise positioning of elements in rows and columns
KEY FEATURES
Organizes UI in Rows & Columns – Flexible table-like structure
Improves Performance – Reduces nested layouts
Controls Element Span – Items can span multiple rows/columns
Supports Weight Allocation – Adjusts view sizes dynamically
Ideal for Dashboards & Forms – Used in UI designs with structured
alignment
GRID LAYOUT EXAMPLE
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<GridLayout
android:id="@+id/gridLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:columnCount="2"
android:rowCount="3"
android:layout_centerInParent="true"
android:padding="8dp">
GRID LAYOUT EXAMPLE
<androidx.cardview.widget.CardView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:layout_columnWeight="1"
android:layout_rowWeight="1">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp"
android:gravity="center_horizontal">
GRID LAYOUT EXAMPLE
<ImageView
android:layout_width="64dp"
android:layout_height="64dp"
android:src="@drawable/ic_launcher_foreground"
android:contentDescription="@string/app_name" />
GRID LAYOUT EXAMPLE
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/card_item"
android:textSize="16sp"
android:textStyle="bold"
android:paddingTop="8dp"/>
</LinearLayout>
</androidx.cardview.widget.CardView>
</GridLayout>
</RelativeLayout>
OUT PUT
SCROLL VIEW LAYOUT
ScrollView is a ViewGroup in Android that allows users to scroll
through a large UI vertically
It is useful when the content exceeds the screen height (or width)
KEY FEATURES
Supports scrolling when content is larger than the screen
Single Child View – Can hold only one direct child (usually a
LinearLayout)
Nested Views Supported – Place multiple views inside a child layout
Smooth Scrolling – Automatically handles touch gestures.
SAMPLE CODE
<?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:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context=".MainActivity">
SAMPLE CODE CONT…
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="-127dp">
SAMPLE CODE CONT…
<TextView
android:id="@+id/scrolltext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="24sp"
android:text="@string/sample_text"
android:textColor="@color/black"/>
</ScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
OUTPUT
CONSTRAINT LAYOUT
ConstraintLayout is a powerful and flexible ViewGroup in Android
It allows designers to create complex UI designs without nested
layouts
It improves performance by reducing the depth of the view
hierarchy
KEY FEATURES OF
CONSTRAINT VIEW
Flexible Positioning: You can position views relative to other
views or the parent layout
Flat Hierarchy: Reduces nested layouts, improving performance.
Guidelines & Barriers: Helps align views dynamically.
Biasing: Allows flexible positioning using percentages.
Chain & Grouping: Aligns views in horizontal/vertical chains.
DEFAULT XML FILE
Attribute Description
Aligns the top of the view to the top of
layout_constraintTop_toTopOf
the parent.
Aligns the bottom of the view to another
layout_constraintBottom_toBottomOf
view.
Aligns the start (left in LTR) of the view
app:layout_constraintStart_toStartOf
to another view.
Aligns the end (right in LTR) of the view
app:layout_constraintEnd_toEndOf
to another view.
app:layout_constraintHorizontal_bias=" Positions the view along the horizontal
0.5" axis (0 = left, 1 = right).
app:layout_constraintVertical_bias="0.5 Positions the view along the vertical axis
" (0 = top, 1 = bottom).
app:layout_constraintDimensionRatio=" Sets fixed aspect ratio
EXAMPLE
<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=".MainActivity">
<Button
android:id="@+id/button1“
android:layout_width="wrap_content“
android:layout_height="wrap_content”
android:text="Click Me“
app:layout_constraintTop_toTopOf="parent“
app:layout_constraintStart_toStartOf="parent“
app:layout_constraintEnd_toEndOf="parent"/>
</androidx.constraintlayout.widget.ConstraintLayout>