[GUIDE]Vector and QS icons edit - Android Themes

Hello everyone !
This is my first tutorial in xda forums ! i hope you will find it useful
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
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
Code:
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 !
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
Code:
<?xml version="1.0" encoding="utf-8"?>
The item we will add is called simply "vector"
so we add this code
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:
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.
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">
<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
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">
<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)
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">
<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
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">
<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!
TIP:
See how CM developers have created the icons on QS now,it doesnt seem so Greek to you,isnt it ?​

Convert PNG to vector pathdata​
In this post we will see how to convert a PNG icon to vector path..
Some words before proceed....
Converting PNG to vector is not always successfull on each operation.
We will see a "fast" way to do that but this way doesnt promise a 100% result...
The result may differ from original png...Automated ways are always not so trusted as manual.
So,first of all lets select the png we want to convert....I will choose the flight mode icon from S5 TouchWiz(it is attached)
Run GIMP and for loading...3 windows will propably pop up.
Drag and drop the png to GIMP
You should see something like this( This
Now go to Toolbox and select the magic wand tool (It is called Fuzzy Select Tool).its the 4th icon of 1st row.
now,press ctrl+a to select ALL the icon
Go to 'Select' option and select 'Invert' ( Like this )
Then select the Fuzzy Select Tool again and select the area you want to be vectored.
We press on the circle around the airplane( This one )
Press again "Select" and press on "To path"
Now look on top right ,on the window called "Layers - Brushes"
and press the third icon .
Now the window is called "Paths-Brushes" and we can see the airplane icon modified.Press right click on it and select "Export Path"
( Link)
Select the Desktop icon as destination and give that vector a name
Once it is done,you will see a file created to desktop,with no extension.
Right click on it and open it with notepad ++
In the file we can clearly see the path of the file ( Like this )
Copy all that pathdata to clipboard...
Now open the SVG editor u have already downloaded.extract and open the contained folder..You will many files there...Just run the file svg-editor.html
This will open the svg editor to your browser.Click on topleft button with SVG letters,spot the d="" and paste there the pathdata we got from notepad++
Be careful
Ensure the dimensions of width and height to be setted on SVG code...or else the vector will be outside of the bounds.
DONT RESIZE THE VECTOR ON SVG EDITOR.
Svg editor is used only for presentation.
The code we copied to clipboard will be used on .xml file.
SVG editor changes all the coordinates from absolute to relative.dont copy that code there.
Vector pathdata is now ready! just the use the preferred colors as we saw at post 1
Thanks a lot ! ​

reserved just in case

added png to vector conversion at post #2!

Just a bump.will lock soon.doesnt seem to care anyone :/

Thank you for this tutorial, it's really interesting!! I'm trying to convert some PNGs to xml because I want to add a background to the quicksettings tiles, I made a colored circle with shades, I opened it in Gimp and followed all the steps in the tutorial but when I open the final svg I see a black square...I don't understand why..
EDIT: after some tests it works, the only problem is how to center the circle behind the tiles..
EDIT2: translate command, but not easy to use it, several tests to find the right position..

mikethevalar said:
Thank you for this tutorial, it's really interesting!! I'm trying to convert some PNGs to xml because I want to add a background to the quicksettings tiles, I made a colored circle with shades, I opened it in Gimp and followed all the steps in the tutorial but when I open the final svg I see a black square...I don't understand why..
EDIT: after some tests it works, the only problem is how to center the circle behind the tiles..
EDIT2: translate command, but not easy to use it, several tests to find the right position..
Click to expand...
Click to collapse
thanks for reply
the color of the vector is changed INSIDE the xmls .you declare it as fillcolor. read the tutorial again.

side said:
thanks for reply
the color of the vector is changed INSIDE the xmls .you declare it as fillcolor. read the tutorial again.
Click to expand...
Click to collapse
Yea that is in the xml, in the svg the code is *fill="coloryouwant"*. Thank you again.
---------- Post added at 03:13 PM ---------- Previous post was at 03:10 PM ----------
Unfortunatly the creation of a vector drawable from 0 is very tedious if the shape is not a square, the simplest way is to convert an already made png

mikethevalar said:
Yea that is in the xml, in the svg the code is *fill="coloryouwant"*. Thank you again.
---------- Post added at 03:13 PM ---------- Previous post was at 03:10 PM ----------
Unfortunatly the creation of a vector drawable from 0 is very tedious if the shape is not a square, the simplest way is to convert an already made png
Click to expand...
Click to collapse
yes...as i said on post #1 ,the result may differ...its all about our skills

side said:
yes...as i said on post #1 ,the result may differ...its all about our skills
Click to expand...
Click to collapse
I'm trying to understand how to apply shades in the xml. I found that we can use the "path shade" code with different types of shade like linear, radial, etc.. But I can't find a good guide to these commands...

mikethevalar said:
I'm trying to understand how to apply shades in the xml. I found that we can use the "path shade" code with different types of shade like linear, radial, etc.. But I can't find a good guide to these commands...
Click to expand...
Click to collapse
neither do i :/ ... i have never used shades on vectors just shapes

side said:
neither do i :/ ... i have never used shades on vectors just shapes
Click to expand...
Click to collapse
Unfortunately it seems that it's not possible, drawable vectors do not support gradients, so we can't fill a vector path with a color shade . I read it here

mikethevalar said:
Unfortunately it seems that it's not possible, drawable vectors do not support gradients, so we can't fill a vector path with a color shade . I read it here
Click to expand...
Click to collapse
MMMMMMMMMM yes ...not problem though ...i never needed it SO much!

side said:
MMMMMMMMMM
Click to expand...
Click to collapse
I've few questions, my image (in attached part, I made it a little more visual to see well) has 4 parts, so I magine that I'll have 4 "pathData" lines?! For that, I decomposed the images in 4 parts.
Here the results:
First part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection"
fill="none" stroke="black" stroke-width="1"
d="M 41.77,19.00
C 41.77,19.00 21.00,40.00 21.00,40.00
18.43,42.57 13.26,48.31 10.00,49.38
4.52,51.18 0.59,45.66 5.43,39.00
5.43,39.00 22.00,22.00 22.00,22.00
26.62,17.38 31.17,11.77 37.00,8.74
45.66,6.94 46.49,13.23 41.77,19.00 Z" />
</svg>
Second part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #1"
fill="none" stroke="black" stroke-width="1"
d="M 62.69,18.00
C 62.69,18.00 42.00,39.00 42.00,39.00
39.55,41.45 33.78,47.63 31.00,48.97
25.46,51.65 20.35,46.64 25.31,40.00
25.31,40.00 40.00,25.00 40.00,25.00
44.85,20.15 51.54,12.65 57.00,9.03
64.47,6.78 66.89,12.38 62.69,18.00 Z" />
</svg>
Third part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #2"
fill="none" stroke="black" stroke-width="1"
d="M 83.40,16.00
C 82.17,19.34 77.58,23.42 75.00,26.00
75.00,26.00 59.00,42.00 59.00,42.00
56.05,44.94 49.22,53.02 44.60,48.40
40.23,44.03 47.17,37.85 50.00,35.00
50.00,35.00 67.00,18.00 67.00,18.00
73.36,11.64 74.71,8.12 84.00,8.00
84.00,10.27 84.16,13.93 83.40,16.00 Z" />
</svg>
Fourth part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #3"
fill="none" stroke="black" stroke-width="1"
d="M 83.40,36.00
C 82.20,39.33 74.18,47.44 71.00,48.97
65.77,51.50 61.50,47.23 64.03,42.00
65.88,38.16 73.38,31.43 77.00,29.03
82.75,27.28 85.44,30.36 83.40,36.00 Z" />
</svg>
To convert it in a good Android xml, I think it should be modified like that ( it's only an example, just that you see I understood, I think)
Example of result possible:
Code:
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="23,996992dip" android:width="37,32864dip" android:autoMirrored="true" android:viewportWidth="24.0" android:viewportHeight="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@*common:color/theme_dark_side_green_color" android:pathData="M19.700001,20.000000l2.000000,0.000000l0.000000,2.000000l-2.000000,0.000000z" />
<path android:fillColor="@*common:color/theme_dark_side_green_color" android:pathData="M19.700001,10.000000l2.000000,0.000000l0.000000,8.100000l-2.000000,0.000000z" />
<path android:fillColor="@*common:color/theme_dark_side_QS_icon_color_disabled" android:pathData="M17.700001,8.000000l4.299999,0.000000 0.000000,-6.000000 -20.000000,20.000000 15.700001,0.000000z" />
</vector>
In this synthax, my only issue will be perhaps the size, on the files makes by Gimp, the size is in Inch, so I have to convert it too...
Like that:
For xxhdpi (what I mainly use in the theme):
1 inch = 96 pixel
1dp = 3 pixel
ldpi 48.00dp = 36.00px = 0.30in
mdpi 48.00dp = 48.00px = 0.30in
tvdpi 48.00dp = 63.90px = 0.30in
hdpi 48.00dp = 72.00px = 0.30in
xhdpi 48.00dp = 96.00px = 0.30in
xxhdpi 48.00dp = 144.00px= 0.30in
xxxhdpi 48.00dp = 192.00px= 0.30in
Can you confirm and make me a model of that?

franzyroy said:
I've few questions, my image (in attached part, I made it a little more visual to see well) has 4 parts, so I magine that I'll have 4 "pathData" lines?! For that, I decomposed the images in 4 parts.
Here the results:
First part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection"
fill="none" stroke="black" stroke-width="1"
d="M 41.77,19.00
C 41.77,19.00 21.00,40.00 21.00,40.00
18.43,42.57 13.26,48.31 10.00,49.38
4.52,51.18 0.59,45.66 5.43,39.00
5.43,39.00 22.00,22.00 22.00,22.00
26.62,17.38 31.17,11.77 37.00,8.74
45.66,6.94 46.49,13.23 41.77,19.00 Z" />
</svg>
Second part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #1"
fill="none" stroke="black" stroke-width="1"
d="M 62.69,18.00
C 62.69,18.00 42.00,39.00 42.00,39.00
39.55,41.45 33.78,47.63 31.00,48.97
25.46,51.65 20.35,46.64 25.31,40.00
25.31,40.00 40.00,25.00 40.00,25.00
44.85,20.15 51.54,12.65 57.00,9.03
64.47,6.78 66.89,12.38 62.69,18.00 Z" />
</svg>
Third part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #2"
fill="none" stroke="black" stroke-width="1"
d="M 83.40,16.00
C 82.17,19.34 77.58,23.42 75.00,26.00
75.00,26.00 59.00,42.00 59.00,42.00
56.05,44.94 49.22,53.02 44.60,48.40
40.23,44.03 47.17,37.85 50.00,35.00
50.00,35.00 67.00,18.00 67.00,18.00
73.36,11.64 74.71,8.12 84.00,8.00
84.00,10.27 84.16,13.93 83.40,16.00 Z" />
</svg>
Fourth part:
Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="1.16652in" height="0.749906in"
viewBox="0 0 84 54">
<path id="Sélection #3"
fill="none" stroke="black" stroke-width="1"
d="M 83.40,36.00
C 82.20,39.33 74.18,47.44 71.00,48.97
65.77,51.50 61.50,47.23 64.03,42.00
65.88,38.16 73.38,31.43 77.00,29.03
82.75,27.28 85.44,30.36 83.40,36.00 Z" />
</svg>
To convert it in a good Android xml, I think it should be modified like that ( it's only an example, just that you see I understood, I think)
Example of result possible:
Code:
<?xml version="1.0" encoding="utf-8"?>
<vector android:height="23,996992dip" android:width="37,32864dip" android:autoMirrored="true" android:viewportWidth="24.0" android:viewportHeight="24.0"
xmlns:android="http://schemas.android.com/apk/res/android">
<path android:fillColor="@*common:color/theme_dark_side_green_color" android:pathData="M19.700001,20.000000l2.000000,0.000000l0.000000,2.000000l-2.000000,0.000000z" />
<path android:fillColor="@*common:color/theme_dark_side_green_color" android:pathData="M19.700001,10.000000l2.000000,0.000000l0.000000,8.100000l-2.000000,0.000000z" />
<path android:fillColor="@*common:color/theme_dark_side_QS_icon_color_disabled" android:pathData="M17.700001,8.000000l4.299999,0.000000 0.000000,-6.000000 -20.000000,20.000000 15.700001,0.000000z" />
</vector>
In this synthax, my only issue will be perhaps the size, on the files makes by Gimp, the size is in Inch, so I have to convert it too...
Like that:
For xxhdpi (what I mainly use in the theme):
1 inch = 96 pixel
1dp = 3 pixel
ldpi 48.00dp = 36.00px = 0.30in
mdpi 48.00dp = 48.00px = 0.30in
tvdpi 48.00dp = 63.90px = 0.30in
hdpi 48.00dp = 72.00px = 0.30in
xhdpi 48.00dp = 96.00px = 0.30in
xxhdpi 48.00dp = 144.00px= 0.30in
xxxhdpi 48.00dp = 192.00px= 0.30in
Can you confirm and make me a model of that?
Click to expand...
Click to collapse
actually it wont be 4 lines...its more complicated since one line with 1 semi-circle on top and 1 semi-circle on bottom of each "line"
although i cant make u the vector because my Windows7 HDD burnt :crying: i got no tools to do it for now.but i promise since new week,u will have it
EDIT:
about coordinates etc...i mention in first post that the coords of google's sketch and actual android pattern differs.
google's sketch app seems buggy

side said:
actually it wont be 4 lines...its more complicated since one line with 1 semi-circle on top and 1 semi-circle on bottom of each "line"
although i cant make u the vector because my Windows7 HDD burnt :crying: i got no tools to do it for now.but i promise since new week,u will have it
EDIT:
about coordinates etc...i mention in first post that the coords of google's sketch and actual android pattern differs.
google's sketch app seems buggy
Click to expand...
Click to collapse
OK
You cant put four "pathData"... weird, it ssemed to have seen it.

@side
Would you mean like this image below? For each part?
Sorry for the quality!

franzyroy said:
@side
Would you mean like this image below? For each part?
Sorry for the quality!
Click to expand...
Click to collapse
yes yes thats what i mean

Awesome guide @side very helpful for me, theme developers.
Thanks!

franzyroy said:
OK
You cant put four "pathData"... weird, it ssemed to have seen it.
Click to expand...
Click to collapse
yes you can...you use "Group" mention..check the guide.i use 2 Groups for 2 patterns

Related

Change wm6.5 lockscreen slider height

I'm trying to make a custom theme for 6.5 lockscreen but I'm stuck on changing the slider height, the default one is 120x80 and I need 90x90.
While decreasing horizontal size is trivial, I can't find where increase maximum height for slider in cpr file because LS_LockSLider.png isn't declared anywhere. Any hints? Is there a comprehensive guide about cpr syntax and declaration? thank you
why not just copy/paste your 90x90 image to a transparent 120x80 png?
EDIT: oops... the 10 px would be cut off... i think i need some sleep.
no, not cut off, streched in 80px
Just change the Width= and Height= parts of the slider in LS_LockScene_RES.cpr
I think you need to change it in two places.
Line 3: (I think this is the "slide to unlock" area)
Code:
<Slider ID="LockSlider" Top="16" Left="0" Width="384" Height="200" Orientation="Left" OnPress="ShowNotifications" OnSlideLeftFinal="Unlock" OnSlideRightFinal="Unlock" >
Line 71,73,76: (Slider button)
Code:
<Layer ID="Slide" Width="200" Height="200" OnInitComplete="Binding:LockScreen,LS_Notifications">
<Image ID="SliderFocusIcon" Width="122" Height="82" Visible="True" Opacity="1.0" ScalingAlgorithm = "TriLinear" />
<Image ID="SliderIcon" Width="200" Height="200" Visible="True" Opacity="1.0" ScalingAlgorithm = "TriLinear" />
I dont think you can change the image filename without editing the relevant .dll.
drkfngthdragnlrd has put a lot of effort in to writing up wm6.5, so searching for his threads is about the best guide you can find.
Note: While I expected to find the LS_LockScene_480x800.cpr in \Windows\, on my device it was actually in \Windows\LockScreen\.
isangelous said:
Just change the Width= and Height= parts of the slider in LS_LockScene_RES.cpr
I think you need to change it in two places.
Line 3: (I think this is the "slide to unlock" area)
Code:
<Slider ID="LockSlider" Top="16" Left="0" Width="384" Height="200" Orientation="Left" OnPress="ShowNotifications" OnSlideLeftFinal="Unlock" OnSlideRightFinal="Unlock" >
Line 71,73,76: (Slider button)
Code:
<Layer ID="Slide" Width="200" Height="200" OnInitComplete="Binding:LockScreen,LS_Notifications">
<Image ID="SliderFocusIcon" Width="122" Height="82" Visible="True" Opacity="1.0" ScalingAlgorithm = "TriLinear" />
<Image ID="SliderIcon" Width="200" Height="200" Visible="True" Opacity="1.0" ScalingAlgorithm = "TriLinear" />
I dont think you can change the image filename without editing the relevant .dll.
drkfngthdragnlrd has put a lot of effort in to writing up wm6.5, so searching for his threads is about the best guide you can find.
Note: While I expected to find the LS_LockScene_480x800.cpr in \Windows\, on my device it was actually in \Windows\LockScreen\.
Click to expand...
Click to collapse
exactly what I'm trying to to... thanks

MIUI new lockscreen manifest reference (6.26.2012 updated, MIUI lockscreen 2.0)

I think it's time to bring MIUI lockscreen to the 2.0 era after added many new features. before I didn't have too much time to work on it, so there were not too many big updates, from now on hopefully I will invest much more time on it.
In the mtz theme package, you can find the lockscreen/advance directory, the manifest.xml file is the description script, in xml.
newly added:
6.26.2012
extended ifelse function: (MIUI v4 2.6.22)
ifelse(x1, y1, x2, y2, ... , z)
// if x1>0 return y1; else if x2>0 return y2; ... ; else return z
virtual screen element
<VirtualScreen name="virtualscreen">
which is a group, all its children elements will be drew in its own bitmap buffer, this buffer can be used as the source of an Image :
<Image useVirtualScreen="true" src="virtualscreen">
Image 3D rotation
<Image angleX="" angleY="">
angleX : rotate around x axis
angleY : rotate around y axis
rotate center is: centerX, centerY
specifying Image resource region
<Image srcX="" srcY="" srcW="" srcH="" >
please refer to the unfold lockscreen to see the real code.
support query webservice
http://forum.xda-developers.com/showpost.php?p=27299135&postcount=6692
------------ above is only for MIUI v4 2.6.8 or later ---------------
dynamic frame rate
1) you can specify different frame rate under different scenes.
<Lockscreen frameRateCharging="30" frameRateBatteryLow="20" frameRateBatteryFull="1">
2) added a new element, FramerateController, which can specify dynamic frame rate in timeline. add it into a container, then it can set the requested framerate at the time point,
it looks like:
<FramerateController visibility="#music_control.visibility" loop="true">
<ControlPoint time="0" frameRate="20"/>
<ControlPoint time="1000" frameRate="0"/>
<ControlPoint time="3000"/>
</FramerateController>
refer to the builtin default theme for real code.
------------ above is only for MIUI v4 ---------------
lockscreen on 2.3 will not update.
2.0:
http://forum.xda-developers.com/showpost.php?p=15211258&postcount=10
12.5
support formating of “where”
<ContentProviderBinder where="" whereFormat="" whereParas="">
content provider supports dependency, variables acquired after the query of a ContentProviderBinder can be used as the query parameter of another ContentProviderBinder
<ContentProviderBinder name="name1" dependency="name2">
<ContentProviderBinder name="name2" >
after name2 query complete, name1 could use the variables binded in name2 as format parameters. and if the data changes in name2 and triggers the query of name2, it will also trigger the query of name1 after query complete of name2.
11.24
content provider support
logic functions and select function
a new component which uses image to display a given number
http://forum.xda-developers.com/showpost.php?p=15211258&postcount=10
---------------------------------------------
10.21
unlocker bounce animation when released.
sample:
<Unlocker name="unlocker" bounceInitSpeed="10" bounceAcceleration="1500">
this is the unlocker code swipe from left to right, the 2 newly added attributes are the initial speed and the acceleration (in pixel and second), they all support expression.
<Unlocker name="unlocker" bounceInitSpeed="-5*#unlocker.move_y" bounceAcceleration="12.5*#unlocker.move_y">
this is the code swipe from bottom to top, the initial speed expression means the farther it moves the faster the speed it starts with. because the move_y is minus if it slides upward, so add a minus to the expression. the acceleration expression is calculated from the end speed you want it to be. for example we want the unlocker's speed be 0 when it gets back to original position, then we can get the acceleration should be a=-v*v/2d a:acceleration v:speed d:move distance
text element now has the text width variable. you can use it to align text elements horizontally.
name: text_width
<Text name="tt" .../>
#tt.text_width
the actual position variables of an element, acquire the position in animation. actual_x actual_y
<Image name="img" ... >
<ositionAnimation>
...
</PositionAnimation>
</Image>
#img.actual_x #img.actual_y
9.30
support formatting of string variable
<Text format="Next alarm:[%s] Battery:[%d%%]" paras="@next_alarm_time,#battery_level"/>
text and date rotation <Text angle=""/>
9.23
support string variable .
next_alarm_time
<Text text="@next_alarm_time" .../>
9.2
* Text/DateTime support rotation now.
8.26
* screen element visibility supports expression
visibility=“expression” <=0 invisible >0 visible
* MusicControl
added attribute "autoShow", true/false it indicates whether show the music control automatically when entering lockscreen
added variables
music_state, this number indicates the playback state 0:stopped 1laying
visibility, this number indicates the visibility of music control 0=false 1=true
8/12：
a) ability to show home screen, if no lockscreen wallpaper or the lockscreen wallpaper can be moved away, you can see through to the home screen(launcher or the previous app). can be used to simulate lockscreens of WP7, Meego, Ali cloud, etc.
displayDesktop property of Lockescreen false by default
<Lockescreen displayDesktop="true">
b) sound effect with unlocker
StartPoint: normalSound, pressedSound specify the sound to be played when change to normal or pressed.
EndPoint: reachedSound, specify the sound to be played when reach this endpoint.
<Unlocker name="unlocker">
<StartPoint x="0" y="440" w="480" h="400" normalSound="sound_normal.mp3" pressedSound="sound_normal.mp3">
<EndPoint x="0" y="640" w="480" h="400" reachedSound="sound_reached.mp3">
7/15:
property of Image, Text, Time
align=left, center, right the horizontal align mode
property of Image, Time
alignV= top, center, bottom the vertical align mode.
function: round() int() , if u don't know them, never mind, you don't need them.
music control supports album cover. see music control part.
Image add property: antiAlias by default is false, for clock hand images you can set it true to make them smooth.
1. Image element
you can use Image element to display a picture on the screen with many properties.
<Image x="" y="" w="" h="" centerX="" centerY="" angle="" src="" srcid="" alpha="" antiAlias=""/>
x,y : the position of the image relative to the upper-left point of the screen. both are 0 by default.
w,h : width and height, the image original width and height by default.
centerX, centerY : rotation center relative to the upper-left point of the image.
angle : rotation degree, 0-360
src : picture name.
srcid : the sequence number of a serial of pictures, normally it will be an expression which will be evaluated to a number. Then the image element will display different pictures according to the number. For instance, given src="pic.png" srcid="1", it will display the picture "pic_1.png".
alpha : the opacity, 0-255, will not display if alpha<=0, and >=255 just no difference from 255.
antiAlias: true/false
Sample:
<Image x="0" y="#screen_height-323" src="bottom_bg.png"/>
2. Expression.
All number properties supports expression. An expression can contain any kind of combinations of plus, minus, multiply, divid, modulo, brackets, functions and variables.
+ - * / %
functions: sin, cos, tan, asin, acos, atan, sinh, cosh, sqrt, abs, min, max
len(number) get the digit count of the given number, e.g. len(1234)=4
digit(number, pos) get the nth digit of the given number, e.g. digit(1234, 2) = 3
3. Variables
Variables can be used in expressions. A variable starts with a #.
currently supported variables:
* unlocker properties, format: name.property e.g. #unlocker.move_x
move_x: the move offset on x axis when unlocking, can be minus.
move_y: the move offset on y axis when unlocking, can be minus.
move_dist: the move distance when unlocking.
state: unlocking state normal:0 pressed:1 reached:2
* globals
time: current time, long
touch_x, touch_y: current touch point
battery_level: battery level 0-100
sms_unread_count: unread sms
call_missed_count: missed calls
* date & time
ampm: // 0 am, 1 pm
hour12: hour, 12 hours
hour24: hour in the day, 24 hours
minute:
second:
year:
month: //0-11
date: day
day_of_week // 1-7 Sun - Sat
screen_width: screen width
screen_height: screen height
battery_state: the state of plug and battery normal:0 charging:1 battery low:2 battery full:3
Sample:
alpha means this picture only display in non charging state, and will became transparent gradually along the unlocker dragging.
1. <Image x="162" y="#screen_height-84" src="hs_path_bg.png" alpha="(255-#unlocker.move_x/100*255)*min(1, abs(1-#battery_state))"/>
4. Image element can have animations.
Animation types: picture source, position, size, rotation, alpha.
Animations are independent to each other, they play on their own timeline and loop. An animation contains some key frame items. A key frame including properties and time. Except the source animation, other animations will interpolate the current properties according to current time and the properties of the adjacent two key frames. If the first key frame time is not 0, then the default key frame of time 0 will be the original picture properties. Time unit is ms.
for instance:
below is a position animation, if current time is 1600, 1600 mod 1000 = 600, x=10 + (600-100)/(1000-100)*(100-10) = 60 y=120
1. <Image>
2. <PositionAnimation>
3. <Position x="10" y="20" time="100"/>
4. <Position x="100" y="200" time="1000"/>
5. </PositionAnimation>
6. </Image>
time 0 100 [600] 1000
| | | |
x,y 10, 20 60,120 100, 200
The position is relative to the image's position.
7.
8. other animations:
9. <RotationAnimation>
10. <Rotation angle="" time=""/>
11. <Rotation angle="" time=""/>
12. </RotationAnimation>
13.
14. <SizeAnimation>
15. <Size w="" h="" time=""/>
16. <Size w="" h="" time=""/>
17. </SizeAnimation>
18.
19. <!-- 0-255 -->
20. <AlphaAnimation>
21. <Alpha a="" time=""/>
22. <Alpha a="" time=""/>
23. </AlphaAnimation>
The source animation is a little different from others, current picture is the first key frame source that is bigger than current time.
x, y is optional, means the relative position to the Image.
1. <SourcesAnimation>
2. <!-- optional: x y -->
3. <Source x="" y="" src="pic1.png" time="100"/>
4. <Source x="" y="" src="pic2.png" time="1000"/>
5. </SourcesAnimation>
if current time is 1600, the picture is pic2.png
Sample:
The position animation means the picture moves smoothly from the left of screen to the right in 1 second, stops for 1 second. The alpha animation means the opacity starts from 175, keep it when moving from left to right, when arrive at the right side, becomes 255 in 0.5 second, then disappears gradually in 0.5 second. And loop.
1. <Image x="0" y="#screen_height-177" src="charging_light.png" category="Charging">
2. <PositionAnimation>
3. <Position x="480" y="0" time="1000"/>
4. <Position x="480" y="0" time="2000"/>
5. </PositionAnimation>
6. <AlphaAnimation>
7. <Alpha a="175" time="0"/>
8. <Alpha a="175" time="1000"/>
9. <Alpha a="255" time="1500"/>
10. <Alpha a="0" time="2000"/>
11. </AlphaAnimation>
12. </Image>
5. Image can have masks.
x,y: the position of mask.
src: the mask picture, normally we use black to fill non-transparent area. and alpha channel will be used to mask the image. note that area in the Image that is out of the mask will keep intact.
align: indicates the position is relative to the Image or absolute.
1. <Mask x="" y="" src="" centerX="" centerY="" angle="" align="">
2. <SourcesAnimation/>
3. <RotationAnimation/>
4. <PositionAnimation/>
5. </Mask>
Mask can also have source animation, rotation animation, position animation, properties also support expression.
below is the dotted glowing arrow animation indicates the unlock path.
1. <Image x="444" y="#screen_height-92" src="hs_path_light.png">
2. <PositionAnimation>
3. <Position x="-438" y="0" time="2000"/>
4. </PositionAnimation>
5. <Mask x="0" y="#screen_height-92" src="hs_path_mask_r.png" align="absolute"/>
6. </Image>
6. Category property
All elements except the unlocker can be designated a category property. It has three values: Charging, BatteryLow, BatteryFull, Normal. The element with a category property will only show at the designated state. Can be used to display charging text, charging animations.
e.g. <Image x="100" y="100" src="pic.png" category="Charging"/>
7. Time
src is the prefix and ext of digit pictures, the code below means using time_0.png, time_1.png, ... time_9.png, time_dot.png
1. <Time x="10" y="10" src="time.png">
2. </Time>
8. Text
Display text on the screen, supports format.
color: #FFFFFFFF
size:
format: used to show variable numbers in text
align:left, center, right
paras: the variables need to be show in format.
Text added marquee feature, if specified width and marqueeSpeed, it will marquee text when text is wider than width
1. <Text x="" y="" text="" color="" size="" format="" paras="#x,#y" align="" marqueeSpeed="">
2. <PositionAnimation/>
3. </Text>
Sample:
1. <Text x="240" y="130+#unlocker.move_y" category="Charging" color="#AAFFFFFF" alpha="200" size="24" format="Charging (%d%%)" paras="#battery_level" align="center"/>
9. Date & time
Display data and time text in designated format.
format: standard date time format, lunar date: NNNN
1. <DateTime x="" y="" color="" size="" format="">
2. <PositionAnimation/>
3. <DateTime>
Formatting characters may be repeated in order to get more detailed representations
of that field. For instance, the format character M is used to
represent the month. Depending on how many times that character is repeated
you get a different representation.
For the month of September:
M 9
MM 09
MMM Sep
MMMM September
The effects of the duplication vary depending on the nature of the field.
See the notes on the individual field formatters for details. For purely numeric
fields such as <code>HOUR</code> adding more copies of the designator will
zero-pad the value to that number of characters.
For 7 minutes past the hour:
m 7
mm 07
mmm 007
mmmm 0007
Examples for April 6, 1970 at 3:23am:
MM/dd/yy h:mmaa 04/06/70 3:23am
MMM dd, yyyy h:mmaa Apr 6, 1970 3:23am
MMMM dd, yyyy h:mmaa April 6, 1970 3:23am
E, MMMM dd, yyyy h:mmaa Mon, April 6, 1970 3:23am
EEEE, MMMM dd, yyyy h:mmaa Monday, April 6, 1970 3:23am
Noteworthy day: M/d/yy Noteworthy day: 4/6/70
24 hours: "kk:mm" -> "13:34"
10. Unlocker
name: used to compose a variable name. e.g. name.property
Can have multiple unlockers.
<Unlocker name="">
start point, specify the valid touch area of unlocking behavior. Elements under a start point will follow the current dragging.
1. <StartPoint x="" y="" w="" h="">
Normal state, can have multiple elements.
3. <NormalState>
4. <Image/>
5. <Time/>
6. <DateTime/>
7. <Text/>
8. </NormalState>
Pressed inside the valid area, starts unlocking. will hide other states elements.
10. <PressedState>
11. <Image/>
12. <Time/>
13. <DateTime/>
14. <Text/>
15. </PressedState>
When reached the unlock target area, show the reached state elements.
17. <ReachedState>
18. <Image/>
19. <Time/>
20. <DateTime/>
21. <Text/>
22. </ReachedState>
23. </StartPoint>
These 3 states can all be absent, just use variable expressions to vary elements to indicate unlock process.
Endpoint specifies the unlock target area, when the start point's x,y enter the target area, release will perform unlock.
1. <EndPoint x="" y="" w="" h="">
The intent to send after unlocking. can be used to launch an app.
3. <Intent action="" type="" category="" package="" class=""/>
5. <NormalState>
6. <Image/>
7. </NormalState>
8.
9. <!-- show the target position if pressed trying to unlock-->
10. <PressedState>
11. <Image/>
12.
13. </PressedState>
14.
15. <!-- show specified image when reached target, if touch up then perform unlock-->
16. <ReachedState>
17. <Image/>
18. </ReachedState>
19.
20.
Unlock path, can have more than 2 points to form a curve path. x,y is optional, tolerance means if dragging beyond this value then cancle the unlocking process, back to normal state. Position's x&y are relative to path's. the start point will be aligned to the path.
Path is also optional, if has no path, the start point can be dragged anywhere.
22. <Path x="" y="" tolerance="">
23. <Position x="" y="" />
24. <Position x="" y="" />
25. </Path>
26. </EndPoint>
can have multiple end points.
<EndPoint/>
</Unlocker>
Sample:
1. <Unlocker name="unlocker">
2. <StartPoint x="31" y="#screen_height-117" w="90" h="90">
3. <NormalState>
4. <Image x="31" y="#screen_height-117" src="unlock_button.png">
5. </Image>
6. </NormalState>
7. </StartPoint>
8. <EndPoint x="359" y="#screen_height-117" w="90" h="90">
9. <PressedState>
10. <Image x="359" y="#screen_height-117" src="unlock_target.png">
11. </Image>
12. </PressedState>
13. <Path x="0" y="#screen_height-117">
14. <Position x="31" y="0" />
15. <Position x="359" y="0" />
16. </Path>
17. </EndPoint>
18. </Unlocker>
11. The manifest.xml structure.
Lockscreen is the root, frameRate: specify a frame rate, if the animation is slow you can specify a small value to conserve power. by default is 30. If frameRate is set to 0, the screen will not update till you touch. touch event will cause screen update immediately. The theoratical max value is 100.
The z-order of element is subject to the secquence in xml, display from back to front.
1. <Lockscreen version="1" frameRate="">
2. <Image />
3. <Image />
4. <Unlocker/>
5. <Unlocker/>
6. <Time/>
7. <DateTime/>
8. <Text/>
9. </Lockscreen>
12. Wallpaper element
Wallpaper refers the wallpaper bitmap selected by system setting. It can't specify source, others are the same with Image. If has no Wallpaper element, wallpaper will not show. A Lockscreen may have multiple Wallpaper element.
<Wallpaper/>
13. Button element
Button can be used to receive click, double click event, and control other elements according to trigger.
<Button name="" x="" y="" w="" h="" listener="">
All elements 所有元素supports name property, the control target element is being specified by name.
x, y, w, h: specify the button area。
listener, the target element name to which the event of this button will be forward
A button may have multiple trigger, a trigger defines the button event and the related operation should perform, like changing a property.
<Trigger action="" target="" property="" value=""/>
action: down (pressed), up (release), double (double click), long (long click, not implemented for now)
target: the target element name
property: property name, currently only supports: visibility
value: property value , for boolean: true, false, toggle
Button xml structure:
1. <Button>
// can be empty, optional
3. <Triggers>
4. <Trigger/>
5. <Trigger/>
6. </Triggers>
7. // normal state of button, can contain any element like Image, Text, it's optional.
Note: the coordinates of elements and the coordinates of Button itself is separated, they are all relative to parent of Button.
9. <Normal>
10. <Image/>
11. <Text/>
12. ...
13. </Normal>
14. // Pressed state, optional
15. <Pressed>
16. <Image/>
17. <Text/>
18. ...
19. </Pressed>
20. </Button>
14. Music control element
specify a name so its visibility can be controlled by another button.
must have 4 Buttons and 1 Text, and they all must have the specified names like below.
can also contain any other element.
<MusicControl name="music_control" x="" y="">
//album cover, you can specify size, animations, and masks as a normal Image
<Image name="music_album_cover"/>
//song information text
<Text name="music_display"/>
//previous button
<Button name="music_prev"/>
//next button
<Button name="music_next"/>
//play button
<Button name="music_play"/>
//pause button
<Button name="music_pause"/>
</MusicControl>
Sample:
<!-- double click to show or hide the music control -->
<Button x="178" y="529" w="126" h="126">
<Triggers>
<Trigger action="double" target="music_control" property="visibility" value="toggle"/>
</Triggers>
</Button>
1. <MusicControl x="0" y="300" name="music_control" visibility="false">
<Image name="music_album_cover" x="240" y="40" alpha="150" align="center" alignV="center" />
2. <!-- background image -->
3. <Image src="music_bg.png" x="40" y="0" alpha="100" />
4. <!-- Text added marquee feature, if specified width and marqueeSpeed, it will marquee text when text is wider than width -->
5. <Text name="music_display" x="240" y="10" w="300" marqueeSpeed="30" size="24" color="#FFFFFF" alpha="150" align="center"/>
6. <Button name="music_prev" x="40" y ="40" w="108" h="84">
7. <Normal>
8. <Image src="music_previous_n.png" x="40" y="40" />
9. </Normal>
10. <;Pressed>
11. <Image src="music_previous_p.png" x="40" y="40" />
12. </Pressed>
13. </Button>
14. <Button name="music_next" x="332" y ="40" w="108" h="84">
15. <Normal>
16. <Image src="music_next_n.png" x="332" y="40" />
17. </Normal>
18. <Pressed>
19. <Image src="music_next_p.png" x="332" y="40" />
20. </Pressed>
21. </Button>
22. <Button name="music_play" x="186" y ="40" w="108" h="84">
23. <Normal>
24. <Image src="music_play_n.png" x="186" y="40" />
25. </Normal>
26. <Pressed>
27. <Image src="music_play_p.png" x="186" y="40" />
28. </Pressed>
29. </Button>
30. <Button name="music_pause" x="186" y ="40" w="108" h="84">
31. <Normal>
32. <Image src="music_pause_n.png" x="186" y="40" />
33. </Normal>
34. <Pressed>
35. <Image src="music_pause_p.png" x="186" y="40" />
36. </Pressed>
37. </Button>
38. </MusicControl>
-------------------------
---TIPS
1.
how to control a element to show or not show under multiple combined conditions:
use alpha to control it, each condition can map to the alpha value 0 or 255. if the relation of two conditions is AND, multiply them, if is OR, add them. and brackets also help.
for instance:
if you want to show an Image when device is unplugged or battery is full or the unlock state is normal (not pressed or reached),
code:
<Image src="pic.png" alpha="max(0,(1-#battery_state))*255 + max(0,(#battery_state-2))*255 + max(0,(1-#unlocker.state))*255">
2. leverage screen variables to deal with different resolutions, #screen_height #screen_width
unlock from left to right
<Unlocker name="unlocker">
<StartPoint x="45" y="#screen_height-152" w="82" h="82">
<NormalState>
<Image x="45" y="#screen_height-152" src="hs_unlock_button.png">
</Image>
</NormalState>
</StartPoint>
<EndPoint x="353" y="#screen_height-152" w="82" h="82">
<NormalState>
<Image x="353" y="#screen_height-152" src="hs_target.png">
</Image>
</NormalState>
<Path x="0" y="#screen_height-152">
<Position x="45" y="0" />
<Position x="353" y="0" />
</Path>
</EndPoint>
</Unlocker>
=================================================
If you have any question and suggestion plz contact me through: xuruijun#.xiaomi.com
I may not check this thread frequently.
Thanks
-- Ruijun
from MIUI team
Wow this is sick! This will us themers so much.
Thank you for this!
Awesome! Thank you for this.
I`m currently working on lockscreen theme mod, based on five-points lockscreen theme. It`s easier than i thought and i think it will be great to share some lockscreen when i finish my work
Just in curious, is there any option to make text style BOLD?
Is there any chance that it can be ported to work on non-MIUI Android ROMs, so the rest of the Android fanbase can enjoy it as well?
just add the bold attribute, effect in this week's version.
Great! Can`t wait for this week`s version!
I'm trying to edit some of the shortcuts in my lockscreen. But i can't seem to find which class i have to set. I would like to know the class needed to open the music player and to open my email application, instead of the gmail application. Is there any logic behind this, or is there a way i can find this out per app?
Thanks in advance!
Quick question:
If I want the unlocker to be a button to be just touched, do I just put my intent code in <Endpoint><ReachedState>HERE</ReachedState></Endpoint>
newly added:
2.10 updated, customisable lockscreen
each lockscreen mtz could has a config.xml file, this file describes the items which are configurable. the file config.xml comes along with manifest.xml under the advance folder.
you can customise the unlock application for now. and more.
config.xml format:
// root
<Config>
// config group
// text: the display name of group which shows on the configuration setting UI.
e.g.
<Group text="Date & Time">
// config items:
//text: display name of an item, which displays on the configuration setting UI
//summary: detailed description of an item
//id: the variable name binds to this config item
//default: default value
a config item will bind its value which would be changed by user on the setting UI to the variable specified by id. the variable can be refered in manifest.xml
// switch
<CheckBox text="" summary="" id="show_date" default="1"/>
// text input
<StringInput text="" summary="" id="date_format" default="k:mm"/>
// text choice
<StringChoice text="" summary="" id="time_format">
//choice items:
<Item value="hh:mm" text="12 hours"/>
<Item value="kk:mm" text="24 hours"/>
</StringChoice>
//number choice
<NumberChoice text="" summary="" id="">
//choice items
<Item value="0" text="Mode 1"/>
<Item value="1" text="Mode 2"/>
</NumberChoice>
//number input
<NumberInput text="" summary="" id="" default=""/>
// select application shortcut in unlocker, id: the intent id in EndPoint, will set the intent according to the selection.
<AppPicker text="" id=""/>
sample:
config.xml
<Config>
<Group text="Date & Time">
<CheckBox text="Display date" id="show_date" default="1"/>
<StringInput text="Date format" summary="" id="date_format" default="yyyy/M/d EEEE"/>
<NumberInput text="Date text size" id="text_size_date" default="14"/>
<NumberInput text="Date vertical offset" id="date_position_y" default="0"/>
</Group>
<Group text="App shortcut">
<AppPicker text="Left unlocker shortcut" id="left_task"/>
<AppPicker text="Right unlocker shortcut" id="right_task"/>
</Group>
</Config>
manifest.xml
<!-- if const is true, the variable will only evaluate once at the initial time, -->
<Var name="show_date" expression="ifelse(isnull(#show_date),1,#show_date)" type="number" const="true"/>
<Var name="text_size_date" expression="ifelse(isnull(#text_size_date),18,#text_size_date)" type="number" const="true"/>
<Var name="date_format" expression="ifelse(isnull(@date_format),'MMMMd日 EEEE', @date_format)" type="string" const="true"/>
<DateTime visibility="#show_date" x="#screen_width/2" y="#screen_height-260+49+#time_panel.actual_h+#unlocker.move_y+#date_position_y" align="center" color="#AAEEEEEE" size="#text_size_date" format="@date_format"/>
<Unlocker name="unlocker" bounceInitSpeed="1000">
<StartPoint x="0" y="#screen_height-275" w="#screen_width/4" h="120">
</StartPoint>
<EndPoint x="0" y="#screen_height-150" w="#screen_width/4" h="300">
<Intent id="left_task" action="android.intent.action.VIEW" type="vnd.android.cursor.dir/calls"/>
</EndPoint>
</Unlocker>
<Unlocker name="unlocker" bounceInitSpeed="1000">
<StartPoint x="#screen_width*3/4" y="#screen_height-275" w="#screen_width/4" h="120">
</StartPoint>
<EndPoint x="#screen_width*3/4" y="#screen_height-150" w="#screen_width/4" h="300">
<Intent id="right_task" action="android.intent.action.MAIN" type="vnd.android-dir/mms-sms" category="android.intent.category.DEFAULT"/>
</EndPoint>
</Unlocker>
// show the app shortcut name
<Text x="#screen_width/2" y="#screen_height-350" align="center" color="#AAFFFFFF" alpha="255-#unlocker.move_y*255" size="24" textExp="'slide unlock to '+ifelse(isnull(@right_task.name)+eqs('',@left_task.name),'Phone',@left_task.name)"/>
1.7
2 new elements added <Var> <VarArray> for defining single variable and array
<Var name="" expression="" type="" const=""/>
name: variable name
expression: the expression for this variable note: defining a const string needs a more pair of "'" : expression="'my string'"
type= number/string number variable or string variable default: number
const =true , if const is true, the variable would only calculate once in initiation, if this variable will not change when lockscreen starts runing, set const false can improve performance, if it's changing you should not set it true. default: false
array, index base 0
<VarArray type="string">
<Vars>
<Var name="date_format1" index="#time/2000%5"/>
<Var name="date_format2" index="2" const="true"/>
...
</Vars>
<Items>
<Item expression="ifelse(isnull(@date_format),'MMMMd日 EEEE', @date_format)"/>
<Item value="EEEE"/>
...
</Items>
</VarArray>
type=number/string number array or string array, default: number
Var: the variable binds to this array
name
index, could be an expression
Item: element in array
expression: the expression of this variable
value: if element is const value, use value to specify
code sample:
<!-- if const is true, the variable will only evaluate once at the initial time, -->
<Var name="show_date" expression="ifelse(isnull(#show_date),1,#show_date )" type="number" const="true"/>
<Var name="text_size_date" expression="ifelse(isnull(#text_size_date),18,#tex t_size_date)" type="number" const="true"/>
<VarArray type="string">
<Vars>
<Var name="date_format1" index="#time/2000%5"/>
<Var name="date_format2" index="2" const="true"/>
</Vars>
<Items>
<Item expression="ifelse(isnull(@date_format),'MMMMd日 EEEE', @date_format)"/>
<Item value="EEEE"/>
<Item value="yyyy年"/>
<Item value="MMMM"/>
<Item value="d日"/>
</Items>
</VarArray>
<DateTime visibility="#show_date" x="#screen_width/2" y="100" align="center" color="#AAEEEEEE" size="#text_size_date" format="@date_format1"/>
// the datetime show date in different format every 2 seconds.
new attribute for Unlocker: alwaysShow="true/false"
<Unlocker alwaysShow="true">
before if one unlocker is in non normal state, other unlockers will be hide, this brings inconvenience sometime, now you can specify a unlocker show always
12.16
expression support strings, concatenate strings or numbers using "+" , isnull can be used to string variable，ifelse can select strings as well, string compare: eqs(@string1, @string2)
Text added textExp attribute which support string expression:
example:
<Text visibility="#hasweather" x="(#screen_width/2)+180" y="#screen_height-290" w="360" size="36" color="#ffffff" alpha="255" align="right"
textExp="ifelse(isnull(#weather_temperature),'--',#weather_lowTemperature) + '℃'"
alpha="255-#unlocker.state*255"/>
12.5
support formating of “where”
<ContentProviderBinder where="" whereFormat="" whereParas="">
content provider supports dependency, variables acquired after the query of a ContentProviderBinder can be used as the query parameter of another ContentProviderBinder
<ContentProviderBinder name="name1" dependency="name2">
<ContentProviderBinder name="name2" >
after name2 query complete, name1 could use the variables binded in name2 as format parameters. and if the data changes in name2 and triggers the query of name2, it will also trigger the query of name1 after query complete of name2.
11.24
support the content provider in android, basically it provides a common interface to query applications' raw database. and the new feature of lockscreen defines a set of xml language for describing how to query the content provider and bind the result to lockscreen variables, so the lockscreen could display any other applications' information as long as it provides a content provider.
xml format:
<VariableBinders>
<ContentProviderBinder uri="content://sample/test" c uriFormat="" uriParas="" columns="col1,col2" where="" args="" order="" countName="count_name">
<Variable name="variable_name1" type="int" column="col1" row="0"/>
<Variable name="variable_name2" type="string" column="col2" row="0"/>
</ContentProviderBinder>
</VariableBinders>
VariableBinders: defines all kinds of variables which bind to a certain source.
ContentProviderBinder: define a content provider and variables bind to it.
uri: content provider uri, specifies which content provider your are selecting.
uriFormat: if the uri needs appending a variable, this can be used together with uriParas
uriParas: just like the Text element's format and paras
columns: what columns you want to query, separate by comma
where: the query condition, same as the SQL
args: arguments for "where", maybe it's not useful for now.
order: order by specification, refer to SQL
countName: bind the query result count to a number variable which has the given name.
Variable: defines a variable
name: variable name
type: the type in database, could be string/double/float/int/long
column: to which column of the result it binds.
row: to which row of the result it binds
for example (code only works in this week's version which is not released yet):
query weather info from google weather.
(check out the attachment "TF3 lockscreen weather.zip" change zip to mtz)
<!-- content provider binder for google weather -->
<VariableBinders>
<ContentProviderBinder
uriFormat="content://com.google.android.apps.genie.geniewidget.weather/weather/current/%d"
uriParas="#time_sys"
columns="iconResId,location,temperature,lowTemperature,highTemperature,description"
countName="hasweather">
<Variable name="weather_id" type="int" column="iconResId"/>
<Variable name="weather_location" type="string" column="location"/>
<Variable name="weather_temperature" type="int" column="temperature"/>
<Variable name="weather_lowTemperature" type="int" column="lowTemperature"/>
<Variable name="weather_highTemperature" type="int" column="highTemperature"/>
<Variable name="weather_description" type="string" column="description"/>
</ContentProviderBinder>
</VariableBinders>
<!-- weather info display -->
<Text visibility="#hasweather" x="240" y="60" w="360" size="24" color="#FFFFFF" alpha="200" align="center"
format="%s %s %d℃"
paras="@weather_location,@weather_description,#weather_temperature" />
<Text visibility="#hasweather*not(isnull(#weather_lowTemperature))*not(isnull(#weather_highTemperature))" x="240" y="85" w="360" size="22" color="#FFFFFF" alpha="200" align="center"
format="%d℃ / %d℃" paras="#weather_lowTemperature,#weather_highTemperature"/>
<Text visibility="#hasweather*isnull(#weather_lowTemperature)*not(isnull(#weather_highTemperature))" x="240" y="85" w="360" size="22" color="#FFFFFF" alpha="200" align="center"
format="--℃ / %d℃" paras="#weather_highTemperature"/>
<Text visibility="#hasweather*not(isnull(#weather_lowTemperature))*isnull(#weather_highTemperature)" x="240" y="85" w="360" size="22" color="#FFFFFF" alpha="200" align="center"
format="%d℃ / --℃" paras="#weather_lowTemperature" />
<Image src="weather.png" visibility="#hasweather" x="240" y="100" srcid="#weather_id" align="center">
<PositionAnimation>
<Position x="-10" y="0" time="1000"/>
<Position x="10" y="0" time="3000"/>
<Position x="0" y="0" time="4000"/>
</PositionAnimation>
</Image>
// google weather id list
weather_chance_of_rain = 2130837536;
weather_chance_snow = 2130837540;
weather_chance_storm = 2130837544;
weather_clear = 2130837556;
weather_cloudy = 2130837560;
weather_flurries = 2130837564;
weather_fog = 2130837568;
weather_heavy_rain = 2130837572;
weather_icy_sleet = 2130837576;
weather_mist = 2130837583;
weather_partly_cloudy = 2130837587;
weather_rain = 2130837600;
weather_snow_rain = 2130837606;
weather_snow = 2130837608;
weather_sunny = 2130837612;
weather_thunderstorm = 2130837617;
weather_unknown = 2130837621;
weather_windy = 2130837626;
another one:
query the MIUI note content:
<VariableBinders>
<ContentProviderBinder uri="content://notes/note" columns="modified_date,snippet" order="modified_date DESC" countName="note_count">
<Variable name="note_date1" type="long" column="modified_date" row="0"/>
<Variable name="note_snippet1" type="string" column="snippet" row="0"/>
</ContentProviderBinder>
</VariableBinders>
<DateTime x="300" y="50" color="#ffffffff" visibility="#note_count" value="#note_date1" format="yyyy年MMMMdd日 hh:mm"/>
<Text x="5" y="180" w="450" color="#ffffffff" visibility="#note_count" size="18" marqueeSpeed="60" text="@note_snippet1"/>
the missed call query:
columns = "_id,number"
where = "type=3 AND new=1";
uri ="content://call_log/calls";
you can display the call number in lockscreen and the date or anything else.
and added several functions for expression:
eq(x, y) // x==y ? 1 : 0
ne(x, y) // x!=y ? 1 : 0
ge(x, y) // x>=y ? 1 : 0
gt(x, y) // x>y ? 1 : 0
le(x, y) // x<=y ? 1 : 0
lt(x, y) // x<y ? 1 : 0
isnull(x) // x==null ? 1 : 0 // whether the expression contains a null variable. usually for binded variables, to judge whether the value in database is null.
not(x) x>0 ? 0 : 1
ifelse(x, y, z) // x>0 ? y : z
others:
1. using images to display a number
<ImageNumber number="" src="">
number: the expression of number value
src: the image name, supports SourceAnimation
if src="number.png" it will use number_0.png number_1.png ... images to draw the number, kinda like the Time
2. #time_sys variable, the current system time in miliseconds
h_zee13 said:
Quick question:
If I want the unlocker to be a button to be just touched, do I just put my intent code in <Endpoint><ReachedState>HERE</ReachedState></Endpoint>
Click to expand...
Click to collapse
put the button element in <Endpoint><PressedState>HERE</PressedState></Endpoint>
if you want the button stays there you just put it in Endpoint, if you want it follows your finger when dragging put it in Startpoint.
Does anyone know if it's possible to launch Google's music player from the lock screen?
Thanks!
Hi
Thank you for all this explanations ..
Excuse for my bad english
@+ Max
How do I know, what I have to write under "package". I need it for whatsapp and Dolphin Browser HD.
Thanks,
Jaques-Ludwig
Jaques-Ludwig said:
How do I know, what I have to write under "package". I need it for whatsapp and Dolphin Browser HD.
Thanks,
Jaques-Ludwig
Click to expand...
Click to collapse
check this thread:
http://forum.xda-developers.com/showthread.php?t=1134657
battery_level seems to update only when phone is charging otherwise remains constant is this a bug or am I coding it incorrectly i used following to
<Text x= "200" y = "0" text="Battery : " color = "#AAFFFFFF" size="18" format = "%d %%" paras = "#battery_level" align = "center"/>
works fine when charging but remains at same value when not.
Nice, great tut!
smokin901 said:
battery_level seems to update only when phone is charging otherwise remains constant is this a bug or am I coding it incorrectly i used following to
<Text x= "200" y = "0" text="Battery : " color = "#AAFFFFFF" size="18" format = "%d %%" paras = "#battery_level" align = "center"/>
works fine when charging but remains at same value when not.
Click to expand...
Click to collapse
for now I can only get the battery info notification when plugged, will figure out how to update it always.
12. Wallpaper element
Wallpaper refers the wallpaper bitmap selected by system setting. It can't specify source, others are the same with Image. If has no Wallpaper element, wallpaper will not show. A Lockscreen may have multiple Wallpaper element.
<Wallpaper/>
Click to expand...
Click to collapse
Can you please explain this further.
What do you mean by "A Lockscreen may have multiple Wallpaper element"
Also can I put any code before </wallpaper>?
h_zee13 said:
Can you please explain this further.
What do you mean by "A Lockscreen may have multiple Wallpaper element"
Also can I put any code before </wallpaper>?
Click to expand...
Click to collapse
Wallpaper element is just like a normal Image, the only difference is that it refers to the system wallpaper bitmap. so you can put it anywhere and put any count of it. It can be used to achieve the effect that dragging the wallpaper away to unlock, like WP7. and you can also make the wallpaper dissapear gradually when unlocking, or make the wallpaper split at middle and fly to left and right when unlocking by adding maskes to two Wallpaper elements. etc.
so, yes you can put anything before Wallpaper

[Q] disable camera shutter sound

Hi,
i used this Features X app from here to get the option for disabling and enabling camera shutter sound and it was successful, i today tried to run this zip file to get lock screen shortcuts from http://http://forum.xda-developers.com/showpost.php?p=38318802&postcount=664 by eybee1970. It was successful too and now i have lock screen shortcuts but no shutter sound disable/enable option. i have tried to check the others.xml file and it reads like this:
<?xml version="1.0" encoding="UTF-8" ?>
<SamsungMobileFeauture>
<Version>ED001</Version>
<Country>GERMANY</Country>
<CountryISO>DE</CountryISO>
<SalesCode>DBT</SalesCode>
<FeatureSet>
<CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>TRUE</CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>
<CscFeature_Web_EnableAutoSimHomeUrlInProfiler>TRUE</CscFeature_Web_EnableAutoSimHomeUrlInProfile>
<CscFeature_Wifi_UseDefaultSecurityAs>WPA2/PSK</CscFeature_Wifi_UseDefaultSecurityAs>
<CscFeature_Camera_ShutterSoundMenu>TRUE</CscFeature_Camera_ShutterSoundMenu>
<CscFeature_Setting_ShortcutListInLockScreen>Phone,Messaging,Internet,Camera</CscFeature_Setting_ShortcutListInLockScreen>
<CscFeature_Message_EnableScheduledMessage>true</CscFeature_Message_EnableScheduledMessage>
<CscFeature_Web_AddOptionToTerminate>true</CscFeature_Web_AddOptionToTerminate>
<CscFeature_Web_EnablePromptToExit>true</CscFeature_Web_EnablePromptToExit>
<CscFeature_Contact_ExtendSpeedDialTo100>true</CscFeature_Contact_ExtendSpeedDialTo100>
<CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu>
</FeatureSet>
</SamsungMobileFeauture><FeatureSet><CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu></FeatureSet>
<FeatureSet><CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu></FeatureSet>
what can i do to get shutter sound disable/enable options. i do not want to delete the file for the shutter sound.
Another thing which is secondary to camera shutter sound (i might ask this question later, so trying to avoid new thread) is that using this Feature X app i was not able to get "Extend contact name Length limit".
treacherous_hawk said:
Hi,
i used this Features X app from here to get the option for disabling and enabling camera shutter sound and it was successful, i today tried to run this zip file to get lock screen shortcuts from http://http://forum.xda-developers.com/showpost.php?p=38318802&postcount=664 by eybee1970. It was successful too and now i have lock screen shortcuts but no shutter sound disable/enable option. i have tried to check the others.xml file and it reads like this:
<?xml version="1.0" encoding="UTF-8" ?>
<SamsungMobileFeauture>
<Version>ED001</Version>
<Country>GERMANY</Country>
<CountryISO>DE</CountryISO>
<SalesCode>DBT</SalesCode>
<FeatureSet>
<CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>TRUE</CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>
<CscFeature_Web_EnableAutoSimHomeUrlInProfiler>TRUE</CscFeature_Web_EnableAutoSimHomeUrlInProfile>
<CscFeature_Wifi_UseDefaultSecurityAs>WPA2/PSK</CscFeature_Wifi_UseDefaultSecurityAs>
<CscFeature_Camera_ShutterSoundMenu>TRUE</CscFeature_Camera_ShutterSoundMenu>
<CscFeature_Setting_ShortcutListInLockScreen>Phone,Messaging,Internet,Camera</CscFeature_Setting_ShortcutListInLockScreen>
<CscFeature_Message_EnableScheduledMessage>true</CscFeature_Message_EnableScheduledMessage>
<CscFeature_Web_AddOptionToTerminate>true</CscFeature_Web_AddOptionToTerminate>
<CscFeature_Web_EnablePromptToExit>true</CscFeature_Web_EnablePromptToExit>
<CscFeature_Contact_ExtendSpeedDialTo100>true</CscFeature_Contact_ExtendSpeedDialTo100>
<CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu>
</FeatureSet>
</SamsungMobileFeauture><FeatureSet><CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu></FeatureSet>
<FeatureSet><CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu></FeatureSet>
what can i do to get shutter sound disable/enable options. i do not want to delete the file for the shutter sound.
Another thing which is secondary to camera shutter sound (i might ask this question later, so trying to avoid new thread) is that using this Feature X app i was not able to get "Extend contact name Length limit".
Click to expand...
Click to collapse
Try deleting i marked in bold
as it is already there above, as well i can see space in word true 'tr ue' which may cause issue.
This is how it looks like now.. Restarted phone after changes but still dint work:
<?xml version="1.0" encoding="UTF-8" ?>
<SamsungMobileFeauture>
<Version>ED001</Version>
<Country>GERMANY</Country>
<CountryISO>DE</CountryISO>
<SalesCode>DBT</SalesCode>
<FeatureSet>
<CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>TRUE</CscFeature_VoiceCall_EnableVmsNumberAsDefaultInCallForwarding>
<CscFeature_Web_EnableAutoSimHomeUrlInProfiler>TRUE</CscFeature_Web_EnableAutoSimHomeUrlInProfile>
<CscFeature_Wifi_UseDefaultSecurityAs>WPA2/PSK</CscFeature_Wifi_UseDefaultSecurityAs>
<CscFeature_Camera_ShutterSoundMenu>TRUE</CscFeature_Camera_ShutterSoundMenu>
<CscFeature_Setting_ShortcutListInLockScreen>Phone,Messaging,Internet,Camera</CscFeature_Setting_ShortcutListInLockScreen>
<CscFeature_Message_EnableScheduledMessage>true</CscFeature_Message_EnableScheduledMessage>
<CscFeature_Web_AddOptionToTerminate>true</CscFeature_Web_AddOptionToTerminate>
<CscFeature_Web_EnablePromptToExit>true</CscFeature_Web_EnablePromptToExit>
<CscFeature_Contact_ExtendSpeedDialTo100>true</CscFeature_Contact_ExtendSpeedDialTo100>
</SamsungMobileFeauture>
Sent from my GT-N7000 using xda app-developers app
There Is no change and no response to my post...
Sent from my GT-N7000 using xda app-developers app
can some post their others.xml which i can replace with mine (if its possible) with working camera shutter sound option and working lock screen shortcut..
Got it to work...
Made a file called feature.xml with,,,
<?xml version="1.0" encoding="UTF-8" ?>
<!-- It can be added for each operators like below form
<ABC> -> sales code
<sapient>true</sapient> -> feature1
<burton>false</burton> -> feature2
<libtech>true</libtech> -> feature3
.
.
</ABC>
each name of tags are will be environment variable with "ro.csc."
ex) "ro.csc.sapient", "ro.csc.burton", "ro.csc.libtech" <== you could use them at any section.
also, should be added between <FeatureSet>
and </FeatureSet> -->
<SamsungMobileFeature>
<Country></Country>
<CountryISO></CountryISO>
<SalesCode></SalesCode>
<!-- SPR -->
<FeatureSet>
<!-- Common -->
<!-- Camera -->
<CscFeature_Camera_DisableGPSMenu>false</CscFeature_Camera_DisableGPSMenu>
<CscFeature_Camcorder_DefaultQuality>superfine</CscFeature_Camcorder_DefaultQuality>
<CscFeature_Camera_ShutterSoundMenu>true</CscFeature_Camera_ShutterSoundMenu>
<CscFeature_Camcorder_DoNotPauseMusic>false</CscFeature_Camcorder_DoNotPauseMusic>
<CscFeature_Camera_CameraFlicker>50hz</CscFeature_Camera_CameraFlicker>
<CscFeature_Camera_CamcorderEnablePromptPopupToSelectRecMode>true</CscFeature_Camera_CamcorderEnablePromptPopupToSelectRecMode>
<CscFeature_Camera_EnableCameraDuringCall>true</CscFeature_Camera_EnableCameraDuringCall>
<!-- Message -->
<!-- SEC Launcher -->
</FeatureSet>
</SamsungMobileFeature>
Then saved that file to /system/csc/
Permissions set to rw- r-- r--
Reboot and the option appeared in the camera settings menu.
This also makes a pop-up menu appear when you switch to video to select Normal or MMS Video. Change true to false in "CamcorderEnablePromptPopupToSelectRecMode" to switch if off again.
:laugh:

App results in blank black screen on android phone....why?

I have removed all the elements from my layout and commented out references to the controls etc that I did have in my layout:
Code:
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#0099cc"
tools:context=".HexapodControls"
android:id="@+id/frame_controls"
android:visibility="visible"
android:paddingTop="50dp">
<!-- The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc. -->
<!-- This FrameLayout insets its children based on system windows using
android:fitsSystemWindows. -->
</FrameLayout>
So why, when I generate the apk in android studio and install it on my phone, do I get a blank black screen.
I give up! What have I changed to cause this?
Never mind I figured it out.
I commented out this line "setContentView(R.layout.activity_hexapod_controls);"
along with the rest of it.

Setting position of ImageView according to an image (dynamic with screen sizes)

Hello,
I learned that to make a bitmap image clickable, I need to assign it to ImageView. However, I am failing to set the position correctly so that it is dynamic with every screensize. It really is not possible to let ImageView locate the bitmap image on the screen and act upon that? I tried so many things but the best I have now is that ImageView creates another image of my button and when I manually change its position, it does not scale properly with other screen sizes.
For example my AdView (visible in xml) scales correctly with other screens but I could not apply the same principles with my button.
I would prefer if ImageView would just take the location of drawn bitmap button on screen but if this is not possible, could you guys please provide me with some example codes of how to correctly set the button generated by ImageView? So that I can move it to desired location and have it the same across different screen sizes.
I HAVE TRIED:
Changing position manually in SurfaceView - doesnt scale properly
Implement app:layout_widthPercent="50%" etc. - doesnt work for me
Implement app:layout_constraintBottom etc. - doesnt work for me
activity_main.xml:
<com.markS.flappykillercrow.GameManager
android:id="@+id/gameManager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/image_button_android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="@drawable/playbutton"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
/>
<com.google.android.gms.ads.AdView
android:id="@+id/adView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:adSize="BANNER"
app:adUnitId="ca-app-pub-3940256099942544/6300978111"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
Thank you very much in advance, this would save my day!

Categories

Resources