I'm trying to add a night theme for my app and I've wasted nearly three hours just trying to make the text and icons in my navigation drawer turn white along with the dark background. Here is the way I'm trying to go about doing this in onCreate()
in MainActivity.java
:
navigationView = (NavigationView) findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { // This method will trigger onItemClick of navigation menu @Override public boolean onNavigationItemSelected(MenuItem menuItem) { // Checking if the item is in checked state or not, if not make it in checked state if (menuItem.isChecked()) menuItem.setChecked(false); else menuItem.setChecked(true); if (nightMode == 0) { SpannableString spanString = new SpannableString(menuItem.getTitle().toString()); spanString.setSpan(new ForegroundColorSpan(Color.WHITE), 0, spanString.length(), 0); // fix the color to white menuItem.setTitle(spanString); }
The nightMode
boolean is irrelevant because it works. When night mode is set to on (0), whatever menu item is selected in the navigation drawer turns white. However, that only happens when each item is selected which is obviously inconvenient. Here is my drawer_dark.xml:
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:checkableBehavior="single"> <item android:id="@+id/unitone" android:checked="true" android:icon="@drawable/one_white" android:title="Classical Period" /> <item android:id="@+id/unittwo" android:checked="false" android:icon="@drawable/two_white" android:title="Postclassical Period" /> <item android:id="@+id/unitthree" android:checked="false" android:icon="@drawable/three_white" android:title="Early Modern Era" /> <item android:id="@+id/unitfour" android:checked="false" android:icon="@drawable/four_white" android:title="Dawn of Industrial Age" /> <item android:id="@+id/unitfive" android:checked="false" android:icon="@drawable/five_white" android:title="Modern Era" /> </group> </menu>
I'm using white icons on a transparent background for each item, yet they show up as black on the black background of the navigation drawer. I've tried looking for an xml solution to changing the color of the text and I'm scratching my head because I don't know why this was overlooked.
Can someone offer me a dynamic solution in getting what I'm trying to achieve? All help is appreciated, thank you!
EDIT: I am not using a third party library, it's the NavigationView provided in the support library. Here's the XML layout:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:elevation="7dp" tools:context=".MainActivity" android:fitsSystemWindows="true" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/container" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/ColorDark" /> <include layout="@layout/toolbar" /> </FrameLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:background="#000" android:layout_height="match_parent" android:layout_width="match_parent" android:layout_gravity="start" app:headerLayout="@layout/header" app:menu="@menu/drawer" /> </android.support.v4.widget.DrawerLayout>
Open res > values > colors. xml and add the following line for the new icon and text color for when an item is selected: 5. In your styles.
Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main. xml. Step 3 − Add the following code to res/layout/nav_header_main.
com.google.android.material.navigation.NavigationView. Represents a standard navigation menu for application. The menu contents can be populated by a menu resource file. NavigationView is typically placed inside a DrawerLayout .
by Velmurugan March 10, 2021. The navigation drawer is used to navigate many screens or functionalities of the app by clicking on the 'hamburger' icon. Swiping from the left is also a way to bring the drawer into view, a screen then slides in, showing many items.
<android.support.design.widget.NavigationView android:id="@+id/navigation_view" android:background="#000" android:layout_height="match_parent" android:layout_width="match_parent" android:layout_gravity="start" app:headerLayout="@layout/header" app:itemTextColor="your color" app:menu="@menu/drawer" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With