Layouts & Measurement Units - Liner layout, relative layout, frame layout, coordinate layout, [dip, dp, sip, sp] versus px in hindi

Android Layouts & Measurement Units

Android में Layouts का इस्तेमाल UI (User Interface) Design करने के लिए किया जाता है।

Layouts का उपयोग करके हम Buttons, TextViews, Images, और अन्य UI Elements को सही तरीके से Arrange कर सकते हैं।
Android हमें कई प्रकार के Layouts देता है, जिनका उपयोग हम अपनी App की जरूरत के अनुसार कर सकते हैं।

Layouts in Android

1. Linear Layout

Linear Layout में सभी Elements को एक Line में Arrange किया जाता है।

यह दो प्रकार का हो सकता है:

Vertical (Top to Bottom)
Horizontal (Left to Right)

Example: Vertical Linear Layout (XML code)

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

ऊपर दिए गए Code में दोनों Buttons एक के नीचे एक आएंगे।

Example: Horizontal Linear Layout (XML code)

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

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

ऊपर दिए गए Code में दोनों Buttons एक Row में आएंगे।

2. Relative Layout

Relative Layout में Views को एक-दूसरे के Relative (अनुसार) Set किया जाता है।

Example:

किसी View को Parent के Top, Bottom, Left, Right से जोड़ सकते हैं।
किसी View को दूसरे View के Above, Below, ToLeft, ToRight रख सकते हैं।

Example: Relative Layout (XML code)

<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_centerHorizontal="true"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button 2"
        android:layout_below="@id/button1"
        android:layout_centerHorizontal="true"/>
</RelativeLayout>

Button 1 Center में होगा, और Button 2 उसके नीचे होगा।

3. Frame Layout

Frame Layout का उपयोग तब किया जाता है जब Views को एक-दूसरे के ऊपर Overlay (Stack) करना हो।

Example: Image के ऊपर TextView या Button रखना।

Example: Frame Layout (XML code)

<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/background_image"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Overlay Text"
        android:layout_gravity="center"/>
</FrameLayout>

ImageView Background में होगा और TextView ऊपर Display होगा।

4. Coordinator Layout

Coordinator Layout एक Advanced Layout है, जो Scrolling Behaviors, Animations, और Material Design Components को Manage करने में मदद करता है।

इसका उपयोग Collapsing Toolbar, Floating Action Button (FAB), और Snackbar के साथ किया जाता है।

Example: Coordinator Layout (XML code)

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/recyclerView"
        app:layout_anchorGravity="bottom|end"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

यह Layout Floating Action Button (FAB) को Automatically Scroll Behavior देगा।

Measurement Units in Android

Android में UI Components की Size और Spacing को Define करने के लिए Multiple Units होते हैं।

Unit	Full Form	Use
px	Pixels	Screen के Actual Pixels में Measurement करता है (Device पर निर्भर करता है)।
dp (dip)	Density Independedt Pixels	Different Screen Sizes पर Consistent UI रखने के लिए।
sp	Scale Independent Pixels	Text Size के लिए, जिससे User Font Scaling को Adjust कर सकता है।
pt	Points	1/72 inch के बराबर होता है, बहुत कम उपयोग किया जाता है।
in	Inches	Screen Size को Inches में Define करता है।

Request

अगर आपको यह article useful या interesting लगा हो, तो please इसे अपने dosto aur family ke साथ जरूर share करें। आपका एक छोटा सा कदम हमें और अच्छा content बनाने के लिए motivate करता है। Thank you!

ध्यान दें कि इस page पर आपको कुछ ads भी देखने को मिल सकते हैं। इसके लिए हम आपसे माफी चाहते हैं। हम इस content को तैयार करने में काफी मेहनत और time लगाते हैं, ताकि आपको valuable जानकारी मिल सके। इन्हीं ads की मदद से हम ये काम continue कर पाते हैं।

आपके support और understanding के लिए दिल से धन्यवाद।

deepeweb.github.io