UI/UX

Bottom Sheet Dialog Fragment in Android

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 guideline. 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.

Download – BottomSheetDialogFragment in Android Example

Auto Scroll ViewPager Android

https://paypal.me/
droidwave?locale.x=en_GB