Icons are one of the important part in application development. It is difficult for developer to find icons with different sizes and colours quickly. In this tutorial we will learn ho to add Material Design icons plugin into android studio. At the end of this tutorial we will easily be able to add icons into our Android Applications.
So lets get started with a fresh android studio project.
1. Create New Android Studio Project
2. Material Design Icon Plugin
Now we need to add material design plugin into android studio.
Click on Preferences under Android Studio Main menu or press COMMAND+, on Mac.
Search for Plugins menu in search bar.
Now we need to click on Browse Repositories and search for “Android Material Design Icon Generator”.
Now we need to click on install and after successful installation we need to restart android studio so plugins get loaded.
Soon after restart of android studio now we need to click on File > New and scroll to bottom to find Material design Icon plugin.
After clicking on Material Design icon menu item we will be able to see icon generator popup.
3. Icon Search
Its very easy to search icons. We just need to start typing icon name and this plugin will show us suggestion of which we can choose easily. we can also see icons just by clicking dropdown as a result of that we will be able to see presentation of the icon on the right side.
Lets search for alarm icon.
So as we can see i started searching for alarm icon and it shows me all alarm related icons. Now i can choose alarm icon according to my requirements.
4. Icon Color
Icon color is one the most important factor for the apps as we need to follow a specific color scheme for each application. By using this material design plugin its even more easier to change colors of the icons. We can choose give colours in drop down or even we can add our own hexadecimal color codes. As a result of both options we will have icons with exact color.
5. Icon Size
Icon size is also one of the most important factor therefore this option is also added in this plugin. We can choose icons between 18dp, 24dp, 36dp or 48dp as per our own needs.
6. Icon Name
Due to color, size and names icons are automatically named but we can change names also by just clicking in name section. Certainly this name will be icon name in drawables folder.
6. Res Directory
We can choose our desired location for created icons. By default icons are saved in drawables folder under res.
7. Image / Vector Type
We have flexibility of creating an image or vector as xml file of the icons. Vectors are easy to maintain for various resolutions.
Finally after completing all the steps we can just click on ok and icons will be saved under drawables folder.
Now we can use this icon in xml and in java files dynamically as well. Let try with xml file. Add the following code to your colors.xml file.
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#d11617</color> <color name="colorPrimaryDark">#B31718</color> <color name="colorAccent">#FF4081</color> </resources>
To display icon we need an image view and just for the icon name we have added a textview in xml file of MainActivity.
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.tutorialscache.materialdesign.MainActivity"> <TextView android:text="Alarm Icon" android:layout_marginTop="100dp" android:gravity="center_horizontal" android:textColor="@color/colorPrimary" android:textSize="25dp" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:src="@drawable/alarm" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout>
Hence we will have an output with an icon image on ImageView.