Intro
In this post we will demonstrate how to add color images as icons in your navigation drawer menu in Android. If you need help creating a navigation drawer you can check out this POST.
Exercise
First we will create a new android project using empty activity and add a navigation drawer. Kotlin is our language of choice in this project. In the navigation drawer we will add five items: Home, Profile, Settings, About and Exit. We will add icons to all of this items using png images.
These are the pictures we will be using:
Next we will initialize our navigation drawer menu in MainActivity. The code looks like this:
|
1 2 3 4 5 6 7 8 9 |
private fun initNavigationDrawer() { val drawerToggle = ActionBarDrawerToggle(this, navigationDrawer, toolbar, R.string.open, R.string.close) navigationDrawer.addDrawerListener(drawerToggle) navigationDrawer.isClickable = true drawerToggle.syncState() toolbarTitle.text = getString(R.string.den) } |
The default style of the icons in your is tinted, so when we start our app, the navigation drawer will look like this:
The color in our icons is gone. But luckily we can solve this with a single line of code. To remove the tint, in our initNavigationDrawer() method we will add this line of code:
|
1 |
navigationView.itemIconTintList = null |
And now this is how our navigation drawer looks like:
As a bonus tip we will change the color of the burger icon because black does not look good on the background. So in the initNavigationDrawer() method we will add this line of code:
|
1 |
drawerToggle.drawerArrowDrawable.color = ContextCompat.getColor(this, R.color.colorWhite) |
And the final look is ready:
You can find the whole project here: https://github.com/AleksandarGulevski/Navigation_Drawer_Color_Images
Happy coding!