Modal Bottom Sheet in Android with Examples

06 Jul, 2020
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:
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.dependencies {               implementation 'com.google.android.material:material:1.2.0-alpha02'     }         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.xmlbottom_sheet_layout.xml<?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="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>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.javaBottomSheetDialog.javapackage 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;    }}Add the following code in activity_main.xml file. Here we add a button on activity_main layout.activity_main.javaactivity_main.java<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    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>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.javaMainActivity.javapackage 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");                }            });    }}
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.dependencies {               implementation 'com.google.android.material:material:1.2.0-alpha02'     }         
dependencies {               implementation 'com.google.android.material:material:1.2.0-alpha02'     }         
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.xmlbottom_sheet_layout.xml<?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="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>
bottom_sheet_layout.xml
<?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="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>
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.javaBottomSheetDialog.javapackage 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;    }}
BottomSheetDialog.java
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;    }}
Add the following code in activity_main.xml file. Here we add a button on activity_main layout.activity_main.javaactivity_main.java<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    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>
activity_main.java
<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    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>
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.javaMainActivity.javapackage 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");                }            });    }}
MainActivity.java
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");                }            });    }}
Output:
nidhi_biet
android
Java
Java
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Object Oriented Programming (OOPs) Concept in Java
How to iterate any Map in Java
Interfaces in Java
HashMap in Java with Examples
Stream In Java
ArrayList in Java
Collections in Java
Singleton Class in Java
Multidimensional Arrays in Java
Set in Java