[Android] Bottom navigation view + FAB border customizing

 

[나중에 참고하려고 기록]

 

기존의 BottomNavigationView와 Floating Action Button가 합쳐진 레이아웃에 위 사진처럼 테두리를 감싸는 형태를 구현해야했다. stackoverflow를 참고해도 뭘 어떻게 해야할지 모르겠어서 직접 저런 형태를 가진 도형?을 구현하여  BottomNavigationView의 background에 넣어 구현하였다.

 

우선, BottomNavigationView와 FloatingActionButton을 activity_main.xml 파일에 코드를 작성한다.

 

activity_main.xml

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/main_bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@drawable/custom_bottom_navigation"
                android:paddingTop="36dp"
                android:paddingBottom="1dp"
                android:tooltipText=""
                app:elevation="0dp"
                app:itemHorizontalTranslationEnabled="true"
                app:itemIconTint="@color/bottom_item_color"
                app:itemTextColor="@color/bottom_item_color"
                app:labelVisibilityMode="labeled"
                app:menu="@menu/main_menu" />
           
            <com.google.android.material.floatingactionbutton.FloatingActionButton
                android:id="@+id/main_fab"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="34dp"
                android:backgroundTint="@color/colorGreen"
                android:elevation="0dp"
                android:src="@drawable/ic_baseline_play_arrow_24"
                app:borderWidth="0dp"
                app:elevation="0dp"
                app:fabCustomSize="52dp"
                app:layout_anchor="@id/main_bottom_navigation"
                app:layout_anchorGravity="center_horizontal|center"
                app:maxImageSize="36dp" />
        </androidx.coordinatorlayout.widget.CoordinatorLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>

 

다음으로, bottom navigation view에 아이콘과 텍스트를 넣을 menu 부분을 작성한 후,

app:menu="@menu/main_menu" 라인처럼 해당 코드를 넣어준다.

main_menu 파일의 코드는 아래와 같다. 가운데 FAB를 넣을 것이기 때문에, 5개의 메뉴를 구성한 뒤, 중간에 있는 메뉴는 보이지 않게 title은 비워두고, 눌리지 않도록 showAsAction의 값을 never로 설정한다.

 

res/menu/main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gom="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/bottom1"
        android:icon="@drawable/ic_baseline_access_time_24"
        android:title="text"
        gom:showAsAction="withText"
        />
    <item
        android:id="@+id/bottom2"
        android:icon="@drawable/ic_baseline_get_app_24"
        android:title="text"
        gom:showAsAction="withText"/>
    <item
        android:title=""
        gom:showAsAction="never"/>
    <item
        android:id="@+id/bottom3"
        android:icon="@drawable/ic_baseline_phone_24"
        android:title="text"
        gom:showAsAction="withText"/>
    <item
        android:id="@+id/bottom4"
        android:icon="@drawable/ic_baseline_shop_two_24"
        android:title="text"
        gom:showAsAction="withText"/>
</menu>

 

다음으로, bottom navigation view에서 임의의 아이템이 선택되었을 때와 아닐 때의 색상을 구분하기 위한 selector 코드를 작성하고 이를

app:itemIconTint="@color/bottom_item_color"

app:itemTextColor="@color/bottom_item_color"

이렇게 넣는다.

 

res/color/bottom_item_color.xml

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

 

이제 가장 중요한 bottom navigation view와 FAB를 덮는 테두리를 그리는 코드이다.

여기서 rectangle의 width는 크게 중요하진 않다. 적당히 길면 된다.

그리고 FAB가 가운데에 위치하기 때문에, 원형 모양의 위치를 center로 잡아주어야 한다.

 

처음에 나오는 item은 테두리의 그림자를 top쪽에 주기 위한 shape이다.

다음으로 나오는 item은 FAB의 테두리를 위한 shape이며, 원의 테두리의 그림자를 넣기 위해 stroke를 추가했다.

마지막에 나오는 item은 테두리를 노란색으로 덮을 shape이다.

테두리의 그림자가 필요하지 않다면, 처음에 나오는 item과 다음으로 나오는 item의 stroke를 지워주면 된다.

이 item은 순서대로 stack 형태처럼 쌓이기 때문에, 가장 처음에 작성한 item에 가장 밑바닥에 있어 그림자가 있는 테두리를 그릴 수 있다.

또한 rectangle item의 top의 값이 커지면 커질수록 두번째로 작성한 원형 모양이 더 많이 드러나게 된다.

 

이 코드를 bottom navigation view에 background에 넣으면 가장 처음에 나왔던 화면처럼 나오게 된다.

>> android:background="@drawable/custom_bottom_navigation"

 

res/drawable/custom_bottom_navigation.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:top="32dp"
        android:gravity="center_horizontal">
        <shape android:shape="rectangle" >
            <solid android:color="#eeeeee" />
        </shape>
    </item>
    <item
        android:width="65dp"
        android:height="65dp"
        android:gravity="center|top">
        <shape
            android:shape="oval">
            <stroke
                android:color="#eeeeee"
                android:width="0.5dp" />
            <solid
                android:color="@color/colorYellow"/>
        </shape>
    </item>
    <item
        android:top="32.5dp"
        android:width="1080dp"
        android:gravity="center_horizontal">

        <shape android:shape="rectangle">
            <solid android:color="@color/colorYellow"></solid>
        </shape>
    </item>
</layer-list>