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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
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
Dalam pengaturan layout silahkan kamu buka res/layout/activity_main.xml lalu masukkan kode berikut ini
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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.
|
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.
Tinggalkan Balasan