Modal Bottom Sheet in Android with an example

In this blog, we’re going to discuss how to add a modal bottom sheet on the android app with icons and texts.

As always, before going to create the bottom sheet, first, let’s understand what modal bottom sheet is.

Base class for Dialogs styled as a bottom sheet. BottomSheetDialogFragment is a thin layer on top of the general support library Fragment that renders your fragment as a modal bottom sheet, fundamentally acting as a dialog.

We have seen the bottom sheet dialog UI component in daily applications like Google Drive, Maps, or Music Player App, etc. The modal bottom sheet appears from the bottom of the screen when the user clicks on a particular event and dismiss when clicking outside. It can be dragged vertically and can be dismissed by sliding it down.

Modal Bottom Sheet with Example:

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

dependencies {

implementation ‘com.google.android.material:material:1.3.0-alpha03’

}

2. Now, create a bottom_sheet.xml file and add the following code. Here we design the layout for our Modal Bottom sheet. It has three textView and three imageView.

bottom_sheet.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:orientation=”vertical”>
<LinearLayout android:id=”@+id/newLinearLayout” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:background=”?android:attr/selectableItemBackground” android:orientation=”horizontal” android:padding=”8dp”>
<ImageView android:layout_width=”24dp” android:layout_height=”24dp” android:layout_margin=”8dp” android:src=”@drawable/newarriavle” />
<TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_gravity=”center_vertical” android:padding=”8dp” android:text=”New Arrivals” />
</LinearLayout>
<LinearLayout
android:id=”@+id/htlLinearLayout” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:background=”?android:attr/selectableItemBackground” android:orientation=”horizontal” android:padding=”8dp”>
<ImageView android:layout_width=”24dp” android:layout_height=”24dp” android:layout_margin=”8dp” android:src=”@drawable/hightolow” />
<TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_gravity=”center_vertical” android:padding=”8dp” android:text=”High to Low” />
</LinearLayout>
<LinearLayout android:id=”@+id/lthLinearLayout” android:layout_width=”match_parent” android:layout_height=”wrap_content” android:background=”?android:attr/selectableItemBackground” android:orientation=”horizontal” android:padding=”8dp”>
<ImageView android:layout_width=”24dp” android:layout_height=”24dp” android:layout_margin=”8dp” android:src=”@drawable/lowtohigh” />
<TextView android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_gravity=”center_vertical” android:padding=”8dp” android:text=”Low to High” />
</LinearLayout>
</LinearLayout>

3. For showing the bottom sheet dialog, we add a button in the main class and for click listener of the bottom sheet, we add a textView which will be replaced when the bottom sheet item is clicked. Add the following code in the content_main.xml file.

content_main.xml

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android=”http://schemas.android.com/apk/res/android" xmlns:app=”http://schemas.android.com/apk/res-auto" xmlns:tools=”http://schemas.android.com/tools" android:layout_width=”match_parent” android:layout_height=”match_parent” app:layout_behavior=”@string/appbar_scrolling_view_behavior” tools:context=”.NextActivity” tools:showIn=”@layout/activity_next”>
<Button android:id=”@+id/button” style=”@style/Widget.AppCompat.Button.Colored” android:layout_width=”wrap_content” android:onClick=”showDialog” android:layout_height=”wrap_content” android:layout_marginEnd=”8dp” android:layout_marginStart=”8dp” android:layout_marginTop=”8dp” android:text=”Show dialog” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toTopOf=”parent” />
<TextView android:id=”@+id/textView” style=”@style/TextAppearance.AppCompat.Display1" android:layout_width=”wrap_content” android:layout_height=”wrap_content” android:layout_marginEnd=”8dp” android:layout_marginStart=”8dp” android:layout_marginTop=”16dp” android:text=”Hello World!” app:layout_constraintEnd_toEndOf=”parent” app:layout_constraintStart_toStartOf=”parent” app:layout_constraintTop_toBottomOf=”@+id/button” />
</androidx.constraintlayout.widget.ConstraintLayout>

4. Now add the following code in the activity_main.xml file. Here we include the content_main.xml file.

activity_main.xml

<?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" xmlns:tools=”http://schemas.android.com/tools" android:layout_width=”match_parent” android:layout_height=”match_parent” android:orientation=”horizontal” tools:context=”.NextActivity”>
<include layout=”@layout/content_main” />
</LinearLayout>

5. Now 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 the bottom sheet dialog displays to the user. Also, add the click listener in the bottom sheet dialog.

MainActivity.java

package com.example.webinfotech;
import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; import com.google.android.material.bottomsheet.BottomSheetDialog;
public class NextActivity extends AppCompatActivity implements View.OnClickListener{
LinearLayout newLinearLayout, htlLinearLayout, lthLinearLayout; BottomSheetDialog bottomSheetDialog; TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_next); textView = findViewById(R.id.textView);
createBottomSheetDialog();
}
private void createBottomSheetDialog() {
if (bottomSheetDialog == null) { View view = LayoutInflater.from(this).inflate(R.layout.bottom_sheet, null); newLinearLayout = view.findViewById(R.id.newLinearLayout); htlLinearLayout = view.findViewById(R.id.htlLinearLayout); lthLinearLayout = view.findViewById(R.id.lthLinearLayout);
newLinearLayout.setOnClickListener(this); htlLinearLayout.setOnClickListener(this); lthLinearLayout.setOnClickListener(this);
bottomSheetDialog = new BottomSheetDialog(this); bottomSheetDialog.setContentView(view); } }
public void showDialog(View view) { bottomSheetDialog.show(); }
@Override public void onClick(View view) { switch (view.getId()) { case R.id.newLinearLayout: textView.setText(“New Arrivals”); bottomSheetDialog.dismiss(); break;
case R.id.htlLinearLayout: textView.setText(“High to Low”); bottomSheetDialog.dismiss(); break;
case R.id.lthLinearLayout: textView.setText(“Low to High”); bottomSheetDialog.dismiss(); break; }
}
}

Output: