How to implement Android Bottom Sheet Material Design

In this tutorial, we are going to learn how to implement android bottom sheet in Material design. Android bottom sheet is a kind of panel that slides from the bottom of the screen to display additional content.

The android bottomsheet is use to display menu like content that is more that three. The android bottom sheet is an alternative to menu and dialog and it comes in handy when you plan to display content that is more that three.

Android bottomsheet is of two type – Persistent Bottom Sheet and Dialog 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.

Modal bottom sheets are alternatives to menus, or simple dialogs, 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 rest of the screen dims, giving focus to the bottom sheet.

Before we go deeper into this tutorial, it is important for us to understand what we are planning to achieve. Below is the screen-shot of the application we will be creating.

Android Bottom sheet

Lets start to soil our hands in code. we will create our project in our IDE. For this tutorial, I am using the following tools and environment, feel free to use what works for you.

Windows 7

Android Studio

Sony Xperia ZL

Min SDK 14

Target SDK 23

To create a new android application project, follow the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: AndroidBottomSheet

Package: com.inducesmile.androidbottomsheet

Select Blank Activity

Keep other default selections

Continue to click on next button until Finish button is active, then click on Finish Button.

Go to the res folder, then double click on the values folder and double click on the colors.xml file and add the following lines of codes. This will holder all the colors we will use in this tutorial.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="colorBlack">#000000</color>
    <color name="colorBackground">#def5fc</color>
</resources>

Now, head over to the strings.xml  file and modify the content with the code below.

<resources>
    <string name="app_name">Android Bottom Sheet Example</string>
    <string name="bottom_sheet">Bottom Sheet</string>
    <string name="save">Save</string>
    <string name="edit">Edit</string>
    <string name="print">Print</string>
    <string name="share">Share</string>
</resources>

In the styles.xml  file located at res/values/styles.xml , modify the code with the code snippet below.

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="MaterialDialogSheet" parent="@android:style/Theme.Dialog">
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:backgroundDimEnabled">true</item>
        <item name="android:windowIsFloating">false</item>
        <item name="android:windowAnimationStyle">@style/MaterialDialogSheetAnimation</item>
    </style>
    <style name="MaterialDialogSheetAnimation">
        <item name="android:windowEnterAnimation">@anim/popup_show</item>
        <item name="android:windowExitAnimation">@anim/popup_hide</item>
    </style>
</resources>

For the animation that will move up and down the bottom sheet, we are going to create a new folder named anim in our project res folder root.

Right click on the res folder, click of new folder in the pop-out menu, name the folder anim and save it.

Now, we will create two amination layout fle – pop_hide.xml  and pop_show.xml .

Open the pop_hide.xml  and paste the code below.

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="0"
        android:toYDelta="100%p"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

Open the pop_show.xml  and paste the code below

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="300"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>
</set>

As you can see from the animation layout files, the first one moves from 0 to 100 while the second one moves from 100 to 0 in 300 milliseconds.

We will create the layout file for the bottom sheet dialog. Right click on your layout file, select new file and name the file botton_sheet.xml .

Copy and paste the code below to this layout file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="32dp"
    android:paddingTop="32dp"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:layout_weight="1"
        android:layout_marginBottom="60dp"
        android:baselineAligned="false">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:background="@android:drawable/ic_menu_save"
                android:contentDescription="@string/app_name"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorBlack"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:text="@string/save"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/edit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:background="@android:drawable/ic_menu_edit"
                android:contentDescription="@string/app_name"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorBlack"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:text="@string/edit"/>
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:baselineAligned="false">
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/print"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:background="@android:drawable/ic_popup_disk_full"
                android:contentDescription="@string/app_name"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorBlack"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:text="@string/print"/>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="vertical">
            <ImageView
                android:id="@+id/share"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="8dp"
                android:background="@android:drawable/ic_menu_share"
                android:contentDescription="@string/app_name"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorBlack"
                android:textSize="16sp"
                android:layout_marginTop="8dp"
                android:text="@string/share"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

You can see that I made use of the android default icons. Feel free to use your own icons. If you are using a grid view as we did in this tutorial, you icon size should be 48 dp according to the design guide of android bottom sheet.

The main layout file for the MainActivity file is located in the layout folder. Double click on activity_main.xml  file to open the file in your IDE.

We are going to add a Button widget control in this layout file so that when the button view is click it will slide the android bottom sheet in.

Copy and paste the below on to the main layout file.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorBackground"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">
    <Button
        android:id="@+id/open_close_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:contentDescription="@string/app_name"
        android:padding="16dp"
        android:text="@string/bottom_sheet"
        android:textAllCaps="false" />
</RelativeLayout>

Finally, we will open our project MainActivity.java  file located in our project package folder. In this activity class, we will obtain the instance of the button view control and then we will wire an event to the button for click response.

We have also create a method name opemBottonSheet() ; Inside this method, the bottomsheet dialog is created. The bottom_sheet.xml  layout file we previously created is inflated and use as a parameter in the dialog class setContentView  method.

Copy the code below and paste it inside your MainActivity class.

import android.app.Dialog;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button bottomSheetButton = (Button)findViewById(R.id.open_close_sheet);
        bottomSheetButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                openBottomSheet();
            }
        });
    }
    public void openBottomSheet() {
        View view = getLayoutInflater().inflate(R.layout.bottom_sheet, null);
        ImageView saveIcon = (ImageView)view.findViewById(R.id.save);
        ImageView editIcon = (ImageView)view.findViewById(R.id.edit);
        ImageView printIcon = (ImageView)view.findViewById(R.id.print);
        ImageView shareIcon = (ImageView)view.findViewById(R.id.print);
        final Dialog mBottomSheetDialog = new Dialog(MainActivity.this, R.style.MaterialDialogSheet);
        mBottomSheetDialog.setContentView(view);
        mBottomSheetDialog.setCancelable(true);
        mBottomSheetDialog.getWindow().setLayout(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
        mBottomSheetDialog.getWindow().setGravity(Gravity.BOTTOM);
        mBottomSheetDialog.show();
        saveIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Saving...", Toast.LENGTH_LONG).show();
                mBottomSheetDialog.dismiss();
            }
        });
        editIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Editing...", Toast.LENGTH_LONG).show();
                mBottomSheetDialog.dismiss();
            }
        });
        printIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Printing...", Toast.LENGTH_LONG).show();
                mBottomSheetDialog.dismiss();
            }
        });
        shareIcon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Sharing...", Toast.LENGTH_LONG).show();
                mBottomSheetDialog.dismiss();
            }
        });
    }
}

Run your application and see for yourself what we have just created.

This brings us to the end of this tutorial, If you find anything confusing kindly contact me with your questions or use the comment box below.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact me.

Remember to subscribe with your email address so that you will be among the first to receive my new post once it is published.

Please if you love this tutorial, kindly download my new android app – Daily Pocket Calculator – in Google Play Store and let me know what you think about it.

OTHER INTERESTING POSTS:

Add a Comment