Tutorial Dasar Cara Membuat Snackbar dengan Action di Aplikasi Android

Halo para android developer muda. Bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja. Pada kesempatan kali ini saya akan membagikan tutorial cara menggunakan snackbar dan menampilkan snackbar dengan action di android studio.

Snackbar mirip sekali dengan Toast. Memberi feedback kepada user. Snackbar menampilkan beberapa pesan kepada pengguna dan dapat berisi tindakan atau aksi. Ini muncul dibagian bawah layar dan diatas semua elemen layar lainnya. Mereke berada dalam ukuran yang berbeda untuk ponsel dan tablet. Snackbar secara otomatis menghilang setelah waktu tertentu. Ini bisa berisi ikon, tetapi menggunakan ikon itu tidak bagus.

Seperti yang telah saya katakan sebelumnya, Snackbar dapat digunakan sebagai pengganti toast. Snackbar lebih banyak digunakan daripada toast karena fitur nya lebih banyak ketimbang toast.

- Advertisement -

Dalam tutorial ini kalian akan belajar dasar cara menggunakan dan menampilkan snackbar dengan action di aplikasi android dengan library material design.

Tutorial Dasar Cara Menggunakan 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)

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

Library Material Design

Tambahkan library material design ke dalam projek android studio. Berikut ini adalah kode untuk library material design yang harus kalian tambahkan ke dalam file build.gradle (Module: app).

Gradle Scripts/build.gradle (Module: app)

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

Ikuti tutorial ini untuk menambahkan library atau pihak ketiga kedalam projek android studio.

CARA MENAMBAHKAN LIBRARY KEDALAM PROJEK ANDORID STUDIO

XML Layout File

Buka file activity_main.xml dalam folder layout pada projek android studio kalian. Tambahkan widget button didalamnya. Berikut ini adalah kode lengkap untuk file activiy_main.xml

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/content"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:onClick="openSnackbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="buka snackbar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Java File

Sekarang buka file MainActivity dalam folder java pada projek android studio kalian. Gunakan kode dibawah ini untuk membuat aplikasi menampilkan snackbar. Berikut ini adalah kode lengkap untuk file MainActivity.java

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

[sociallocker id=”1410″]

package com.androidrion.snackbarapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

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

public class MainActivity extends AppCompatActivity {

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

    public void openSnackbar(View view) {
        Snackbar.make(view, "Ini adalah snackbar", Snackbar.LENGTH_SHORT).show();
    }
}

[/sociallocker]

Run ‘app’

Jalankan projek android studio kalian. Pada tampilan awal aplikasi, kalian bisa melihat ada tombol yang berada di tengah aplikasi. Jika kalian mengklik tombol tersebut, maka aplikasi akan menampilkan pesan kecil yang ada dibawah layar aplikasi bertuliskan “Ini adalah snackbar”. Apabila kode diatas tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

Mengganti Warna Background

Jika kalian ingin mengganti warna background dari snackbar, kalian cukup menambahkan function setBackgroundColor di dalam snackbar. Berikut ini adalah kode lengkap untuk membuat background snackbar berganti warna.


package com.androidrion.snackbarapp;

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

import android.os.Bundle;
import android.view.View;

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

public class MainActivity extends AppCompatActivity {

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

    public void openSnackbar(View view) {
        Snackbar snackbar = Snackbar.make(view, "Ini adalah snackbar", Snackbar.LENGTH_LONG);
        snackbar.getView().setBackgroundColor(ContextCompat.getColor(getApplicationContext(), R.color.colorPrimary));
        snackbar.show();
    }

}

Maka hasilnya akan terlihat seperti pada gambar dibawah ini.

Snackbar dengan Action

Jika kalian ingin menambahkan aksi di dalam snackbar, kalian cukup menambahkan function setAction di dalam snackbar. Berikut ini adalah kode lengkap untuk membuat snackbar dengan action.

package com.androidrion.snackbarapp;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

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

public class MainActivity extends AppCompatActivity {

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

    public void openSnackbar(final View view) {
        Snackbar.make(view, "Ini adalah snackbar", Snackbar.LENGTH_LONG)
                .setAction("UNDO", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Snackbar.make(view, "UNDO CLICKED!", Snackbar.LENGTH_SHORT).show();
                    }
                }).show();
    }
}

Maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah cara menggunakan dan menampilkan snackbar dengan action di aplikasi android. Tutorial diatas sangatlah mudah dikerjakan karena tidak begitu banyak kode yang digunakan hanya untuk menampilkan snackbar dalam 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 projek pada tutorial ini, silahkan klik pada tombol di bawah ini.

[sociallocker id=”1406″]

[/sociallocker]

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