[Android] BottomNavigationView Indicator(인디케이터) 색상 수정하기(Material 3 테마)

알린·2025년 1월 6일
0

Android

목록 보기
15/21

Material 3 테마가 적용되어 있는 BottomNavigationView Indicator(인디케이터) 색상 수정하기

문제

안드로이드에서 Material 3 테마가 적용되어 있으면 하단 내비게이션 바에서 선택되어 있는 요소 배경에 아래 사진처럼 보라색으로 배경이 뜬다.

내가 원하는 건 인디케이터가 배경 색(하얀색)과 같아지고자 한다.

해결 방법

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Pie" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>
  	<!-- 하단 xml 추가 -->
    <style name="Theme.OneThree.Indicator" parent="Widget.Material3.BottomNavigationView.ActiveIndicator">
        <item name="android:color">@color/white</item>
    </style>
  <!-- 여기까지 -->
</resources>

activity_main.xml

다음 코드 추가
app:itemActiveIndicatorStyle="@style/Theme.OneThree.Indicator"

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/white"
        app:itemActiveIndicatorStyle="@style/Theme.OneThree.Indicator"
        app:itemBackground="@android:color/transparent"
        app:itemIconTint="@color/bottom_nav_icon_tint"
        app:itemRippleColor="@android:color/transparent"
        app:itemTextColor="@color/bottom_nav_icon_tint"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_bottom_nav" />

결과


📍참고 블로그

profile
Android 짱이 되고싶은 개발 기록 (+ ios도 조금씩,,👩🏻‍💻)

0개의 댓글