안드로이드 머트리얼 디자인 Bottom Navigation 사용하기
회사에서 프로젝트를 하는데 이번에는 바텀 내비게이션을 사용해야했다.
안드로이드 개발에서 무진장 많이 사용되는 컴포넌트이기때문에 이번 기회에 제대로 알아보려고한다.
1. 앱수준의 build.gradle에 dependency 추가
dependencies {
implementation 'com.google.android.material:material:1.5.0'
}
정확히는 모르겠는데 안드로이드 스튜디오 상위버전에서는 자동으로 추가가 되어있다.
2. menu.xml 파일 만들기
res 폴더에 menu 폴더를 만들어서 바텀내비게이션에 쓰일 menu.xml 파일을 만들어준다.
난 파일 이름을 bottom_navigation_menu.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">
<item
android:id="@+id/measure_tab"
android:enabled="true"
android:icon="@drawable/i_lightning"
android:title="@string/measuring"
/>
<item
android:id="@+id/space1"
android:enabled="false"
android:title=""
/>
<item
android:id="@+id/search_tab"
android:enabled="true"
android:icon="@drawable/i_search"
android:title="@string/searching"
/>
<item
android:id="@+id/space2"
android:enabled="false"
android:title="" />
<item
android:id="@+id/setting_tab"
android:enabled="true"
android:icon="@drawable/i_setting"
android:title="@string/setting"
/>
</menu>
bottom_navigation_menu.xml 파일의 코드 내용은 위와 같다.
이 프로젝트의 경우 메뉴가 3개만 필요해서 중간에 빈 item을 넣어주었다.
3. xml 파일에 BottomNavigationView 추가
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<androidx.fragment.app.FragmentContainerView
android:id="@+id/fragmentContainerView"
android:layout_width="0dp"
android:layout_height="0dp"
android:name="com.appg.joowon.fragment.SettingFragment"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@id/bottom_navigation_view"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:menu="@menu/bottom_navigation_menu"
app:itemBackground="@android:color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
주의할 점은
1. FragmentContainerView도 선언해줄 것
2. BottomNavigation의 속성 중에 app:menu에 직전에 만들어준 bottom_navigation_menu.xml을 넣어준다.
4. 프래그먼트 만들기
위의 캡쳐화면의 경로를 따라 프래그먼트를 만들어준다.
(기본적인거라 자세한 내용은 생략...)
5. 바텀 내비게이션 글릭 리스너 설정
private fun initBottomNavigationBar(){
binding.bottomNavigationView.setOnItemSelectedListener { menuItem ->
when(menuItem.itemId){
R.id.measure_tab -> {
if(mainViewModel.isDBConnected.value != true) { //db서버와 먼저 접속후 들어갈 수 있게
showToast(this, getString(R.string.please_connect_to_db))
return@setOnItemSelectedListener false
}
Log.d(TAG, "measure tab click")
supportFragmentManager.beginTransaction().replace(R.id.fragmentContainerView, MeasureFragment()).commitAllowingStateLoss()
true
}
R.id.search_tab -> {
if(mainViewModel.isDBConnected.value != true) { //db서버와 먼저 접속후 들어갈 수 있게
showToast(this, getString(R.string.please_connect_to_db))
return@setOnItemSelectedListener false
}
Log.d(TAG, "search tab click")
supportFragmentManager.beginTransaction().replace(R.id.fragmentContainerView, SearchFragment()).commitAllowingStateLoss()
true
}
R.id.setting_tab -> {
Log.d(TAG, "setting tab click")
supportFragmentManager.beginTransaction().replace(R.id.fragmentContainerView, SettingFragment()).commitAllowingStateLoss()
true
}
else -> {
false
}
}
}
}
바텀 내비게이션에 클릭리스너를 설정해준다.
나 같은 경우에는 데이터 바인딩을 써서 바텀내비게이션에 접근할 때, binding.bottomNavigationView ~ 형식으로 접근한다.
만약, 데이터바인딩이나 뷰바인딩을 사용하지 않는다면, findViewById를 사용해서 BottomNavigationView 객체를 참조해준다.
내가 클릭한 메뉴아이템의 id 값을 통해 열어줄 프래그먼트를 다르게 설정한다.
프래그먼트를 설정하여 열어줄 때는 supportFragmentManager.beginTransaction().replace() 메소드를 사용한다.
바텀내비게이션의 첫 번째 메뉴를 설정할 때는 아래 코드를 사용한다.
binding.bottomNavigationView.selectedItemId = R.id.measure_tab //첫 화면은 측정탭으로!
6. 바텀내비게이션 디자인하기
바텀내비게이션을 사용할 때 머트리얼 디자인의 바텀내비게이션을 사용했다.
머트리얼 디자인의 최대 장점은 간단하게 다양한 디자인을 설정할 수 있다는 것이다.
https://material.io/components/bottom-navigation/android#bottom-navigation-bar
자세한 내용은 위 링크를 참고하길 바란다.
머트리얼 디자인은 theme.xml 파일에서 대부분의 속성을 정의하는게 편리하다.
<!--bottom navigation-->
<style name="BaseBottomNavigationTheme" parent="Widget.MaterialComponents.BottomNavigationView">
<item name="materialThemeOverlay">@style/ThemeOverlay.JooWon.BottomNavigationView</item>
<item name="labelVisibilityMode">labeled</item>
</style>
<style name="ThemeOverlay.JooWon.BottomNavigationView" parent="">
<item name="colorOnSurface">@color/color_hint</item>
<item name="colorPrimary">@color/default_black</item>
<item name="colorSurface">@android:color/white</item>
</style>
Widget.MaterialComponents.BottomNavigationView 의 속성을 상속받아 BaseBottomNavigationTheme을 만들었다.
labelVisibilityMode 값을 labeled로 설정해서 메뉴의 텍스트제목을 계속 보여주었다.
머트리얼 디자인에서는 "materialThemeOverlay" 속성을 통해 색상값을 변경해준다.
ThemeOverlay.Joowon.BottomNavigationView 스타일을 만들어서 materialThemeOverlay에 넣어준다.
ThemeOverlay.Joowon.BottomNavigationView 내용을 살펴보면,
colorSurface가 바텀 내비게이션의 배경색이다. 여기서는 하얀색으로 설정해주었다.
colorPrimary는 바텀 내비게이션의 메뉴 아이콘이 활성화 되었을 때 색이다.
colorOnSurface는 바텀 내비게이션의 메뉴 아이콘이 비활성화 되었을 때 색이다.
이렇게 내가 사용할 bottomNavigation의 스타일 속성인 BaseBottomNavigationTheme을 만들고 app의 스타일 속성에 넣어준다.
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.JooWon" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">@color/joowon_color</item>
<item name="colorPrimaryVariant">@color/purple_700</item>
<item name="colorOnPrimary">@color/joowon_light_color</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/joowon_light_color</item>
<item name="colorSecondaryVariant">@color/teal_700</item>
<item name="colorOnSecondary">@color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor">@android:color/white</item>
<item name="android:windowLightStatusBar" tools:targetApi="M">true</item>
<!-- Customize your theme here. -->
<item name="bottomNavigationStyle">@style/BaseBottomNavigationTheme</item>
</style>
bottomNaviagationStyle 속성에 넣어주었다.
이렇게되면 코드에서 바텀 내비게이션이 어떻게 동작하는지 그리고 디자인까지 설정 완료하였다.
