TopAppBar trong Android (Java)

🔍 Giới thiệu

TopAppBar (hay thường được gọi là Toolbar) là thành phần ở đầu màn hình, hiển thị tiêu đề, logo, và các biểu tượng hành động như Tìm kiếm, Giỏ hàng, Menu tùy chọn, v.v.

Nó thay thế ActionBar cũ và được tùy biến dễ dàng hơn.

---

1️⃣ Tạo menu – top_app_bar_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto>
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="Tìm kiếm"
        app:showAsAction="ifRoom"/>
    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_settings"
        android:title="Cài đặt"
        app:showAsAction="never"/>
</menu>

---

2️⃣ Giao diện – activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 2️⃣.1️⃣ AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <!-- 2️⃣.2️⃣ TopAppBar (MaterialToolbar) -->
        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/topAppBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:title="Trang chủ"
            android:titleTextColor="@android:color/white"
            app:navigationIcon="@drawable/ic_menu"
            app:menu="@menu/top_appbar_menu" />

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

    <!-- 2️⃣.3️⃣ Nội dung chính cuộn được -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 2️⃣.4️⃣ ConstraintLayout chứa nội dung -->
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

            <!-- Ví dụ nội dung -->
            <TextView
                android:id="@+id/welcomeText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="Chào mừng đến với TiiL App!"
                android:textSize="18sp"
                android:textStyle="bold"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent" />

            <EditText
                android:id="@+id/inputName"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="Nhập tên của bạn"
                app:layout_constraintTop_toBottomOf="@id/welcomeText"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                android:layout_marginTop="16dp" />

   

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

3️⃣ Xử lý sự kiện – MainActivity.java

public class MainActivity extends AppCompatActivity {

    private MaterialToolbar topAppBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        topAppBar = findViewById(R.id.topAppBar);

        // Navigation icon (hamburger/menu)
        topAppBar.setNavigationOnClickListener(v ->
            Toast.makeText(this, "Mở menu điều hướng", Toast.LENGTH_SHORT).show()
        );

        // Action menu item click
        topAppBar.setOnMenuItemClickListener(item -> {
            switch (item.getItemId()) {
                case R.id.action_search:
                    Toast.makeText(this, "Tìm kiếm...", Toast.LENGTH_SHORT).show();
                    return true;
                case R.id.action_settings:
                    Toast.makeText(this, "Mở cài đặt", Toast.LENGTH_SHORT).show();
                    return true;
            }
            return false;
        });
    }
}

---

💡 Mở rộng

• Có thể kết hợp DrawerLayout để mở Navigation Drawer khi click navigationIcon.
• Có thể đổi tiêu đề động bằng topAppBar.setTitle("Tiêu đề mới");
• Nếu dùng Fragment: đặt Toolbar trong MainActivity và điều khiển từ Fragment qua interface hoặc Navigation Component.

---

🎯 CoordinatorLayout là gì?

Nó là một layout đặc biệt trong Android (thuộc thư viện Material Components), có khả năng:

🔁 Tạo ra các tương tác mượt mà giữa các thành phần UI như:

• AppBar, FloatingActionButton, BottomAppBar, Snackbar, v.v.
• Tự động ẩn/hiện AppBar khi cuộn
• Đẩy FAB khi xuất hiện Snackbar

📦 Nó là một container đặc biệt, thường bao quanh các thành phần như AppBarLayout, BottomAppBar, ConstraintLayout…

---

🛠️ Tại sao nên dùng?

Tình huống	Dùng CoordinatorLayout
AppBar cuộn khi scroll nội dung	✅ Có
FAB tự động ẩn hiện	✅ Có
Snackbar không che FAB	✅ Có
Layout UI phức tạp nhiều ràng buộc	❌ Không dùng trực tiếp (nên dùng ConstraintLayout lồng bên trong)

---

💡 3️⃣ Các thành phần phối hợp

Thành phần	Vai trò
AppBarLayout	Tạo thanh TopAppBar có thể cuộn, sụp xuống
MaterialToolbar	Chính là TopAppBar
BottomAppBar	Thanh điều hướng phía dưới
FloatingActionButton	Nút tròn hành động
NestedScrollView, RecyclerView	Nội dung có thể cuộn
layout_behavior	Thuộc tính để liên kết behavior động

• Share on Facebook