Tìm Hiểu Về BottomAppBar Trong Material Components Của Android

Một chàng trai đột nhiên xuất hiện trong Application Google IO 2018! Tôi đã rất ngạc nhiên !!!!

Khi quan sát kỹ giao diện của màn hình, tôi đã nhận thấy rằng FloatingActionButton đã bị 'kẹt' trong AppBar. (button hình tròn thấp hơn bên phải). Tôi đã bắt đầu chú ý và muốn biết xem nó là cái gì? Và cuối cùng tôi cũng đã có câu trả lời. Đó là BottomAppBar, cái mà đã được extension từ Toolbar.

BottomAppBar được giới thiệu tạiGoogle I/O 2018, nó nằm trong gói thư viện hỗ trợ design của google được gọi là Material Components. Nó nằm hoàn toàn trong gói package hoàn toàn mới là com.google.android.material. Mục địch của nó là nhằm tăng trải nghiệm của người dùng android.

Trong bài viết ngắn này, tôi sẽ cùng các bạn thực hiện nó.

Mục tiêu của chúng ta là xây dựng 1 giao diện như này.

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

Add những cái bạn cần cho app/ build.gradle

implementation 'androidx.appcompat:appcompat:1.0.0-rc01'
implementation 'com.google.android.material:material:1.0.0-rc01'

Cài Đặt BottomAppBar

Chú ý những attribute bạn muốn thực hiện tại thời điểm này , sủ dụng BottomAppBar Ngoài ra chú ý rằng BottomAppBar cần có CoordinatorLayout như là parentlayout của nó. activitymain.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<!-- ... -->

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        style="@style/Widget.MaterialComponents.BottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center">

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Đây là màn hình chúng ta đã thực hiện cho đến bước này.

Cài Đặt FloatingActionButton

Tiếp theo chúng ta sẽ tạo một FloatingActionButton vào trong giao diện màn hình như bên dưới

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<!-- ... -->

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:fabAlignmentMode="center">

</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_attach_money_white_24dp"
    app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Đây là một thứ rất quan trọng

app:layout_anchor="@id/bottom_app_bar" 

Với duy nhất 1 dòng code trên, chúng ta đã cài đặt FloatActionButton trên BottomAppBar.

Vậy Làm Sao Chúng Ta Có Thể Làm FloatActionButton "Bị Kẹt" Trên BottomAppBar ?
Đây chính là cách app :fabAlignmentMode="center", một thuộc tính đặc biệt trên BottomAppBar.

Nếu bạn thay đổi giá trị của của thuộc tính app :fabAlignmentMode="center" trên BottomAppBar tới end thì FloatingActionButton sẽ được đặt cạnh bên phải như hình bên dưới:

Như này thực sự là quá đơn giản, nên tôi đã add thêm BottomNavigationView tới BottomAppBar. Vậy việc đầu tiên chúng ta cần làm là tạo một menu được hiển thị trong BottomNavigationView (res/menu/bottom_navigation_menu.xml)

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/navigation_action_share"
        android:icon="@drawable/ic_share_black_24dp"
        android:title="@string/navigation_action_share"
        />

    <item
        android:id="@+id/navigation_action_shopping"
        android:icon="@drawable/ic_shopping_cart_black_24dp"
        android:title="@string/navigation_action_shopping"
        />
</menu>

Tiếp theo chúng ta sẽ add BottomNavigatoinView vào trong BottomAppBar.

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottom_app_bar"
    style="@style/Widget.MaterialComponents.BottomAppBar"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:fabAlignmentMode="center">

    <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:itemIconTint="@drawable/background_selector"
            app:itemTextColor="@drawable/background_selector"
            app:menu="@menu/bottom_navigation_menu"/>
</com.google.android.material.bottomappbar.BottomAppBar>

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_attach_money_white_24dp"
    app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Các bạn chạy project, các bạn sẽ thấy màn hình như này :

Các bạn có thể tham khảo source code tại đây