CODEWITHSUNDEEP
androidandroid-navigationview
fabiruu111
fabiruu111

Reputation: 79

Android: NavigationView TextColor

Pictures say more than words:

Right

This should be the right appearance.. But I get this: Wrong

This is my code:

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/Black"
    app:headerLayout="@layout/nav_header"
    app:itemIconTint="@color/White"
    app:itemTextColor="@color/White"
    app:menu="@menu/drawer" />

How can I solve this?

Here is my menu-xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group>
        <item
            android:id="@+id/drawerFullName"
            android:icon="@drawable/fullnamemale"
            android:title="@string/full_name" />
        <item
            android:id="@+id/drawerAge"
            android:icon="@drawable/age"
            android:title="@string/age" />
        <item
            android:id="@+id/drawerAbout"
            android:icon="@drawable/about"
            android:title="@string/about_user_in_20_letters" />
        <item android:title="@string/personalize">
            <menu>
                <item
                    android:id="@+id/drawerChangeTheme"
                    android:icon="@drawable/changetheme"
                    android:title="@string/change_your_theme" />
            </menu>
        </item>
        <item android:title="@string/user_settings">
            <menu>
                <item
                    android:id="@+id/drawerLogout"
                    android:icon="@drawable/logout"
                    android:title="@string/logout" />
            </menu>
        </item>
    </group>
</menu>

Yes and the "headings" color isn't changing. It is still black..

To complete this, here is the navigation view with a white background, now you can see the headings: enter image description here

Upvotes: 1

Views: 4938

Answers (3)

MobileEvangelist
MobileEvangelist

Reputation: 2628

You need to supply style to NavigationView.

<style name="ApBaseDrawerNavigationMenuStyle" parent="Theme.AppCompat.DayNight.DarkActionBar">
        <item name="colorControlNormal">@null</item>
        <item name="android:color">@color/text_color</item>
        <item name="android:textColor">@color/text_color</item>
        <item name="android:textColorHint">@color/text_color</item>
        <item name="android:textColorPrimary">@color/text_color</item>
        <item name="android:textColorSecondary">@color/gray_shade_555555</item>
        <item name="android:background">#548893</item>
        <item name="android:colorPrimary">@color/text_color</item>
        <item name="android:colorControlHighlight">@color/text_color</item>
    </style>

Please set above properties in your style. Hope this helps in future.

Upvotes: 1

Krishna Singh
Krishna Singh

Reputation: 69

We can use app:itemTextColor & app:itemIconTint in NavigationView to change Text and icon color of navigation menu items. 

 <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:itemTextColor="@color/drawer_menu_text"
        app:itemIconTint="@color/drawer_menu_text"
        app:menu="@menu/menu_navigation_drawer">

Upvotes: 6

Eugen Pechanec
Eugen Pechanec

Reputation: 38223

Looks like your app is using light theme but you want your navigaiton view to be dark. This means you have to override the theme for the navigation view.

Here follows code which will allow you to fully customize text colors inside the navigation view:

res/color/primary_text.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 38% white for disabled color per material design specs.
    <item
        android:color="#60ffffff"
        android:state_enabled="false"/>
    <!-- 100% white for primary text. -->
    <item android:color="#ffffffff"/>
</selector>

res/color/secondary_text.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 38% white for disabled color per material design specs. -->
    <item
        android:color="#60ffffff"
        android:state_enabled="false"/>
    <!-- 70% white for secondary text. -->
    <item android:color="#b2ffffff"/>
</selector>

res/values/styles.xml

<style name="ThemeOverlay.MyApp.NavigationView" parent="ThemeOverlay.AppCompat.Dark">
    <!-- This is the menu item text color. -->
    <item name="android:primaryTextColor">@color/primary_text</item>
    <!-- This is the menu header text color. -->
    <item name="android:secondaryTextColor">@color/secondary_text</item>
    <!-- This is the selected color. -->
    <item name="colorPrimary">@color/primary</item>
</style>

res/layout/something.xml

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/Black"
    android:theme="@style/ThemeOverlay.MyApp.NavigationView"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer" />

Upvotes: 3

Related Questions