🎨 UI – Views और Layouts · Lesson 09

LinearLayout, FrameLayout और RelativeLayout

Views, ViewGroups और sizes

जो कुछ दिखता है वह View है (TextView, Button, ImageView)। ViewGroup (layout) दूसरे views रखता है और तय करता है वे कहाँ जाएँ। हर view को layout_width और layout_height चाहिए:

Value	मतलब
`wrap_content`	Content जितना ही बड़ा
`match_parent`	Parent जितना allow करे उतना बड़ा
`120dp`	Fixed size
`0dp`	"मेरे लिए तय करो" — weight या constraints के साथ

LinearLayout (ViewGroup)
├─ TextView      "Student Login"
├─ EditText      Email
├─ EditText      Password
└─ Button        Login

Layout views का एक tree है

dp, sp, padding और margin

padding

View के अंदर की जगह
border और content के बीच
android:padding="16dp"

margin

View के बाहर की जगह
इस view और दूसरों के बीच
android:layout_marginTop="16dp"

Sizes और spacing के लिए dp, text size के लिए sp

LinearLayout

Children को एक के बाद एक रखता है — vertical (ऊपर से नीचे) या horizontal (बाएँ से दाएँ)।

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>

vertical 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 -->

Width 0dp रखें और हर child को weight दें

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

PARENT (या TextView) पर
अंदर के content की position
gravity="center"

android:layout_gravity

CHILD पर
Parent से position माँगता है
layout_gravity="end"

दो अलग attributes

FrameLayout

Children एक के ऊपर एक draw होते हैं। Banner पर text, या content के ऊपर loading spinner के लिए perfect। Fragments आमतौर पर FrameLayout या FragmentContainerView में रखे जाते हैं।

XML – image पर 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>

आख़िरी child सबसे ऊपर draw होता है

RelativeLayout

Children को ids की मदद से parent या एक-दूसरे के relative रखता है।

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>

toEndOf, below, alignParentEnd

कौन सा layout चुनें

ज़रूरत	Use
Simple column या row (forms, button bars)	LinearLayout
एक के ऊपर एक / एक child	FrameLayout
Complex screen, flat और तेज़	ConstraintLayout (अगला lesson)
लंबा content	एक child वाला ScrollView

आम गलतियाँ

android:orientation missing → LinearLayout default horizontal होता है और views screen से बाहर।
Weight use करके width wrap_content रखना → 0dp करें।
Text size dp में → sp use करें ताकि accessibility settings follow हों।
पाँच level nested LinearLayouts → धीमा; ConstraintLayout use करें।

सारांश

हर view की layout_width/height: wrap_content, match_parent, dp या 0dp।
LinearLayout = row/column, weight जगह बाँटता है; FrameLayout = overlap; RelativeLayout = relative positions।
gravity = अंदर का content; layout_gravity = parent में position।

✅ Practice

एक "Result card" बनाइए: ऊपर FrameLayout banner, फिर student name के साथ vertical LinearLayout और weight 3:1 वाली horizontal LinearLayouts से तीन rows (subject + marks)।

अक्सर पूछे जाने वाले प्रश्न (FAQ)

dp और sp में क्या फ़र्क है?

dp (density-independent pixels) हर screen पर physical size एक जैसा रखता है। sp भी वैसा ही है पर user की font-size setting भी follow करता है, इसलिए sp सिर्फ़ text के लिए use करें।

क्या RelativeLayout अब भी use होता है?

चलता है, पर ConstraintLayout यही काम बेहतर performance और editor support के साथ करता है। पुराने projects में RelativeLayout दिखेगा।

Layouts की गहरी nesting से क्यों बचें?

हर nested layout measuring का काम बढ़ाता है। गहरे trees screens को धीमा draw करते हैं। ConstraintLayout से complex screens flat hierarchy में बनती हैं।

← Android Tutorial (Kotlin)

LinearLayout, FrameLayout और RelativeLayout

Views, ViewGroups और sizes

dp, sp, padding और margin

padding

margin

LinearLayout

layout_weight

gravity vs layout_gravity

android:gravity

android:layout_gravity

FrameLayout

RelativeLayout

कौन सा layout चुनें

आम गलतियाँ

सारांश

अक्सर पूछे जाने वाले प्रश्न (FAQ)

यह lesson कैसा लगा?

पढ़ने वालों के reviews

Video से सीखें – आसान Hindi में