This is the second post in the series of  our Android Tutorials. These tutorials will give a simple and clear understanding of various tricky topics that always take the better of us.

A Bottom sheet is material design Component that has been recently added to Support library, in a version of design support library 23.2 version. A  Bottom sheet is a sheet that slides up from the bottom edge of the screen. Bottom sheets are displayed as a result of user triggered action, and also it can reveal additional content by swiping up.

The two types of Bottom Sheet are as follows:

Modal Bottom Sheet

Modal bottom sheets are alternatives to menus, or simple dialog, and can display deep-linked content from another app. They appear above other UI elements and must be dismissed in order to interact with the underlying content. When a modal bottom sheet slides into the screen, the activity goes to onPause() state , giving focus to the bottom sheet.

Persistent Bottom Sheet

Persistent bottom sheets display in-app content that supplements the main view. It remains visible even when not actively in use, resting at the same elevation as an app and integrating with its content.

Let’s start with the Modal Bottom Sheet Example:

Create a project and add design support library v23.2.Add dependency to build.gradle file

compile ‘com.android.support:design:(latest version)’

In activity main.xml add button to open bottomsheet

<RelativeLayout
xmlns:android=”https://schemas.android.com/apk/res/android”
xmlns:tools=”https://schemas.android.com/tools”
android:id=”@+id/activity_main”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:context=”.MainActivity”>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=””@+id/button
android:text=”showBottomSheet”
android:layout_centerHorizontal=”true”/>

In activity main.xml add button to open bottomsheet

<RelativeLayout
xmlns:android=”https://schemas.android.com
/apk/res/android”
xmlns:tools=”https://schemas.android.com
/tools”
android:id=”@+id/activity_main”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:context=”.MainActivity”>
<Button
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=””@+id/button
android:text=”showBottomSheet”
android:layout_centerHorizontal=”true”/>

Here is code MainActivity.java file.

public class MainActivity extends AppCompatActivity{
Button button;
@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button)findViewById(R.id.button);
button.setOnClickListner(new View.OnClickListner()){
@Override
public void onClick(View view){
ShowSheet();
}
});
}

private void ShowSheet(){
View view = Layoutinflater.from(context).inflate(R.layout.bottomsheetlayout,null);
BottomSheetDialog bottomsheetdialog= new BottomSheetDialog(this);
bottomsheetdialog.setContentView(view);
bottomsheetdialog.show();
}
}

Persistent Bottom Sheet remains visible when it is not actively in use. Most common example of persistent bottomsheet is google maps where all the details is shown in bottomsheet.

To make to persistent Bottom sheet you just need to add Coordinator Layout in your layout as a parent layout and add its beahvior as behavior is most important to set. Let’s see how to do it:

Create a new layout for the layout file content.xml

<RelativeLayout
xmlns:android=”https://schemas.android.com/apk/res/android”
xmlns:android=”https://schemas.android.com/apk/res-auto”
android:id=”@+id/bottomsheet”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:padding=”10dp”
app:behavior_hideable=”true”
app:behavior_peekheight=”50dp”
app:elevation=”4dp”
app:layout_behavior=”@string/bottom_sheet_behavior”>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/content”/>
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”@string/content”/>

Come to activity_main.xml file add this lines

<android.support.design.widget.CoordinatorLayout
xmlns:android=”https://schemas.android.com/apk/res/android”
xmlns:android=”https://schemas.android.com/HYPERLINK “https://schemas.android.com/tools”tools”
android:id=”@+id/activity_main”
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:context=”com.example.MainActivity”
<RelativeLayout

android:id=”@+id/activity_main”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<Button

android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”button”
android:layout_marginTop=”50dp”
android:layout_centerHorizontal=”true”/>

<include
layout=”@layout/content”/>

In MainActivity.java add the following code. I added BottomSheetBehavior callback interface to listen changes in bottomsheet states.

public MainActivity extends AppcompatActivity{
BottomsheetBehavior bottomsheetbehavior;
Button button;
View view;

@Override
protected void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button = (Button)findViewById(R.id.button);
button.setOnClickListner(new View.OnClickListner()){

@Override
public void onClick(View view){
if (bottomsheetbehavior.getState()==BottomSheetBeahvior.STATE_COLLAPSED){
bottomsheetbehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
}
else{
bottomsheetbehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

     }
  }
});

view = findViewById(R.id.bottomsheet);
bottomsheetbehavior = BottomSheetBehavior.from(view);
bottomsheetbehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallbac(){

@Override
public void onStateChanged(@NonNull View bottomSheet,int newState){
switch(newState){
Case BottomSheetBehavior.STATE_DRAGGING:
break;

Case BottomSheetBehavior.STATE_SETTLING:
break;

Case BottomSheetBehavior.STATE_EXPANDED:
break;

Case BottomSheetBehavior.STATE_COLLAPSED:
break;

Case BottomSheetBehavior.STATE_HIDDEN:
break;
    }
  }

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

//Do whatever you want to do

       }
    });
  }
}

We can set the behavior of bottomsheet either in xml or java code by adding following lines of code:

bottomsheetbehavior.setHideable();

bottomsheetbehavior.setPeekHeight();

bottomsheetbehavior.setState();

here I set all these values in the content.xml file

BottomSheet is great addition to design support library. we can use it show content chooser action or show some extra content to user  when some action is triggered.