Android Kotlin Bottom Navigation - 하단 네비게이션

 

 

---

1. 결 과

# 이 글은 Bottom Navigation View를 정의하고 활용할 수 있는 기본적인 내용을 기술한다.

 

# Bottom Navigation의 있는 각 Item을 선택/미선택 시 스타일(색, 글자 크기) 변경 방법

 

# Fragment로 구성함으로써 각 탭 클릭 시 화면을 전환함

 

 

 

 

---

2. activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <LinearLayout
        android:id="@+id/layout_nav_bottom"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_above="@id/nav_main_bottom"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_main_bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:background="@color/black"
        app:menu="@menu/nav_bottom"
        app:labelVisibilityMode="labeled"
        app:itemRippleColor="@color/black"
        app:itemTextColor="@color/nav_bottom_color"
        app:itemIconTint="@color/nav_bottom_color"

        app:itemTextAppearanceActive="@style/TextAppearance.AppCompat.Menu"
        app:itemTextAppearanceInactive="@style/MyTextSize"
        />

</RelativeLayout>

 

# LinearLayout(id: layout_nav_bottom) 프래그먼트의 화면을 보여줄 Layout

 

# BottomNavigationView 속성

- android:layout_alignParentBottom : parent layout인 RelativeLayout의 속성으로 레이아웃을 아래의 배치한다.

 

- app:menu : menu 파일과 연결하여 navigation 항목을 구성한다.

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

    <item
        android:id="@+id/nav_main_bottom_home"
        android:icon="@drawable/home"
        android:title="Home" />
    <item
        android:id="@+id/nav_main_bottom_list"
        android:icon="@drawable/list"
        android:title="List" />
    <item
        android:id="@+id/nav_main_bottom_profile"
        android:icon="@drawable/profile"
        android:title="Profile" />
    <item
        android:id="@+id/nav_main_bottom_setting"
        android:icon="@drawable/setting"
        android:title="Setting" />
</menu>

(res/menu 디렉터리 생성 후 파일 생성)

 

- app:labelVisibilityMode

   -> labeled/unlabeld : 클릭여부와 관계없이 Item의 텍스트를 보여줌/보여주지 않음

   -> selected: 클릭 된 항목만 텍스트를 표시

 

- app:itemTextColor : Item의 텍스트 color 변경, color 파일을 생성하여 체크 여부의 따른 스타일 변경

- app:itemIconTint : Item의 아이콘 color 변경, color 파일을 생성하여 체크 여부의 따른 스타일 변경

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/white" />
    <item android:color="@color/grey" />
</selector>

(res/color 디렉터리 생성 후 파일 생성)

 

 

- app:itemTextAppearanceActive : 현재 선택 중인 항목의 텍스트 크기 지정, 

 

- app:itemTextAppearanceInActive : 현재 미선택 중인 항목들의 텍스트 크기 지정, style 선언 후 적용

 

---

3. MainActivity.kt

package com.example.navbottombar

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.example.navbottombar.NavBottom.NavBottomHome
import com.example.navbottombar.NavBottom.NavBottomList
import com.example.navbottombar.NavBottom.NavBottomProfile
import com.example.navbottombar.NavBottom.NavBottomSetting
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomHome()).commit()

        nav_main_bottom.setOnItemSelectedListener {
            when(it.itemId) {
                R.id.nav_main_bottom_home -> {
                    supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomHome()).commit()
                }
                R.id.nav_main_bottom_list -> {
                    supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomList()).commit()
                }
                R.id.nav_main_bottom_profile -> {
                    supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomProfile()).commit()
                }
                R.id.nav_main_bottom_setting -> {
                    supportFragmentManager.beginTransaction().replace(R.id.layout_nav_bottom, NavBottomSetting()).commit()
                }
            }

            true
        }
    }


}

 

# Fragment인 NavBottomHome, NavBottomList, NavBottomProfile, NavBottomSetting을 생성하여 각각 레이아웃을 구성한다.

 

# activity_main.xml서 fragment를 표시할 Layout으로 LinearLayout(id=layout_nav_bottom)을 만들어 놨으며 각 항목 클릭 시 화면이 전환되도록 구성한다.

 

---

4. 전체 코드

 

GitHub - Notepad96/BlogExample