การสร้าง Custom Toolbar + ButtomNavigationBar

โดยปกติ Toolbar เราจะปรับแต่งอะไรไม่ได้มาก
เราเลยจะมาลอง Custom Toolbar ขึ้นมาใหม่ + BottomNavigationView
หน้าตาที่จะได้ประมาณนี้

build.gradle (Project : ...............)

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}


build.gradle (Module: app)

dependencies {
    ..
    ..
    implementation 'com.google.android.material:material:1.0.0'
    implementation 'com.github.mancj:MaterialSearchBar:0.8.2'
}

ต่อมาสร้าง BasicActivity ขึ้นมาในไฟล์ layout ของ Activity
จะมี AppBarLayout ที่มี Toolbar อยู่ด้านใน

แบ่งออกเป็น 2 ส่วนมี : AppBarLayout และ  BottomNavigationView

res/layout/layout_activity.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.appbar.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:padding="10dp"
    android:background="#008A7C"
    android:layout_gravity="top">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:layout_marginTop="10dp"
            android:text="TryMyDroid"
            android:textColor="@color/white"
            android:textSize="20dp"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

        <com.mancj.materialsearchbar.MaterialSearchBar
            android:id="@+id/searchBar"
            style="@style/MaterialSearchBarLight"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="5"
            app:mt_hint="ชื่อสินค้า"
            app:mt_maxSuggestionsCount="10"
            app:mt_placeholder="ค้นหา"
            app:mt_placeholderColor="#008A7C" />

        <ImageView
            android:id="@+id/leftTopButton"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:src="@drawable/ic_menu" />

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


// Content 


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:background="@color/colorPrimary"
    app:itemIconTint="@color/white"
    app:itemTextColor="@color/white"
    android:layout_gravity="bottom"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

res/menu/buttom_nav_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="@string/title_home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard_black_24dp"
        android:title="@string/title_dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications_black_24dp"
        android:title="@string/title_notifications" />
</menu>

Step ต่อไปเมื่อผู้ใช้คลิกไอคอนใน BottomNavigationView
ลองนำ Fragment มาใช้เป็นแต่ละหน้าดูครับ
.
ปล.ความจริงส่วนที่เป็น Navigation ควรถูกสร้างขึ้นก่อนนะครับ
แต่ใน Android Studio 3.5 ที่ผมใช้อยู่ BottomNavigation Activity วางโครงสร้างโค้ดมาเป็น MVVM
ซึ่ง ณ.ตอนนี้บอกตรงๆว่ายังไม่ชำนาญพอ เพราะยังเป็นของใหม่สำหรับผม
จึงขอจบบทความเลยแล้วกันครับ 555
.
.
รู้เมื่อไหร่ก็จะมาแชร์ๆกันในบล็อคนี้แหละครับ ฝากติดตามครับ ^^