Cách xử lý click event trên icon Toolbar/Action Bar (HomeAsUpIndicator) Android

Giới thiệu

Bài viết hướng dẫn cách đặt icon tùy chỉnh cho nút Home/Up (mũi tên back) trên Action Bar và xử lý sự kiện click. Sử dụng setHomeAsUpIndicator() và onOptionsItemSelected().

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

Bước 1: Tạo project mới

Android Studio → File → New Project → Empty Activity.

Bước 2: Chuẩn bị icon custom

Đặt file icon (vector drawable khuyên dùng) vào res/drawable/ic_custom_back.xml hoặc .png. Kích thước 24dp x 24dp.

Bước 3: Giao diện (res/layout/activity_main.xml)

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

    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Custom HomeAsUpIcon click enabled"
        android:textSize="18sp" />

</LinearLayout>

Bước 4: Code (MainActivity.kt)

package com.example.toolbariconclick

import android.os.Bundle
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportActionBar?.title = "Home"
        supportActionBar?.subtitle = "Custom Back Icon"

        // 1. Bật Up button
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setDisplayShowHomeEnabled(true)

        // 2. Set icon tùy chỉnh cho Home/Up button
        supportActionBar?.setHomeAsUpIndicator(R.drawable.ic_custom_back)

        tvStatus.text = "Icon back tùy chỉnh đã set, click để test"
    }

    // 3. Xử lý click Home/Up button
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                // Xử lý logic: finish, navigateUp, confirm dialog, etc.
                onBackPressedDispatcher.onBackPressed()
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}

Giải thích

• setHomeAsUpIndicator(R.drawable.xxx): Thay đổi icon của nút Up (mặc định là mũi tên).
• android.R.id.home: ID hệ thống cho Home/Up button.
• onBackPressedDispatcher.onBackPressed(): Cách hiện đại xử lý back (API 33+), thay cho onBackPressed() deprecated.

Cách hiện đại: Toolbar + NavigationIcon

<!-- Layout -->
<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:navigationIcon="@drawable/ic_custom_back"
    app:title="Home" />

// Activity
setSupportActionBar(toolbar)
toolbar.setNavigationOnClickListener {
    onBackPressedDispatcher.onBackPressed()
}

Cách này **đơn giản hơn**, không cần override onOptionsItemSelected, và icon nằm trong layout dễ tùy chỉnh hơn.

Các icon Material Design phổ biến cho Back

• @drawable/ic_baseline_arrow_back_24 (mũi tên trái chuẩn)
• @drawable/ic_baseline_arrow_back_ios_24 (iOS style)
• @drawable/ic_baseline_close_24 (dấu X - cho dialog/modal)
• Tự tạo vector drawable cho brand icon.

Lưu ý

• Icon nên là VectorDrawable để scale tốt trên mọi density.
• Màu icon nên có contrast với background Action Bar (thường dùng ?attr/colorOnPrimary).
• Nếu dùng Navigation Component, Up button tự động handle bởi NavigationUI, icon mặc định là mũi tên. Để đổi icon: navController.setUpIndicator() hoặc custom Toolbar.