Hi everyone,
Update 31/03: Works with all 2.2.2 ROM's, including the awesome MoDaCo kitchen!
For me the notification controls for the music player are an admirable idea but ultimately useless if you don't prefer the stock music player. It would be ideal if any music player could hook into them but alas, with the current implementation that's not possible.
I found the option to turn these controls off in the Music app to be utterly unreliable. Frequently I would reboot to find the controls visible even though the option was unchecked in the Music app. I also found that if you freeze or remove the Music app the controls become visible again and there is no way to remove them.
So here's the fix:
Modified framework
Actively hides the controls every boot
Music app can be removed, controls remain hidden
All I have done is add the following code to framework-res.apk/res/layout/statusbar_expanded.xml in the music controls section.
Code:
android:visibility="gone"
And, since this didn't work for all users, I've now added the following so even if it wants to show it will be 0% high ~hidden.
Code:
android:layout_height="0dip"
Here an update.zip you can flash using Paul's Clockwork Recovery, please make a backup first.
Only tested on P990 with Android 2.2.2!
DOWNLOAD
Stock LG 2.2.2 ROM or MoDaCo r1, r1, r3 ROMs
Download: O2xNoMusicControls-v2-unsigned.zip (5.4MB)
MD5 Hash: 05090f6d6890f8ba6e1f5145dc46ae9e
OR
MoDaCo r4+ ROMs
Download: O2xNoMusicControls-v2-MCR-unsigned.zip (5.4MB)
MD5 Hash: 7eb25009d8773e47e886577e2b326a1e
Enjoy + Thanks = Win
Nice work, but did not make any change for me. Buttons still there if i remove the music.apk
did not work here either :/ really want to get rid of that
DocRambone said:
Nice work, but did not make any change for me. Buttons still there if i remove the music.apk
Click to expand...
Click to collapse
[email protected] said:
did not work here either :/ really want to get rid of that
Click to expand...
Click to collapse
Oh, really?
Well, I'll need to take another look, worked for me...
I'll do that tomorrow, thanks for the heads-up!
djmcnz said:
Oh, really?
Well, I'll need to take another look, worked for me...
I'll do that tomorrow, thanks for the heads-up!
Click to expand...
Click to collapse
I had already deleted the music.apk before I tried this, but I tried it anyway but still it was there, then adb pushed the music.apk back and removed it through settings, but when I deleted the music.apk it was there again so adb push back and now it's gone but I keep the music.apk but hide it with Launcher Pro until this works thanks!
btw this has nothing to do with the music control, but the power widget control (wifi, bluetooth etc) I change my LCD density to 190 from 240 because 240 is way to much and looks bad, but the power widget don't fit the screen if you know what I mean (it fits but there is a little emty at the right side, hard to explain but I think you can test it for yourself it you want too), is it possible to fix it? and another thing, I just want wifi, bluetooth icon there (with my Nexus S CM7 I have wifi, bluetooth and flash but there is no flash atm) is it possible to hack it somehow?
Well it's interesting, I've tested it again and it does work for me with one exception:
* When I activate the shade in landscape mode the music control comes back.
When this happens, because I have removed the Music app, I can't disable it again... But when I reboot it is gone...
So I need to look into the landscape bug... are you using landscape mode at all?
And yes, I think you can alter the toggle buttons... I'll look at that too.
didn't work for me too. The buttons reappears when I delete the music.apk
I've updated it guys, details in the first post, let me know how you get on.
[email protected] said:
btw this has nothing to do with the music control, but the power widget control (wifi, bluetooth etc) I change my LCD density to 190 from 240 because 240 is way to much and looks bad, but the power widget don't fit the screen if you know what I mean (it fits but there is a little emty at the right side, hard to explain but I think you can test it for yourself it you want too), is it possible to fix it? and another thing, I just want wifi, bluetooth icon there (with my Nexus S CM7 I have wifi, bluetooth and flash but there is no flash atm) is it possible to hack it somehow?
Click to expand...
Click to collapse
Yes, this is all possible:
Code:
<TableRow>
<ImageView android:layout_gravity="top" android:id="@id/sound_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginLeft="21.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/wifi_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/bt_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/gps_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/switch_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="21.0px" android:layout_marginBottom="0.0px" />
</TableRow>
djmcnz said:
Yes, this is all possible:
Code:
<TableRow>
<ImageView android:layout_gravity="top" android:id="@id/sound_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginLeft="21.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/wifi_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/bt_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/gps_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="17.0px" android:layout_marginBottom="0.0px" />
<ImageView android:layout_gravity="top" android:id="@id/switch_button_toggle" android:layout_width="wrap_content" android:layout_height="74.0px" android:layout_marginTop="10.0px" android:layout_marginRight="21.0px" android:layout_marginBottom="0.0px" />
</TableRow>
Click to expand...
Click to collapse
Great, is it something I can do easy or does it take some "time" (maybe you can make a update.zip file)? as I said, I only need Wifi and Bluetooth (flashlight when it's possible, maybe you can make a flashlight button?) and if would be nice if the buttons fills the screen (make them wider) when using density 190
thanks!
Confirmed functional
Thanks .
[email protected] said:
Great, is it something I can do easy or does it take some "time" (maybe you can make a update.zip file)? as I said, I only need Wifi and Bluetooth (flashlight when it's possible, maybe you can make a flashlight button?) and if would be nice if the buttons fills the screen (make them wider) when using density 190
thanks!
Click to expand...
Click to collapse
lol - the problem is the testing... I don't have my density set like that so couldn't test and the changes are very fine-grained which means there would be lots and lots of testing...
It's not hard to change but you need to first understand adb, apktool, framework-res and layout.xml stuff... it's all on the forums though!
If you get up and running with adb and apktool (http://code.google.com/p/android-apktool/ & http://forum.xda-developers.com/showthread.php?t=640592) - verified and tested - then I'll show you where to start making changes.
DocRambone said:
Confirmed functional
Thanks .
Click to expand...
Click to collapse
Thank you kind sir!
djmcnz said:
lol - the problem is the testing... I don't have my density set like that so couldn't test and the changes are very fine-grained which means there would be lots and lots of testing...
It's not hard to change but you need to first understand adb, apktool, framework-res and layout.xml stuff... it's all on the forums though!
If you get up and running with adb and apktool (http://code.google.com/p/android-apktool/ & http://forum.xda-developers.com/showthread.php?t=640592) - verified and tested - then I'll show you where to start making changes.
Click to expand...
Click to collapse
ok, I already have adb, I downloaded apktool and copied the files to the Windows directory, now what?
[email protected] said:
ok, I already have adb, I downloaded apktool and copied the files to the Windows directory, now what?
Click to expand...
Click to collapse
Try and decomplie an apk, recompile it and get it working on your phone. Report back.
Thanks for this fix! Worked like a charm, first installed a custom baked rom from modaco and after this I applied this fix and tadaa no more stupid notification!
I was just thinking about doing this, thank you very much
Woops double
Nice tweak, thanks for sharing!
Let's hope Paul adapts the mod in his custom kitchen
This patch isn't working anymore after the FR4 release. I tried it and it kept rebooting my phone, after installing FR4 without this patch it works like a charm. Is it possible you update it so that it works agan?
Hello everyone,
i would like to know, if anyone has managed to get the flashlight from the notification widget working on a CM 7.2 based Rom.
In the official build this option is greyed out, i guess because it is not fully working. Anyway i would love to enable this to grab a logcat and try to fix the remaining issues.
My Problem is, when enabling the button I change some xml code and as far as I know, I would have to resign all my System apps, to reinstall Settings.apk. I might be wrong with all this, just started to understand Android…
Anyway, what I have done is decompile Settings.apk and took a look at:
xxx:\Settings\res\layout\widget_settings.xml
……………………………
<LinearLayout androidadding="6.0dip" android:layout_width="fill_parent" android:layout_height="?android:listPreferredItemHeight"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout androidrientation="vertical" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<TextView android:textSize="20.0dip" android:textColor="#ffffffff" android:gravity="center_vertical" android:layout_width="fill_parent" android:layout_height="0.0dip" android:text="@string/toggleFlashlight" android:layout_weight="1.0" />
<TextView android:textSize="14.0dip" android:textColor="#ff808080" android:layout_width="fill_parent" android:layout_height="0.0dip" android:text="@string/toggleFlashlightDescription" android:singleLine="true" android:layout_weight="1.0" />
</LinearLayout>
<CheckBox android:id="@id/toggleFlashlight" android:layout_width="wrap_content" android:layout_height="wrap_content" android:checked="true" />
</LinearLayout>
……………………………
Click to expand...
Click to collapse
Interessting is Line 181, where a android:checked="true" is missing to “ungray” the button. That is my guess anyway…
I also found, that the “toggleflashlight” event includes an app package called net.cactii.flash2. This app is called Nexus Torch. I’m pretty sure, this is just for real flashlights and not LED flashlight.
You can find this reference in:
xxx:\Settings\smali\com\android\settings\widget\SettingsAppWidgetProvider.smali
That is how far I have got with this and unfortunately, I’m kind of stuck at this point…
Any help would be greatly appreciated
Cheers
Wooaarr
there's no flashlight in the mobile
it is not working that's why it grayed out in official builds
and in unofficial build it is not grayed out because no one thought about it
Hello dheeraj (dhlalit11),
thank you for your reply.
I think you miss understood me. I know that there is no flashlight in this mobile. What i want to do, is get the Screen on, on full Brightness with a white background.
This code is already implemented, so i dont really understand why that option is greyed out anyway. It would work similar to Lidroids statusbar toggles.
If Flashlight available use it, if not turn on Screen with full Brightness.
Cheers
Wooaarr
I think checked code is there to make it check(selected) by default after a factory reset(i think you have got what I want to explain)
and to make it ungray/usable you can use the code used in unofficial builds
to make the brightness go up at max you can use the brightness toggle codes
Thank you again
You are right about the android:checked="true" thing. To enable it, there should somewhere be a setEnable, which i can not find unfortunatly...
Anyway, could you give me a hint about which Unofficial builds you are talking? I can't remember trying a Cm 7.2 based Rom, which had this feature enabled.
Thank you in advance
Wooaarr
forget
i can recall that i had read "do not use flashlight toggle or you will have problems" something like that in a rom's thread
you can try looking into stock based roms like emanon, more etc. or those roms which uses lidroid toggles
dheeraj (dhlalit11) said:
"do not use flashlight toggle or you will have problems"
Click to expand...
Click to collapse
That is what i read as well, but there is nothing that can't be fixed
Most Stock Based Roms include a little modification of lidroids toggle, so this won't help me that much, because there is quite a big difference between Cm toggles and lidroids.
Never the less i will dig into all this, thank you for your time
Wooaarr
try android:enable="true" />
I just can't ungray the button...
A Android:checked does not make it checked, nor does a android:enable make it clickable...
I can't find anything in the smali that would change the buttons appearance, so i guess it must be in the xml.
What am I missing here?
you can modify the code for another toggle which would be much more east to do
Howe true, i did that already
There is still this gray little button freaking me out
Just an esthetic problem, but it just annoys me...
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