Friday, March 10, 2017

Using Material Design Icons in Android Studio

Primary reason for using icons in an application or website is to let users guess what happens when an icon is clicked. Designing a new set of beautiful icons is not easy and many developers are not so creative in that aspect. FontAwesome  Icon library available in font based icons, Google's Material Design Icons which are available in font, .png and .svg formats

It is very easy to use these icons in your android application using Android Studio. To start using them in Android studio, on your application res folder, right click and select New -> Image Asset menu option as shown below




It shows "Configure Image Asset" dialog box as shown below



From the options, 

1. Choose an Icon Type

Choose either "Launcher Icons" to create an application icon, which is generally displayed as your app icon with white background or choose "Action Bar and Tab Icon" to use the icon with in your application to show it as an option. Please note, Launcher icons will be created in mipmap folder under app's res folder. Action bar icons will be created in drawable folder.

2. Give a name to the icon with which you want to store and refer in the application

3. Choose Asset type
To use Google's Material Design Icon library choose Clip Art option

4. Click on the "Clip Art" icon

5. It open an icon selector dialog as shown below.



6. Choose the desired icon and click OK

7. Then it shows the selected icon as shown below



8. Select Trim as "Yes" if you want to remove the empty area surrounding the icon.

9. If you want to apply any padding select padding percentage.

10. Under Theme option, select "Custom" to choose a color for your icon

11. Choose the color that looks good for your application

12. Click Next, choose the target "res" folder(main, debug or release) where to add this image and click Finish.

That's it. The icon is added to your drawable or mipmap for all screen dimensions. Similarly one can do the same for Vector Asset.