Cách thêm icon (logo) vào Action Bar trên Android

Giới thiệu

Bài viết hướng dẫn cách đặt icon/logo lên Action Bar (App Bar) bằng setIcon() hoặc setLogo(), và bật nút Home/Up button.

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ị resource

Đặt file icon (ví dụ: logo.png hoặc logo.xml vector) vào res/drawable/. Kích thước khuyến nghị: 24dp x 24dp (mdpi baseline).

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="Action Bar Icon Status"
        android:textSize="18sp" />

</LinearLayout>

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

package com.example.actionbaricon

import android.os.Build
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)

        // 1. Set title & subtitle
        supportActionBar?.title = "Home"
        supportActionBar?.subtitle = "My App"

        // 2. Bật Home button (mũi tên back)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        supportActionBar?.setHomeButtonEnabled(true)

        // 3. Set icon/logo
        supportActionBar?.setDisplayShowHomeEnabled(true)
        supportActionBar?.setDisplayUseLogoEnabled(true)
        supportActionBar?.setIcon(R.drawable.logo) // Hoặc setLogo(R.drawable.logo)

        tvStatus.text = "Icon enabled: logo hiển thị trên Action Bar"
    }

    // Xử lý click nút Home/Up (mũi tên back)
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        return when (item.itemId) {
            android.R.id.home -> {
                finish() // Quay về activity trước hoặc đóng app
                true
            }
            else -> super.onOptionsItemSelected(item)
        }
    }
}

Giải thích các phương thức

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

Khuyến nghị dùng Toolbar trong layout để tùy chỉnh linh hoạt hơn:

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:logo="@drawable/logo"
            app:title="Home"
            app:subtitle="My App" />

    </com.google.android.material.appbar.AppBarLayout>

    <TextView
        android:id="@+id/tvStatus"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:text="Toolbar với logo"
        app:layout_anchor="@id/toolbar"
        app:layout_anchorGravity="bottom|center" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    setSupportActionBar(toolbar)
    supportActionBar?.setDisplayHomeAsUpEnabled(true)
    supportActionBar?.setDisplayShowHomeEnabled(true)
}

Themes.xml (bắt buộc NoActionBar)

<style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
</style>