Category

Material Design

Category

In our last Persistent Bottom Sheet tutorial, we worked on the persistent bottom sheet. I told you in my last tutorial, that we can display the bottom sheet in two way. First is the persistent bottom sheet and second modal bottom sheet. I hope you now familiar with the persistent bottom sheet. In this tutorial, I will explore the bottom sheet in more detail.

The modal bottom sheet works as a menu or a dialog with options. The modal bottom sheet has a higher elevation than the persistent bottom sheet. Generally, we use a bottom sheet according to our project requirements.

We can use the modal bottom sheet with two way which is Dialog or Fragment. Let’s take an example of both.

Add Material design Gradle in your project Gradle file and sync your project.

implementation 'com.google.android.material:material:1.1.0-alpha08'

Now we will create a layout for the bottom sheet. You can make two layouts for both dialog and fragment. Because this is an example so I will use one layout for both dialog and fragment.

First I am going to design a fragment class. Here is full code of BottomSheetDialogFragment.java class

package com.becody.bottomsheetfragment;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

/**
 * Created by becody on 18,08,2019
 */
public class BottomSheetDialogFragment extends com.google.android.material.bottomsheet.BottomSheetDialogFragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_bottom_sheet, container, false);
        return view;
    }
}
fragment_bottom_sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/title"
            android:textColor="@android:color/black"
            android:textSize="16sp"
            android:textStyle="bold" />

        <TextView
            android:layout_marginTop="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/description" />

    </LinearLayout>
</RelativeLayout>

I have added two buttons in my activity_main.xml file. By clicking on the 1st button, the bottom sheet will display using fragment and by clicking on the 2nd button, the bottom sheet will display using dialog.

activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnFragment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="272dp"
        android:text="Show Fragment Bottom Sheet"
        app:layout_constraintHorizontal_bias="0.544"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btnDialog"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Show Dialog Bottom Sheet"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/btnFragment"
        app:layout_constraintStart_toStartOf="@+id/btnFragment"
        app:layout_constraintTop_toBottomOf="@+id/btnFragment"
        app:layout_constraintVertical_bias="0.188" />

</androidx.constraintlayout.widget.ConstraintLayout>

Code of the bottom sheet by fragment

 private void showFragmentBottomSheet(){
        BottomSheetDialogFragment bottomSheetFragment = new BottomSheetDialogFragment();
        bottomSheetFragment.show(getSupportFragmentManager(), bottomSheetFragment.getTag());
    }

Code of the bottom sheet by dialog

private void showDialogFragmentBottomSheet(){
        View dialogView = getLayoutInflater().inflate(R.layout.fragment_bottom_sheet, null);
        BottomSheetDialog dialog = new BottomSheetDialog(this);
        dialog.setContentView(dialogView);
        dialog.show();
    }

that it’s. See the full code of ActivityMain.java class

package com.becody.bottomsheetfragment;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.google.android.material.bottomsheet.BottomSheetDialog;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Button btnFragment = findViewById(R.id.btnFragment);
        btnFragment.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showFragmentBottomSheet();
            }
        });

        Button btnDialog = findViewById(R.id.btnDialog);
        btnDialog.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                showDialogFragmentBottomSheet();
            }
        });

    }
    private void showFragmentBottomSheet(){
        BottomSheetDialogFragment bottomSheetFragment = new BottomSheetDialogFragment();
        bottomSheetFragment.show(getSupportFragmentManager(), bottomSheetFragment.getTag());
    }
    private void showDialogFragmentBottomSheet(){
        View dialogView = getLayoutInflater().inflate(R.layout.fragment_bottom_sheet, null);
        BottomSheetDialog dialog = new BottomSheetDialog(this);
        dialog.setContentView(dialogView);
        dialog.show();
    }
}

Thanks for reading the tutorial. Please like our Facebook page for a new and latest tutorial.