[안드로이드][레이아웃] 하단바 커스텀 - bottom navigation

참고 소스

ismaeldivita/chip-navigation-bar

 

 

 

구현 계획

라이브러리를 활용하여 하단 네비게이션 바를 커스터마이징 하기

 

 

 

gradle(Module) 파일에 라이브러리 싱크

dependencies {

    implementation 'com.ismaeldivita.chipnavigation:chip-navigation-bar:1.3.0'

}

 

 

 

사용할 색깔 설정: res>values>colors.xml 파일 수정

원하는 색깔을 자유롭게 지정한다.
Tip: Just color picker 프로그램을 활용, 컬러 코드 추출

 <!--bottom navigation bar-->
    <color name="navigation_color_add">#6200EE</color>
    <color name="navigation_color_mood">#C9379D</color>
    <color name="navigation_color_habit">#E6A919</color>
    <color name="navigation_color_chart">#008577</color>
    <color name="navigation_color_profile">#1194AA</color>

 

 

 

menu 디렉토리 생성

res>우클릭>new>Android Resource Directory>resource type:menu

 

 

 

bottom navigation에 들어갈 아이템 작성

res>menu>bottom_navigation.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"
    app:cnb_unselectedColor="#666666">

    <item
        android:id="@+id/mood"
        android:icon="@drawable/ic_palette"
        android:title="mood"
        app:cnb_iconColor="@color/navigation_color_mood"/>

    <item
        android:id="@+id/habit_tracker"
        android:icon="@drawable/ic_check"
        android:title="habit"
        app:cnb_iconColor="@color/navigation_color_habit"/>

    <item
        android:id="@+id/add"
        android:icon="@drawable/ic_add"
        android:title="add"
        app:cnb_iconColor="@color/navigation_color_add"/>

    <item
        android:id="@+id/chart"
        android:icon="@drawable/ic_chart"
        android:title="chart"
        app:cnb_iconColor="@color/navigation_color_chart"/>


    <item
        android:id="@+id/profile"
        android:icon="@drawable/ic_account"
        android:title="profile"
        app:cnb_iconColor="@color/navigation_color_profile"/>

</menu>

 

 

 

네비게이션 바를 보여줄 레이아웃 파일 작성: ChipNavigationBar

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
	xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.ismaeldivita.chipnavigation.ChipNavigationBar
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:background="#fff"
        android:gravity="center"
        android:elevation="16dp"
        app:cnb_menuResource="@menu/bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        />


</androidx.constraintlayout.widget.ConstraintLayout>