[Tutorial] Android Material Icon Library

Welcome!

In this post, I’ll show you how to use Material Icon Library. This is a really good library that can help you choosing over 1000 free material icons to your Android application. You can easily ajust the icon size, color, and more. Let’s check!

Android Process Button

I - About Android Tutorials

I’ll be creating a big number of Android tutorials, showing you how to use nice libraries, UI, tips, and more.

I’ll be using Android Studio and Gradle in all tutorials.

If you need some help with any Android lib or feature, feel free to comment here and if possible, I can write a new tutorial about it :)

Source Codes:

Get updates Follow @aron-bordin
Star it: Star
Contribute: Fork
Download: Download

II - Material Icon Library

This is a really basic and simple library, so this tutorial is quite simple. The original documentation is very good, so you can read more there.

Check the library repository here: https://github.com/code-mc/material-icon-lib

III - Finding a Android Material Icon

The Material Icon provides over 1000 free icons to your application. To find the icons easily, there is a website where you can search and filter them.

So, go to https://materialdesignicons.com/ and find an icon that fits your requirements.

When you click an icon, you will see:

In the library you will use the icon name, replacing - with _ (glass_mug in this example). If you are not using the library, you can use this dialog to download the icon.

IV - Creating the App

Now, let’s start to work with it. Start a new Android Studio project.

Create your app with a Blank Activity, called MainActivity.

Now you can add the Material Icon as a project dependency. Open the Gradle Scripts -> build.gradle (from module: App). Compile the net.steamcrafted:materialiconlib:1.0.7 module. This is my gradle dependencies:

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:23.1.1'
    compile 'com.android.support:design:23.1.1'
    compile 'net.steamcrafted:materialiconlib:1.0.7'
}

Download the icon font manually here.

Move the materialdesignicons-webfont.ttf to inside Project Folder/app/src/main/assets. Feel free to create this folder if it’s not available.

Now, to download and configure everything, build and run your blank app.

V - Using Material icons

To add an icon, there is a View called MaterialIconView that extends the native ImageView.

This is the XML template to add an icon using the MaterialIconView:

<net.steamcrafted.materialiconlib.MaterialIconView
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:layout_width="48dp"
    android:layout_height="48dp"
    app:materialIcon="glass_mug"
    app:materialIconColor="#fff"
    app:materialIconSize="24dp"
    android:scaleType="center"
/>

You must set the icon name at app:materialIcon

Change the color and name at app:materialIconColor and app:materialIconColor, respectively. Again, this View extends the ImageView, so fell free to use any feature provided by ImageView.

The MaterialIconView has some useful methods. This is the list of available methods extracted from project repo:

// Sets the icon, all 1000+ icons are available inside the MaterialDrawableBuilder.IconValue enum
materialIconView.setIcon(IconValue iconValue);

// Sets the size of the icon to the default action bar icon size
materialIconView.setToActionbarSize();

// Provide a dimension resource to use as icon size
materialIconView.setSizeResource(int dimenRes);

// Set the icon size using a value in dp units
materialIconView.setSizeDp(int size);

// Set the icon size using a pixel value
materialIconView.setSizePx(int size);

// Set the icon color
materialIconView.setColor(int color);

// Set the icon color using a color resource
materialIconView.setColorResource(int colorRes);

// Set the icon's alpha value (0-255) 0 for completely transparent
materialIconView.setAlpha(int alpha);

// Sets a custom colorfilter to the drawing paint (for the more advanced devs)
materialIconView.setColorFilter(ColorFilter cf);

// Clear the color filter set using above method
materialIconView.clearColorFilter();

// Sets a custom paint style (for the more advanced devs)
materialIconView.setStyle(Paint.Style style);


// You can use any of the ImageView methods as well:
materialIconView.setBackgroundColor(Color.WHITE)
materialIconView.setScaleType(ScaleType.CENTER)
// etc...

If you prefer, you can download the demo source code and apk in my gitub.

That’s it, thanks for reading!

Aron Bordin

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading