Cara Menampilkan Floating Bottom Sheet di Aplikasi Android
Halo ui designer,bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya saya sudah pernah membagikan tutorial cara membuat bottom sheet di android studio. Pada tutorial tersebut, kita berhasil menampilkannya di aplikasi android. Tampilan dasar dari bottom sheet, seluruh layoutnya menempel atau menyatu dengan layar aplikasi. Lalu bagaimana caranya agar bottom sheet terlihat seperti mengambang atau floating ketika muncul.
Ada beberapa aplikasi android yang menampilkan bottom sheet sesuai dengan tampilan tema dari aplikasi tersebut. Banyaknya aplikasi yang menggunakan komponen dari material design ini membuat para developer android berlomba-lomba membuat sesuai dengan keinginan mereka.
Jadi, dalam tutorial ini kalian akan belajar cara membuat floating bottom sheet di android studio dengan tutorial yang sangat mudah menggunakan widget CardView.
- Advertisement -
Sebenarnya, tutorial ini hampir sama dengan tutorial sebelumnya. Hanya saja pada kali ini kita menggunakan widget CardView agar Bottom Sheet terlihat seperti floating ketika muncul. Lalu menambahkan margin di cardview agar terlihat jarak antara sisi layar aplikasi dan bottom sheet.
Tutorial Cara Membuat Floating Bottom Sheet di Android Studio
Buatlah projek android studio baru dengan informasi sebagai berikut:
| Application Name | : | Bottom Sheet App |
| Package Name | : | com.androidrion.bottomsheetapp |
| Languge | : | Java |
| Minimum SDK | : | API 15: Android 4.0.3 (IceCreamSandwich) |
Daftar file xml layout yang digunakan dalam projek ini:
- activity_main.xml
- sheet.xml
Daftar file java yang digunakan dalam projek ini:
- MainActivity.java
Dibawah ini adalah langkah-langkah pembuatan dari aplikasi Bottom Sheet App.
Library Material Design
Untuk menampilkan bottom sheet di aplikasi android, kalian harus terlebih dahulu menambahkan library material design. Dibawah ini adalah kode untuk library material design yang ditambahkan dalam file build.gradle (Module: app)
Gradle Scripts/build.gradle (Module: app)
implementation 'com.google.android.material:material:1.0.0'Ikuti tutorial di bawah ini untuk menambahkan library material design kedalam projek android studio.
CARA MENAMBAHKAN LIBRARY KE DALAM PROJEK ANDROID STUDIO
XML Layout File
Buka file activity_main.xml. Tambahkan Button dan FrameLayout dalam CoordinatorLayout. Berikut in adalah kode lengkap untuk file activity_main.xml
app/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Open Floating Bottom Sheet" />
<FrameLayout
android:id="@+id/bottom_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>Buat file xml layout baru dengan nama sheet. Berikut ini adalah kode lengkap untuk file sheet.xml
app/res/layout/sheet.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
android:orientation="vertical">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
app:cardCornerRadius="3dp"
app:cardElevation="5dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="18dp">
<TextView
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Android Rion" />
<TextView
style="@style/TextAppearance.AppCompat.Small"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Tutorial Android, UI/UX Desain, Tips dan Trik Android Studio" />
<Button
android:id="@+id/btn_close"
style="@style/Widget.AppCompat.Button.Colored"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="18dp"
android:text="CLOSE" />
</LinearLayout>
</androidx.cardview.widget.CardView>
</LinearLayout>Java Activity File
Buka file MainActivity dalam folder java pada projek android studio kalian. Gunakan kode dibawah ini untuk membuat button menampilkan floating bottom sheet. Berikut ini adalah kode lengkap untuk file MainActivity.java
app/java/com.androidrion.bottomsheetapp/MainActivity.java
[sociallocker id=”1410″]
package com.androidrion.bottomsheetapp;
import androidx.appcompat.app.AppCompatActivity;
import android.content.DialogInterface;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.Toast;
import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.bottomsheet.BottomSheetDialog;
public class MainActivity extends AppCompatActivity {
BottomSheetBehavior bottomSheetBehavior;
BottomSheetDialog bottomSheetDialog;
View bottom_sheet;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
bottom_sheet = findViewById(R.id.bottom_sheet);
bottomSheetBehavior = BottomSheetBehavior.from(bottom_sheet);
Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetDialog.show();
}
});
View view = getLayoutInflater().inflate(R.layout.sheet, null);
view.findViewById(R.id.btn_close).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
bottomSheetDialog.hide();
}
});
bottomSheetDialog = new BottomSheetDialog(this);
bottomSheetDialog.setContentView(view);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
bottomSheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
((View) view.getParent()).setBackgroundColor(getResources().getColor(android.R.color.transparent));
}
}[/sociallocker]
Run ‘app’
Sekarang jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian melihat adanya tombol yang berada di tengah aplikasi. Jika kalian menekan tombol tersebut, maka aplikasi akan menampilkan bottom sheet yang terlihat seperti mengambang atau floating. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.
AKHIR KATA
Itulah tadi tutorial singkat dan mudah cara membuat floating bottom sheet di android studio. Tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan untuk membuat bottom sheet terlihat seperti mengambang atau floating di aplikasi android. Kalian bebas mendesain tampilan bottom sheet pada file sheet.xml
Jika kalian mengalami kendala saat melakukan tutorial di atas, silahkan komentar di bawah artikel ini. Jangan lupa untuk like dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian. Terima Kasih.
- Advertisement -