Android

How to use Material Design icons in Android

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

Screen Shot 2019-07-16 at 6.26.07 PM

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.

Screen Shot 2019-07-16 at 6.33.02 PM

Search for Plugins menu in search bar.

Screen Shot 2019-07-16 at 6.37.46 PM

Now we need to click on Browse Repositories and search for “Android Material Design Icon Generator”.

Screen Shot 2019-07-16 at 6.40.31 PM

Now we need to click on install and after successful installation we need to restart android studio so plugins get loaded.

Screen Shot 2019-07-16 at 6.44.08 PM

Soon after restart of android studio now we need to click on File > New and scroll to bottom to find Material design Icon plugin.

Screen Shot 2019-07-16 at 6.47.19 PM

After clicking on Material Design icon menu item we will be able to see icon generator popup.

Screen Shot 2019-07-16 at 6.51.20 PM

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.

Screen Shot

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.

Screen Shot

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.

Screen Shot

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.

Screen Shot

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>

8. activity_main.xml

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.

Screen Shot

Write A Comment

Tutorials Cache