Cara Membuat Bottom Sheet Material Design di Android Studio
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:
2) Pertama tema, jangan lupa untuk menambahkan library Android Support Design pada dependencies didalam file build.gradle (direktori app).
3) Buka file activity_main.xml kalian, untuk contoh layoutnya kalian buat seperti 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'
}
<?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>
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);
}
}
});
}
}
- 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.
