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 tag to include out bottom_sheet.xml file.

      <?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