Android Material Design Bottom Sheet View Dialog Example tutorial using design support library android studio

How to use BottomSheetBehavior STATE_COLLAPSED, STATE_EXPANDED and BottomSheetDialog.

In this tutorial we are going to create an amazing sliding view called as Bottom Sheet View. This view has two different type of views inside it, First one if Bottom Sheet View and second is Bottom Sheet Dialog View. The both view is different from each other because they holds different type of properties. So here is the complete step by step tutorial for Android Material Design Bottom Sheet Example tutorial using design support library android studio.

android-project-download-code-button

Note :  Please follow the below steps very carefully in order to implement Design support library in your android application project :

1. Open your project’s build.gradle ( Module : app ) file.

build-gradle-app

2. Please add below code inside your build.gradle ( Module : app ) file.

compile 'com.android.support:appcompat-v7:24.0.0'
compile 'com.android.support:design:24.0.0'

3. Screenshot of build.gradle ( Module : app ) file after adding above code.

bottom_sheet_library

Here your go friends….Now We are going start coding.

Method to Open Bottom sheet view is  :

bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

Method to Close Bottom sheet view is :

bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

Method to Create Bottom Sheet Dialog with current already created view is :

BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this);

View view1 = getLayoutInflater().inflate(R.layout.bottom_sheet_layout, null);

bottomSheetDialog.setContentView(view1);

bottomSheetDialog.show();

 

Android Material Design Bottom Sheet Example tutorial using design support library android studio.

Code for MainActivity.java file.

package com.android_examples.bottomsheet_android_examplescom;
import android.support.design.widget.BottomSheetBehavior;
import android.support.design.widget.BottomSheetDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button button1, button2, button3 ;

    BottomSheetBehavior bottomSheetBehavior ;

    BottomSheetDialog bottomSheetDialog ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button)findViewById(R.id.button1);
        button2 = (Button)findViewById(R.id.button2);
        button3 = (Button)findViewById(R.id.button3);

        bottomSheetBehavior = BottomSheetBehavior.from(findViewById(R.id.RelativeLayoutSheet));

        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);

            }
        });

        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

            }
        });

        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                bottomSheetDialog = new BottomSheetDialog(MainActivity.this);

                View view1 = getLayoutInflater().inflate(R.layout.bottom_sheet_layout, null);

                bottomSheetDialog.setContentView(view1);

                bottomSheetDialog.show();

            }
        });


    }
}

Code for activity_main.xml layout file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/CoordinatorLayout1"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">


<RelativeLayout
    android:id="@+id/RelativeLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <Button
        android:id="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Show Bottom Sheet View"/>

    <Button
        android:id="@+id/button2"
        android:layout_below="@+id/button1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Hide Bottom Sheet View"/>

    <Button
        android:id="@+id/button3"
        android:layout_below="@+id/button2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Show Bottom Sheet Dialog"/>

</RelativeLayout>

    <include layout="@layout/bottom_sheet_layout" />


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

Code for bottom_sheet_layout.xml file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:id="@+id/RelativeLayoutSheet"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="250dp"
    app:layout_behavior="@string/bottom_sheet_behavior"
    android:background="#2196F3"
    app:behavior_hideable="true"
    >


    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 1 on Bottom Sheet"
        android:id="@+id/buttonSheet1"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 2 on Bottom Sheet"
        android:id="@+id/buttonSheet2"
        android:layout_below="@+id/buttonSheet1"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 3 on Bottom Sheet"
        android:id="@+id/buttonSheet3"
        android:layout_below="@+id/buttonSheet2"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 4 on Bottom Sheet"
        android:id="@+id/buttonSheet4"
        android:layout_below="@+id/buttonSheet3"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Button 5 on Bottom Sheet"
        android:id="@+id/buttonSheet5"
        android:layout_below="@+id/buttonSheet4"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />


</RelativeLayout>

Screenshots:

bottom_sheet_2

 

Android Material Design Bottom Sheet Example tutorial using design support library android studio

 

Screenshot of Bottom Sheet Dialog :

bottom_sheet_3

Click here to download Android Material Design Bottom Sheet Example tutorial using design support library android studio project with source code.

2 Comments

  1. Best explanation…

Leave a Reply

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