언제까지 둔탁한 BottomNavigationView 를 사용할래~

최종 결과 이미지

 

평범한 BottomNavigationView 에 질리셨다면, 이제는 조금 변경해볼까요?

지금부터 순서대로 따라하시면 위와 같은 결과를 얻을 수 있습니다! (6단계의 과정만 진행하시면 됩니다!)

 

 

1. Theme 수정하기

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.YoutubeLayout" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">#0F9D58</item>
        <item name="colorPrimaryVariant">#0F9D58</item>
        <item name="colorOnPrimary">#000000</item>
    </style>
</resources>

2. Menifest 수정하기

<application
  android:allowBackup="true"
  android:icon="@mipmap/ic_launcher"
  android:label="@string/app_name"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:supportsRtl="true"
  android:theme="@style/Theme.YoutubeLayout">
  <activity android:name=".MainActivity">
    <intent-filter>
      <action android:name="android.intent.action.MAIN" />

      <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

3. menu Item 추가하기

1. 사전에 Vector Icon 을 만들어주세요 ^_^

<?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/home"
        android:icon="@drawable/ic_home"
        android:title="Home"/>

    <item
        android:id="@+id/Search"
        android:icon="@drawable/ic_search"
        android:title="Search"/>

    <item
        android:id="@+id/placeholder"
        android:title=""/>

    <item
        android:id="@+id/Profile"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite"/>

    <item
        android:id="@+id/Settings"
        android:icon="@drawable/ic_locker"
        android:title="Locker"/>

</menu>

4. Custom BottomNavigationView 생성하기

이렇게 해주지 않으면, 공백에 해당하는 Item 에도 클릭이벤트가 발생하기 때문에, 간단하게 생성해주세요 :)

class YoutubeBottomNavigationView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : BottomNavigationView(context, attrs, defStyleAttr) {

    init {
        val menuView = getChildAt(0) as ViewGroup
        //index 2 : 비활성화 아이템
        menuView.getChildAt(2).isClickable = false
    }
}

5. MainActivity.xml 수정하기

app:elevation="0dp" 가 왜 필요하죠?
* android:elevation="0dp" 가 아니라, app:elevation="0dp" 라는 점을 주의하세요!

BottomNaviagtionView 에는 기본적으로 app:elevation 이 8dp 로 적용되어있습니다. 따라서, 0dp 로 해주지 않으면 그림자 잔상효과가 남아요!

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    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.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom">

        <com.devhyeon.youtubelayout.YoutubeBottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginEnd="16dp"
            app:elevation="0dp"
            app:labelVisibilityMode="labeled"
            android:background="@android:color/transparent"
            app:menu="@menu/bottom_nav_menu" />

    </com.google.android.material.bottomappbar.BottomAppBar>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/app_name"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottomAppBar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

6. 결과 확인하기

 

다양하게 NavagationView 를 사용해보면 좋을 것 같아요! :)