Bottom Sheet Dialog Fragment - Android Studio - Java

How to create and show Bottom Sheet Dialog

In this tutorial, we will learn how to implement a Bottom Sheet Dialog Fragment 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

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:id="@+id/main"
    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.devofandroid;

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

import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

import com.technifysoft.devofandroid.databinding.ActivityMainBinding;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        binding = ActivityMainBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        //handle click listener, show bottom sheet dialog fragment
        binding.showBottomSheetBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                MyBottomSheetDialogFragment bottomSheetDialogFragment = MyBottomSheetDialogFragment.newInstance(
                        "Atif Pervaiz",
                        "+923084703416"
                );
                bottomSheetDialogFragment.show(getSupportFragmentManager(), "MyBottomSheetDialogFragment");

            }
        });
    }
}

fragment_my_bottom_sheet_dialog.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="20dp"
    tools:context=".MyBottomSheetDialogFragment">

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

MyBottomSheetDialogFragment.java

package com.technifysoft.devofandroid;

import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.google.android.material.bottomsheet.BottomSheetDialogFragment;
import com.technifysoft.devofandroid.databinding.FragmentMyBottomSheetDialogBinding;

/**
 * A simple {@link Fragment} subclass.
 * Use the {@link MyBottomSheetDialogFragment#newInstance} factory method to
 * create an instance of this fragment.
 */
public class MyBottomSheetDialogFragment extends BottomSheetDialogFragment {

    private FragmentMyBottomSheetDialogBinding binding;

    private static final String TAG = "BSDF_TAG";


    // Rename parameter arguments, choose names that match
    // the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
    private static final String ARG_PARAM_NAME = "name";
    private static final String ARG_PARAM_PHONE = "phone";

    // Rename and change types of parameters
    private String mParamName;
    private String mParamPhone;

    public MyBottomSheetDialogFragment() {
        // Required empty public constructor
    }

    /**
     * Use this factory method to create a new instance of
     * this fragment using the provided parameters.
     *
     * @param paramName  Name of the person.
     * @param paramPhone Phone number of the person.
     * @return A new instance of fragment MyBottomSheetDialogFragment.
     */
    // Rename and change types and number of parameters
    public static MyBottomSheetDialogFragment newInstance(String paramName, String paramPhone) {
        MyBottomSheetDialogFragment fragment = new MyBottomSheetDialogFragment();
        Bundle args = new Bundle();
        args.putString(ARG_PARAM_NAME, paramName);
        args.putString(ARG_PARAM_PHONE, paramPhone);
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getArguments() != null) {
            mParamName = getArguments().getString(ARG_PARAM_NAME);
            mParamPhone = getArguments().getString(ARG_PARAM_PHONE);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        binding = FragmentMyBottomSheetDialogBinding.inflate(inflater, container, false);
        return binding.getRoot();
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

        Log.d(TAG, "onViewCreated: Name: " + mParamName);
        Log.d(TAG, "onViewCreated: Phone: " + mParamPhone);

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

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

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

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

Screenshots




Comments

Popular posts from this blog

Manage External Storage Permission - Android Studio - Kotlin

SeekBar with Customization | Android Studio | Java

How to export an Android Studio project as a zip file?