Cara Menampilkan Floating Bottom Sheet di Aplikasi Android

Last updated Apr 28, 2021 1,449 0

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.

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

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));
    }
}

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.

Tutorial Video

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.