The purpose of today's article is to implement a bottom sheet behavior. Our goal is to create the following app:

To keep the tutorial short and to the point, we will focus on creating just the necessary components. You can find the complete code in my Github repo
The bottom sheet is easy to implement since everything is done within the XML files.
Let's get started.
Step #0: Project Dependencies
Start by adding the following dependency to your app build.gradle file:
implementation 'com.android.support:design:28.0.0'
Optionally add the following colors to your colors.xml file
<color name="blue">#2196F3</color> <color name="cyan">#00BCD4</color>
Additionally (also optional), you can remove the ActionBar by changing the default style in your style.xml file to
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> </style>
Notice how we added the NoActionBar type as the parent.
Step #1: bottom_sheet.xml File
Create a new XML file called bottom_sheet.xml. This file will contain the content of the Bottom Sheet.
The key attributes to look for in this XML file are app:layout_behavior and app:behavior_peakHeight. The first one is used to indicate that this view will have the bottom sheet behavior and the second one indicates how much of the view should be shown (the peak).
The complete code looks as follows:
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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="match_parent" android:orientation="vertical" app:behavior_peekHeight="80dp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white" android:elevation="4dp" android:orientation="vertical"> <!--Peak content--> <LinearLayout android:id="@+id/peakContent" android:layout_width="match_parent" android:layout_height="80dp" android:orientation="vertical" android:background="@color/colorAccent" android:gravity="center"> <TextView style="@style/TextAppearance.AppCompat.Headline" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textAlignment="center" android:textColor="@android:color/white" android:text="Bottom Sheet Peak" /> </LinearLayout> <!--Remaining content--> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/peakContent" android:background="@color/cyan"> <TextView android:layout_width="match_parent" android:layout_height="700dp" android:gravity="center" style="@style/TextAppearance.AppCompat.Headline" android:layout_gravity="center" android:maxLines="2" android:textAlignment="center" android:text="Bottom Sheet\nRemaining Content" android:textColor="@android:color/white" /> </LinearLayout> </RelativeLayout> </android.support.v4.widget.NestedScrollView>
Step #2: activity_main.xml File
Now that we have created the XML file for our bottom sheet it is time to include it in the activity_main.xml file.
The key thing to keep in mind with activity_main.xml file is that the root view is a CoordinatorLayout. Also, notice how we use the
<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/blue"> <!--Main Content--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Main Content" android:textAlignment="center" android:textColor="@android:color/white" android:layout_gravity="center" style="@style/TextAppearance.AppCompat.Headline"/> <!--Bottom Sheet content--> <include layout="@layout/bottom_sheet"/> </android.support.design.widget.CoordinatorLayout>
That is it!
Build and run and you should have the following result:

You can find the complete code in my Github repo
See you on the next one
How would you rate this article?