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
Leave a Comment
INITIALIZING...
INITIALIZING...
Comments Total: 0 comments