Cara Membuat Bottom Sheet di Android Studio Menggunakan Fragment

Halo para android developer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya, saya sudah pernah membagikan tutorial dasar cara membuat bottom sheet di android studio dan cara membuat fab menampilkan bottom sheet seperti aplikasi google maps. Pada kesempatan kali ini saya akan membagikan tutorial cara membuat bottom sheet di android studio menggunakan fragment.

Pada tutorial sebelumnya, kita telah belajar cara menampilkan bottom sheet seperti pada aplikasi Google Maps. Jika kita lebih dalam lagi melihat aplikasi Google Maps, bahwa aplikasi tersebut menampilkan Bottom Sheet secara penuh ketika melihat lokasi yang banyak informasinya. Seperti pada Material Design berikut ini.

- Advertisement -

link video di ambil dari situs : Material Design Components Bottom Sheet

Pada tutorial ini, kita akan membuat seperti pada video diatas.

Tutorial Cara Membuat Full 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. fragment_bottom_sheet.xml

Daftar file java yang digunakan dalam projek ini:

  1. FragmentBottomSheet.java
  2. MainActivity.java

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

Library Material Design

Untuk menggunakan Bottom Sheet di dalam projek android studio, kalian harus menambahkan library material design. Dibawah ini adalah kode untuk library material design yang harus di tambahkan 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

Drawable File

Dalam tutorial ini, saya menggunakan beberapa ikon vector drawable material design. Untuk itu, tambahkan ikon dibawah ini.

Ikuti tutorial dibawah ini untuk menambahkan ikon ke dalam project android studio.

CARA MENAMBAHKAN IKON KE DALAM PROJECT ANDROID STUDIO

Tidak hanya ikon saja yang saya gunakan dalam projek ini, saya juga menggunakan gambar dibawah ini.

XML Layout File

Buka file activity_main.xml dan tambahkan kode dibawah ini di dalamnya.

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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_show"
        style="@style/Widget.AppCompat.Button.Colored"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="SHOW FULL BOTTOM SHEET" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Buatlah file Fragment baru dengan cara klik kanan pada folder layout, lalu pilih New>Fragment>Fragment (Blank). Simpan file fragment baru tersebut dengan nama FragmentBottomSheet, maka secara otomatis kalian akan mendapatkan file layout fragment dengan nama fragment_bottom_sheet.

Buka file fragment_bottom_sheet.xml dalam folder layout. Berikut ini adalah kode lengkap untuk file fragment_bottom_sheet.xml

app/res/layout/fragment_bottom_sheet.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:orientation="vertical"
    tools:context=".FragmentBottomSheet">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">


            <TextView
                style="@style/TextAppearance.AppCompat.Title"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center_vertical"
                android:paddingLeft="16dp"
                android:text="@string/app_name"
                android:textColor="@android:color/white" />

            <TextView
                android:id="@+id/closeSheet"
                style="@style/TextAppearance.AppCompat.Small"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center"
                android:padding="16dp"
                android:text="Close"
                android:textColor="@android:color/white" />

        </LinearLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <LinearLayout
            android:id="@+id/lyt_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:orientation="horizontal"
                android:padding="10dp">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_call"
                        android:tint="@color/colorPrimaryDark" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="CALL"
                        android:textColor="@color/colorPrimaryDark"
                        android:textStyle="bold" />
                </LinearLayout>

                <View
                    android:layout_width="60dp"
                    android:layout_height="0dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_launch"
                        android:tint="@color/colorPrimaryDark" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="WEBSITE"
                        android:textColor="@color/colorPrimaryDark"
                        android:textStyle="bold" />
                </LinearLayout>

                <View
                    android:layout_width="60dp"
                    android:layout_height="0dp" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:orientation="vertical">

                    <ImageView
                        android:layout_width="55dp"
                        android:layout_height="55dp"
                        android:padding="10dp"
                        android:src="@drawable/ic_playlist"
                        android:tint="@color/colorPrimaryDark" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Medium"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="SAVE"
                        android:textColor="@color/colorPrimaryDark"
                        android:textStyle="bold" />
                </LinearLayout>
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="@android:color/darker_gray" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_location"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="Indonesia"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_access_time"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="Open 7 AM"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_link"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="androidrion.com"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_call"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="0858-8082-7382"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_favorite_border"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="Favorite"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:orientation="horizontal">

                    <ImageButton
                        android:layout_width="wrap_content"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        android:src="@drawable/ic_label"
                        android:tint="@color/colorPrimary" />

                    <View
                        android:layout_width="25dp"
                        android:layout_height="0dp" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center_vertical"
                        android:text="Add a label"
                        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

                </LinearLayout>

            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:background="@android:color/darker_gray" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="16dp">

                    <TextView
                        android:layout_width="0dp"
                        android:layout_height="match_parent"
                        android:layout_weight="1"
                        android:gravity="center_vertical"
                        android:text="Galeri"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title"
                        android:textColor="@android:color/black" />

                    <ImageView
                        android:layout_width="35dp"
                        android:layout_height="35dp"
                        android:src="@drawable/ic_add_a_photo"
                        android:tint="@color/colorPrimaryDark" />
                </LinearLayout>

                <HorizontalScrollView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingLeft="16dp">

                        <ImageView
                            android:layout_width="125dp"
                            android:layout_height="125dp"
                            android:src="@drawable/logo" />

                        <View
                            android:layout_width="4dp"
                            android:layout_height="0dp" />

                        <ImageView
                            android:layout_width="125dp"
                            android:layout_height="125dp"
                            android:src="@drawable/logo" />

                        <View
                            android:layout_width="4dp"
                            android:layout_height="0dp" />

                        <ImageView
                            android:layout_width="125dp"
                            android:layout_height="125dp"
                            android:src="@drawable/logo" />

                        <View
                            android:layout_width="4dp"
                            android:layout_height="0dp" />

                        <ImageView
                            android:layout_width="125dp"
                            android:layout_height="125dp"
                            android:src="@drawable/logo" />
                    </LinearLayout>
                </HorizontalScrollView>
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_gravity="center"
                android:layout_marginTop="16dp"
                android:background="@android:color/darker_gray" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center_vertical"
                    android:text="Artikel"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title"
                    android:textColor="@android:color/black" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:orientation="vertical">

                    <TextView
                        style="@style/TextAppearance.AppCompat.Subhead"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Tutorial" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Cara Membuat Bottom Sheet Seperti Google Maps" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:orientation="vertical">

                    <TextView
                        style="@style/TextAppearance.AppCompat.Subhead"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Tutorial" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Cara Membuat Floating Action Button di Android Studio" />
                </LinearLayout>

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="12dp"
                    android:orientation="vertical">

                    <TextView
                        style="@style/TextAppearance.AppCompat.Subhead"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Tutorial" />

                    <TextView
                        style="@style/TextAppearance.AppCompat.Title"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Cara Membuat Custom Snackbar di Android Studio" />
                </LinearLayout>
            </LinearLayout>

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
</LinearLayout>

Hasil layout atau tampilan dari kode diatas seperti pada gambar di bawah ini.

Java File

Buka file FragmentBottomSheet dalam folder java pada projek android studio kalian. Berikut ini adalah kode lengkap untuk file FragmentBottomSheet.java

app/java/com.androidrion.bottomsheetapp/FragmentBottomSheet.java

[sociallocker id=”1410″]

package com.androidrion.bottomsheetapp;

import android.app.Dialog;
import android.content.res.TypedArray;
import android.os.Bundle;

import androidx.annotation.NonNull;

import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;

import com.google.android.material.appbar.AppBarLayout;
import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.bottomsheet.BottomSheetDialog;
import com.google.android.material.bottomsheet.BottomSheetDialogFragment;


public class FragmentBottomSheet extends BottomSheetDialogFragment {

    private AppBarLayout appBarLayout;
    private LinearLayout linearLayout;

    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        final BottomSheetDialog dialog = (BottomSheetDialog) super.onCreateDialog(savedInstanceState);
        final View view = View.inflate(getContext(), R.layout.fragment_bottom_sheet, null);
        dialog.setContentView(view);

        BottomSheetBehavior bottomSheetBehavior = BottomSheetBehavior.from((View) view.getParent());
        bottomSheetBehavior.setPeekHeight(BottomSheetBehavior.PEEK_HEIGHT_AUTO);

        appBarLayout = view.findViewById(R.id.appBarLayout);
        linearLayout = view.findViewById(R.id.lyt_linear);
        hideView(appBarLayout);

        bottomSheetBehavior.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
            @Override
            public void onStateChanged(@NonNull View view, int i) {
                if (BottomSheetBehavior.STATE_EXPANDED == i) {
                    showView(appBarLayout, getActionBarSize());
                    hideView(linearLayout);
                }
                if (BottomSheetBehavior.STATE_COLLAPSED == i) {
                    hideView(appBarLayout);
                    showView(linearLayout, getActionBarSize());
                }

                if (BottomSheetBehavior.STATE_HIDDEN == i) {
                    dismiss();
                }
            }

            @Override
            public void onSlide(@NonNull View view, float v) {

            }
        });

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

        return dialog;
    }

    private void hideView(View view) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.height = 0;
        view.setLayoutParams(params);
    }

    private void showView(View view, int size) {
        ViewGroup.LayoutParams params = view.getLayoutParams();
        params.height = size;
        view.setLayoutParams(params);
    }

    private int getActionBarSize() {
        final TypedArray styledAttributes = getContext().getTheme().obtainStyledAttributes(new int[]{android.R.attr.actionBarSize});
        return (int) styledAttributes.getDimension(0, 0);
    }

}

[/sociallocker]

Masih di dalam folder java, sekarang buka file MainActivity. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.bottomsheetapp/MainActivity.java

package com.androidrion.bottomsheetapp;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

import com.google.android.material.bottomsheet.BottomSheetBehavior;
import com.google.android.material.floatingactionbutton.FloatingActionButton;

public class MainActivity extends AppCompatActivity {

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

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

                FragmentBottomSheet fragmentBottomSheetFull = new FragmentBottomSheet();
                fragmentBottomSheetFull.show(getSupportFragmentManager(), fragmentBottomSheetFull.getTag());
            }
        });
    }
}

Run ‘app’

Sekarang jalankan project android studio kalian. Jika kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar di bawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara membuat bottom sheet menggunakan fragment di android studio. Memang dalam user interface kita bisa memakan waktu yang lama, tetapi itu cukup sepadan dengan aplikasi yang ditampilkan.

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.

Download Projek

Untuk download project pada tutorial ini, silahkan klik tombol dibawah ini.

[sociallocker id=”1406″]

[/sociallocker]

- Advertisement -

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

You might also like

- Advertisement -

2 Comments
  1. Juniardi says

    Script untuk fragment nya gak ada..

    1. Android Rion says

      Hi, Juniardi. Terima kasih telah komentar di website Android Rion.
      Apakah yang kamu maksud adalah fragment_bottom_sheet.xml? Jika memang benar, pada browser yang saya gunakan, script untuk fragment_bottom_sheet.xml tampil. Apabila pada browser kamu tidak, mungkin hapus cache terlebih dahulu setelah itu kunjungi lagi.

      Semoga balasan ini membantu kamu. 🙂

Leave A Reply

Your email address will not be published.