Buttom Sheet sering kita lihat di aplikasi android. Komponen ini muncul geser ke atas dari bawah layar untuk menampilkan lebih banyak konten. Aplikasi yang mengunakan komponen ini adalah Aplikasi Peta Google Maps. Pada aplikasi tersebut Bottom Sheet menunjukkan lokasi atau informasi arah. Lalu ada aplikasi pemutar musik dimana playbar menempel di bawah dan terbuka saat geser ke atas.

Bottom sheet adalah salah satu komponen dari library material design. Sebelumnya kita sudah membahas dalam tutorial cara membuat snackbar. Jadi, ini adalah salah satu dari banyaknya komponen yang ada pada Material Design.

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name	:	Bottom Sheet App
Package Name	:	com.androidrion.bottomsheetapp
Languge	:	Java
Minimum SDK	:	API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml yang digunakan dalam projek ini:

1. activity_main.xml
2. sheet.xml

Daftar file java yang digunakan dalam projek ini:

• MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Bottom Sheet App.

Library Material Design

Tambahkan library material design di dalam projek android studio kalian. Di bawah ini adalah kode dari library material design yang ditambahkan pada projek android studio kalian dalam file build.gradle (Module: app).

Gradle Scripts/build.gradle (Module: app)

 implementation 'com.google.android.material:material:1.0.0'

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan didalamnya widget button dan FrameLayout pada layout CoordinatorLayout. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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_gravity="center"
        android:text="Open Bottom Sheet" />

    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Buat file xml layout baru dengan cara klik kanan pada folder layout lalu pilih New>Layout resource file. Simpan file layout tersebut dengan nama sheet. Berikut ini adalah kode lengkap untuk file sheet.xml

app/res/layout/sheet.xml

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:layout_marginBottom="10dp"
    android:text="Android Rion"
    android:textAppearance="@style/TextAppearance.AppCompat.Title"
    android:textColor="#1a1a1a" />

<TextView
    android:id="@+id/detail"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginTop="5dp"
    android:text="Jangan lupa untuk like, komen, share dan subscribe Channel YouTube Android Rion"
    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
    android:textColor="#666666" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:gravity="right"
    android:orientation="horizontal">

    <Button
        android:id="@+id/bt_close"
        style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CLOSE" />

    <Button
        android:id="@+id/bt_subscribe"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="SUBSCRIBE" />
</LinearLayout>

package com.androidrion.bottomsheetapp;

import androidx.appcompat.app.AppCompatActivity;

import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.Toast;

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


public class MainActivity extends AppCompatActivity {

    BottomSheetBehavior sheetBehavior;
    BottomSheetDialog sheetDialog;
    View bottom_sheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottom_sheet = findViewById(R.id.bottom_sheet);
        sheetBehavior = BottomSheetBehavior.from(bottom_sheet);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showBottomSheetDialog();

            }
        });
    }

    private void showBottomSheetDialog() {
        View view = getLayoutInflater().inflate(R.layout.sheet, null);

        if (sheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        }

        (view.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sheetDialog.dismiss();
            }
        });

        (view.findViewById(R.id.bt_subscribe)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Makasih ya sudah subscribe", Toast.LENGTH_SHORT).show();
            }
        });

        sheetDialog = new BottomSheetDialog(this);
        sheetDialog.setContentView(view);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            sheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        sheetDialog.show();
        sheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                sheetDialog = null;
            }
        });
    }
}