วิธีใช้ Snackbar ใน Android (Material Design)

บทความนี้สาธิตวิธีใช้ Snackbar จาก Material Design Library แสดงข้อความชั่วคราวพร้อม Action ที่ด้านล่างหน้าจอ

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

Android Studio → File → New Project

ขั้นตอนที่ 2: เพิ่ม Dependency (build.gradle)

ใน build.gradle (Module: app) เพิ่ม:

dependencies {
    implementation 'com.google.android.material:material:1.9.0'
    // หรือเก่า: implementation 'com.android.support:design:28.0.0'
}

Sync Project หลังเพิ่ม

ขั้นตอนที่ 3: Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Click button below to show Snackbar" />

    <Button
        android:id="@+id/callbackButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView"
        android:layout_centerInParent="true"
        android:layout_marginTop="16dp"
        android:text="Show Snackbar"
        android:textStyle="bold" />

</RelativeLayout>

ขั้นตอนที่ 4: MainActivity.java

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button button = findViewById(R.id.callbackButton);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showSnackbar(v);
            }
        });
    }

    private void showSnackbar(View view) {
        Snackbar snackbar = Snackbar.make(view, "An error occurred!", Snackbar.LENGTH_LONG)
                .setAction("RETRY", new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        // จัดการ Retry action
                        Snackbar.make(view, "Retry clicked!", Snackbar.LENGTH_SHORT).show();
                    }
                })
                .setActionTextColor(Color.BLUE); // สีข้อความ Action

        // ปรับสีข้อความหลัก
        View snackbarView = snackbar.getView();
        TextView textView = snackbarView.findViewById(com.google.android.material.R.id.snackbar_text);
        if (textView != null) {
            textView.setTextColor(Color.RED);
            textView.setMaxLines(3); // รองรับหลายบรรทัด
        }

        // ปรับสีพื้นหลัง Snackbar
        snackbarView.setBackgroundColor(Color.DKGRAY);

        snackbar.show();
    }
}

Snackbar Duration Options

การปรับแต่ง Snackbar (Customization)

1. เปลี่ยนสีพื้นหลังและข้อความ

Snackbar snackbar = Snackbar.make(view, "Message", Snackbar.LENGTH_LONG);
View sbView = snackbar.getView();
sbView.setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
TextView tv = sbView.findViewById(com.google.android.material.R.id.snackbar_text);
tv.setTextColor(Color.WHITE);
snackbar.show();

2. Custom Layout (Complete Control)

// สร้าง layout/custom_snackbar.xml
// แล้วinflate และใช้ Snackbar.make(...).setAnchorView(...)

3. ตำแหน่งการแสดง (Anchor View)

// แสดงเหนือ View เฉพาะ (เช่น FAB, BottomNavigation)
snackbar.setAnchorView(floatingActionButton);

Snackbar vs Toast

Best Practices

• ใช้ Snackbar สำหรับข้อความที่มี Action (Undo, Retry, Settings)
• ใช้ Toast สำหรับข้อความแจ้งเตือนสั้นๆ ไม่ต้องการตอบสนอง
• ไม่ควรแสดง Snackbar หลายอันพร้อมกัน (Queue เอง)
• Anchor View ควรเป็น View ที่อยู่ใน Layout เดียวกัน (CoordinatorLayout ดีที่สุด)

Kotlin Extension (สะดวกกว่า)

// build.gradle: implementation 'com.google.android.material:material:1.9.0'
import com.google.android.material.snackbar.Snackbar

view.showSnackbar("Message") // Extension function
Snackbar.make(view, "Message", Snackbar.LENGTH_LONG)
    .setAction("Action") { /* handle click */ }
    .show()