Sử dụng Snackbar trong Android

Sử dụng Snackbar trong Android

Hướng dẫn này minh họa cách hiển thị Snackbar (thông báo nhẹ ở dưới màn hình) với action button và tùy chỉnh màu sắc.

Bước 1: Tạo dự án mới

Mở Android Studio, chọn File → New Project và điền thông tin cần thiết.

Bước 2: Thêm dependency Material Design

Mở build.gradle (Module: app) và thêm:

dependencies {
    implementation 'com.android.support:design:28.0.0'
    // Hoặc phiên bản mới hơn (AndroidX):
    // implementation 'com.google.android.material:material:1.11.0'
}

Bước 3: Thiết kế giao diện (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 bring up snackBar" />
    <Button
        android:id="@+id/callbackButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_below="@id/textView"
        android:layout_marginTop="16sp"
        android:text="Tap To Display SnackBar"
        android:textStyle="bold"
        android:textSize="16sp"/>
</RelativeLayout>

Bước 4: Code MainActivity.java

import android.graphics.Color;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
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) {
                Snackbar snackBar = Snackbar.make(v, "An Error Occurred!", Snackbar.LENGTH_LONG)
                    .setAction("RETRY", new View.OnClickListener() {
                        @Override
                        public void onClick(View view) {
                            // Xử lý khi nhấn RETRY
                            Toast.makeText(MainActivity.this, "Retry clicked", Toast.LENGTH_SHORT).show();
                        }
                    });
                
                // Tùy chỉnh màu sắc
                snackBar.setActionTextColor(Color.BLUE); // Màu chữ action
                
                // Tùy chỉnh text message color
                View snackBarView = snackBar.getView();
                TextView textView = snackBarView.findViewById(com.google.android.material.R.id.snackbar_text);
                // Hoặc cho support library cũ:
                // TextView textView = snackBarView.findViewById(android.support.design.R.id.snackbar_text);
                textView.setTextColor(Color.RED);
                
                // Tùy chỉnh background color
                snackBarView.setBackgroundColor(Color.DKGRAY);
                
                snackBar.show();
            }
        });
    }
}

Bước 5: Cấu hình AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Chạy ứng dụng

Kết nối thiết bị, chạy app. Nhấn nút "Tap To Display SnackBar". Snackbar hiện lên dưới cùng với chữ đỏ "An Error Occurred!", nút "RETRY" màu xanh, nền xám đậm. Nhấn RETRY sẽ hiện Toast.

Các kiểu Snackbar

// Snackbar đơn giản
Snackbar.make(view, "Message", Snackbar.LENGTH_SHORT).show();

// Snackbar với Action
Snackbar.make(view, "Message", Snackbar.LENGTH_INDEFINITE)
    .setAction("UNDO", v -> { /* undo action */ })
    .show();

// Snackbar với duration tùy chỉnh (ms)
Snackbar.make(view, "Message", 5000).show(); // 5 giây

// Snackbar với callback
Snackbar.make(view, "Message", Snackbar.LENGTH_LONG)
    .addCallback(new Snackbar.Callback() {
        @Override
        public void onDismissed(Snackbar transientBottomBar, int event) {
            // event: DISMISS_EVENT_SWIPE, DISMISS_EVENT_ACTION, DISMISS_EVENT_TIMEOUT...
        }
        @Override
        public void onShown(Snackbar sb) { }
    })
    .show();

Tùy chỉnh nâng cao (Material Components)

// Với Material Components library
com.google.android.material.snackbar.Snackbar snackbar = 
    com.google.android.material.snackbar.Snackbar.make(view, "Message", Snackbar.LENGTH_LONG);

// Set background color với MaterialColor
snackbar.setBackgroundTint(Color.BLUE);

// Set text color
snackbar.setTextColor(Color.WHITE);

// Set action text color
snackbar.setActionTextColor(Color.YELLOW);

// Custom layout
Snackbar snackbar = Snackbar.make(view, "", Snackbar.LENGTH_LONG);
View customView = getLayoutInflater().inflate(R.layout.custom_snackbar, null);
Snackbar.SnackbarLayout snackbarLayout = (Snackbar.SnackbarLayout) snackbar.getView();
snackbarLayout.removeAllViews();
snackbarLayout.addView(customView, 0);
snackbar.show();

Best Practices

• Dùng Snackbar.LENGTH_INDEFINITE cho action quan trọng (Undo delete)
• Dùng view là CoordinatorLayout hoặc root view để Snackbar định vị đúng
• Tránh hiển thị quá nhiều Snackbar cùng lúc (có queue tự động)
• Snackbar tự động tránh FloatingActionButton nếu dùng CoordinatorLayout