Bottom Navigation Android
Bottom Navigation Menu Android

Bottom Navigation Android

Ngày nay để hạn chế Hambuger Menu người ta thường sử dụng Bottom Navigation. Bottom navigation là menu nằm cạnh dưới của Android. Menu này nên chứa từ 3 đến 5 items liên kết đến các giao diện chính của chương trình. Ngày nay việc tạo được 1 menu bottom kiểu vậy rất dễ dàng. Android Studio hỗ trợ khởi project mới có sẵn template menu bottom này. Hoặc nếu muốn tự tạo bằng tay thì bạn cần làm theo hướng dẫn sau:

Demo App

Thêm thư viện hỗ trợ vào project.

dependencies {
    ...
    implementation 'com.android.support:appcompat-v7:28.0.0'
    ...
    implementation 'com.android.support:design:28.0.0'
}

Lưu ý bạn cần chọn đúng phiên bản build của đự án.

Thêm Bottom Navigation Menu vào layout chính

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:background="@color/colorYellow"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigationView"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@color/colorAccent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:itemBackground="@color/colorWhite"
            app:itemIconTint="@color/colorAccent"
            app:itemTextColor="@android:color/black"
            app:menu="@menu/navigation"/>
</android.support.constraint.ConstraintLayout>

Cần lưu ý các tùy chọn sau để thiết kế giao diện phù hợp

  • app:itemIconTint : Quy định màu sắc của icon
  • app:itemTextColor: Quy định màu chử của dưới icon
  • android:background: Quy định màu nền của thanh menu
  • app:menu: Quy định nội dung file định nghĩa các menu items

File định nghĩa nội dung trong menu

Ở đoạn code phía trên chúng ta định nghĩa giá trị thuộc tính app:menu với giá trị “@menu/navigation”. Nếu trong project của bạn đã có file này, thì dòng code này sẽ không báo lỗi. Nếu báo lỗi do file navigation.xml, thì bạn đặt con trỏ ngay đoạn text đỏ và nhấn tổ hợp phím Alt + Enter để tạo file này.

<?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/menu_items_home"
            android:title="@string/home"
            android:icon="@drawable/ic_home"
            android:enabled="true"
            app:showAsAction="always"/>
    <item
            android:id="@+id/menu_items_music_note"
            android:title="@string/music"
            android:icon="@drawable/ic_music_note"
            android:enabled="true"
            app:showAsAction="always"/>
    <item
            android:id="@+id/menu_items_headset"
            android:title="@string/headset"
            android:icon="@drawable/ic_headset"
            android:enabled="true"
            app:showAsAction="always"/>
    <item
            android:id="@+id/menu_items_queue_music"
            android:title="@string/queue_music"
            android:icon="@drawable/ic_queue_music"
            android:enabled="true"
            app:showAsAction="always"/>
    <item
            android:id="@+id/menu_items_person"
            android:title="@string/person"
            android:icon="@drawable/ic_person"
            android:enabled="true"
            app:showAsAction="always"/>
</menu>

File nội dung văn bản

<resources>
    <string name="app_name">Bottom Navigation Basic</string>
    <string name="home">Trang Chủ</string>
    <string name="music">Bài Hát</string>
    <string name="headset">Yêu Thích</string>
    <string name="queue_music">Danh Sách</string>
    <string name="person">Tài Khoản</string>
</resources>

Download Source Code

Trả lời

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

Close Menu
×
×

Cart