How to Create Bottom Sheet in android studio

Hello today will learn about How to create Bottom sheet in android studio.

Bottom sheet dialog is a dialog that appears coming from the bottom when we use it on a button or any other function.Let's see how to implement this method in your project.
First we will create a project After creating the project we will see two files activity_main and MainActivity. We have used a button in the activity_main xml file, on clicking of which the bottom sheet will appear from the bottom.Whose code given below

activity_main

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/bottomSheet_dialog"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Bottom Sheet" />

</RelativeLayout>

Here we have used a button on which on pressing we will see the bottom sheet.Now we use this layout in MainActivity.java class. Let's see how to implement this Layout.

MainActivity.java

package com.example.bottomexample;

import androidx.appcompat.app.AppCompatActivity;

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

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

public class MainActivity extends AppCompatActivity {
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        btn = findViewById(R.id.bottomSheet_dialog);
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                final BottomSheetDialog bottomSheetDialog = new BottomSheetDialog(MainActivity.this, R.style.BottomSheetDialogTheme);
                View bottomView = LayoutInflater.from(getApplicationContext()).inflate(R.layout.bottomsheet_layout, (LinearLayout) findViewById(R.id.bottomsheet_holder));
                Button searchBtn, downloadBtn;
                searchBtn = bottomView.findViewById(R.id.search);
                downloadBtn = bottomView.findViewById(R.id.download);
                searchBtn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Search", Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                    }
                });

                downloadBtn.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Download...", Toast.LENGTH_SHORT).show();
                        bottomSheetDialog.dismiss();
                    }
                });
                bottomSheetDialog.setContentView(bottomView);
                bottomSheetDialog.show();

            }
        });
    }
}
 

Here we have taken a button on which the bottom sheet will appear on pressing.Then we have a class of type BottomSheetDialog in which we will see two parameters context and style.Then we have gated this layout in which we will show the layout which we want to show.If we see any error in this then its code is given below.

BottomSheetDialogTheme

   <style name="BottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheet</item>
    </style>
    <style name="BottomSheet" parent="Widget.Design.BottomSheet.Modal">
       <item name="android:background">@android:color/transparent</item>
    </style>
</resources>

bottomsheet_layout

<?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:id="@+id/bottomsheet_holder"
    android:background="@drawable/bottom_background"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter a message"
            android:layout_margin="10dp"/>

        <Button
            android:id="@+id/search"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Search"
            android:layout_margin="20dp"
            android:textColor="@color/white"
            android:background="@drawable/button_background"/>

        <Button
            android:id="@+id/download"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Download"
            android:layout_margin="20dp"
            android:textColor="@color/white"
            android:background="@drawable/button_background"/>


    </LinearLayout>


</LinearLayout>

Here we have used an edittext two buttons, you can design the way you want.

bottom_background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <solid android:color="@color/white"/>
    <corners android:topLeftRadius="20dp"
          android:topRightRadius="20dp"/>

</shape>

To create it, right click on drawable folder then new > drawable resource file after that it will be created.

button_background

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/purple_700"/>
    <corners android:radius="10dp"/>


</shape>

Thanks you