mikepenz/MaterialDrawer

Icon Color not applying

Rishabh-More opened this issue · 4 comments

Rishabh-More commented

About this issue

I'm trying to set the iconColor when creating the drawer, but the iconColor doesn't get applied. The nameText and iconRes values get applied correctly and Drawer gets created with the Name and specified Icons. But the color of the icons does not change. Idk why only this attribute is not working?

binding.materialSlider.apply {
    addItems(
        NavigationDrawerItem(
            R.id.catalogueFragment,
            PrimaryDrawerItem().apply {
                nameText = "Catalogue"
                iconRes = R.drawable.ic_catalogue
                iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
            }
        ),
        NavigationDrawerItem(
            R.id.stockUpdateFragment,
            PrimaryDrawerItem().apply {
                nameText = "Market Status"
                iconRes = R.drawable.ic_market_status
                iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
            }
        ),
        NavigationDrawerItem(
            R.id.reportsFragment,
            PrimaryDrawerItem().apply {
                nameText = "Reports"
                iconRes = R.drawable.ic_reports
                iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
            }
        ),
        NavigationDrawerItem(
            R.id.settingsFragment,
            PrimaryDrawerItem().apply {
                nameText = "Settings"
                iconRes = R.drawable.ic_settings
                iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
            }
        )
    )
    addStickyDrawerItems(
        SecondaryDrawerItem().apply {
            nameText = "Logout"
            iconRes = R.drawable.ic_logout
            iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
        },
    )
}
//Setup Drawer with Navigation Controller
binding.materialSlider.setupWithNavController(navController)

Details

  •  Used library version 8.4.4
  •  Used support library version appcompat:1.3.1
  •  Used gradle build tools version 7.0.2
  •  Used tooling / Android Studio version Artic Fox 2020.3.1 Patch 2
  •  Other used libraries, potential conflicting libraries None

Checklist

mikepenz commented

Screenshot 2021-10-14 at 17 06 19

Could you please provide more information around this issue? I tried to reproduce it in the sample app but it seems to work the way you showed.

Perhaps you can provide the resources you used, or create a sample application to showcase the problem. Thank you very much

Rishabh-More commented

Sure, here is some extra code so that you can try to reproduce it on your end. Let me know if you need more code:

MainActivity.kt

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.content.ContextCompat
import androidx.navigation.fragment.NavHostFragment
import com.techmonkeys.stockr.R
import com.techmonkeys.stockr.databinding.ActivityMainBinding
import com.mikepenz.materialdrawer.holder.ImageHolder
import com.mikepenz.materialdrawer.model.NavigationDrawerItem
import com.mikepenz.materialdrawer.model.PrimaryDrawerItem
import com.mikepenz.materialdrawer.model.SecondaryDrawerItem
import com.mikepenz.materialdrawer.model.interfaces.iconRes
import com.mikepenz.materialdrawer.model.interfaces.nameText
import com.mikepenz.materialdrawer.util.addItems
import com.mikepenz.materialdrawer.util.addStickyDrawerItems
import com.mikepenz.materialdrawer.util.setupWithNavController

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private val navController by lazy {
        //Find the NavHostFragment for this activity
        (supportFragmentManager.findFragmentById(R.id.mainNavHostFragment) as NavHostFragment)
            //return the navController
            .navController
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //Inflate & bind the layout for the activity
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //Create drawer with configuration
        binding.materialSlider.apply {
            addItems(
                NavigationDrawerItem(
                    R.id.catalogueFragment,
                    PrimaryDrawerItem().apply {
                        nameText = "Catalogue"
                        icon = ImageHolder(R.drawable.ic_catalogue)
                        iconRes = R.drawable.ic_catalogue
                        iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
                    }
                ),
                NavigationDrawerItem(
                    R.id.stockUpdateFragment,
                    PrimaryDrawerItem().apply {
                        nameText = "Market Status"
                        iconRes = R.drawable.ic_market_status
                        iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
                    }
                ),
                NavigationDrawerItem(
                    R.id.settingsFragment,
                    PrimaryDrawerItem().apply {
                        nameText = "Settings"
                        iconRes = R.drawable.ic_settings
                        iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
                    }
                )
            )
            addStickyDrawerItems(
                SecondaryDrawerItem().apply {
                    nameText = "Logout"
                    iconRes = R.drawable.ic_logout
                    iconColor = ContextCompat.getColorStateList(context, R.color.teal_200)
                },
            )
        }
        //Setup Drawer with Navigation Controller
        binding.materialSlider.setupWithNavController(navController)
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/main_drawer_layout"
    android:fitsSystemWindows="true">

    <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
    <androidx.fragment.app.FragmentContainerView
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:id="@+id/mainNavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:navGraph="@navigation/nav_main_graph"
        app:defaultNavHost="true" />

    <!-- Container for contents of drawer -->
    <com.mikepenz.materialdrawer.widget.MaterialDrawerSliderView
        android:id="@+id/material_slider"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true" />

</androidx.drawerlayout.widget.DrawerLayout>

The drawable icons I used for the drawer:

ic_catalogue.xml

<vector android:height="24dp"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M2.53,19.65l1.34,0.56v-9.03l-2.43,5.86c-0.41,1.02 0.08,2.19 1.09,2.61zM22.03,15.95L17.07,3.98c-0.31,-0.75 -1.04,-1.21 -1.81,-1.23 -0.26,0 -0.53,0.04 -0.79,0.15L7.1,5.95c-0.75,0.31 -1.21,1.03 -1.23,1.8 -0.01,0.27 0.04,0.54 0.15,0.8l4.96,11.97c0.31,0.76 1.05,1.22 1.83,1.23 0.26,0 0.52,-0.05 0.77,-0.15l7.36,-3.05c1.02,-0.42 1.51,-1.59 1.09,-2.6zM7.88,8.75c-0.55,0 -1,-0.45 -1,-1s0.45,-1 1,-1 1,0.45 1,1 -0.45,1 -1,1zM5.88,19.75c0,1.1 0.9,2 2,2h1.45l-3.45,-8.34v6.34z"/>
</vector>

ic_market_status.xml

<vector android:height="24dp"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M6 2C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H10V20.1L20 10.1V8L14 2H6M13 3.5L18.5 9H13V3.5M20.1 13C20 13 19.8 13.1 19.7 13.2L18.7 14.2L20.8 16.3L21.8 15.3C22 15.1 22 14.7 21.8 14.5L20.5 13.2C20.4 13.1 20.3 13 20.1 13M18.1 14.8L12 20.9V23H14.1L20.2 16.9L18.1 14.8Z" />
</vector>

ic_settings.xml

<vector android:height="24dp"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M19.14,12.94c0.04,-0.3 0.06,-0.61 0.06,-0.94c0,-0.32 -0.02,-0.64 -0.07,-0.94l2.03,-1.58c0.18,-0.14 0.23,-0.41 0.12,-0.61l-1.92,-3.32c-0.12,-0.22 -0.37,-0.29 -0.59,-0.22l-2.39,0.96c-0.5,-0.38 -1.03,-0.7 -1.62,-0.94L14.4,2.81c-0.04,-0.24 -0.24,-0.41 -0.48,-0.41h-3.84c-0.24,0 -0.43,0.17 -0.47,0.41L9.25,5.35C8.66,5.59 8.12,5.92 7.63,6.29L5.24,5.33c-0.22,-0.08 -0.47,0 -0.59,0.22L2.74,8.87C2.62,9.08 2.66,9.34 2.86,9.48l2.03,1.58C4.84,11.36 4.8,11.69 4.8,12s0.02,0.64 0.07,0.94l-2.03,1.58c-0.18,0.14 -0.23,0.41 -0.12,0.61l1.92,3.32c0.12,0.22 0.37,0.29 0.59,0.22l2.39,-0.96c0.5,0.38 1.03,0.7 1.62,0.94l0.36,2.54c0.05,0.24 0.24,0.41 0.48,0.41h3.84c0.24,0 0.44,-0.17 0.47,-0.41l0.36,-2.54c0.59,-0.24 1.13,-0.56 1.62,-0.94l2.39,0.96c0.22,0.08 0.47,0 0.59,-0.22l1.92,-3.32c0.12,-0.22 0.07,-0.47 -0.12,-0.61L19.14,12.94zM12,15.6c-1.98,0 -3.6,-1.62 -3.6,-3.6s1.62,-3.6 3.6,-3.6s3.6,1.62 3.6,3.6S13.98,15.6 12,15.6z"/>
</vector>

ic_logout.xml

<vector android:height="24dp"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" />
</vector>
mikepenz commented

@Rishabh-More thank you very much for providing the additional code.

Please enable icon tinting via isIconTinted = true in your items, which will ensure they are properly tinted.

Pushed it in this branch with the solution: cda95e5

Rishabh-More commented

Thanks for the very swift response. Awesome Library 👍