Cara Membuat & Menampilkan Custom Snackbar 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 dasar cara membuat snackbar di android studio. Dan sekarang saya akan membagikan tutorial cara membuat snackbar custom di android studio.

Dengan dirilisnya Android Lollipop 5.0, Google juga merilis pedoman desain baru yang disebut dengan Material Design. Google memperkenalkan banyak alat dan pedoman dengan material design dan juga merilis design support library untuk menggunakan material design untuk di atas Android Lollipop. Dengan bantuan library ini, Kalian dapat menggunakan material design apa pun untuk perangkat android.

Salah satu tools material design yang bisa kalian gunakan adalah Snackbar yang sebelumnya sudah saya buat tutorial dasarnya. Dasar dari tampilan widget ini adalah berwarnakan hitam, muncul di bagian bawah aplikasi dan memiliki aksi untuk user. Tampilan itu semua bisa kita ubah sesuai dengan keinginan kita.

- Advertisement -

Untuk itu dalam tutorial ini, kalian akan belajar cara membuat custom snackbar di android studio dan menampilkannya di aplikasi android dengan cara yang mudah dan sederhana.

Tutorial Cara Membuat Custom Snackbar di Android Studio

Buatlah projek android studio baru dengan informasi sebagai berikut:

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

Daftar file xml yang digunakan dalam projek ini

  1. activity_main.xml
  2. snackbar_custom.xml

File java yang digunakan dalam projek ini

  • MainActivity.java

File drawable yang digunakan dalam projek ini

  • icon.png

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

Library Material Design

Seperti yang telah saya jelaskan diatas bahwa snackbar adalah salah satu tools yang dimiliki material design. Untuk itu, kita harus menambahkan library material design kedalam projek android studio kita agar kita bisa menggunakannya. Berikut ini adalah kode untuk library material design yang bisa kita tambahkan pada aplikasi android studio kita.

    implementation 'com.google.android.material:material:1.0.0'

Letakkan kode diatas dalam file build.gradle (Module: app) atau kalian bisa mengikuti tutorial di bawah ini.

CARA MENAMBAHKAN LIBRARY DI ANDROID STUDIO

Drawable File

Dalam tutorial ini, saya menggunakan file png sebagai gambar yang akan muncul pada snackbar yang dibuat custom. Saya menggunakan gambar dibawah ini dalam projek saya.

Simpan gambar dengan nama icon.png dan pindahkan kedalam folder drawable di projek android studio kalian. Kalian bisa menggunakan gambar lain.

XML Layout File

Buka file activity_main.xml dalam folder layout pada aplikasi android studio kalian. Tambahkan widget button di dalamnya untuk membuat user bisa menampilkan snackbar. Berikut ini adalah kode lengkap untuk file activity_main.xml

app/res/layout/activity_main.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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="custom snackbar"/>

</LinearLayout>

Buatlah file xml layout baru dengan cara klik kanan pada folder layout, lalu pilih New>Layout resource file. Simpan file xml layout baru tersebut dengan nama snackbar_custom. Berikut ini adalah kode lengkap untuk file snackbar_custom.xml

app/res/layout/snackbar_custom.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:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        app:cardBackgroundColor="@android:color/white"
        app:cardCornerRadius="5dp"
        app:cardElevation="1dp"
        app:cardPreventCornerOverlap="true"
        app:cardUseCompatPadding="true">

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

            <ImageView
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:src="@drawable/icon" />

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

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Android Rion"
                    android:textAppearance="@style/TextAppearance.AppCompat.Subhead"
                    android:textColor="@android:color/black" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Tutorial Android Studio & UI Design"
                    android:textAppearance="@style/TextAppearance.AppCompat.Caption"
                    android:textColor="@android:color/darker_gray" />

            </LinearLayout>

            <View
                android:id="@+id/separator"
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="15dp"
                android:layout_marginRight="15dp"
                android:background="@android:color/darker_gray" />

            <TextView
                android:id="@+id/tv_undo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="?attr/selectableItemBackground"
                android:clickable="true"
                android:focusable="true"
                android:text="SUBSCRIBE"
                android:textAppearance="@style/TextAppearance.AppCompat.Body2"
                android:textColor="@android:color/holo_red_dark" />

        </LinearLayout>

    </androidx.cardview.widget.CardView>

</LinearLayout>

Java Activity File

Sekarang buka file MainActivity dalam folder java. Gunakan kode dibawah untuk membuat button dalam file layout bisa membuat snackbar custom muncul. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.snackbarapp/MainActivity.java

package com.androidrion.snackbarapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.material.snackbar.BaseTransientBottomBar;
import com.google.android.material.snackbar.Snackbar;

public class MainActivity extends AppCompatActivity {

    Snackbar snackbar;
    Button button;
    View custom_view;

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

        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                snackbar = Snackbar.make(v, " ", Snackbar.LENGTH_LONG);
                custom_view = getLayoutInflater().inflate(R.layout.snackbar_custom, null);

                snackbar.getView().setBackgroundColor(Color.TRANSPARENT);
                Snackbar.SnackbarLayout snackBarView = (Snackbar.SnackbarLayout) snackbar.getView();
                snackBarView.setPadding(0, 0, 0, 0);
                (custom_view.findViewById(R.id.tv_undo)).setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        snackbar.dismiss();
                        Toast.makeText(getApplicationContext(), "SUBSCRIBE Clicked!", Toast.LENGTH_SHORT).show();
                    }
                });

                snackBarView.addView(custom_view, 0);
                snackbar.show();
            }
        });
    }

}

Run ‘app’

Jalankan projek android studio kalian. Kalian bisa melihat pada tampilan awal ada tombol di tengah layar aplikasi. Jika kalian mengklik tombol tersebut, maka aplikasi akan menampilkan informasi yang seperti telah kita desain sebelumnya pada file snackbar_custom. 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 snackbar custom di android studio. Tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan untuk membuat custom snackbar. Kalian bisa membuat snackbar yang sesuai dengan tampilan aplikasi kalian dalam file xml tadi.

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.