Cara Membuat Bottom Sheet Material Design di Android Studio

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 SnackBar di Android Material Design
• Cara Menerapkan SearchView dengan RecyclerView pada Fragment
• Membuat Animasi dan Sub Menu pada Floating Action Button

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

Pantang menyerah dan terus maju, bertekad meningkatkan kualitas sumber daya manusia, melalui tulisan, karya dan ilmu yang diberikan.

Share this post

Berlangganan update artikel terbaru via email:

Link will be apear in 15 seconds.

Well done! you have successfully gained access to Decrypted Link.