CODEWITHSUNDEEP
androidmaterial-designmaterialdrawer
Viktor Sinelnikov
Viktor Sinelnikov

Reputation: 1631

How to change color of icon of selected item in material drawer?

I use the Mike Penze's Material Drawer library https://github.com/mikepenz/MaterialDrawer. On samples the icon color of selected item changes, but in my app doesn't. How to make color to change?

Upvotes: 2

Views: 2472

Answers (3)

Craig Brown
Craig Brown

Reputation: 2461

There is no need to tint your icons manually. Just call the method:

.withIconTintingEnabled(true)

on each DrawerItem. Your app's primary colour will be used as the tint colour.

Upvotes: 0

Mike
Mike

Reputation: 56

Sure, First you tint the different icons then in code, define the tinted ones as what shows when an item is highlighted.

The method is:

.withSelectedIcon()

and .withSelectedText() for text color

Upvotes: 4

Nick Dev
Nick Dev

Reputation: 165

MaterialDrawer has a list of styles and colors that you can choose to change from their default values.

Add this to your styles.xml

<style name="CustomTheme" parent="MaterialDrawerTheme">
    <!-- ...and here we setting appcompat’s color theming attrs -->
    <item name="colorPrimary">@color/material_drawer_primary</item>
    <item name="colorPrimaryDark">@color/material_drawer_primary_dark</item>
    <item name="colorAccent">@color/material_drawer_accent</item>
    <!-- MaterialDrawer specific values -->
    <item name="material_drawer_background">@color/material_drawer_background</item>
    <item name="material_drawer_icons">@color/material_drawer_icons</item>
    <item name="material_drawer_primary_text">@color/material_drawer_primary_text</item>
    <item name="material_drawer_primary_icon">@color/material_drawer_primary_icon</item>
    <item name="material_drawer_secondary_text">@color/material_drawer_secondary_text</item>
    <item name="material_drawer_hint_text">@color/material_drawer_hint_text</item>
    <item name="material_drawer_divider">@color/material_drawer_divider</item>
    <item name="material_drawer_selected">@color/material_drawer_selected</item>
    <item name="material_drawer_selected_text">@color/material_drawer_selected_text</item>
    <item name="material_drawer_header_selection_text">@color/material_drawer_header_selection_text</item>
</style>

Add this to your colors.xml

    <!-- Material Drawer -->
<!-- Material DEFAULT colors -->
<color name="material_drawer_primary">@color/primary</color>
<color name="material_drawer_primary_dark">@color/primary_dark</color>
<color name="material_drawer_primary_light">@color/primary_light</color>
<color name="material_drawer_accent">@color/accent</color>
<!-- OVERWRITE THESE COLORS FOR A LIGHT THEME -->
<!-- MaterialDrawer DEFAULT colors -->
<color name="material_drawer_background">#F9F9F9</color>
<!-- Material DEFAULT text / items colors -->
<color name="material_drawer_icons">#FFF</color>
<color name="material_drawer_primary_text">#DE000000</color>
<color name="material_drawer_primary_icon">#8A000000</color>
<color name="material_drawer_secondary_text">#8A000000</color>
<color name="material_drawer_hint_text">#42000000</color>
<color name="material_drawer_divider">#1F000000</color>
<!-- Material DEFAULT drawer colors -->
<color name="material_drawer_selected">#E8E8E8</color>
<color name="material_drawer_selected_text">@color/primary</color>
<color name="material_drawer_header_selection_text">#FFF</color>
<!-- OVERWRITE THESE COLORS FOR A DARK THEME -->
<!-- MaterialDrawer DEFAULT DARK colors -->
<color name="material_drawer_dark_background">#303030</color>
<!-- MaterialDrawer DEFAULT DARK text / items colors -->
<color name="material_drawer_dark_icons">#000</color>
<color name="material_drawer_dark_primary_text">#DEFFFFFF</color>
<color name="material_drawer_dark_primary_icon">#8AFFFFFF</color>
<color name="material_drawer_dark_secondary_text">#8AFFFFFF</color>
<color name="material_drawer_dark_hint_text">#42FFFFFF</color>
<color name="material_drawer_dark_divider">#1FFFFFFF</color>
<!-- MaterialDrawer DEFAULT DARK drawer colors -->
<color name="material_drawer_dark_selected">#202020</color>
<color name="material_drawer_dark_selected_text">@color/material_drawer_primary</color>
<color name="material_drawer_dark_header_selection_text">#FFF</color>

If you do not declare some of these (you can delete any of the lines), then the library will just use the default values.

The color you are looking to change is the first one, "material_drawer_primary" which you can either relate to your own primary color, or simply place #ffffff where @color/primary is right now.

Don't forget to declare the library as a dependency in your app's build.gradle file.

compile ('com.mikepenz.materialdrawer:library:2.8.1@aar') {
    transitive = true
}

but change 2.8.1 to whatever version is the most recent.

Upvotes: 2

Related Questions