This tutorial is about:
How to create bottom sheet using Fragment
How to handle bottom sheet item/option clicks
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 27
defaultConfig {
applicationId "com.jigopost.bottomsheet"
minSdkVersion 16
targetSdkVersion 27
versionCode 1
versionName "1.0"
testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}
buildTypes {
release {
minifyEnabled false
proguardFiles 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 Sheet
implementation '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.jigopost.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
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
View 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 click
mCallTv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBottomSheetListener.onOptionClick("Call Clicked...");
dismiss(); //hide bottom sheet when clicked
}
});
mSmsTv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBottomSheetListener.onOptionClick("Send message Clicked...");
dismiss(); //hide bottom sheet when clicked
}
});
mBlockTv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mBottomSheetListener.onOptionClick("Block number Clicked...");
dismiss(); //hide bottom sheet when clicked
}
});
return v;
}
public interface BottomSheetListener{
void onOptionClick(String text);
}
@Override
public 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">
<TextView
android:text="Choose Action..."
style="@style/TextAppearance.AppCompat.Headline"
android:textColor="#000"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android: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" />
<TextView
android: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" />
<TextView
android: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"?>
<RelativeLayout
xmlns: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">
<TextView
android: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"/>
<Button
android: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.jigopost.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;
@Override
protected 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() {
@Override
public void onClick(View view) {
//show Bottom Sheet
BootomSheetEx bottomSheet = new BootomSheetEx();
bottomSheet.show(getSupportFragmentManager(), "BottomSheetEx");
}
});
}
@Override
public void onOptionClick(String text) {
//change text on click
mTextView.setText(text);
}
}
Step 5: Run Project:
Output:
