Material Design Icons with Android Studio Drawable Importer

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: With this feature you can import any icon from  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. 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. 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: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.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.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.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.Note: Vectors are only available to use after Android Lollipop.Why should we use vectors ?When should we use vectors ?For more Info about Android Vectors and why we use it, please You can create your own .xml vectors  and use it directly in your Android App.1. Right Click on drawable folder ⇒ New ⇒ Batch Drawable Import, it’ll come up with a window like this: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.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.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071xmlnsxmlnsandroidandroidandroidandroidandroidandroidtools androidandroidandroidandroidandroidandroidandroidandroid androidandroidandroidandroidandroidandroidandroidandroidandroidandroid androidandroidandroidandroidandroidandroidandroidandroidandroidandroidandroid androidandroidandroidandroidandroidandroidandroid androidandroidandroidandroidandroidandroidandroid androidandroidandroidandroidandroidandroid   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.

#E91E63 #C2185B #FFC107

123456 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:SummaryArticle TitleDescriptionMohamed Fareed Android Gifts

Tags

Google announced Material Design Support Library in their Google IO 2015. One of the interesting components …

Recent PostsFollow us on Google+

SubscribeCategoriesArchives

© Copyright 2016, All Rights Reserved

Read More Post