Android BottomSheetBehavior


Android BottomSheetBehavior Examples and Tutorials.

A BottomSheetBehavior is an interaction behavior plugin for a child view of CoordinatorLayout to make it work as a bottom sheet.

BottomSheetBehavior API Definition

BottomSheetBehavior was added in version 23.4.0.

It derives from the Behavior class of CoordinatorLayout.

public class BottomSheetBehavior extends Behavior<V extends View> 

Here's it's inheritance tree:

java.lang.Object
   ↳    android.support.design.widget.CoordinatorLayout.Behavior<V extends android.view.View>
       ↳    android.support.design.widget.BottomSheetBehavior<V extends android.view.View>

Top BottomSheetBehavior Full Examples

We will look at several examples that make use of or implement BottomSheetBehavior.

These examples will be open source and can be downloaded.

1. Hello World BottomSheet Example

Let's look at a simple hello world bottomsheet behavior example. In this example we simply add a View, which can be collapsed:

Collapsed

Here's the collapsed state:

Hello World BottomSheetBehavior Example

Expanded

Here's the expanded state:

Hello World BottomSheetBehavior Example Expanded

Let's start.

(a). Build.gradle

Go ahead and add the required support design library. You can use the later versions.

dependencies {
   compile fileTree(dir: 'libs', include: ['*.jar'])
   testCompile 'junit:junit:4.12'
   compile 'com.android.support:appcompat-v7:23.2.0'
   compile 'com.android.support:design:23.2.0'
}

(a). activity_scrolling.xml

We will have only one layout and one activity. At the root we must have the CoordinatorLayout as our element.

Inside it we will have an AppBarLayout. Inside the AppBarLayout we will have a CollapsingToolbarLayout.

It is inside that CollapsingToolbarLayout where we have ToolBar.

Then we close the AppBarLayout. Then add a simple TextView wrapped inside a FrameLayout. This will be show in our Collapsed state.

Then a LinearLayout with vertical orientation. Here we add more textviews. This will be shown in the expanded state of our BottomSheetBehavior.

So it is this LinearLayout that you can of in this case as our BottomSheet, take note of the id we are assigning it.

<?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"
   android:fitsSystemWindows="true"
   tools:context="sample.com.bottomsheet.ScrollingActivity">

   <android.support.design.widget.AppBarLayout
      android:id="@+id/app_bar"
      android:layout_width="match_parent"
      android:layout_height="@dimen/app_bar_height"
      android:fitsSystemWindows="true"
      android:theme="@style/AppTheme.AppBarOverlay">

      <android.support.design.widget.CollapsingToolbarLayout
         android:id="@+id/toolbar_layout"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:fitsSystemWindows="true"
         app:contentScrim="?attr/colorPrimary"
         app:layout_scrollFlags="scroll|exitUntilCollapsed">

         <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

      </android.support.design.widget.CollapsingToolbarLayout>
   </android.support.design.widget.AppBarLayout>

   <FrameLayout 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:background="@android:color/holo_red_light">

      <TextView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center"
         android:text="Main Content"
         android:textAppearance="@style/TextAppearance.AppCompat.Title" />

   </FrameLayout>

   <LinearLayout
      android:id="@+id/design_bottom_sheet"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@android:color/holo_green_light"
      android:orientation="vertical"
      android:paddingTop="8dp"
      app:behavior_peekHeight="32dp"
      app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 1" />

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 2" />

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 3" />

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 4" />

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 5" />

      <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginBottom="8dp"
         android:text="Line 6" />

   </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

(c). ScrollingActivity.java

Create an Activity if it hasn't been created by android studio already.

It is our only activity and yours maybe already named MainActivity, no problem.

public class ScrollingActivity extends AppCompatActivity {..}

Inside our onCreate() we will be referencing our BottomSheet:

 View bottomSheet = findViewById(R.id.design_bottom_sheet);

This will reference that LinearLayout which will be acting as our bottom sheet.

Then we initialize the BottomSheetBehavior for our BottomSheet:

BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);

Then we can override the BottomSheetCallBacks:

    behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
         @Override 
         public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events 
            Log.d(TAG, "onSlide: " + slideOffset);
         } 

         @Override 
         public void onStateChanged(@NonNull View bottomSheet, int newState) {
            Log.d(TAG, "onStateChanged: " + newState);
            // React to state change 
         } 
      }); 

Here's the full code:

package sample.com.bottomsheet;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.BottomSheetBehavior;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;

public class ScrollingActivity extends AppCompatActivity {

   private static final String TAG = ScrollingActivity.class.getSimpleName();

   @Override
   public boolean onCreateOptionsMenu(Menu menu) {
      // Inflate the menu; this adds items to the action bar if it is present.
      getMenuInflater().inflate(R.menu.menu_scrolling, menu);
      return true;
   }

   @Override
   public boolean onOptionsItemSelected(MenuItem item) {
      // Handle action bar item clicks here. The action bar will
      // automatically handle clicks on the Home/Up button, so long
      // as you specify a parent activity in AndroidManifest.xml.
      int id = item.getItemId();

      //noinspection SimplifiableIfStatement
      if (id == R.id.action_settings) {
         return true;
      }
      return super.onOptionsItemSelected(item);
   }

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_scrolling);
      Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
      setSupportActionBar(toolbar);

      View bottomSheet = findViewById(R.id.design_bottom_sheet);
      BottomSheetBehavior behavior = BottomSheetBehavior.from(bottomSheet);
      behavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
         @Override
         public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            // React to dragging events
            Log.d(TAG, "onSlide: " + slideOffset);
         }

         @Override
         public void onStateChanged(@NonNull View bottomSheet, int newState) {
            Log.d(TAG, "onStateChanged: " + newState);
            // React to state change
         }
      });
   }
}

(d). How to Run.

We only have one class and one layout in the project. You can copy them or download the full project from here:

No. Resource Action
1. GitHub Browse/Download
2. Project Thanks to @Plinzen

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:




Recommendations


What do You Think


Previous Post Next Post