안드로이드

안드로이드 BottomNavigationView 사용 방법

알통몬_ 2020. 3. 3. 09:29
반응형


공감 및 댓글은 포스팅 하는데

 아주아주 큰 힘이 됩니다!!

포스팅 내용이 찾아주신 분들께 

도움이 되길 바라며

더 깔끔하고 좋은 포스팅을 

만들어 나가겠습니다^^

 


이번 포스팅에서는 안드로이드 

BottomNavigationView 사용법에 대해 알아봅니다.


#1. 의존성 추가

    androidX로 넘어오면서 두 가지만 의존성을 추가하면 됩니다.

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'com.google.android.material:material:1.2.0-alpha05'

위에는 기본적으로 선언되어 있고,

아래 material을 추가해줘야 합니다.


#2. menu 추가

BottomNavigationView에 들어갈 메뉴 탭들을 만들어야 합니다.

res 아래에 menu 디렉토리 추가하시고 

그 안에 .xml을 만들어 주세요.

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

<item
android:id="@+id/navigation_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="@string/title_home" />
<item
android:id="@+id/navigation_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="@string/title_dashboard" />
<item
android:id="@+id/navigation_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="@string/title_notifications" />

</menu>

* 참고로 메뉴의 아이템 갯수는 3개 이상되어야합니다.

그리고 5개 미만으로 해줘야합니다.


#3. xml에 BottomNavigationView 선언

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/header_nav"
app:elevation="0dp"
android:layout_width="0dp"
android:layout_height="120dp"
android:background="?android:attr/windowBackground"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/text_description"
app:labelVisibilityMode="labeled"
app:menu="@menu/header_nav_menu" />

app:menu="@menu/~~" : #2.에서 생성한 메뉴를 BottomNavigationView에

적용합니다.

app:labelVisibilityMode : 

  labeled: 적용하면 해당 탭이 선택되지 않아도 

             타이틀이 표시됩니다.

  unlabeled: 타이틀이 표시되지 않습니다.

  auto: 말 그대로 auto 입니다.

  selected: 선택된 탭만 타이틀이 표시됩니다.


#4. 여러가지 속성 적용

  기본적으로 여러 애니메이션이 적용되어 있는데요. 

그 중 하나가 선택된 탭의 타이틀 textsize가 조금 더 커지고, 

색상이 바뀌며 아이콘도 크기가 커진다는 건데요. 

아이콘 크기와 타이틀의 textsize의 크기를

고정시키는 방법이 있습니다.

values 디렉토리에 dimens.xml을 하나 만들고

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

<dimen name="design_bottom_navigation_active_text_size"
 tools:override="true">@dimen/design_bottom_navigation_text_size</dimen>

</resources>

이렇게 해주면 됩니다.


#끝.

반응형