Android material design introduces two types of BottomSheet. Modal Bottom Sheets and Persistent Bottom Sheets. In this post, we’ll learn modal bottom sheets. In other words, you can say we’ll use BottomSheetDialogFragment that renders your fragment as a modal bottom sheet.
Modal Bottom Sheets fundamentally acting as dialog. We can implement it using BottomSheetDialogFragment or BottomSheetDialog. Bottom Sheets evaluation is higher than application. While you touch the outside content of dialog then the bottom sheet is dismissed. Even if dragged vertically it dismissed by completely sliding them down.
BottomSheetDialogFragment Demo App
The final outcome below
In this article, I’m going to create a sample that contains BottomSheetDialogFragment with proper material design guidelines. So let’s get started
1. Create a new project and add material dependencies
implementation 'com.google.android.material:material:1.0.0'
2. Design Bottom Sheet layout.
Considering material design guideline, I’m creating a layout file for the bottom sheet. go to res folder and create file named is bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="8dp"
>
<TextView
android:id="@+id/textView"
android:layout_marginTop="8dp"
android:drawableLeft="@drawable/ic_share"
android:drawableStart="@drawable/ic_share"
android:text="@string/action_share"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="@style/ActionItem"
/>
<TextView
android:id="@+id/textView2"
android:drawableLeft="@drawable/ic_upload"
android:drawableStart="@drawable/ic_upload"
android:text="@string/action_upload"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView"
style="@style/ActionItem"
/>
<TextView
android:id="@+id/textView3"
android:drawableLeft="@drawable/ic_copy"
android:drawableStart="@drawable/ic_copy"
android:text="@string/action_copy"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView2"
style="@style/ActionItem"
/>
<TextView
android:id="@+id/textView4"
android:drawableLeft="@drawable/ic_print"
android:drawableStart="@drawable/ic_print"
android:text="@string/action_print"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/textView3"
style="@style/ActionItem"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
2.1 Update for colors.xml files
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#008577</color> <color name="colorPrimaryDark">#00574B</color> <color name="colorAccent">#D81B60</color> <color name="colorGray">#747474</color> </resources>
2.2 Paste below code in dimens
<?xml version="1.0" encoding="utf-8"?> <resources> <dimen name="default_margin">16dp</dimen> <dimen name="drawable_padding">24dp</dimen> <dimen name="text_size">16sp</dimen> <dimen name="normal_padding">16dp</dimen> </resources>
2.3. Create a new style for bottom sheet button
<style name="ActionItem">
<item name="android:textSize">@dimen/text_size</item>
<item name="android:drawablePadding">@dimen/drawable_padding</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:padding">@dimen/normal_padding</item>
</style>
2.4. At last add strings entry inside strings.xml
<resources> <string name="app_name">Bottom Sheet Dialog Fragment</string> <string name="action_share">Share</string> <string name="action_upload">Upload</string> <string name="action_copy">Copy</string> <string name="action_print">Print</string> </resources>
3. Create a subclass of BottomSheetDialogFragment
In src folder create a new java file name is ActionBottomDialogFragment which is extending BottomSheetDialogFragment. Apart from this, I’m exposing an interface (callback) that notify the parent activity when one of the buttons is tapped on the Bottom Sheet.
package com.example.bottomsheetdialogfragment;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
public class ActionBottomDialogFragment extends BottomSheetDialogFragment
implements View.OnClickListener {
public static final String TAG = "ActionBottomDialog";
private ItemClickListener mListener;
public static ActionBottomDialogFragment newInstance() {
return new ActionBottomDialogFragment();
}
@Nullable @Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
@Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.bottom_sheet, container, false);
}
@Override public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
super.onViewCreated(view, savedInstanceState);
view.findViewById(R.id.textView).setOnClickListener(this);
view.findViewById(R.id.textView2).setOnClickListener(this);
view.findViewById(R.id.textView3).setOnClickListener(this);
view.findViewById(R.id.textView4).setOnClickListener(this);
}
@Override
public void onAttach(Context context) {
super.onAttach(context);
if (context instanceof ItemClickListener) {
mListener = (ItemClickListener) context;
} else {
throw new RuntimeException(context.toString()
+ " must implement ItemClickListener");
}
}
@Override
public void onDetach() {
super.onDetach();
mListener = null;
}
@Override public void onClick(View view) {
TextView tvSelected = (TextView) view;
mListener.onItemClick(tvSelected.getText().toString());
dismiss();
}
public interface ItemClickListener {
void onItemClick(String item);
}
}
4. Open the activity XML file and add below code
This XML files I’m adding one TextView for displaying callback and Button for showing bottom sheet on button tap
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:background="@color/colorAccent"
android:onClick="showBottomSheet"
android:padding="8dp"
android:text="Show BottomSheet"
android:textColor="#fff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.4"
/>
<TextView
android:id="@+id/tvSelectedItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="32dp"
android:textSize="@dimen/text_size"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button"
tools:text="Selected Item"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
5. Finally, Open the MainActivity and paste below code
package com.example.bottomsheetdialogfragment;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity
implements ActionBottomDialogFragment.ItemClickListener {
TextView tvSelectedItem;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tvSelectedItem = findViewById(R.id.tvSelectedItem);
}
public void showBottomSheet(View view) {
ActionBottomDialogFragment addPhotoBottomDialogFragment =
ActionBottomDialogFragment.newInstance();
addPhotoBottomDialogFragment.show(getSupportFragmentManager(),
ActionBottomDialogFragment.TAG);
}
@Override public void onItemClick(String item) {
tvSelectedItem.setText("Selected action item is " + item);
}
}
Simply, In this activity, I’m showing the Bottom Sheet onClick() event of the button. Now run the application, the final outcome will same as the video.
Conclusion
That’s All! In this android tutorial, we have learned BottomSheetDialogFragment implementation in our app. I hope you enjoyed this article. Help me by sharing this post with all your friends who learning android app development.
5 Comments
Class, thank you!
How to send data from fragment to bottomsheet?
you can use interfaces
Gracias, funciona bien
My pleasure