[Android Themes] munnibhai:
Hello guys,

This is a thorough tutorial (with images) on how to make an SVG graphic for use in android themes

Tools Used:

Adobe Illustrator (any version but CS5+ would be great)

Notepad++ (or any other text editor would do)

Online PX to DPI checker (important)

Expertise:

Only some knowledge of Illustrator required to build an SVG out of it

Of course we can always make our own graphics if we know illustrator enough but for the sake of this tutorial, I will not go into that part instead I will use just a normal image from internet since this is not a graphic design tutorial but how to make an svg and format it properly to use in android

STEP 1 - PREPARE FOR INTIALS

First we need to know which graphic are we going to make since we will need its dimensions.

Here I will make a wifi icon which is displayed in dropdown panel, in other words, Quick Settings Panel.

This icon is present in systemUI folder with different modes named as

ic_qs_wifi_0,

ic_qs_wifi_1,

ic_qs_wifi_2,

ic_qs_wifi_3

ic_qs_wifi_4

So in total, we will have 5 icons of Wifi. Since all these icons are same except the bars opacity to detemine strength of signal, we will make only one SVG of it and manipulate its opacity in others to make different modes.

Now, I have this PNG in dimensions of 168x168px in folder drawable-xhdpi and I need to know its DPI for correct display in phone. Here DPI checker becomes handy.

[IMG="PX to DPI Checker"]http://i.imgur.com/rrwpbc3.jpg[/IMG]

Our illustrator canvas is going to be 84px X 84px.

STEP 2 - VECTORIZE THE IMAGE

Open Illustrator, File > New and use the following settings and click OK

Now we need an image, as I said that I will just use a random image from google, so this is what I have selected, you can also use this one for practicing purpose. (HINT: I usually use keywords like "wifi icon png" in google and select an image which is at least 250x250px in dimension and there are no mixed colors or gradients)

When we have this image saved in my PC, we will just drag it open in illustrator over the same file we just started

Now its time to Image Trace this PNG to get it in vector shape.

This tool is present in WINDOW > IMAGE TRACE in illustrator. Click it to get the dialog if you dont have it already there.

Select the Image, In the Image Trace Dialog, click on "Black and White" Icon to trace it in B&W tones.

You will get something like this

The image has taken the form of vector but isn't editable yet, so we will need to Expand it to get the separate layers. The tool is in OBJECTS > EXPAND

Just press OK in the Expand Dialog

Now we have the separate vector layers for everything in that image, it is grouped in one and usually becomes annoying if you want to select only one layer in that group, it will instead select the whole group so we will just un-group it to root level (this is usually un-group two times). The tool is in OBJECTS > UNGROUP. or else the shortcut is CTRL+SHIFT+G (press two times)

After ungroup, we will have all the layers separated and we will remove the layers we dont need, that is all the white we have there.

First click outside image anywhere to deselect everything and then click on white to select it and press DEL on your keyboard.

We are now left with only black stripes which are our wifi lines. There are 4, one circle and 3 curves.

Sicne we need them all seperate to set the opacity later, so we will not merge these together. (I will come to this part later)

Now select all these 4 layers and scale them down to fit in the white canvas we created with File > New

Now I want my wifi icon to have a circle behind it as well, so we will head to make a circle.

Press L to select Eclipse Tool and draw a circle in the center of the image.

Make sure this new created circle layer lies below all other layers

HINT: You can zoom in the canvas to see better for working. a 500% zoom is good here.

Now I will have to make a Compound Path of this circle to correctly generate its code usable on android.

Select the Circle by clicking on it and then Right Click on your Mouse and select "Make Compound Path"

If you have more than 1 layer, its always a good idea to color them with different colors to later identify their code upon export. because we are gonna need it.

Color All other stripes separately as well. You can color them anything you want because they wont effect our SVG.

We now have a vector of wifi with a circle we are going to use in SVG. head to next step

STEP 3- PREPARE THE SVG

Assuming that until here, we have everything under control, Just head to "File > Save As", and in the save dialog, select SVG, and click on Save once. (Only Once)

Make sure you have the same settings in the next dialod and press button SVG CODE.. to open the code in browser.

In the browser, you will see some nasty code that may seem to you a Ferengi Alliance Code of Business Conduct but dont worry, we dont need to understand a single bit in it but copy only chunks of this code to Notepad++ or the text editor you are using.

I have highlighted those chunks which we need to copy one by one in the same order from top down as they are,

-- BUT FIRST--

Lets build the svg file base structure to copy the chunks to, and we also need some introduction to the code in it.

In notepad++, make a new file and paste the code below in it

<?xml version="1.0" encoding="utf-8"?>
<vector android:height="84.0dip" android:width="84.0dip" android:viewportWidth="84.0" android:viewportHeight="84.0"
xmlns:android="http://schemas.android.com/apk/res/android">

<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />
<path
android:fillColor=""
android:alpha=""
android:pathData="" />

</vector>

In the above code,

we are defining a vector with attributes of height and width of canvas and actual image in it. i-e 84..0dip as we concluded from px to dpi converter.

Next is the Path. We have 5 chunks of Path tag since we had originally 5 layers made in Illustrator.

Each Path tag has its attributes which will tell android how to render this svg.

android:fillColor will be the color of the shape

android:alpha will be transparency of the shape. 1.0 being opaque and 0.0 being completely transparent.

android:pathData will be actual data of the shape layer (here in attributed to as PATH) which we created

Please note that these attributes are case sensitive. so if you write pathdata instead of pathData, it will not work.

Now Back to the browser where we have our code. Please see the picture below

In the above picture, I have highlighted the chunks of code we need to copy and paste between pathData attributes.

Do them in order as blue to first and pink to last.

The first highlight is the data of circle

Second is data of Wifi small circle

similarly other 3 path datas are data of 3 curves we had in wifi

After you are finished, your code should look something like this

Note that your path data and number will look completely different than mine because there are too many factors involved, i-e placement of your shapes, size of shapes and shapes themselves etc etc

I have put alpha of first pathData to 1.0 because this is the circle and I want it opaque.

Next I have put alphas of all else to 0.3 because first image is going to be drawn in android when there are no wifi signals or wifi is not connected, so 30% opacity to wifi curves.

Save this image as ic_qs_wifi_0.png

Now look into the picture below

In this, I have put alpha of second path to 1.0. This is when you will be getting only one bar of wifi so one bar will turn white and rest will stay semitransparent.

Save now as ic_qs_wifi_1.png

Similarly keep adding 1.0 alpha to android:alpha and save respectively as ic_qs_wifi_2.pngic_qs_wifi_3pngic_qs_wifi_4png

Put them in your theme folder in com.android.systemui/res/drawable folder (I guess you know this part if you are a themer)

Your image will be drawn in android as

Please feel free to ask me anything about it and I will be more than happy to guide you guys.

Please do not forget to quote me when you ask something as this way I will get notifications on mobile to reply to you quicker.

Thanks.