Cara Membuat Bottom Sheet Material Design di Android Studio

Oleh Wildan M Athoillah 17.22

Assalamualaikum Warahmatullahi Wabarakatuh.

Bottom Sheet adalah salah satu komponen Material Design, Bottom Sheet merupakan menu pilihan yang pada umumnya disembunyikan dibagian bawah activity, yang bisa kita tarik keatas untuk menampilkan daftar menu tersebut.

Salah satu contoh aplikasi populer yang menggunaka bottom sheet adalah Google Maps, dimana ketika user mengeklik suatu point lokasi di peta, maka informasi lokasi tersebut akan ditampilkan dalam bentuk Bottom Sheet, yang bisa kita tarik ke atas.

Itulah yang akan kita palajari, pada materi berikut ini kita akan belajar membuat program sederhana dengan menggunakan Bottom Sheet. Untuk itu mari kita simak tutorial berikut ini.

Materi lainnya yang direkomendasikan:

Cara Membuat Bottom Sheet Material Design di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Pertama tema, jangan lupa untuk menambahkan library Android Support Design pada dependencies didalam file build.gradle (direktori app).

dependencies {
    compile 'com.android.support:design:27.0.2'
}

3) Buka file activity_main.xml kalian, untuk contoh layoutnya kalian buat seperti berikut ini.

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

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

        <Button
            android:id="@+id/hide"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:text="Sembunyikan Bottom Sheet" />

    </LinearLayout>

 <!-- Membuat Bottom Sheet -->
    <LinearLayout
        android:id="@+id/bottomsheet"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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/colorPrimary"
            android:gravity="center"
            android:text="Foto Hewan Unik"
            android:textColor="@android:color/white"
            android:textStyle="bold" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="220dp"
                android:gravity="center"
                android:src="@drawable/bayam" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="8dp"
                android:gravity="center"
                android:text="Bayam (Badak Kepala Ayam)"
                android:textColor="#FFFFFF"
                android:textSize="15sp"
                android:textStyle="bold" />
        </LinearLayout>

    </LinearLayout>

</android.support.design.widget.CoordinatorLayout>

Pada layout tersebut, kita menggunakan 2 buah button untuk menampilkan dan menyembunyikan Bottom Sheet, semua komponen didalam layout tersebut, kita bungkus menggunakan CoordinatorLayout, agar Bottom Sheet tidak menupuk dengan komponen lainnya, misalnya dengan Floating Action Button, saat user menariknya keatas.

Untuk membuat Bottom Sheet, kita perlu menambahkan atribut app:layout_behavior="android.support.design.widget.BottomSheetBehavior" didalam sebuah view, kita menggunakan LinearLayout sebagai base Bottom Sheet View, didalam view/LinearLayout tersebut terdapat konten atau isi yang akan ditampilkan.

Sampai disini kalian dapat mencoba manjalankan project tersebut. untuk menampilkan konten dari Bottom Sheet, kalian tinggal menarik slider yang terdapat dibawah activity.

Demo:

Mengontrol Bottom Sheet menggunakan Java

Sebelumnya kita sudah membuat layout activity untuk Bottom Sheet, yang sudah kita coba sebelumnya.

Disini kita akan mencoba mengontrol Bottom Sheet tersebut dengan menggunakan Button, seperti menampilkan dan menyembunyikan konten diadalam Bottom Sheet.

Buka file MainActivity.java kalian, masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

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

public class MainActivity extends AppCompatActivity{

    private Button ShowButton;
    private Button HideButton;

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

        //Inisialisasi tombol
        ShowButton = findViewById(R.id.show);
        HideButton = findViewById(R.id.hide);

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

        //Menempatkan LinearLayout kedalam BottomSheetBehavior
        final BottomSheetBehavior SheetBehavior = BottomSheetBehavior.from(BottomSheet);

        //Set BottomSheet view agar dapat disembunyikan semuanya
        SheetBehavior.setHideable(true);

        //Set listener dan set BottomSheet state
        ShowButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (SheetBehavior.getState() == BottomSheetBehavior.STATE_COLLAPSED) {
                    ShowButton.setText("Sembunyikan Konten");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_EXPANDED);
                } else {
                    ShowButton.setText("Tampilkan Konten");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                }
            }
        });

        HideButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (SheetBehavior.getState() == BottomSheetBehavior.STATE_HIDDEN) {
                    HideButton.setText("Sembuyikan Slider");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
                } else {
                    HideButton.setText("Tampilkan Slider");
                    SheetBehavior.setState(BottomSheetBehavior.STATE_HIDDEN);
                }

            }
        });
    }
}

Fungsi dari 3 buah state didalam BottomSheet view yang harus kalian ketahui:

BottomSheetBehavior.STATE_EXPANDED : Untuk melihat isi konten.
BottomSheetBehavior.STATE_COLLAPSED : Menyembunyikan isi konten.
BottomSheetBehavior.STATE_HIDDEN : Meyembunyikan Konten dan juga Slidernya.

Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.