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:

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:

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store