How To Use BottomSheet In Android

BottomSheet is one of the important aspect of material design in Android which comes with support library. This is really an amazing widget to be used to give a quick set of options on a sheet, which appears from the bottom with animation.

bottomsheet

 

Implementation of BottomSheet is as easy as a beginner developer can also implement this within few minutes. So lets have a look on the implementation –

Setting up a bottomsheet

Design support library 23.2.0 introduced bottomsheet so you need design library 23.2 or above. Add the design support library within your build.gradle file under dependencies and sync your project with gradle files.

compile 'com.android.support:design:23.2.0'

 

Read more – How To Use BottomSheetDialog In Android

Next, open the layout xml file that need to include this sheet. Now you have to create a ViewGroup i.e, RelativeLayout, LinearLayout etc. with these following attributes –

app:behavior_hideable="true"
app:behavior_peekHeight="@dimen/peek__height"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

And here is the entire ViewGroup looks like –

<RelativeLayout
        android:id="@+id/rlBottomsheet"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@android:color/darker_gray"
        android:elevation="20dp"
        app:behavior_hideable="true"
        app:behavior_peekHeight="@dimen/peek__height"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <TextView
            android:id="@+id/tvHello1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/activity_vertical_margin"
            android:text="Hello Text 1"
            android:textSize="13pt"/>

        <TextView
            android:id="@+id/tvHello2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tvHello1"
            android:paddingLeft="@dimen/activity_vertical_margin"
            android:paddingRight="@dimen/activity_vertical_margin"
            android:text="Hello Text 2"
            android:textSize="12pt"
            android:textStyle="bold"/>

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_below="@+id/tvHello2"
            android:layout_marginLeft="@dimen/activity_vertical_margin"
            android:layout_marginRight="@dimen/activity_vertical_margin"
            android:layout_marginTop="@dimen/activity_vertical_margin"
            android:text="onetouchcode.com"/>

    </RelativeLayout>

You should remember that the ViewGroup should be direct child of  CoordinatorLayout.

Expanding your bottom sheet

Declare class member of type BottomSheetBehavior

BottomSheetBehavior mBottomSheetBehavior;

Now do the final step of expanding your sheet –

View bottomSheet = findViewById(R.id.rlBottomsheet);
      mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
      Button btnOpenBottomSheet = (Button) findViewById(R.id.btnOpenBottomSheet);
      btnOpenBottomSheet.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View view) {
              mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
          }
      });

Few more thing you should know that BottomSheetBehaviour object has several states those are –

/**
 * The bottom sheet is dragging.
 */
STATE_DRAGGING

/**
 * The bottom sheet is settling.
 */
STATE_SETTLING

/**
 * The bottom sheet is expanded.
 */
STATE_EXPANDED

/**
 * The bottom sheet is collapsed.
 */
STATE_COLLAPSED

/**
 * The bottom sheet is hidden.
 */
STATE_HIDDEN

So you can perform your desired operation once it’s state changed. To do so you have to register for BottomSheetCallback, here is the snippet –

mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View bottomSheet, int newState) {

            }

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

            }
        });

 

I hope this will be useful to all of you, so make sure to share this article with your friends and colleagues so they can also learn.

Happy Coding!!!

Leave a Reply

Your email address will not be published. Required fields are marked *