Search code examples
android-studiobottomnavigationview

How to remove the background color of icons in BottomNavigationView and make the text color white when it is active in android studio flamigo?

Just started creating a bottom navigation view from scratch using some tutorials, But my navigation seems to look different maybe because of the difference in versions of android studio or dependencies.

These are my codes so far...

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/settingBg"
        app:menu="@menu/navigation_items"
        app:itemRippleColor="@color/white"
        app:itemIconTint="@color/icon_color"/>

</RelativeLayout>

res/color/icon_color.xml

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

navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:title="Drive"
        android:id="@+id/navDrive"
        android:icon="@drawable/baseline_drive_eta_24"
        />
    <item
        android:title="LIGHT"
        android:id="@+id/navLight"
        android:icon="@drawable/baseline_flashlight_on_24"
        />
    <item
        android:title="DASH"
        android:id="@+id/navDash"
        android:icon="@drawable/baseline_dashboard_customize_24"
        />
    <item
        android:title="Settings"
        android:id="@+id/navSettings"
        android:icon="@drawable/baseline_settings_24"
        />
</menu>

res/themes/thems.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.BottomNavigationBar" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <!-- <item name="colorPrimary">@color/my_light_primary</item> -->
    </style>

    <style name="Theme.BottomNavigationBar" parent="Base.Theme.BottomNavigationBar" />
</resources>

res/themes/thems.xml (night)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.BottomNavigationBar" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your dark theme here. -->
        <!-- <item name="colorPrimary">@color/my_dark_primary</item> -->
    </style>
</resources>

My bottom navigation view looks like this enter image description here

What I wanted was to remove the white background of the icon and also make the text white if it is active or selected like in this tutorial that i found on youtube. enter image description here

Solution

  • For those who may be wondering why it appears that way, I discovered that it's actually quite simple – it all boils down to the navigation style. You have the option to customize the styles yourself in the theme.xml, or you can simply utilize the style from MaterialComponents, like this

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavigationView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/black"
        style="@style/Widget.MaterialComponents.BottomNavigationView.PrimarySurface"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/menu">