Modal Bottom Sheet in Android with Examples

In this article, we will learn about how to add Modal Bottom Sheet in our app. We have seen this UI component in daily applications like Google Drive, Maps, or Music Player App. The modal Bottom sheet always appears from the bottom of the screen and if the user clicks on the outside content then it is dismissed. It can be dragged vertically and can be dismissed by sliding it down.

Approach:

  1. Add the support Library in build.gradle file and add dependency in the dependencies section. With the help of this library we can inherit the BottomSheetDialogFragment which helps us to implement Bottom Sheet component.

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    dependencies {         
          implementation 'com.google.android.material:material:1.2.0-alpha02'     
    }         

    chevron_right

    
    

  2. Now create a bottom_sheet_layout.xml file and add the following code. Here we design the layout of our Modal Bottom sheet. It has a textview and two buttons.

    bottom_sheet_layout.xml

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        android:padding="16dp">
      
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="This is a Modal BottomSheet"
            android:textSize="25sp" />
      
        <Button
            android:layout_margin="10dp"
            android:id="@+id/algo_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Share this Algorithm" />
      
        <Button
            android:layout_margin="10dp"
            android:id="@+id/course_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Share this Course" />
      
    </LinearLayout>

    chevron_right

    
    

  3. Now create BottomSheetDialog.java and add the following code.This file extends the BottomSheetFragment and thats why it act as a fragment. When the user clicks on any bottom of modal sheet the onClickListener() gets invoked.

    BottomSheetDialog.java



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.gfgmodalsheet;
      
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.Button;
    import android.widget.Toast;
      
    import androidx.annotation.Nullable;
    import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
      
    public class BottomSheetDialog extends BottomSheetDialogFragment {
      
        @Override
        public View onCreateView(LayoutInflater inflater, @Nullable
                                                          ViewGroup container, @Nullable Bundle savedInstanceState)
        {
            View v = inflater.inflate(R.layout.bottom_sheet_layout,
                                      container, false);
      
            Button algo_button = v.findViewById(R.id.algo_button);
            Button course_button = v.findViewById(R.id.course_button);
      
            algo_button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v)
                {
                    Toast.makeText(getActivity(),
                                   "Algorithm Shared", Toast.LENGTH_SHORT)
                        .show();
                    dismiss();
                }
            });
      
            course_button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v)
                {
                    Toast.makeText(getActivity(),
                                   "Course Shared", Toast.LENGTH_SHORT)
                        .show();
                    dismiss();
                }
            });
            return v;
        }
    }

    chevron_right

    
    

  4. Add the following code in activity_main.xml file. Here we add a button on activity_main layout.

    activity_main.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:orientation="vertical"
        tools:context=".MainActivity">
      
        <Button
            android:layout_marginTop="30dp"
            android:id="@+id/open_bottom_sheet"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Open Modal Bottom Sheet" />
    </LinearLayout>

    chevron_right

    
    

  5. Add the following code in the MainActivity.java file. Here an onClickListener is attached with the button. If the user clicks on it, it gets invoked and bottom sheet dialog displays to user.

    MainActivity.java

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    package org.geeksforgeeks.gfgmodalsheet;
      
    import androidx.appcompat.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Button;
      
    public class MainActivity extends AppCompatActivity {
      
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
      
            Button OpenBottomSheet = findViewById(R.id.open_bottom_sheet);
      
            OpenBottomSheet.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View v)
                    {
                        BottomSheetDialog bottomSheet = new BottomSheetDialog();
                        bottomSheet.show(getSupportFragmentManager(),
                                         "ModalBottomSheet");
                    }
                });
        }
    }

    chevron_right

    
    

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Java and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready.




My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : nidhi_biet

Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.