Cách tùy chỉnh layout SnackBar trong Android

Giới thiệu

SnackBar là thành phần UI quan trọng trong Material Design để hiển thị thông báo ngắn gọn. Bài viết này hướng dẫn cách tùy chỉnh hoàn toàn layout, màu sắc, font chữ của SnackBar.

Các bước thực hiện

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

Tạo project Android Studio mới với Empty Activity.

Bước 2: Layout chính (res/layout/activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btnCustomSnackbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:backgroundTint="@color/colorAccent"
        android:text="Custom Snackbar"
        android:textColor="@android:color/white" />

</LinearLayout>

Bước 3: Code Java tùy chỉnh SnackBar (src/MainActivity.java)

package com.example.customsnackbar;

import android.graphics.Color;
import android.graphics.Typeface;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
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);

        findViewById(R.id.btnCustomSnackbar).setOnClickListener(v -> {
            // Tạo SnackBar cơ bản
            Snackbar snackbar = Snackbar.make(v, "Custom Color", Snackbar.LENGTH_LONG);

            // Lấy view gốc của SnackBar
            View snackView = snackbar.getView();

            // Tùy chỉnh background color
            snackView.setBackgroundColor(Color.WHITE);

            // Tùy chỉnh text chính
            TextView textView = snackView.findViewById(com.google.android.material.R.id.snackbar_text);
            if (textView != null) {
                // Load font tùy chỉnh từ assets
                Typeface font = Typeface.createFromAsset(getAssets(), "LatoRegular.ttf");
                textView.setTypeface(font);
                textView.setTextColor(Color.BLACK);
                textView.setGravity(Gravity.CENTER);
            }

            // Tùy chỉnh text action
            TextView actionTextView = snackView.findViewById(com.google.android.material.R.id.snackbar_action);
            if (actionTextView != null) {
                Typeface font = Typeface.createFromAsset(getAssets(), "LatoRegular.ttf");
                actionTextView.setTypeface(font);
                actionTextView.setTextColor(Color.BLACK);
            }

            // Thêm action
            snackbar.setAction("UNDO", view -> {
                Snackbar.make(view, "Action clicked!", Snackbar.LENGTH_SHORT).show();
            });

            snackbar.show();
        });
    }
}

Lưu ý quan trọng:

• Cần thêm font LatoRegular.ttf vào thư mục assets/fonts/
• Sử dụng com.google.android.material.R.id.snackbar_text và snackbar_action thay vì package support cũ
• SnackBar cần View cha (CoordinatorLayout hoặc View bất kỳ) để hiển thị

Bước 4: Cấu hình Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.customsnackbar">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        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

Nhấn nút "Custom Snackbar" để xem SnackBar với background trắng, chữ đen, font tùy chỉnh và action UNDO.

Mở rộng: Tùy chỉnh layout hoàn toàn

Để tùy chỉnh layout phức tạp hơn (thêm icon, nhiều dòng text, custom view), sử dụng Snackbar.make() kết hợp với setView() (API 29+) hoặc inflate custom layout vào SnackBar view.