BottomAppBar trong Android (Java)

BottomAppBar là một thành phần trong thư viện Material Design, hoạt động như một Toolbar (ActionBar) nhưng nằm ở đáy màn hình, thường được sử dụng kết hợp với FloatingActionButton (FAB) để tạo điểm nhấn và thao tác nhanh.

❗️Khác với Bottom Navigation View:

• BottomAppBar là thanh công cụ, có thể chứa menu và icon thao tác, tương tự như Toolbar ở phía trên.
• Trong khi đó, Bottom Navigation View dùng để điều hướng giữa các màn hình chính (Fragments) với các icon cố định theo quy chuẩn từ Google.

Bạn dùng BottomAppBar khi muốn:

• Tạo thanh công cụ ở dưới
• Có FAB nằm nổi trên thanh
• Cần xử lý menu hoặc icon thao tác

🔁 So sánh với các thành phần tương tự:

Thành phần	Vị trí	Mục đích chính	Hỗ trợ menu	Dùng để điều hướng
TopAppBar (Toolbar)	Trên cùng	Thanh công cụ tiêu chuẩn (menu, icon, title)	✅ Có	⚠️ Không khuyến khích
BottomAppBar	Dưới cùng	Thanh công cụ đặt ở dưới, hỗ trợ FAB	✅ Có	⚠️ Không chính cho điều hướng
BottomNavigationView	Dưới cùng	Thanh điều hướng chính với icon/tab cố định	❌ Không	✅ Rất phù hợp

✅ Giống TopAppBar: Cùng hiển thị menu, icon thao tác.
❗️ Khác TopAppBar: BottomAppBar nằm ở đáy màn hình và hỗ trợ FAB nổi chính giữa.
❗️ Khác BottomNavigationView: BottomAppBar không dành để điều hướng giữa các màn hình chính mà thiên về tác vụ (actions).

🛠️ Cài đặt BottomAppBar

1️⃣ Thêm thư viện Material vào build.gradle (nếu chưa có)

gradleCopyEditimplementation 'com.google.android.material:material:1.10.0'

---

2️⃣Tạo menu cho BottomAppBar (res/menu/bottom_app_menu.xml)

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_search"
        android:title="Tìm kiếm"
        android:icon="@drawable/ic_search"
        android:showAsAction="ifRoom"/>
</menu>

---

3️⃣ Giao diện XML (activity_main.xml)

<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">

    <!-- Nội dung chính -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- FAB -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|center"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottom_app_bar"
        app:layout_anchorGravity="center" />

    <!-- BottomAppBar -->
    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="28dp"
        app:menu="@menu/bottom_app_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

---

4️⃣ Xử lý sự kiện trong MainActivity.java

javaCopyEditBottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);
bottomAppBar.setOnMenuItemClickListener(item -> {
    if (item.getItemId() == R.id.action_search) {
        Toast.makeText(this, "Tìm kiếm", Toast.LENGTH_SHORT).show();
        return true;
    }
    return false;
});

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(v -> {
    Toast.makeText(this, "Thêm mới", Toast.LENGTH_SHORT).show();
});

---

🎨 Tuỳ chỉnh nâng cao

• app:fabAlignmentMode="center" hoặc "end" để thay đổi vị trí FAB.
• app:hideOnScroll="true" giúp ẩn thanh khi cuộn lên.
• Kết hợp Navigation Component nếu muốn tích hợp điều hướng đơn giản.

---

✅ Tổng kết

Ưu điểm của BottomAppBar	Hạn chế
✅ Giao diện hiện đại, trực quan	⚠️ Không nên dùng cho điều hướng chính
✅ Tương thích tốt với FAB	⚠️ Hạn chế trong ứng dụng có nhiều tab
✅ Hỗ trợ hiển thị menu dưới cùng

• Share on Facebook