🎨 UI – Views & Layouts · Lesson 09
LinearLayout, FrameLayout & RelativeLayout
Views, ViewGroups and sizes
Everything you see is a View (TextView, Button, ImageView). A ViewGroup (a layout) holds other views and decides where they go. Every view needs layout_width and layout_height:
| Value | Meaning |
|---|---|
wrap_content | Just big enough for the content |
match_parent | As big as the parent allows |
120dp | Fixed size |
0dp | "Decide for me" — used with weight or constraints |
LinearLayout (ViewGroup) ├─ TextView "Student Login" ├─ EditText Email ├─ EditText Password └─ Button Login
dp, sp, padding and margin
padding
- Space INSIDE the view
- between border and content
- android:padding="16dp"
margin
- Space OUTSIDE the view
- between this view and others
- android:layout_marginTop="16dp"
LinearLayout
Places children one after another — vertical (top to bottom) or horizontal (left to right).
XML – login screen
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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="Student Login"
android:textSize="24sp"
android:textStyle="bold" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:hint="Email"
android:inputType="textEmailAddress" />
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:text="Login" />
</LinearLayout>layout_weight
XML – 50/50 buttons
<!-- Two buttons sharing the width 50/50 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginStart="8dp"
android:text="Save" />
</LinearLayout>
<!-- 1 : 2 ratio → the second view gets twice the space -->gravity vs layout_gravity
XML
<!-- gravity="center": the children are centred inside this LinearLayout -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:gravity="center"
android:orientation="vertical">
<!-- layout_gravity="end": only THIS child moves to the right -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:text="Right side" />
</LinearLayout>android:gravity
- Set on the PARENT (or a TextView)
- Positions the content inside it
- gravity="center"
android:layout_gravity
- Set on a CHILD
- Asks the parent to place it
- layout_gravity="end"
FrameLayout
Children are drawn on top of each other. Perfect for a banner with text over it, or a loading spinner over content. Fragments are usually placed in a FrameLayout or FragmentContainerView.
XML – image with overlay text
<!-- FrameLayout stacks children on top of each other -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/banner" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|start"
android:layout_margin="16dp"
android:background="#99000000"
android:padding="8dp"
android:text="New batch from Monday"
android:textColor="#FFFFFF" />
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center" />
</FrameLayout>RelativeLayout
Positions children relative to the parent or to each other using ids.
XML – profile row
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<ImageView
android:id="@+id/ivAvatar"
android:layout_width="56dp"
android:layout_height="56dp"
android:src="@drawable/ic_person" />
<TextView
android:id="@+id/tvName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:layout_toEndOf="@id/ivAvatar"
android:text="Riya Sharma"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/tvName"
android:layout_alignStart="@id/tvName"
android:text="Class 12 · Science" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:text="Follow" />
</RelativeLayout>Which layout to choose
| Need | Use |
|---|---|
| Simple column or row (forms, button bars) | LinearLayout |
| Things on top of each other / one child | FrameLayout |
| Complex screen, flat and fast | ConstraintLayout (next lesson) |
| Long content | ScrollView with one child |
Common mistakes
- Missing
android:orientation→ LinearLayout defaults to horizontal and views go off-screen. - Using weight but leaving width as
wrap_content→ set it to0dp. - Text size in dp → use
spso it respects accessibility settings. - Five levels of nested LinearLayouts → slow; use ConstraintLayout.
Summary
- Every view has layout_width/height: wrap_content, match_parent, dp or 0dp.
- LinearLayout = row/column, weight shares space; FrameLayout = overlap; RelativeLayout = relative positions.
- gravity = inside content; layout_gravity = position in parent.
✅ Practice
Build a "Result card": a FrameLayout banner on top, then a vertical LinearLayout with student name and three rows (subject + marks) made with horizontal LinearLayouts using weight 3:1.
Frequently Asked Questions
What is the difference between dp and sp?
dp (density-independent pixels) keeps sizes the same physical size on every screen. sp is the same but also follows the user's font-size setting, so use sp only for text.
Is RelativeLayout still used?
It works, but ConstraintLayout does the same job with better performance and editor support. You will still see RelativeLayout in older projects.
Why should I avoid deep nesting of layouts?
Every nested layout adds measuring work. Deep trees make screens slower to draw. ConstraintLayout lets you build complex screens with a flat hierarchy.
