[android] BottomNavigationView 첫번째

저번엔 BottomNavigation 에 Fragment 로 작업을 했었는데 뒤로 가는 키가

전혀 작동을 안해 포기하고 이번엔 BottomNavigationView를 직접 넣는 방식으로

새롭게 앱을 만들었다.

결과는 뒤로 가는 키도 잘 작동되고 모든 게 순조롭지만 BottomNavigationView에서 

behavior가 전혀 안되고 있다. 이것만 빼고는 사용하는데 젼혀 무리가 없기에 일단

나를 위한 기록으로 적어 놓는다.

---

BottomNavigationView - 첫번째

위 이미지 맨 아래 5개의 메뉴가 바로  BottomNavigationView로 만들었다.

res/values/colors.xml - 색 설정.  drawable/text.xml 에서 메뉴 아이템, 텍스트 선택 시 색 설정.

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <color name="colorPrimary">#3F51B5</color>

    <color name="colorPrimaryDark">#303F9F</color>

    <color name="colorAccent">#FF4081</color>

    <color name="colorItemText">#000000</color> //메뉴 텍스트 색

    <color name="colorBottomNavigation">#000000</color> 

    <color name="colorItemTint">#000000</color> //메뉴 아이템 색

    <color name="colorItemBgColor">#FFFFFF</color> //메뉴 바탕 색

    <color name="colorFalse">#afafaf</color> //메뉴 선택 안 할 때의 아이템과 텍스트 색

    <color name="colorTrue">#000000</color> //메뉴 선택했을 때의 색

</resources>

colorTrue 빨강색 : 메뉴 선택 시 색.

colorFalse 파란색 : 메뉴 선택 안 할 때의 색.

colorItemBgColor : 녹색 : 메뉴 바탕 색.

colorItemText : 진보라색. 메뉴 텍스트 색.

colorItemTint :  보라색 : 아이템 색.

res/values/string.xml - 어플 이름과 메뉴 이름.

<resources>

    <string name="app_name">어플 이름</string>

    <string name="home">Home</string>   

    <string name="견적신청">견적신청</string>

    <string name="문자상담">문자상담</string>

    <string name="견적조회">견적조회</string>

    <string name="로그인">로그인</string>

</resources>

res/values/styles.xml - 인트로와 BottomNavigationView 테마 스타일 설정.

<resources>

    <!-- Base application theme. -->

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

        <!-- Customize your theme here. -->

        <item name="colorPrimary">@color/colorPrimary</item>

        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>

        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="SplashTheme" parent="@android:style/Theme.Light.NoTitleBar">

        <item name="android:windowBackground">@drawable/splash</item>

    </style>

    <style name="BottomNavigationTheme" parent="Widget.Design.BottomNavigationView">

        <item name="colorPrimary">@color/colorBottomNavigation</item>

    </style>

</resources>

res/menu/navigation_menu.xml - 메뉴 설정.

<?xml version="1.0" encoding="utf-8"?>

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item

        android:id="@+id/talk_id" //메뉴 ID

        android:icon="@drawable/talk" //메뉴 백터 아이콘 drawable에서 마우스 오른쪽 new - vector asset

        android:title="@string/문자상담" //메뉴 이름으로 위 string에서 설정.

        android:orderInCategory="4"/> //메뉴 순서

    <item

        android:id="@+id/write_id"

        android:icon="@drawable/write"

        android:title="@string/견적신청"

        android:orderInCategory="2"/>

    <item

        android:id="@+id/home_id"

        android:icon="@drawable/home"

        android:title="@string/home"

        android:orderInCategory="1"/>

    <item

        android:id="@+id/mate_id"

        android:icon="@drawable/mate"

        android:title="@string/견적조회"

        android:orderInCategory="3"/>

    <item

        android:id="@+id/login_id"

        android:icon="@drawable/login"

        android:title="@string/로그인"

        android:orderInCategory="5"/>

</menu>

▶ drawable에서 마우스 오른쪽 new - vector asset 를 선택해 각각 메뉴에 맞는 아이콘을 설정해야 함. 

res/layout/activity_main.xml - 레이아웃 설정.

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.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">

    <WebView

        android:id="@+id/activity_main_webview"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:layout_marginBottom="56dp"

        android:fadingEdge="none"

        android:scaleType="fitXY" />

    <android.support.design.widget.CoordinatorLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">

        <android.support.design.widget.BottomNavigationView

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:id="@+id/bottomNavigation"

            android:background="?android:windowBackground"

            android:layout_gravity="bottom"

            app:menu="@menu/navigation_menu"

            app:itemBackground="@color/colorItemBgColor"

            app:itemIconTint="@drawable/text"

            app:itemTextColor="@drawable/text">

        </android.support.design.widget.BottomNavigationView>

    </android.support.design.widget.CoordinatorLayout>

</android.support.design.widget.CoordinatorLayout>

▶ app:itemIconTint, app:itemTextColor 메뉴 아이템과 텍스트 색을 drawable/text 에서 설정한 대로.

file -> Project Structure -> 좌측 modules/app 선택 -> 상단 맨 오른쪽 탭 메뉴 dependencies 선택

-> 오른쪽 +/- ↓ 중  + 선택 -> Library Dependency -> com.android.support.design:26.1.0 선택

res/drawable/text.xml

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorTrue" android:state_checked="true" />

    <item android:color="@color/colorFalse" android:state_checked="false" />

</selector>

▶ 활성 시(True:검정)와 비활성시(False:회색) : 정말 다양한 색으로 꾸며봤지만 결국 비활성 시

회색과 활성 시 검정이 제일로 보기 좋음. 뭐 색 지정은 본인 마음대로...

res/drawable/home.xml

res/drawable/login.xml

res/drawable/mate.xml

res/drawable/talk.xml

res/drawable/write.xml

벡터 아이콘 설정 정보 파일들.

BottomNavigationView  첫번째에는 res 파일들에 대해서 적어보았다.

그냥 복사 후 붙혀 넣어서 사용해도 된다.

그리고, 저 중에서 초보자인 본인의 실력으로 적용하지 못해서 포기한 BottomNavigationBehavior가 있다.

이 부분은 아래 링크를 참고하기 바란다.

BottomNavigationBehavior 바로가기

---

오늘은 날씨가 그냥 봄입니다. ^^

전문가의 고집으로 서비스하는 포장이사전문업체 최고집이사.