Membuat drawer menu bawah - Bottomsheet Behavior Sketchware

BOTTOMSHEET BEHAVIOR merupakan salah satu jenis lapisan bawah yang digunakan pada program aplikasi atau program lainnya, dalam hal ini saya menjelaskan elemen ini dalam konteks aplikasi Sketchware yang mana sejauh pengetahuan saya saat ini pada Sketchware kita bisa membuat dua jenis Bottomsheet yaitu BOTTOMSHEET BEHAVIOR dan BOTTOMSHEET DIALOG.

BOTTOMSHEET BEHAVIOR sendiri bertindak sebagai Drawer Menu namun jika umumnya drawer bergerak dari samping kiri ke kanan maka BOTTOMSHEET BEHAVIOR ini akan muncul dari bawah ke atas ketika kita menggesernya, sedangkan BOTTOMSHEET DIALOG akan muncul dari bawah secara popup ketika kita memberi perintah pada sebuah klik, tapi untuk saat ini saya tidak akan bahas BOTTOMSHEET DIALOG ini karena yang akan kita bahas kali ini ialah BOTTOMSHEET BEHAVIOR yang mana jenis bottomsheet ini akan lebih sering kita gunakan.

Menambahkan CoordinatorLayout

Ok jadi langsung saja kita buat Tata Letaknya terlebih dahulu, pertama-tama tambahkan linear1 (LinearV) selanjutnya pada options menu tersebut klik pada opsi convert kemudian ubah LinearLayout menjadi androidx.coordinatorlayout.widget.CoordinatorLayout Lihat Gambar Contoh

Jika sudah sekarang tambahkan dua buah Linear Vertikal di dalamnya yang berarti kini kita memiliki 3 buah linear vertikal yaitu Linear1, Linear2 dan Linear3 selanjutnya buat width dari Linear2 menjadi match parent dan tingginya wrap content dulu sedangkan Linear3 buat tinggi dan lebarnya menjadi match parent. yang perlu kamu ketahui terlebih dahulu ialah Linear2 dan Linear3 akan memiliki perannya masing-masing yang mana Linear2 akan kita buat sebagai linear untuk menampilkan konten utama dan Linear3 akan kita gunakan sebagai BOTTOMSHEET BEHAVIOR untuk itu mari kita fokuskan dulu pada Linear3 yaitu linear bottomsheet.

Memberikan Aksen tampilan

Pada tahap ini saya akan sedikit memberikan aksen pada Linear3 atau bottomsheet ini seperti menambahkan warna untuk membedakan antara linear konten dan bottomsheet, Tapi sebelum itu kita perlu menambahkan dulu kode berikut pada opsi Inject di Linear3.

app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" app:behavior_peekHeight="260dp"

Selanjutnya untuk memberikan warna, disini saya tidak akan memberikannya langsung pada Linear3 melainkan menambahkan satu buah Linear Vertikal lagi di dalam Linear3 (bottomsheet) yang berarti disini kita sekarang memiliki Linear4, nah pada linear 4 inilah saya akan memberikan warna dan memberikan margin dengan nilai 100 pada bagian atas Linear4 sehingga nantinya ketika bottomsheet dalam status EXPANDED akan memberikan jarak di bagian atasnya dengan kata lain tampilan bottomsheet tidak terlalu memenuhi layar.

Selain itu saya juga menambahkan satu buah Linear di dalam Linear4 dengan ID Linear5 kemudian saya ubah lebarnya menjadi 50dp dan tingginya 5dp kemudian saya ubah Layout Gravity nya menjadi Center Horisontal dan saya berikan warna putih untuk backgroundnya sedangkan untuk linear4 saya berikan warna biru untuk background nya, sehingga tampilannya nanti kurang lebih akan seperti gambar di atas.

On Activity Create

Untuk membuat lengkungan pada masing-masing Linear kamu dapat menggunakan Tools tambahan yaitu SketchUi atau gunakan skrip berikut.

Untuk Linear4

{ android.graphics.drawable.GradientDrawable SketchUi = new android.graphics.drawable.GradientDrawable(); int d = (int) getApplicationContext().getResources().getDisplayMetrics().density; SketchUi.setColor(0xFF2962FF);SketchUi.setCornerRadii(new float[]{ d*30,d*30,d*30 ,d*30,d*0,d*0 ,d*0,d*0}); linear5.setElevation(d*30); linear5.setBackground(SketchUi); }

Untuk Linear5

{ android.graphics.drawable.GradientDrawable SketchUi = new android.graphics.drawable.GradientDrawable(); int d = (int) getApplicationContext().getResources().getDisplayMetrics().density; SketchUi.setColor(0xFFFFFFFF); SketchUi.setCornerRadius(d*50); linear4.setElevation(d*3); linear4.setBackground(SketchUi); }

Skrip diatas untuk disimpan pada onCreate dan setelah file diatas tambahkan juga skrip berikut dibawahnya untuk membuat BOTTOMSHEET BEHAVIOR nya bekerja

BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from(linear3); bottomSheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);

Import Script

Satu hal lagi yaitu Import, Tambahkan Import kemudian tambahkan Skrip berikut pada blok import

androidx.coordinatorlayout.widget.CoordinatorLayout
com.google.android.material.bottomsheet.BottomSheetBehavior

Sampai tahap ini semuanya sudah selesai tapi sebelum kamu menjalankan aplikasi pastikan kamu aktifkan dulu AppCompat & Design pada opsi menu configuration baru setelah itu silahkan jalankan aplikasinya. Jika masih ada error silahkan cek kembali tutorial diatas dengan teliti.

Nah untuk selanjutnya kamu bisa menambahkan berbagai widget yang ingin kamu tampilkan entah itu pada Linear2 untuk konten utama ataupun Linear4 untuk sebagai opsi tambahan untuk aplikasi kamu. Ok teman-teman sampai disini dulu artikel kali ini, jika masih ada yang kurang dimengerti dari tulisan diatas silahkan lanjutkan di kolom komentar, selamat mencoba dan semoga berhasil Terimakasih.