Một Số Cách Để Có Trải Nghiệm Tốt Hơn Khi Làm Việc Với BottomNavigationView Trên Android

BottomNavigationView tạo một bottom navigation bar, làm nó dễ dàng giúp bạn khám phá và chuyển đổi việc xem nội dung của các view khác nhau chỉ bằng một single tap. Mô hình này thường được sử dụng khi bạn có 3 hoặc 5 điểm đến để điều hướng.

Điều gì sẽ sảy ra khi chúng ta có nhiều hơn 3 destination ( 3 tab)

Khi ứng dụng của chúng ta có 3 destination hay còn gọi là 3 tab , thì các tab sẽ tự động phần chia để đảm bảo chúng đồng nhất về khoảng cách, tăng 1 chút kích thước của label, style là bold khi tab được chọn

Bây giờ, nếu trong ứng dụng của chúng ta có nhiều hơn 3 tab, hành vi mặc định của BottomNavigationView là enable một vài thức được gọi là shift mode. Trong mode này, khi một Item hay một tab được chọn, một annimation sẽ được khởi động để làm nổi bật phần item hay tab được chọn cũng như một hiệu ứng thu nhỏ các item hay tab còn lại như hình bên dưới.

Trong một vài trường hợp, hiệu ứng này không phải là những thứ chúng ta cần trong ứng dụng của chúng ta. Chúng ta cần áp dụng một cái gì đó đơn giản hơn, giống như trong trường hợp chúng ta có 3 tab . Vậy giải pháp ở đây là gì ?? Giải pháp ở đây là chúng ta sử dụng labelVisibilityMode từ app workspace:

<android.support.design.widget.BottomNavigationView
    android:id="@+id/main_bottom_navigation"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="@color/bottombar_background"
    android:theme="@style/Widget.BottomNavigationView"
    app:itemBackground="@color/bottombar_background"
    app:itemIconTint="@drawable/bottomnav_item_color"
    app:itemTextColor="@drawable/bottomnav_item_color"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
   app:labelVisibilityMode="labeled"
    app:menu="@menu/main_bottom_navigation" />

Trong đoạn code trên chúng ta đã sử dụng thuộc tính app:labelVisibilityMode="labeled"

Chúng ta sẽ tóm tắt một vài giá trị của thuộc tính trên có thể nhận. app:labelVisibilityMode=”[labeled, unlabeled, selected, auto]” vơi support library từ 28-alpha

  • labeled sẽ giữ tất cả labels là visible
  • unlabeled sẽ hiển thị duy nhất icon
  • selected sẽ chỉ hiển thị label cho item được chọn
  • auto sẽ tự động chọn là * labeled* hoặc selected dựa trên số lượng item chúng ta có. Chọn labeled khi có khoảng 1-3 tiem và selected khi có 3+ item.

Bên dưới là hình ảnh trực quan chúng ta sẽ thấy:

app:labelVisibilityMode=”unlabeled” → No shift mode

No app:labelVisibilityMode applied → See the shift mode

app:labelVisibilityMode=”labeled” → No shift mode

Làm thế nào để thay đổi giao diện của label

Khi thự thiện BottomNavigationView cách để hiển thị icon và text trong view là thông qua app:menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/bottomnav_home"
        android:icon="@drawable/bottomnav_home"
        android:title="@string/title_home" />

    <item
        android:id="@+id/bottomnav_my_stuff"
        android:icon="@drawable/bottomnav_my_stuff"
        android:title="@string/title_my_stuff" />

    <item
        android:id="@+id/bottomnav_notifications"
        android:icon="@drawable/bottomnav_notifications"
        android:title="@string/title_notifications" />

    <item
        android:id="@+id/bottomnav_search"
        android:icon="@drawable/bottomnav_search"
        android:title="@string/title_search" />

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

Nhưng trong trường hợp chúng ta cần thay đổi font và text size . Cái chắc chắn chúng ta sẽ cần phải làm và là cách dễ dàng nhất đó là tạo ra một custom style như bên dưới:

<!-- Bottom Navigation -->
<style name="Widget.BottomNavigationView" parent="Widget.Design.BottomNavigationView">
    <item name="fontFamily">@font/helvetica_neue_medium</item>
    <item name="android:textSize">9sp</item>
    <item name="android:textStyle">bold</item>
</style>

Điều này sẽ giúp chúng ta tiết kiệm nhiều thời gian để cố gắng làm điều tương tự hoặc sử dụng third party libraries.

Tài Liệu Tham Khảo:

https://stackoverflow.com/questions/40176244/how-to-disable-bottomnavigationview-shift-mode/40189977#40189977

https://proandroiddev.com/some-tips-to-a-better-experience-working-with-androids-bottomnavigationview-2a224c687c1f