Cara Membuat Floating Action Button (FAB) Menampilkan Bottom Sheet di Aplikasi Android

Halo para android developer, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Sebelumnya saya sudah pernah menjelaskan tutorial cara menggunakan floating action button atau FAB di projek android studio. Dan sebelumnya juga saya sudah pernah membagikan tutorial cara membuat bottom sheet di android studio. Pada tutorial ini saya akan membagikan cara membuat fab menampilkan bottom sheet di aplikasi android.

FAB dan Bottom Sheet sudah saya jelaskan sedikit di masing-masing tutorial yang bersangkutan. Maksud saya membuat tutorial ini adalah saya ingin membuat aplikasi seperti aplikasi Google Maps. Pada aplikasi tersebut memiliki FAB yang ketika di tekan menampilkan informasi dari lokasi tersebut di dalam bottom sheet.

Untuk itu, dalam tutorial ini kita akan belajar cara membuat fab menampilkan bottom sheet di android studio seperti pada aplikasi Google Maps.

- Advertisement -

Tutorial Cara Membuat FAB Menampilkan Bottom Sheet di Android Studio Seperti Aplikasi Google Maps

Buatlah projek android studio baru dengan informasi sebagai berikut:

Application Name:FAB App
Package Name:com.androidrion.fabapp
Languge:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang digunakan dalam projek ini:

  1. sheet.xml
  2. activity_main.xml

File java yang digunakan dalam projek ini:

  • MainActivity.java

Dibawah ini adalah langkah-langkah dalam pembuatan aplikasi FAB App.

Library Material Design

Untuk menggunakan Floating Action Button dan Bottom Sheet, kalian harus menambahkan library material design terlebih dahulu ke dalam projek android studio. Berikut ini adalah kode library yang harus kalian tambahkan pada 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

XML Layout File

Buatlah file xml layout baru dengan nama sheet.xml. 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:id="@+id/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:behavior_hideable="true"
    app:behavior_peekHeight="85dp"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:orientation="vertical"
        android:padding="16dp">

        <TextView
            style="@style/TextAppearance.AppCompat.Headline"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textStyle="bold"
            android:text="Android Rion"
            android:textColor="@android:color/white" />

        <TextView
            style="@style/TextAppearance.AppCompat.Medium"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Tutorial Android Studio"
            android:textColor="@android:color/white" />
    </LinearLayout>

    <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:textStyle="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="CALL"
                android:textColor="@color/colorPrimaryDark" />
        </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:textStyle="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="WEBSITE"
                android:textColor="@color/colorPrimaryDark" />
        </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:textStyle="bold"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="SAVE"
                android:textColor="@color/colorPrimaryDark" />
        </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>


</LinearLayout>

Buka file activity_main.xml dalam folder layout. Tambahkan FloatingActionButton di dalam 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">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab_sheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="18dp"
        android:clickable="true"
        android:focusable="true"
        android:src="@drawable/ic_location"
        android:tint="@android:color/white"
        app:fabSize="normal"
        app:layout_anchor="@id/bottom_sheet"
        app:layout_anchorGravity="right|end" />

    <include layout="@layout/sheet" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Java Activity File

Buka file MainActivity dalam folder java. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.fabapp/MainActivity.java

Run ‘app’

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

AKHIR KATA

Itulah tadi tutorial singkat cara membuat floating action button menampilkan bottom sheet di android studio. Tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan hanya untuk membuat fab menampilkan bottom sheet di aplikasi android.

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.

- 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.