Tutorial Dasar Cara Membuat & Menampilkan Bottom Sheet di Aplikasi Android

Hai para Android Developer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini, saya akan membagikan tutorial cara membuat bottom sheet di android studio dan menampilkannya pada aplikasi android.

Buttom Sheet sering kita lihat di aplikasi android. Komponen ini muncul geser ke atas dari bawah layar untuk menampilkan lebih banyak konten. Aplikasi yang mengunakan komponen ini adalah Aplikasi Peta Google Maps. Pada aplikasi tersebut Bottom Sheet menunjukkan lokasi atau informasi arah. Lalu ada aplikasi pemutar musik dimana playbar menempel di bawah dan terbuka saat geser ke atas.

Bottom sheet adalah salah satu komponen dari library material design. Sebelumnya kita sudah membahas dalam tutorial cara membuat snackbar. Jadi, ini adalah salah satu dari banyaknya komponen yang ada pada Material Design.

- Advertisement -

Dalam tutorial ini kalian akan belajar cara membuat bottom sheet di projek android studio dan menampilkannya dalam aplikasi android dengan cara yang sederhana dan mudah.

Tutorial Cara Membuat 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 yang digunakan dalam projek ini:

  1. activity_main.xml
  2. sheet.xml

Daftar file java yang digunakan dalam projek ini:

  • MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi Bottom Sheet App.

Library Material Design

Tambahkan library material design di dalam projek android studio kalian. Di bawah ini adalah kode dari library material design yang ditambahkan pada projek android studio kalian 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 dalam folder layout pada projek android studio kalian. Tambahkan didalamnya widget button dan FrameLayout pada layout CoordinatorLayout. Berikut ini 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 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 cara klik kanan pada folder layout lalu pilih New>Layout resource file. Simpan file layout tersebut 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"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    android:background="#f2f2f2"
    android:orientation="vertical"
    android:padding="15dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_marginBottom="10dp"
        android:text="Android Rion"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:textColor="#1a1a1a" />

    <TextView
        android:id="@+id/detail"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_marginTop="5dp"
        android:text="Jangan lupa untuk like, komen, share dan subscribe Channel YouTube Android Rion"
        android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
        android:textColor="#666666" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="15dp"
        android:gravity="right"
        android:orientation="horizontal">

        <Button
            android:id="@+id/bt_close"
            style="@style/Base.Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CLOSE" />

        <Button
            android:id="@+id/bt_subscribe"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="SUBSCRIBE" />
    </LinearLayout>

</LinearLayout>

Java Activity File

Sekarang buka file MainActivity dalam folder java pada projek android studio kalian. Tambahkan BottomSheetBehavior dan BottomSheetDialog dalam file tersebut. 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 sheetBehavior;
    BottomSheetDialog sheetDialog;
    View bottom_sheet;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottom_sheet = findViewById(R.id.bottom_sheet);
        sheetBehavior = BottomSheetBehavior.from(bottom_sheet);

        Button button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showBottomSheetDialog();

            }
        });
    }

    private void showBottomSheetDialog() {
        View view = getLayoutInflater().inflate(R.layout.sheet, null);

        if (sheetBehavior.getState() == BottomSheetBehavior.STATE_EXPANDED) {
            sheetBehavior.setState(BottomSheetBehavior.STATE_COLLAPSED);
        }

        (view.findViewById(R.id.bt_close)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                sheetDialog.dismiss();
            }
        });

        (view.findViewById(R.id.bt_subscribe)).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "Makasih ya sudah subscribe", Toast.LENGTH_SHORT).show();
            }
        });

        sheetDialog = new BottomSheetDialog(this);
        sheetDialog.setContentView(view);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            sheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        sheetDialog.show();
        sheetDialog.setOnDismissListener(new DialogInterface.OnDismissListener() {
            @Override
            public void onDismiss(DialogInterface dialog) {
                sheetDialog = null;
            }
        });
    }
}

Run ‘app’

Jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat tombol yang berada di tengah-tengah aplikasi. Jika kalian mengklik tombol tersebut, maka akan ada tampilan baru yang muncul dari bawah aplikasi. 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 bottom sheet di android studio dan menampilkannya di aplikasi android. Tutorial diatas sangatlah mudah dikerjakan karena masih terlalu dasar. Komponen dari material design ini masih bisa dikembangkan seperti pada aplikasi google maps yang menampilkannya secara menyeluruh.

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 -

Get real time updates directly on you device, subscribe now.

You might also like

- Advertisement -

Leave A Reply

Your email address will not be published.