Android Bottom Sheet

     DESCRIPTION     

This tutorial is about:
 How to create bottom sheet using Fragment
 How to handle bottom sheet item/option clicks

     VIDEO     

     SOURCE CODE     

.

Step 1: Create a new project OR Open your project

Step 2: Add following library in build.gradle(Module:app) 

            implementation 'com.android.support:design:27.1.1'

Step 3: Create a fragment name it as "BootomSheetEx".

Step 4: Code

build.gradle(Module:app)

apply plugin: 'com.android.application'android {compileSdkVersion 27defaultConfig {applicationId "com.blogspot.devofandroid.bottomsheet"minSdkVersion 16targetSdkVersion 27versionCode 1versionName "1.0"testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"}buildTypes {release {minifyEnabled falseproguardFiles getDefaultProguardFile('proguard-android.txt') , 'proguard-rules.pro'}}}dependencies {implementation fileTree(dir: 'libs' , include: ['*.jar'])implementation 'com.android.support:appcompat-v7:27.1.1'//add design library to support Bottom Sheetimplementation 'com.android.support:design:27.1.1'implementation 'com.android.support.constraint:constraint-layout:1.1.0'implementation 'com.android.support:support-v4:27.1.1'testImplementation 'junit:junit:4.12'androidTestImplementation 'com.android.support.test:runner:1.0.2'androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'}

BootomSheetEx.java

package com.blogspot.devofandroid.bottomsheet;import android.content.Context;import android.os.Bundle;import android.support.design.widget.BottomSheetDialogFragment;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;/** * A simple {@link Fragment} subclass. */public class BootomSheetEx extends BottomSheetDialogFragment {private BottomSheetListener mBottomSheetListener;public BootomSheetEx() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater , ViewGroup container , Bundle savedInstanceState) {// Inflate the layout for this fragmentView v = inflater.inflate(R.layout.fragment_bootom_sheet_ex , container , false);TextView mCallTv = v.findViewById(R.id.callTv);TextView mSmsTv = v.findViewById(R.id.smsTv);TextView mBlockTv = v.findViewById(R.id.blockTv);//on clickmCallTv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {mBottomSheetListener.onOptionClick("Call Clicked...");dismiss(); //hide bottom sheet when clicked}});mSmsTv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {mBottomSheetListener.onOptionClick("Send message Clicked...");dismiss(); //hide bottom sheet when clicked}});mBlockTv.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {mBottomSheetListener.onOptionClick("Block number Clicked...");dismiss(); //hide bottom sheet when clicked}});return v;}public interface BottomSheetListener{void onOptionClick(String text);}@Overridepublic void onAttach(Context context) {super.onAttach(context);try {mBottomSheetListener = (BottomSheetListener) context;}catch (ClassCastException e){throw  new ClassCastException(context.toString());}}}

fragment_bootom_sheet_ex.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout 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:orientation="vertical"android:padding="5dp"tools:context=".BootomSheetEx"><TextViewandroid:text="Choose Action..."style="@style/TextAppearance.AppCompat.Headline"android:textColor="#000"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/callTv"android:text="Call"android:textColor="#000"android:textSize="18sp"android:layout_marginLeft="5dp"android:drawableLeft="@drawable/call"android:drawablePadding="10dp"android:gravity="center_vertical"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/smsTv"android:text="Send message"android:textColor="#000"android:textSize="18sp"android:layout_marginLeft="5dp"android:drawableLeft="@drawable/sms"android:drawablePadding="10dp"android:gravity="center_vertical"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewandroid:id="@+id/blockTv"android:text="Block Number"android:textColor="#000"android:textSize="18sp"android:layout_marginLeft="5dp"android:drawableLeft="@drawable/block"android:drawablePadding="10dp"android:gravity="center_vertical"android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><TextViewandroid:id="@+id/text"style="@style/TextAppearance.AppCompat.Headline"android:layout_alignParentTop="true"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="03012345678"android:textAlignment="center"/><Buttonandroid:id="@+id/showBtnSheetBtn"android:text="Show Bottom Sheet"android:layout_centerHorizontal="true"android:layout_centerVertical="true"style="@style/Base.Widget.AppCompat.Button.Colored"android:layout_width="wrap_content"android:layout_height="wrap_content" /></RelativeLayout>

MainActivity.java

package com.blogspot.devofandroid.bottomsheet;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.TextView;public class MainActivity extends AppCompatActivity implements BootomSheetEx.BottomSheetListener{TextView mTextView;Button mBtn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mTextView = findViewById(R.id.text);mBtn = findViewById(R.id.showBtnSheetBtn);mBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View view) {//show Bottom SheetBootomSheetEx bottomSheet = new BootomSheetEx();bottomSheet.show(getSupportFragmentManager() , "BottomSheetEx");}});}@Overridepublic void onOptionClick(String text) {//change text on clickmTextView.setText(text);}}

Step 5: Run Project:

Output: