Cách đặt OnClickListener cho tiêu đề Toolbar/Action Bar trên Android

Giới thiệu

Bài viết hướng dẫn cách gán sự kiện click cho tiêu đề (title) của Toolbar/Action Bar. Vì Action Bar mặc định không hỗ trợ click title, ta cần dùng Toolbar tùy chỉnh với TextView bên trong.

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: Theme NoActionBar (bắt buộc)

<!-- res/values/themes.xml -->
<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <!-- Customize -->
</style>

Bước 3: Layout với Toolbar custom (res/layout/activity_main.xml)

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

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:titleTextAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">

        <TextView
            android:id="@+id/tvToolbarTitle"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:background="?attr/selectableItemBackground"
            android:paddingHorizontal="16dp"
            android:text="Home"
            android:textAppearance="@style/TextAppearance.Widget.AppCompat.Toolbar.Title" />

    </androidx.appcompat.widget.Toolbar>

    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="Click title to test"
        android:textSize="18sp" />

</LinearLayout>

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

package com.example.toolbaronclick

import android.os.Bundle
import android.view.View
import android.widget.TextView
import android.widget.Toolbar
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)

        // 1. Ẩn Action Bar mặc định
        supportActionBar?.hide()

        // 2. Set Toolbar làm Action Bar
        setSupportActionBar(toolbar)

        // 3. Gán click cho TextView title
        tvToolbarTitle.setOnClickListener {
            tvStatus.text = "Toolbar title clicked! $(System.currentTimeMillis())"
            // Xử lý: scroll to top, refresh, show menu, etc.
        }

        // 4. Set title text
        tvToolbarTitle.text = "My App Title"
    }

    // Helper (nếu cần tương thích Java)
    private fun setSupportActionBar(toolbar: Toolbar) {
        setSupportActionBar(toolbar as androidx.appcompat.widget.Toolbar)
    }
}

Giải thích quan trọng

• android:background="?attr/selectableItemBackground": Tạo hiệu ứng ripple khi click (Material Design).
• android:paddingHorizontal="16dp": Khoảng cách đệm, tăng touch target.
• Toolbar title mặc định (setTitle) **không clickable**. Phải nhúng TextView custom.

Các trường hợp sử dụng phổ biến

• Scroll to top: Click title → RecyclerView/ListView scroll lên đầu.
• Refresh: Click title → pull-to-refresh hoặc reload data.
• Navigate home: Click title → về màn hình chính (Home).
• Show dropdown: Click title → mở spinner/filter menu.

Ví dụ: Scroll to top RecyclerView

tvToolbarTitle.setOnClickListener {
    if (recyclerView.layoutManager is LinearLayoutManager) {
        (recyclerView.layoutManager as LinearLayoutManager).scrollToPositionWithOffset(0, 0)
    }
}

Lưu ý

• Touch target nên ≥ 48dp (Material Design) → thêm padding cho TextView.
• Nếu dùng Navigation Component, Up button đã handle sẵn, title click là extra.
• Tránh conflict với setDisplayHomeAsUpEnabled(true) (mũi tên back).