[Android Themes] side:
Hello everyone !

This is my first tutorial in xda forums ! i hope you will find it useful :D

First of all my english is not good enough so please be patient!

Some words about tutorial:

This tutorial will explain what is a "vector",how can this be useful on android theming,how to use it.

I am not here to teach you,i am here to guide you to the solution you want to find :)

I am also a newbie on themes so please be soft with me :cool:

Lets start!

Describing "vector" with some simple words ,vector is a loseless-quality picture.By the word "loseless" i mean that the quality of the picture will not

be destroyed even if i maximize it 20000 pixels more!...

-Wow Side that means that i can edit all my photos to be perfect quality!

-No,of course no!...Vectoring a picture is not an easy operation.Needs a plenty of time and patience...You will see that it is not as easy as it seems

On this tutorial i will present to you how to create and edit vectors of QS icons.

-Why shouldnt i use pngs instead of vectoring?

-If you are boring of programming a vector,then just use pngs.i prefer all icons to be vector because its easier on animations,you dont fill your theme with

pngs,etc etc...its absolutelly your own choise

Lets start.........again

First of all lets explain how the things will work,theoritically and then we will proceed to actions :)

Lets imagine vector programming as a robot-arm which moves the way you program it.It uses some coordinates on a "canvas" we will define.

So,just think about a surface which u look at it from the top.

This surface has got some coordinates ,as we said.

Look at this picture http://prntscr.com/6yu7mg

As we can see ,the surface has got 2 dimensions...X and Y as the arrows are showing.

Firstly we have to know the coordinates of "the start" of the surface.Android uses point (0,0) on top left.

so the maximum coordinates will be at bottom right ( http://prntscr.com/6yu91r )

Lets say that the maximum coordinates are X=100 and Y=100 and we want to move our robot-arm on some points...

hm...lets make a square with 20x20 dimensions ...(we suppose that the move command is "Move x,y" )

The code will be have 4 times the command "move" with the 4 corner points of the square.

so,it will be

move 0,20
move 20,20
move 0,20
move 0,0

This will be the output ( http://prntscr.com/6yudg7 )

So this is how we will work on vector creation :D !

Before we continue i would like to point something...

In the previous problem we used ABSOLUTE coordinates.Absolute coordinates means that the number is the actual coordinate of the surface.

In this point we have to mention for RELATIVE coordinates.Relative coordinates means ,that the number shows the new position SINCE THE LAST ONE.

example

absolute coordinates problem:

move 0,20

move 20,0

output will be http://prntscr.com/6yugct

Relative coordinates problem will be:

move 0,20

move 20,20

that means "FROM THE LAST POINT YOU ARE,GO +20 TO X AND +20 TO Y"

Sometimes we need both techniques :)

lets move on actual situations! :)

SVG stands for (Scalable Vector Graphics)

First of all we will need some tools.

A powerful text editor,i prefer notepad++ Here

GIMP program (its a freeware) And here (NOT USED FOR NOW)

1 useful website http://apps.pixlr.com/editor/ or just an image editor of your choise(I use this its simple,light and i install nothing) (NOT USED FOR NOW)

The android API website and here

A reference on how SVG is built ...and here

Google's SVG editor here too (NOT USED FOR NOW)

Brain

Fantasy

and patience

So lets make a try to build a simple square icon for QS icons with one line from topleft to bottomright.

We will replace bluetooth icon when its off....on cm12.1 its ic_qs_bluetooth_off.xml

Opening it with notepad++ we are checking many things...JUST DELETE THEM...we will build it from the scratch ,step by step :):)

First of all,before we start,we open in our browser those links:

https://developer.android.com/training/material/drawables.html

http://www.w3.org/TR/SVG11/paths.html

https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

So,lets start building.

The first line of our xml will be of course

<?xml version="1.0" encoding="utf-8"?>

The item we will add is called simply "vector"

so we add this code

<vector

</vector>

Inside this quote ,will be our code.Lets see what google says about "vectors" ( Link here! )

As we can see on this website,we now declare the name of our surface,the size etc.

So as Google says the android:height and width affect the WHOLE surface

but viewportHeight and width affects only the working area!

So lets add to our code:

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

</vector>

So our surface will be 64.0 dip and the place where we will draw will be 64 too(That means we need all the surface :) )

Scrolling on the website we see "group"...Group is used for multiple drawing in ONE surface.

Example: if we need to draw 1 circle and 1 triangle we will use group for those 2 drawings

In our tutorial we will draw a rectangular and a line from topleft to botton right with 2 different colors.

We need 2 drawing so we will add group to our code as it is on the website.

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

</group>

<group android:name="square">

</group>

</vector>

After that we must add the "PATH".

'Path in SVG means a sentence of commands which are actually our commands

So we add the <path </path> in our code.

Now its time to add the color of the pencil we want to use.Lets say red for square and green for line.

as we can see the website the pencil color and width is:

android:strokeColor and

android:strokeWidth

BE CAREFUL! strokeColor means color of the pencil we are drawing.fillColor is the color which we want a closed-area to be colored with

Lets add them to our code with path too

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

<group android:name="base_gauge">
<path
android:strokeColor="#55ff55"
/>
</group>

<group android:name="square">
<path
android:strokeColor="#ff5555"
android:strokeWidth="4.0"
/>
</group>

</vector>

Now get ready for the final step.We know have to write down the commands we want .

Lets move to that website ( Here )

This is the reference of the SVG...Scrolling down we see many commands ...We will need Moveto, Lineto and ClosePath on this tutorial.

As we see the Moveto command it is compiled as "M or m (absolute or relative coordinates as we saw before) following by the coordinates)"

Same thing goes for Lineto.

As google says the class element that contains the commands is ''android: pathData''

Lets add some code for the line! !

IN DEPTH,EXPLANATION OF pathData and commands

As we see pathData is an element which contains a string .This string is the command line of the movement we want.

pathData is the most important element of vector class.

Watching on SVG reference we can understand that ,to create many lines we dont have to write 'L' 'L' 'L' 'L' 'L' again and again.

If we need to draw same shape ,many time we just add the coords of next point to go.

example:

m 0,0 30,12 140,124 -23,25

but here ,we have to watch something serious...everytime the commands "checks" for other parametre,it has to know the previous point!

So if we want to go 140,124 ,the commands MUST know the previous point(which is 30,12).

Many people use lowercase commands(for relative)...It seems to work better..its all about your feeling.Try both with care.

if we firstly use relative coordinates and then absolute,we must understand WHICH is the first and last point!.This is the difficult part of vectoring.

The website with SVG reference ,is writing the general way to use SVGs on computers.ITS NOT ANDROID DETICATED

We can ONLY use what the class contains!!!(Only what the google's website is giving us)

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

<group android:name="base_gauge">
<path
android:strokeColor="#55ff55" <!--green-->
android:pathData="M0,0 l64,64 z" <!-- this line moves the point to 0,0 and then using relative coordinates,creates a line from 0,0(last used) to +64,+64 -->
/>
</group>

<group android:name="square">
<path
android:strokeColor="#ff5555" <!--red-->
android:strokeWidth="4.0"
/>
</group>

</vector>

using 'z' at the end of command,makes vector enclose the vector and make it seems like 1 object-layer.

try make some test with and without 'z' ;)

Our line is ready!!

Lets see the rectangular..its going to be harder but calm down :)

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

<group android:name="base_gauge">
<path
android:strokeColor="#55ff55"
android:pathData="M0,0 l64,64 z"
/>
</group>

<group android:name="square">
<path
android:strokeColor="#ff5555"
android:strokeWidth="4.0"
android:pathData=
"M0,0 <!-- start from 0,0-->
l64,0 <!-- create line from 0,0(last used) to +64X and 0 Y -->
0,64 <!--create line from 64,0 (last used) to +0X and +64Y (We see that the new point is 64,64 but there is nowhere "64,64" ;) ) -->
-64,0 <!-- create line from last used to -64X and +0Y ( '-' means GO LEFT for X and UP for Y) -->
0,64
z"
/>
</group>

</vector>

The code is ready :)

This will be the output http://prntscr.com/6yv6s3

As this code works,almost all the vectors in android works like this :)

Thanks for reading! :) I will add the way to convert pngs to vector codes soon !Edits will be done every time i think something has to be added!

The tutorial is not finished.Some tools i posted are not used anywhere for now :) Please be patient!

Thanks again! :D

TIP:

See how CM developers have created the icons on QS :) now,it doesnt seem so Greek to you,isnt it :P :cool: ?
​