[Android] 밑에서 조금 떠 있는 BottomNavigationView 만들기

이번 포스팅에서 만들 결과물은 아래와 같다.

 

 

BottomNavigationView라 해서 보통 화면 맨 밑이나 위에 붙어있는 버튼 모음인데, 프래그먼트를 활용해서 각각 다른 화면들을 보여줄 때 사용한다.

그 BottomNavigationView를 커스텀해서 저런 형태로 위에 조금 떠 있는 형태로 만들어보려고 한다.

먼저 아래의 첨부파일을 다운받는다. 위에 보이는 집 모양 아이콘, 돋보기 아이콘들의 xml 파일이다. 다운받으면 res/drawable 폴더 안에 복붙하면 된다.

 

drawable.zip

0.00MB

 

최종적인 res 폴더 구조는 아래와 같다. 이제 하나씩 만들 것이다.

 

 

먼저 res 폴더를 우클릭해 color 폴더를 새로 만든다. 우클릭 > New > Directory 순서대로 누르면 된다.

아래는 nav_color.xml의 코드다.

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="#fff"/>
    <item android:state_selected="false" android:color="#B8B8B8"/>
</selector>

 

속성 이름을 보면 알겠지만 탭을 선택했을 때, 선택하지 않았을 때 어떤 색으로 보이도록 할지 정하는 파일이다.

다음은 values/strings.xml에 아래 내용들을 추가한다.

 

<string name="menu_home">Home</string>
<string name="menu_search">Search</string>
<string name="menu_like">Like</string>
<string name="menu_profile">Profile</string>

 

그리고 menu/menu.xml을 만들고 아래 내용들을 추가한다.

 

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/item1"
        android:title="@string/menu_home"
        android:icon="@drawable/home"/>
    <item
        android:id="@+id/item2"
        android:title="@string/menu_search"
        android:icon="@drawable/search"/>
    <item
        android:id="@+id/item3"
        android:title="@string/menu_like"
        android:icon="@drawable/like"/>
    <item
        android:id="@+id/item4"
        android:title="@string/menu_profile"
        android:icon="@drawable/profile"/>
</menu>

 

그리고 NoActionBar로 설정했다. style 속성을 NoActionBar로 설정하면 된다.

 

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.BottomAppBarTest" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

 

그리고 drawable 폴더에 rounded.xml을 shape로 설정해 만든다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@color/colorPrimary"/>
    <corners
        android:radius="32dp"/>
</shape>

 

이제 메인 액티비티 파일을 건들 차례다. 자바 파일은 건드린 게 없으니 xml만 붙여넣으면 된다.

 

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias=".9"
        app:layout_constraintHeight_percent=".1"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        app:itemIconTint="@color/nav_color"
        app:itemTextColor="@color/nav_color"
        android:background="@drawable/rounded"
        app:menu="@menu/menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

여기까지 하고 앱을 빌드해보면 아래와 같이 밑에서 조금 붕 떠 있는 BottomNavigationView가 완성된다.

 

 

그런데 누군가는 배경색을 투명하게 설정하고 싶을 수도 있다.

방법은 간단하다. rounded의 solid 태그 안 색상을 투명하게 바꿔주면 된다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@android:color/transparent"/>
    <corners
        android:radius="32dp"/>
</shape>

 

그리고 nav_color에서 선택했을 때의 색깔이 흰색으로 설정돼 있기 때문에 잘 보이게 검은색으로 설정하자.

아니면 다른 원하는 색을 black 대신에 입력하면 된다.

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:color="@color/black"/>
    <item android:state_selected="false" android:color="#B8B8B8"/>
</selector>

 

이렇게 하면 아래처럼 투명한 배경의 BottomNavigationView가 만들어진다.

 

 

마지막으로 한번 더 꼬아서 저 BottomNavigationView에 그림자를 넣고, 리플 효과(클릭 시 나타나는 회색 선택 효과)를 없애고 싶다면 어떻게 해야 할까?

먼저 background가 지금처럼 투명 상태인 경우 그림자를 보이게 하는 elevation 값을 설정해도 보이지 않는다. 그림자를 넣으려면 rounded에서 solid 태그 안의 color 속성값을 흰색으로 설정해야 한다.

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="@android:color/white"/>
    <corners
        android:radius="32dp"/>
</shape>

 

그 다음 메인 액티비티 XML 파일에서 elevation 속성을 설정한다. 기본값은 8dp라 16dp로 설정했다.

그리고 리플 효과를 없애기 위해선 app:itemBackground 속성을 흰색으로 설정하면 된다.

주의할 것은 이 예제처럼 양 옆에 margin을 준 상태에서 itemBackground를 흰색으로 설정하면 양 옆으로 조금 삐져나온 부분이 보인다. 이것은 margin을 준 만큼 padding을 양 옆으로 설정해주면 사라지니 아래 코드를 참고하자.

 

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="70dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintVertical_bias=".9"
        app:layout_constraintHeight_percent=".1"
        app:elevation="16dp"
        android:layout_marginStart="10dp"
        android:layout_marginEnd="10dp"
        android:paddingStart="10dp"
        android:paddingEnd="10dp"
        app:itemIconTint="@color/nav_color"
        app:itemTextColor="@color/nav_color"
        app:itemBackground="@android:color/white"
        android:background="@drawable/rounded"
        app:menu="@menu/menu"/>

</androidx.constraintlayout.widget.ConstraintLayout>

 

빌드하면 아래처럼 보인다. 리플 효과를 없애고 그림자를 넣어주니 썩 괜찮게 보인다.

 

 

이외에도 다양하게 커스텀할 방법은 많으니 이 예제를 바탕으로 여러가지를 시도해보며 원하는 커스텀 BottomNavigationView를 만들면 된다.