How To Use BottomSheetDialog In Android

BottomSheetDialog is one of the important aspect of material design in Android which comes with support library. This is really an alternative to a normal dialog in your Android app, which pops up from the bottom with animation. Implementation of this dialog is not as straight forward as AlertDialog. So let’s have a look on the implementation –

bottomsheetdialog

 

BottomSheetDialog Source Code

Java class is similar to the below code –

public class SampleBottomSheetDialog extends AppCompatDialogFragment {

    public static SampleBottomSheetDialog newInstance() {
        SampleBottomSheetDialog dialog = new SampleBottomSheetDialog();
        return dialog;
    }

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {

        final Activity activity = getActivity();

        View promptsView = LayoutInflater.from(activity).inflate(R.layout.sample_bottom_sheet_dialog, null, false);
        final BottomSheetDialog dialog = new BottomSheetDialog(activity, getTheme());
        dialog.setContentView(promptsView);

        TextView submit = (TextView) promptsView.findViewById(R.id.submit);

        submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!activity.isFinishing()) {
                    dialog.dismiss();
                }
            }
        });
        return dialog;
    }
}

The above is code is referring sample_bottom_sheet_dialog.xml layout, it is a plain normal layout i.e.,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Welcome to Onetouchcode.com"
        android:textSize="16sp" />

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="5dp"
        android:text="Okay" />

</LinearLayout>

Now once you are done with these, you are all set to call this dialog. To display the SampleBottomSheetDialog you have to call the show method –

SampleBottomSheetDialog bottomSheetDialog = SampleBottomSheetDialog.newInstance();
        bottomSheetDialog.show(getFragmentManager(), "SAMPLE_TAG");

 

As it is a form of DialogFragment you have to call this dialog from an AppCompatActivity / FragmentActivity or from a Fragment inside your app, and your app need to be visible. If you are still interested to learn more about this dialog check out this android developers page

Make sure to share this article with your friends and colleagues so they can also learn.

 

Happy coding!!!

1 Response

  1. Pavithra Purushothaman says:

    Thanks….It worked well. But how to set the background color for Bottom Sheet?

Leave a Reply

Your email address will not be published. Required fields are marked *