Android Bottom Sheet Example - Android Support Library Tutorial

Bottom Sheets is excellent user experience design component when comparing long press dialog pop-up box, context menu where the user can consume options easily from the bottom with attractive and meaningful user interface. So, let us dive into the implementation of Bottom Sheets in the Android application using official android support library.

Prerequisites:

1. Android Studio and SDK installed - How to install android studio
2. Bottom Navigation Drawer Tutorial - If you're interested check out this article

Getting Started:

Add support library dependency in build.gradle file and sync it via android studio

compile 'com.android.support:design:25.2.0'
compile 'com.android.support:support-v4:25.2.0'    

Use gradle sync to download all the support libraries and import to your project.

Adding Layout: 

In order to add Bottom sheets to the activity, NestedScrollView is used with additionally bottom sheet behaviour with other options. check out the layout xml file below.

<?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="com.ivisionblog.apps.bottomsheetexample.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:id="@+id/recyclerview"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="350dp"
        android:clipToPadding="true"
        app:behavior_hideable="true"
        android:elevation="14dp"
        android:background="@android:color/holo_blue_light"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


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

Bottom Sheet behavior is adopted for the nested scroll view with attribute named as app:layout_behavior which implements the bottom sheet behavior.

Java Implementation:

We'll try to add Bottom Sheet dialog box behavior in this tutorial, simply extend your fragment class with BottomSheetDialogFragment and start implementing the onCreateView method for building the fragment user interface, check the code below for understanding.

public class BottomDialogFragment extends BottomSheetDialogFragment {
    public static BottomDialogFragment getInstance() {
        return new BottomDialogFragment();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view =  inflater.inflate(R.layout.bottom_sheet_fragment, container, false);
        ((TextView)view.findViewById(R.id.name)).setText("Elon Musk");
        return view;
    }
}

Thus this will help in creating fragment and inflating into the bottom sheet view, now let us see how to control the bottom sheet from our activity by responding to user clicks. Since i've used Recyclerview added click event and binding the bottom sheet behavior with recyclerview click event.

public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;
    private BottomSheetBehavior mBottomSheetBehavior;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

        View bottomSheet = findViewById( R.id.bottom_sheet );
        mBottomSheetBehavior = BottomSheetBehavior.from(bottomSheet);
        mBottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(View bottomSheet, int newState) {
                if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                    mBottomSheetBehavior.setPeekHeight(0);
                }
            }

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

            }
        });
        ContactsAdapter contactsAdapter = new ContactsAdapter(generateData(),mBottomSheetBehavior,getSupportFragmentManager());
        mRecyclerView.setAdapter(contactsAdapter);
        mBottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);

    }
}

Bottom Sheet behavior based on Recyclerview click Event:

Now let us map recyclerview click event with bottom sheet behavior event, so that whenever it is clicked bottom sheet opens up with transition from down. check the Recyclerview adapter code for detailed understanding.

 @Override
    public void onBindViewHolder(ContactsHolder holder, int position) {
        ContactsModal contact = mContactsModals.get(position);

        holder.mPhoneView.setText(contact.getmPhoneNumber());
        holder.mContactsNameView.setText(contact.getmName());
        holder.mLinearLayout.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                BottomDialogFragment bottomSheetDialog = BottomDialogFragment.getInstance().getInstance();
                bottomSheetDialog.show(mFm, "Custom Bottom Sheet");
            }
        });
    }

Bottom Sheet Useful Methods:

1.  BottomSheetDialog.show() - To open the Bottom sheet dialog from hidden state to expanded state
2.  BottomSheetBehavior.setState() - To set the state of the bottom sheet behavior from java code based on events.
3. BottomSheetBehavior.setPeekHeight(int) - To set the Peek Height of the bottom sheet from the bottom.  

For full working sample, follow the Github repo. Just clone and open in android studio to execute the bottom navigation drawer view android example application. This Bottom Sheet view is bundled with Android support library officially and it's worth trying out in your application.

Hope you have enjoyed the post, post you own thoughts, additional points as comments. For complete code, projects, hugs/bugs just drop me mail/ chat in Facebook/Google+. share is care.