Home / Libraries / Material Design Icons with Android Studio Plugin Drawable Importer – Library #1
featured_image

Material Design Icons with Android Studio Plugin Drawable Importer – Library #1

In this tutorial we are having Material Design Icons with Android Studio Drawable Importer Plugin which made developer’s life much more easier when dealing with icons, vectors and images with different resolutions as it has three main features:

  1. Android Icons and Material Icons Drawable Import: With this feature you can import any icon from Google Material Design Icons directly to your project with just few clicks and you can specify size, format and color, also you can import it as a vector as shown in examples below.
  2. Batch Drawable Import: This feature enables you to make multiple resolutions of your image to fit with all screens, so as simple as that, you give it a single image and you will have a folder with images for all desired screen resolutions you need.
  3. Multisource-Drawable: Ever got a zip with drawables for your Android project by your designer with the following structure? No problem! Now you can just select for every resolution a different asset, specify one name for them, and the rest is done by the plugin. Or even easier, you can select the whole zip, and this plugin will auto extract the asset to the best matching folder.

So, We’ll have an example for each of these features in our project, Let’s get started:

1. Install the plugin in Android Studio by going to File ⇒ Settings ⇒ Plugins ⇒ Browse Repositories and search by “Drawable Importer”, click install, once finished restart Android Studio and right click on any folder of your project and choose New and you should see these new options like this image:

Material Design Icons with Android Studio Drawable Importer Plugin

Now we are done with installing the Android Studio Drawable Importer Plugin, Lets get into the code, we will have a simple Activity with its layout file which contains 3 ImageViews.

2. Creating Android Project, In Android Studio, create a new project by navigating to File ⇒ New Project and fill all the required details. When it prompts to select a default activity, select Empty Activity and proceed.

Feature 1: Icon Pack Drawable Importer

1. Right Click on drawble folder ⇒ New ⇒ Icon Pack Drawable Importer, it’ll come up with a window like this where you can Search with icon name, specify its size, color, format and different dimensions (Resolutions) you need to have in your project.

Material Design Icons with Android Studio Drawable Importer Plugin

Click Ok and you are Done !! The plugin will create folders under drawbale folder and you can use this icon directly in your project. For me, I picked Face Icon with size 24 to use in this example.

Feature 2: Vector Drawable Importer

1. Right Click on drawable folder ⇒ New ⇒ Vector Drawable Importer, it’ll come up with a window like this where you can Search with icon name, it doesn’t have options of size and resolutions because its vector. Click Ok and you are Done !! The plugin will put the svg (Vector) file under drawbale folder and you can use this icon directly in your project.

Material Design Icons with Android Studio Drawable Importer Plugin

Note: Vectors are only available to use after Android Lollipop.

Why should we use vectors ?

  • Vectors improve image scalability as it insures that your image is perfect on all devices with different resolutions.
  • Single File !! for lazy developers who don’t want to resize every image 3 or 4 times
  • It’s a time saver as well, imagine you are animating an icon or image and you need to provide 4 versions for each frame of your animations, it’s a nightmare for some people !

When should we use vectors ?

  • It’s recommended to use it in icons with reasonable sizes, not for all images.

For more Info about Android Vectors and why we use it, please Watch This Video!

You can create your own .xml vectors from this website and use it directly in your Android App.

Feature 3: Batch Drawable Import

1. Right Click on drawable folder ⇒ New ⇒ Batch Drawable Import, it’ll come up with a window like this:

You can get the image used in this example form here.

Material Design Icons with Android Studio Drawable Importer Plugin

clicking the Add button will come up with a window like this where you need to choose the resolution of your source image/icon to make it a reference for other resolutions, you can also choose your target resolutions you need.

Click Ok and you are Done !! The plugin will create folder containing all images sizes under drawbale folder and you can use this icon directly in your project.

Material Design Icons with Android Studio Drawable Importer Plugin

Android Studio Drawable Importer

1. Now let’s display our icons and images we imported, open the layout file the main activity activity_main.xml and add below code.

3. Let’s add some styles, Open colors.xml under res ⇒ values and add below color resources. If you don’t find colors.xml, create a new file with the name.

3. There’s no java code to add in the main activity, so lets Run the project and test it. You should able see Material Design Icons with Android Studio Drawable Importer Plugin with all options and it will look like this:

Material Design Icons with Android Studio Drawable Importer Plugin

Summary
Article Title
Material Design Icons with Android Studio Drawable Importer
Description
Android Studio Drawable Importer Plugin which made developer's life much more easier when dealing with icons, vectors and images with different resolutions
Author
Organization
Android Gifts

About #AndroidGifts

#AndroidGifts

Check Also

cover

ZXing (Zebra Crossing) Android Library Tutorial – Library #4

This is library #4 in this series 100 Library in Android , in the previous article we had …

Leave a Reply