How to Implement Bottom Sheet Dialog in Android Studio | Android Studio Tutorials (2021)

How to Implement Bottom Sheet Dialog in Android Studio | Android Studio Tutorials (2021)



Introduction : 

In this tutorial we will learn how to implement Bottom Sheet Dialog in Android Studio with Transparent background and round corners, So let's get started.

  • To implement Bottom Sheet Dialog we need CardView dependency.
dependencies {
    implementation
"androidx.cardview:cardview:1.0.0"
}

  • Firstly, we need our dialog layout which we want to show when dialog opens up. So below is a example, you can add components according to your needs.  
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/bottom_sheet_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        app:cardCornerRadius="20dp"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:src="@drawable/sample2"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:layout_centerHorizontal="true"
                android:layout_height="match_parent"/>

            <androidx.cardview.widget.CardView
                android:layout_width="wrap_content"
                app:cardCornerRadius="20dp"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:layout_height="wrap_content">

            <View
                android:layout_width="60dp"
                android:background="@color/white"
                android:layout_height="5dp"/>

            </androidx.cardview.widget.CardView>


        </RelativeLayout>


    </androidx.cardview.widget.CardView>

</RelativeLayout>

In this layout we can add EditText, Buttons, TextViews, etc.. He have used parent card view to make our dialog box round corner the radius is adjustable according to the needs.

  • Now we have to show this dialog in our main activity. I have used button to show the dialog, you guys can use your own customized gestures or buttons to show dialog according to your needs.

BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(context,R.style.BottomDialoge);
        View bottombar = LayoutInflater.from(context).inflate(R.layout.dialog_layout,(RelativeLayout)findViewById(R.id.bottom_sheet_container));
        bottomSheetDialog.setContentView(bottombar);
        bottomSheetDialog.show();
        bottomSheetDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
            @Override
            public void onCancel(DialogInterface dialog) {

            }
        });

  • Here in onCancel Method we can show toast or any other message as per our requirement . Don't forget to add BottomDialog style in your R.style.

<style name="BottomDialoge" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheet</item>
    </style>

    <style name="BottomSheet" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@android:color/transparent</item>
    </style>

  • We have basically implemented our Bottom Dialog Box. Now question arises that if we have a EditText or button in our bottom dialog then how are we going to use them in our activity. Well this is absolutely easy, we just have to use the "View" that we have inflated in our dialog. Below is an example of how to implement onClickListener on Button present in dialog box.


BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(context,R.style.BottomDialoge);
        View bottombar = LayoutInflater.from(context).inflate(R.layout.dialog_layout,(RelativeLayout)findViewById(R.id.bottom_sheet_container));
        Button btn = bottombar.findViewById(R.id.btn);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(context, "Button Clicked", Toast.LENGTH_SHORT).show();
            }
        });
        bottomSheetDialog.setContentView(bottombar);
        bottomSheetDialog.show();
        bottomSheetDialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
            @Override
            public void onCancel(DialogInterface dialog) {

            }
        });

Similarly we can use any component in our dialog using the view.
If you have any doubts or suggestions feel free to ask in comment section.



Post a Comment

1 Comments