एंड्रॉइड में बॉटम शीट (BottomSheet) विजेट कैसे इम्प्लीमेंट करें?

एंड्रॉइड में BottomSheetBehavior के साथ बॉटम शीट इम्प्लीमेंट करना

Bottom Sheet मटीरियल डिज़ाइन कंपोनेंट है जो स्क्रीन के नीचे से स्लाइड होकर कंटेंट दिखाता है। दो प्रकार हैं:

• Modal Bottom Sheet — डायलॉग जैसा, बैकग्राउंड डिम, बाहर टैप करके बंद होता है। BottomSheetDialogFragment से बनता है।
• Persistent (Standard) Bottom Sheet — ऐप लेआउट का हिस्सा, CoordinatorLayout + BottomSheetBehavior से बनता है। यह ट्यूटोरियल इसी को कवर करता है।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio → File → New → New Project → "Empty Activity" → Finish।

चरण 2: डिपेंडेंसीज़ (build.gradle)

dependencies {
    // Material Components (BottomSheetBehavior इसमें शामिल है)
    implementation 'com.google.android.material:material:1.12.0'

    // ButterKnife (वैकल्पिक, व्यू बाइंडिंग के लिए) — आधुनिक कोड में ViewBinding उपयोग करें
    // implementation 'com.jakewharton:butterknife:10.2.3'
    // annotationProcessor 'com.jakewharton:butterknife-compiler:10.2.3'
}

चरण 3: Main Layout (activity_main.xml) — CoordinatorLayout रूट

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- मेन कंटेंट -->
    <include layout="@layout/content_main" />

    <!-- बॉटम शीट (मेन कंटेंट के बाद ताकि ऊपर रहे) -->
    <include layout="@layout/bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

चरण 4: कंटेंट Layout (res/layout/content_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="मेन कंटेंट एरिया"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/btnShowSheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="24dp"
        android:text="बॉटम शीट दिखाएं"
        android:padding="12dp 24dp" />

</RelativeLayout>

चरण 5: बॉटम शीट Layout (res/layout/bottom_sheet.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    android:id="@+id/bottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@android:color/white"
    app:behavior_hideable="true"
    app:behavior_peekHeight="80dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <!-- हैंडल/हेडर -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical"
        android:layout_marginBottom="16dp">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="ऑर्डर विवरण"
            android:textColor="#333"
            android:textSize="18sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="end"
            android:text="₹435.00"
            android:textSize="16sp"
            android:textStyle="bold" />
    </LinearLayout>

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="चिकन BBQ" android:layout_marginBottom="4dp" />
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="चिकन बिरयानी" android:layout_marginBottom="16dp" />

    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="डिलीवरी एड्रेस" android:textColor="#333" android:textStyle="bold" android:layout_marginBottom="4dp" />
    <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="फ्लैट नं. 404, इंडिया, चेन्नई" android:layout_marginBottom="24dp" />

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="#000"
        android:text="भुगतान के लिए आगे बढ़ें"
        android:textColor="#fff"
        android:textAllCaps="false" />

</LinearLayout>

चरण 6: MainActivity.java — BottomSheetBehavior कंट्रोल

package com.example.bottomsheetdemo;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.bottomsheet.BottomSheetBehavior;

public class MainActivity extends AppCompatActivity {

    private Button btnShowSheet;
    private LinearLayout layoutBottomSheet;
    private BottomSheetBehavior<LinearLayout> sheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        btnShowSheet = findViewById(R.id.btnShowSheet);
        layoutBottomSheet = findViewById(R.id.bottomSheet);

        // Behavior प्राप्त करें
        sheetBehavior = BottomSheetBehavior.from(layoutBottomSheet);

        // स्टेट चेंज लिस्टनर
        sheetBehavior.addBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                switch (newState) {
                    case BottomSheetBehavior.STATE_EXPANDED:
                        btnShowSheet.setText("शीट बंद करें");
                        break;
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        btnShowSheet.setText("शीट खोलें");
                        break;
                    case BottomSheetBehavior.STATE_HIDDEN:
                        btnShowSheet.setText("शीट दिखाएं");
                        break;
                    case BottomSheetBehavior.STATE_DRAGGING:
                    case BottomSheetBehavior.STATE_SETTLING:
                        // ड्रैगिंग/सेटलिंग中に UI अपडेट कर सकते हैं
                        break;
                }
            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {
                // slideOffset: 0 (collapsed) से 1 (expanded)
                // प्रोग्रेस बार, अल्फा एनिमेशन आदि के लिए उपयोगी
            }
        });

        // बटन क्लिक → टॉगल
        btnShowSheet.setOnClickListener(v -> toggleBottomSheet());
    }

    private void toggleBottomSheet() {
        if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
            sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
            btnShowSheet.setText("शीट बंद करें");
        } else {
            sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
            btnShowSheet.setText("शीट खोलें");
        }
    }
}

चरण 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.bottomsheetdemo">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.BottomSheetDemo">

        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

चलाएं और टेस्ट करें

1. ऐप खोलें — बॉटम शीट नीचेpeekHeight (80dp) में दिखेगी।
2. "बॉटम शीट दिखाएं" दबाएं — शीट पूरी खुलेगी (EXPANDED)।
3. फिर "शीट बंद करें" दबाएं — कोलैप्स होगी (COLLAPSED)।
4. नीचे ड्रैग करके भी खोल/बंद कर सकते हैं।
5. पूरी नीचे स्वाइप करके छुपा सकते हैं (HIDDEN) — behavior_hideable="true" की वजह से।

🔑 BottomSheetBehavior के मुख्य स्टेट्स

⚙️ मुख्य XML एट्रिब्यूट्स (app: namespace)

🚀 आधुनिक विकल्प: ModalBottomSheetDialogFragment

डायलॉग-स्टाइल बॉटम शीट के लिए (अधिक सामान्य उपयोग केस):

// MyBottomSheetDialogFragment.java
public class MyBottomSheetDialogFragment extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_bottom_sheet, container, false);
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        // व्यूज बाइंड करें, लॉजिक लिखें
    }
}

// दिखाने के लिए
new MyBottomSheetDialogFragment().show(getSupportFragmentManager(), "bottom_sheet");

सारांश

• ✅ **Persistent Bottom Sheet**: CoordinatorLayout + BottomSheetBehavior + चाइल्ड व्यू।
• ✅ peekHeight, hideable, skipCollapsed XML एट्रिब्यूट्स से व्यवहार कंट्रोल करें।
• ✅ sheetBehavior.setState() प्रोग्रामेटिकली खोलें/बंद करें।
• ✅ addBottomSheetCallback() से स्टेट चेंज/स्लाइड लिसन करें।
• 🚀 **Modal Bottom Sheet**: BottomSheetDialogFragment — डायलॉग जैसा, आसान, ज्यादातर केस के लिए बेहतर।