Bottom Sheet Dialog - Android Studio - Java

How to create and show Bottom Sheet Dialog

In this tutorial, we will learn how to implement a Bottom Sheet Dialog in Android Studio using Java. Bottom Sheet Dialogs are a modern UI component from Material Design that slide up from the bottom of the screen to display additional content or actions without leaving the current screen.

Example Use Cases:

  • Share options
  • Quick action menus
  • Simple forms or confirmations

Code:

layout_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        style="@style/TextAppearance.Material3.TitleMedium"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Choose Option"
        android:textAlignment="center" />

    <TextView
        android:id="@+id/callTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Call" />

    <TextView
        android:id="@+id/messageTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Send Message" />

    <TextView
        android:id="@+id/blockTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Block" />

    <TextView
        android:id="@+id/cancelTv"
        style="@style/TextAppearance.Material3.LabelLarge"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Cancel" />

</LinearLayout>

activity.main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    android:padding="20dp"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:text="Bottom Sheet Dialog"
        android:textColor="#000"
        android:textSize="20sp" />

    <Button
        android:id="@+id/showBottomSheetBtn"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="100dp"
        android:text="Show Bottom Sheet" />

</LinearLayout>

MainActivity.java

package com.technifysoft.myapplication;

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

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);

        //init UI Views
        Button showBottomSheetBtn = findViewById(R.id.showBottomSheetBtn);

        //handle click listener, hide progress dialog
        showBottomSheetBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showBottomSheetDialog();
            }
        });

    }

    private void showBottomSheetDialog() {
        View view = LayoutInflater.from(this).inflate(R.layout.layout_bottom_sheet, null);

        BottomSheetDialog dialog = new BottomSheetDialog(this);
        dialog.setContentView(view);

        dialog.show();

        TextView callTv = view.findViewById(R.id.callTv);
        TextView messageTv = view.findViewById(R.id.messageTv);
        TextView blockTv = view.findViewById(R.id.blockTv);
        TextView cancelTv = view.findViewById(R.id.cancelTv);


        callTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, "Call clicked...!", Toast.LENGTH_SHORT).show();
            }
        });

        messageTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, "Message clicked...!", Toast.LENGTH_SHORT).show();
            }
        });

        blockTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, "Block clicked...!", Toast.LENGTH_SHORT).show();
            }
        });

        cancelTv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
                Toast.makeText(MainActivity.this, "Cancel clicked...!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Screenshots:



Comments

Popular posts from this blog

Manage External Storage Permission - Android Studio - Kotlin

Picture In Picture - Android Studio - Kotlin

SeekBar with Customization | Android Studio | Java