Cara Membuat SnackBar Sederhana di Android

Rating: 80
Author: engkungs

By engkungs Last updated Jan 9, 2019

Snackbar adalah komponen widget dari library design (android.support.design) yang hampir mirip di seperti Toast dan AlertDialog seperti halnya di padu-kan menjadi satu. Widget ini (Snackbar) juga biasanya di tampilkan dalam desain material (Material Design).

Snackbar biasanya muncul (tampil) dari bawah sebuah elemen yang telah di operasi-kan sesuai yang di butuhkan. Dalam pembuatan Snackbar, kamu harus menggunakan perpustakaan (library) com.android.support:design untuk memulainya.

Kita disini akan mencoba membuat snackbar android sederhana yang akan di panggil dengan tombol FAB (FloatingActionButton) untuk menampilkan snackbar. Mari kita mencoba membuatnya, simak tutorial di bawah ini dengan baik.

Memulai Membuat SnackBar Sedehana di Android Studio

Seperti yang sudah saya kasih tahu di atas, kita akan mencoba membuat (menampilkan) Snackbar dengan FAB untuk memanggilnya.

Membuat Project Baru SnackBar

Hal pertama yang akan harus kamu lakukan yaitu dengan membuat proyek baru di Android Studio dengan nama “Snackbar” lalu isi domain package “com.engkungs.snackbar” untuk menyesuaikan pada tutorial kali ini.

Menambahkan Perpustakaan Library Design dan AppCompat

Untuk membuat Snackbar maka kita harus menambahkan library design dan karena kita menggunakan theme compat, maka kita juga harus menambahkan library AppCompat v7. Buka build.grandle lalu masukkan kode di bawah ini

apply plugin: 'com.android.application'

android {
    compileSdkVersion 26
    defaultConfig {
        applicationId "com.engkungs.snackbar"
        minSdkVersion 17
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    implementation 'com.android.support:design:26.1.0'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:0.5'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'
}

apply plugin: 'com.android.application'

android {

compileSdkVersion 26

defaultConfig {

applicationId "com.engkungs.snackbar"

minSdkVersion 17

targetSdkVersion 26

versionCode 1

versionName "1.0"

testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"

}

buildTypes {

release {

minifyEnabled false

proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'

}

dependencies {

implementation fileTree(dir: 'libs', include: ['*.jar'])

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.0.2'

implementation 'com.android.support:design:26.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:0.5'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'

}

Mengatur Layout

Nov 10, 2018

Cara Membuat Spinner Sederhana di Android

Nov 9, 2018

Dalam pengaturan layout silahkan kamu buka res/layout/activity_main.xml lalu masukkan kode berikut ini

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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="com.engkungs.snackbar.MainActivity">
<LinearLayout
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:gravity="center"
        android:textSize="25pt"
        android:textColor="@color/colorPrimaryDark"
        android:text="@string/app_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.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="com.engkungs.snackbar.MainActivity">

<LinearLayout

android:gravity="center"

android:layout_width="match_parent"

android:layout_height="match_parent">

<TextView

android:gravity="center"

android:textSize="25pt"

android:textColor="@color/colorPrimaryDark"

android:text="@string/app_name"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</LinearLayout>

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

app:srcCompat="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>

Mengatur Java

Sekarang buka com/engkungs/snackbar/MainActivity.java. Dan masukkan kode seperti di bawah ini.

package com.engkungs.snackbar;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Snackbar.make(view, "Ini adalah isi dari snackbar.Jangan lupa, sering-sering main ke www.engkungs.com", Snackbar.LENGTH_LONG)
                        .setAction("Tampilan Snackbar", null).show();
            }
        });
    }

}

package com.engkungs.snackbar;

import android.os.Bundle;

import android.support.design.widget.FloatingActionButton;

import android.support.design.widget.Snackbar;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

public class MainActivity extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);

fab.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Snackbar.make(view, "Ini adalah isi dari snackbar.Jangan lupa, sering-sering main ke www.engkungs.com", Snackbar.LENGTH_LONG)

.setAction("Tampilan Snackbar", null).show();

}

});

}

Keterangan di atas, untuk menampilkan snackbar, kita cukup memasukkan kode di bawah ini.

Snackbar.make(view, "Ini adalah isi dari snackbar ber", Snackupa teks.LENGTH_LONG)
                        .setAction("Tampilan Snackbar", null).show();

1 2	Snackbar.make(view, "Ini adalah isi dari snackbar ber", Snackupa teks.LENGTH_LONG) .setAction("Tampilan Snackbar", null).show();

Jalankan Aplikasi

Nah langkah terakhir yaitu jalankan (run) Aplikasi yang telah kita buat tadi dan coba sentuh tombol FAB. Maka snackbar akan segera tampil di elemen bawah.

Sekian dari tutorial kali ini dalam pembuatan SnackBar sederhana di Android Studio dan semoga dapat sangat bermanfaat.

80%

Awesome

Design