info@androidpaper.co.in

Android Bottom Sheet Dialog with Example

Android Bottom Sheet Dialogs offer a flexible and interactive way to present additional content or actions to users while maintaining context within an app. Similar to a dialog, a Bottom Sheet Dialog slides up from the bottom of the screen, partially covering the main content. It provides a sleek and modern user experience by allowing users to access secondary or contextual options without leaving the current screen.
In this tutorial, we will explore how to implement a Bottom Sheet Dialog in Android app development. We'll cover the essential steps to integrate a Bottom Sheet Dialog, including creating the dialog layout, handling user interactions, and customizing its appearance and behavior.

Define the layout for your Bottom Sheet Dialog in an XML file. This layout will contain the content and views you want to display in the dialog. Customize it according to your requirements.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://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="4dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="10dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        >
        <EditText
            android:id="@+id/et_cc"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:text=""
            android:maxHeight="60dp"
            android:maxLines="6"
            android:layout_gravity="top"
            android:gravity="top"
            android:hint="Enter your Review here....."
            android:textSize="14dp"/>
        <ImageView
            android:id="@+id/ivsend"
            android:layout_weight="1.2"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:padding="10dp"
            android:layout_gravity="center|right"
            android:src="@drawable/baseline_send_24"
             />
    </LinearLayout>


</LinearLayout>

To show the Bottom Sheet Dialog, create an instance of your dialog fragment and call show() on the fragment manager. For example, you can display the dialog by clicking a button:

        btnBottomSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
         
                final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
                bottomSheetDialog.setContentView(R.layout.bottomsheet);
 });

When click on Send, the dialog will dismiss, and the edit text value will come. For example, you can dismiss the dialog by clicking a Imageview of a sheet:

 bottomSheetDialog.show();
ivsend = bottomSheetDialogfindViewById(R.id.ivsend);
et_text= bottomSheetDialogfindViewById(R.id.et_text);
 ivsend.setOnClickListener(new View.OnClickListener() {
  @Override
 public void onClick(View v) {
         bottomSheetDialog.dismiss();
          ccString = et_cc.getText().toString();
              }
                });

Customize the appearance and behavior of the dialog by overriding the setupDialog() method in your dialog fragment class. For example, you can adjust the height of the dialog or add animations.

@Override
public void setupDialog(Dialog dialog, int style) {
    super.setupDialog(dialog, style);

    // Set the desired height of the dialog (e.g., 75% of the screen height)
    WindowManager.LayoutParams layoutParams = new WindowManager.LayoutParams();
    layoutParams.copyFrom(dialog.getWindow().getAttributes());
    layoutParams.height = (int) (getResources().getDisplayMetrics().heightPixels * 0.75);
    dialog.getWindow().setAttributes(layoutParams);

    // Add animations to the dialog (optional)
    dialog.getWindow().getAttributes().windowAnimations = R.style.DialogAnimation;
}

Make sure to replace R.layout.bottom_sheet_layout with the correct layout resource for your Bottom Sheet Dialog.
By following these steps, you can create and display a Bottom Sheet Dialog in your Android app. Customize the appearance, content, and behavior of the dialog to meet your specific requirements. Bottom Sheet Dialogs are a great way to enhance your app's user interface and provide a seamless and intuitive user experience.
Remember to handle any necessary cleanup or dismissal of the dialog fragment, such as dismissing the dialog when a user action is completed or navigating away from the current screen.
Implementing Bottom Sheet Dialogs in Android can greatly improve the usability and interaction of your app, offering a sleek and intuitive way to present additional options or information to your users.