Tutorial Membuat Material Design Bottom Sheet di Android Menggunakan Android Studio

Last Updated on 6 years by Hafizh Herdi

Hi All, kali ini saya ingin menambahkan sebuah tutorial tentang Material Design di Android, melengkapi series tutorial Material Design yang ada di blog ini. Di postingan ini kita akan belajar tentang salah satu elemen Material Design di Android yang lumayan sering dipakai, yaitu Bottom Sheet. Contoh aplikasi populer yang memakai elemen bottom sheet ini adalah Google Maps, dimana ketika kita mengeklik suatu point lokasi di peta, maka informasi lokasi tersebut akan ditampilkan dalam bentuk Bottom Sheet, yang bisa kita tarik ke atas.

Belajar Membuat Material Bottom Sheet di Android Menggunakan Android Studio

Sebelum lanjut, ada baiknya kalian membaca-baca dahulu tutorial-tutorial di bawah ini :

Pre-requisites :

• Membuat Tema/Style pada Android Material Design
• Tutorial Lengkap Android Material Design

Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.

Setelah itu kalian bisa menambahkan dependency Material Design ke dalam file build.gradle pada project aplikasi Android kalian:

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:design:27.0.2'
}

Versi library bisa berubah-ubah, pada saat artikel ini dibuat versi library terbaru adalah 27.0.2, karena itu jangan lupa juga untuk mengeset compileSDK kalian ke versi 27 juga seperti gambar di bawah :

android {
    compileSdkVersion 27
    buildToolsVersion '26.0.2'
    // ...
}

Selanjutnya, kita akan buka activity_main.xml dan tambahkan view BottomSheet seperti di bawah :

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:layout_margin="10dp"
            android:id="@+id/bt_show"
            android:text="Show Bottom Sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <Button
            android:layout_margin="10dp"
            android:layout_below="@id/bt_show"
            android:id="@+id/bt_hide"
            android:text="Hide Bottom Sheet"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </RelativeLayout>

    <LinearLayout
        android:id="@+id/bs_ll"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="340dp"
        app:behavior_hideable="true"
        app:behavior_peekHeight="60dp"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:background="@color/twoh_accent"
            android:gravity="center"
            android:text="Peek Content"
            android:textColor="@android:color/white" />

        <LinearLayout
            android:background="@color/twoh_primary_light"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:src="@drawable/header"
                />
        </LinearLayout>
    </LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Untuk color resource di atas, bisa kalian ubah sendiri atau baca tutorial Material Design color di sini.
Untuk resource gambarnya juga silahkan kalian variasi sendiri 🙂

Sebenarnya basicnya hanya dengan menambahkan xml BottomSheet di atas, tutorial ini sudah selesai dan kalian sudah bisa menggunakan view BottomSheet di aplikasi Android. BottomSheet view terbagi menjadi dua buah view, yaitu view bagian atas, semacam slider untuk “Peek Content”, dan view untuk content atau isi utama dari BottomSheet view itu sendiri.

Ketika kita tarik slider “Peek Content” nya ke atas, maka isi dari BottomSheet tersebut akan muncul dari permukaan dan bisa kita lihat.

Control BottomSheet view Android dari Java

Lantas bagaimana jika kita ingin mengontrol BottomSheet view dari kode Java? Misalkan kita punya tombol, dan ketika kita klik tombol tersebut maka isi dari BottomSheet nya akan muncul, dan kemudian sembunyi lagi. Kita bisa melakukan hal tersebut dengan bantuan BottomSheetBehavior. Seperti contoh codingan di bawah :

package id.web.twoh.coolandroiddesign;

import android.os.Bundle;
import android.support.design.widget.BottomSheetBehavior;
import android.view.View;
import android.support.v7.app.AppCompatActivity;
import android.widget.Button;

/**
 * Created by Herdi_WORK on 26.12.17.
 */

public class MainActivity extends AppCompatActivity {

    private Button btShow;
    private Button btHide;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        setContentView(R.layout.activity_bottom_sheet);
        setupToolbar();

        //Inisialisasi LinearLayout sebagai base bottom sheet view
        final View bottomsheet = findViewById(R.id.bs_ll);

        //Assign LinearLayout tersebut ke BottomSheetBehavior
        final BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(bottomsheet);

        //Set BottomSheet view supaya bisa disembunyikan semuanya
        bottomSheetBehavior.setHideable(true);

        //Inisialisasi tombol
        btShow = findViewById(R.id.bt_show);
        btHide = findViewById(R.id.bt_hide);

        //Set listener dan set BottomSheet state
        btShow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED){
                    btShow.setText("Close Bottom Sheet");
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                }else{
                    btShow.setText("Show Bottom Sheet");
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }
            }
        });

        btHide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(bottomSheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN){
                    btHide.setText("Hide");
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }else{
                    btHide.setText("Peek");
                    bottomSheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }

            }
        });

        super.onCreate(savedInstanceState);
    }

}

Jadi pada codingan di atas, cara mengatur tampil tidaknya BottomSheet view adalah dengan mengeset state dari BottomSheet view tersebut, dan mengaplikasikannya ke BottomSheetBehavior.

Ada tiga state yang penting pada BottomSheet view, yaitu :

• BottomSheetBehavior.STATE_EXPANDED : dimana BottomSheet view ter-expand sehingga content-nya bisa kita lihat
• BottomSheetBehavior.STATE_COLLAPSED : pada state ini BottomSheet content tersembunyi, kita hanya bisa lihat slider “Peek” nya saja
• BottomSheetBehavior.STATE_HIDDEN : baik content, maupun slider “Peek” nya semuanya tersembunyi dari layar

Demo

Oke, langsung saja untuk demonya :

Bottom Sheet Android state Collapsed

Ini adalah tampilan BottomSheet view Android ketika state Collapsed. Hanya slider “Peek Content” saja yang nampak.

Bottom Sheet Android state Expanded

Kemudian ini adalah tampilan ketika state Expanded. Di situ kalian bisa melihat content dari BottomSheet view :D. Cara untuk melihatnya bisa dengan men-drag slider nya ke atas, maupun klik tombol Show Bottom Sheet.

Bottom Sheet Android state Hidden

Terakhir, ini adalah tampilan ketika BottomSheet state Hidden. Tidak nampak adanya tanda-tanda kehadiran BottomSheet di layar.

That’s all ! Semoga membantu! Source code nya bisa kalian download dan jalankan sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀