The bottom sheet is the component of the android design support library. Bottom sheets are views that overlay on your main content view which comes up from the bottom of your screen. We can drag the bottom sheets vertically according to content height.

We can display the bottom sheet in two way.

  1. Modal(Dialog) Bottom Sheet
  2. Persistent Bottom Sheet

Persistent Bottom Sheet

Persistent Bottom sheet display on your main content screen. In the start, a small portion of view visible to the user. when the user clicks or drags on view than full view display according to the specific height. You can see the example of the persistent bottom sheet in Google map app.

Working with Android Material Persistent Bottom Sheets 1
Collapsed State
Working with Android Material Persistent Bottom Sheets 2
Expended State

Bottom sheets have five states which respond by dragging, swiping and gesture etc. The five states are

  1. STATE_COLLAPSED
  2. STATE_EXPENDED
  3. STATE_DRAGGING
  4. STATE_SETTLING
  5. STATE_HIDDEN

In STATE_COLLAPSED behaviour, bottom sheet visible but only show it’s peeked heigh. We can customize peek height by following attribute app:behavior_peekHeight

In STATE_EXPENDED behaviour, bottom sheet visible by its maximum height or content height and neither dragging and settling.

In STATE_DRAGGING behaviour, the user can drag the bottom sheet up or down.

In STATE_SETTLING behaviour, the bottom sheet is settling to a specific height after drag, swipe or gesture event.

In STATE_HIDDEN behaviours, the bottom sheet is invisible to the user.

Let’s start an example of the modal bottom sheet. Include Android material design library in your project Gradle file and sync your project.

implementation 'com.google.android.material:material:1.1.0-alpha08'

Now after sync the project, now do change in your style file.

 <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

First, we will design the separate layout of the bottom sheet and will include in Coordinate layout. Before start work on the layout, first, you need to know some following attributes.

app:layout_behavior: this attribute makes the layouts as the bottom sheet. You will set the value like this

@string/bottom_sheet_behavior

app:behavior_hideable: This attribute makes the bottom sheet hidden when swiped it down. So set the value true/false in this attribute like this

app:behavior_hideable="true"

app:behavior_peekHeight: This attribute set the heigh of the bottom sheet when it is in a collapsed state or you can say when we minimize the bottom sheet.

 app:behavior_peekHeight="60dp"

Here is the full code of persistent_bottom_sheet.xml layout file

<?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:id="@+id/lnrBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="@string/bottom_sheet_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:padding="10dp"
        android:background="@drawable/border_of_bottom_sheet"
        android:layout_height="60dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:text="English Alphabet"
            android:textAllCaps="true"
            android:textColor="@android:color/black"
            android:textSize="18sp" />

        <Button
            android:id="@+id/btnOpen"
            android:background="@color/colorPrimary"
            android:textColor="@android:color/white"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:text="Open" />
    </RelativeLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:weightSum="3">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_green"
                android:gravity="center"
                android:text="A"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_red"
                android:gravity="center"
                android:text="B"
                android:textColor="@android:color/white"
                android:textSize="40sp" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_purple"
                android:gravity="center"
                android:text="C"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:weightSum="3">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_purple"
                android:gravity="center"
                android:text="D"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_green"
                android:gravity="center"
                android:text="E"
                android:textColor="@android:color/white"
                android:textSize="40sp" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_red"
                android:gravity="center"
                android:text="F"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:weightSum="3">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_red"
                android:gravity="center"
                android:text="G"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_purple"
                android:gravity="center"
                android:text="H"
                android:textColor="@android:color/white"
                android:textSize="40sp" />

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1">

            <TextView
                android:layout_width="70dp"
                android:layout_height="70dp"
                android:layout_centerHorizontal="true"
                android:background="@drawable/circle_green"
                android:gravity="center"
                android:text="I"
                android:textColor="@android:color/white"
                android:textSize="40sp" />
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>
circle_green.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/green" />
</shape>
circle_purple.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/purple" />
</shape>
circle_red.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/red" />
</shape>
border_of_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="@android:color/darker_gray" />

        </shape>
    </item>

    <item android:top="1dp">
        <shape
            android:shape="rectangle">
            <stroke android:width="1dp" android:color="#FFDDDDDD" />
            <solid android:color="@android:color/white" />
        </shape>
    </item>

</layer-list>

Here is the code of activity_main.xml layout file

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <include layout="@layout/main_content" />

    <include layout="@layout/persistent_bottom_sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

The bottom sheet provides the callback method which returns the current state of the bottom sheet. According to the current state, we can do whatever we want.

package com.becody.bottomsheetmaterialexample;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;

import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.bottomsheet.BottomSheetDialogFragment;

public class MainActivity extends AppCompatActivity {
    private LinearLayout linearLayout;
    private BottomSheetBehavior bottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        linearLayout = findViewById(R.id.lnrBottomSheet);
        bottomSheetBehavior = BottomSheetBehavior.from(linearLayout);

        Button btnPersistentSheet = findViewById(R.id.btnOpen);
        btnPersistentSheet.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                toggleBottomSheet();
            }
        });

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {
                switch (newState) {
                    case BottomSheetBehavior.STATE_EXPANDED:
                        btnPersistentSheet.setText("CLOSE");
                        break;
                    case BottomSheetBehavior.STATE_COLLAPSED:
                        btnPersistentSheet.setText("OPEN");
                        break;
                }

            }

            @Override
            public void onSlide(@NonNull View bottomSheet, float slideOffset) {

            }
        });
    }

    private void toggleBottomSheet() {
        if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        } else if (bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
            bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
        }
    }
}

Thanks for reading the tutorial. Please like our Facebook page for a new and latest tutorial. Join our WhatsApp group for asking any questions about this tutorial. Please subscribe to our Youtube channel for the latest updates and tutorials.

1 Comment

Write A Comment