[Android/Kotlin] Bottom Navigation View 구현

먼저  build.gradle에 아래 코드들을 추가해준다

plugins {
    id 'kotlin-kapt'
}


dependencies {
    implementation("androidx.navigation:navigation-fragment-ktx:2.7.7")
    implementation("androidx.navigation:navigation-ui-ktx:2.7.7")
}

build.gradle(Module)

 

 

그리고 Activity와 Fragment들을 생성해준다

 

# Navigation Graph 생성

 

res 폴더 아래에 navigation 디렉터리를 만들고, nav_graph.xml 파일을 생성한다

 

 

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/nav_graph"
    app:startDestination="@id/mapFragment">

    <fragment
        android:id="@+id/mapFragment"
        android:name="nbc.group.recipes.presentation.fragment.MapFragment"
        android:label="fragment_map"
        tools:layout="@layout/fragment_map" />
    <fragment
        android:id="@+id/bookmarkFragment"
        android:name="nbc.group.recipes.presentation.fragment.BookmarkFragment"
        android:label="fragment_bookmark"
        tools:layout="@layout/fragment_bookmark" />
</navigation>

 nav_graph.xml

 

navigation

• app:startDestination="@+id/mapFragment" 속성을 추가한다
  앱 실행 시 가장 처음 뜨는 프래그먼트를 지정하는 속성이다

fragment

• 프래그먼트들을 모두 정의해둔다
• name: 프래그먼트 파일의 경로를 넣어준다
• layout: 프래그먼트의 xml파일을 연결해준다

 

 

# Menu 생성

 

res 폴더 아래에 menu 디렉터리를 만들고, nav_menu.xml 파일을 생성한다

 

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

    <item
        android:id="@+id/mapFragment"
        android:icon="@drawable/ic_home"
        android:title="home"/>

    <item
        android:id="@+id/bookmarkFragment"
        android:icon="@drawable/ic_bookmark"
        android:title="bookmark"/>

</menu>

nav_menu.xml

 

주의할점!! - id를 내비게이션 그래프의 프래그먼트 id와 동일하게 작성해야 맵핑을 통해 바텀내비게이션바로 만들어줄 수 있다.

• icon: 바텀내비게이션에 표시될 아이콘 이미지를 연결한다.
• title: 바텀내비게이션에 표시될 레이블 텍스트를 작성한다.

 

 

# 클릭 시 색상지정

아이템을 클릭한 상태와 클릭하지 않은 상태에 색을 다르게 주기 위한 파일을 drawble에 생성해준다

android:state_checked="true"가 클릭한 상태, false가 클릭하지 않은 상태다

<?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/green1" />
    <!-- 클릭하지 않은 경우 -->
    <item android:state_checked="false" android:color="@color/black" />
</selector>

bottom_navigation_color.xml

 

 

 

# activtiy_main 레이아웃

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".presentation.MainActivity">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fcv"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:navGraph="@navigation/nav_graph"
        app:layout_constraintBottom_toTopOf="@id/bottomNav_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNav_bar"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:itemIconTint="@drawable/bottom_navigation_color"
        app:itemTextColor="@drawable/bottom_navigation_color"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/menu"
        app:itemActiveIndicatorStyle="@android:color/transparent"
        app:itemBackground="@android:color/transparent"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/fcv"/>



</androidx.constraintlayout.widget.ConstraintLayout>

activtiy_main.xml

• android:name="androidx.navigation.fragment.NavHostFragment"
  탐색 그래프에서 대상을 표시하는 빈 컨테이너인 NavHost 역할을 하도록 설정한다
• app:navGraph="@navigation/nav_graph"
  NavHostFragment와 내비게이션 그래프를 연결시킨다

• app:defaultNavHost="true"
  뒤로가기 버튼을 누르면 NavHostFragment로 돌아오게 설정한것
  기본값은 false이고, 뒤로가기 버튼을 누르면 앱이 종료된다

 

- BottomNavigationView

• app:labelVisibilityMode="labeled"
  아이콘 밑의 레이블을 보이게 설정한다. 숨기고 싶으면 unlabeled로 설정한다.

 

•   app:itemIconTint="@drawable/bottom_navigation_color"
    app:itemTextColor="@drawable/bottom_navigation_color".                                                                                              아이콘과 레이블의 색상을 지정해주는 속성인데, 아이템을 클릭한 상태와 클릭하지 않은 상태에 색을 다르게 주기 위해 위에서 만들었던 selector를 연결해준다.

• app:itemBackground="@android:color/transparent"
  아이템을 클릭할 때 검은 원이 퍼져나가는 ripple효과를 제거하기 위한 속성이다.

 

 

# MainActivtiy 

@AndroidEntryPoint
class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var navController: NavController

	...
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)
        initNavigation()
    }

    override fun onSupportNavigateUp(): Boolean {
        navController = findNavController(R.id.fcv)
        return navController.navigateUp() || super.onSupportNavigateUp()
    }

    private fun initNavigation() {
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.fcv) as NavHostFragment
        val navController = navHostFragment.findNavController()
        binding.bottomNavBar.setupWithNavController(navController)
    }
}

MainActivtiy.kt

 

 

이렇게하면 잘 실행되는것을 확인할 수 있다!!

 

 

 

 

# 참고자료

https://velog.io/@hygge/AndroidKotlin-Bottom-Navigation-View-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-Jetpack-Navigation

[Android / Kotlin] Bottom Navigation View 구현하기 (Jetpack Navigation)

https://hayeon1549.tistory.com/2

[Android/Kotlin] Jetpack Bottom Navigation Bar

 

https://velog.io/@cksgodl/androidkotlin-Single-Activity-ArchitectureSAA%EB%A5%BC-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%8F-%EC%A0%81%EC%9A%A9%ED%95%B4%EB%B3%B4%EA%B8%B0

[Android/Kotlin] Single Activity Architecture(SAA)를 쓰는 이유, 및 적용해보기