Working With Android Bottom Sheet- Android Studio Kotlin

Android Bottom Sheet slides up from the bottom to show more options and content, example is in google maps as shown

We have two types of bottom sheets i.e Persistent bottom sheet and Modal bottom sheet.

Persistent bottom sheet is persistent at the bottom and the user can view more options by dragging it vertically up.It is slightly elevated and it can display more options to the user.Example of persistent bottom sheet is shown above.

Modal bottom sheets behave like modals/dialogs, it overshadows the content on the screen when activated, when a user clicks outside the modal it dismisses.Example is on facebook posts menu i.e

Persistent Bottom Sheet

Create a new android project by clicking on File->New->New project then select an empty activity.

Add the dependancy in your app level gradle and sync your project

//add material design to your project
implementation 'com.google.android.material:material:1.4.0-rc01'

Create a new xml file in layout folder and call it bottom_sheet_persistent.xml

Add the following to the root of the design:

<?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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    android:paddingBottom="32dp"
    android:id="@+id/bottomSheet"
    app:behavior_hideable="true"
    app:behavior_peekHeight="16dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">
 

Three more properties have been added to the layout i.e

behaviour_hideable it is set to true meaning we can completely hide the bottom sheet by sliding it down

behaviour_peekHeight it is the height of the layout that will be visible

layout_behaviour shows that it is a bottom sheet

Adding Bottom sheet to our activity

Open activity_main.xml in layout folder and add the following code:

<?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:background="#E7E7E7"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <include layout="@layout/bottom_sheet_persistent" />
 
</androidx.coordinatorlayout.widget.CoordinatorLayout>

NOTE:For bottom sheet we use CoordinatorLayout then include the bottom sheet layout.

Run the application and it should appear as shown

The persistent bottom sheet shown can be slide up and down.

Operating Botton Sheet in code

Add a button in your mainactivity layout file:

<Button
            android:id="@+id/buttonBottomSheetPersistent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="16dp"
            android:text="Open Persistent Bottom Sheet"/>