Last updated on August 28th, 2020 at 05:13 pm
Android bottom sheet is a component which slides up from the bottom of the screen. You can customize your bottom sheet option. There are a number of Android application which is using bottom sheet Google Maps, Google Drive, etc.
In this blog, I will explain to you how we can implement Android bottom sheet in our application in simple steps.
There are two types of Bottom Sheet
Android has two type of Bottom sheet Persistent Bottom Sheet and Modal Bottom Sheet
What is Persistent Bottom Sheet
The persistent bottom sheet displays in-app content. It will display content from the bottom of the screen and some portion is visible.
What is Modal bottom sheet
Modal bottom sheet work as a menu or dialog. It has a higher elevation then persistent sheet as shown in below image.
Step 1. Create a new Android project in Android studio.
Step 2. Open App build.gradle file and google design library
implementation 'com.android.support:design:28.0.0'
Step 3. In this step, we can create a layout file for our bottom sheet menu go to res ⇒ layout and create a new layout file bottom_sheet.xml. Once a layout file is created we need to add some important or required attributes in layout.
- app:layout_behavior :- this attribute tag make our layout as a bottom sheet you need to add this value android.support.design.widget.BottomSheetBehavior
- app:behavior_peekHeight :- this attribute set default height when sheet is minimized
- app:behavior_hideable :- Makes bottom sheet hidden when swiped down.
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:behavior_hideable="false"
app:behavior_peekHeight="90dp"
android:background="#fff"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:text="Welcome to TrinityTuts"
android:textSize="22dp"
android:textStyle="bold" />
<TextView
android:padding="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="This is sample button sheet android"/>
</LinearLayout>Step 4. Now open activity_main.xml file and we need to include our bottom_sheet.xml in this layout. Remember one thing we need to CoordinatorLayout , not ConstraintLayout okay.
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bottom Sheet example"
android:textStyle="bold" />
<Button
android:id="@+id/btn_bottom_sheet"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="Show Bottom Sheet" />
<Button
android:id="@+id/btn_bottom_sheet_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:text="Show Bottom Sheet Dialog" />
</LinearLayout>
<!-- Adding bottom sheet after main content -->
<include layout="@layout/bottom_sheet" />
</android.support.design.widget.CoordinatorLayout>Step 5. Now in the above code, we create two buttons the first button is used to expand and close bottom sheet which we add in our layout and 2nd button we use to create BottomSheetDialog. I am using the same view for both actions but you can create a separate view as per your requirement.
package com.bottomsheet;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
public class MainActivity extends AppCompatActivity {
BottomSheetBehavior sheetBehavior;
LinearLayout bottomSheet;
Button btn_bottom_sheet, btn_bottom_sheet_dialog;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottomSheet = (LinearLayout)findViewById(R.id.bottom_sheet);
sheetBehavior = BottomSheetBehavior.from(bottomSheet);
btn_bottom_sheet = (Button)findViewById(R.id.btn_bottom_sheet);
btn_bottom_sheet_dialog = (Button)findViewById(R.id.btn_bottom_sheet_dialog);
sheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
@Override
public void onStateChanged(@NonNull View view, int i) {
switch (i) {
case BottomSheetBehavior.STATE_HIDDEN:
break;
case BottomSheetBehavior.STATE_EXPANDED: {
btn_bottom_sheet.setText("Close Sheet");
}
break;
case BottomSheetBehavior.STATE_COLLAPSED: {
btn_bottom_sheet.setText("Expand Sheet");
}
break;
case BottomSheetBehavior.STATE_DRAGGING:
break;
case BottomSheetBehavior.STATE_SETTLING:
break;
}
}
@Override
public void onSlide(@NonNull View view, float v) {
}
});
/**
* Open and hide sheet on button click
*/
btn_bottom_sheet.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if (sheetBehavior.getState() != BottomSheetBehavior.STATE_EXPANDED) {
sheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
btn_bottom_sheet.setText("Close sheet");
} else {
sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
btn_bottom_sheet.setText("Expand sheet");
}
}
});
/**
* Show BottomSheetDialog on click of button
*/
btn_bottom_sheet_dialog.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
View getSheetLayout = getLayoutInflater().inflate(R.layout.bottom_sheet, null);
BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this);
bottomSheetDialog.setContentView(getSheetLayout);
bottomSheetDialog.show();
}
});
}
}
That’s it. Hope this post help you understand how to implement bottom sheet in your Android Application please support us by subscribing our youtube channel. Our channel subscription button is on top of the post.
Thanks, happy coding.