Hi!
This was inspired by KryptosXLayer2 for the BlueCircle battery icons, but I wanted to have my own icons, with the other colors and settings.
I too spent WAY too long working on this tool, but the end result is here for you to use and to judge. It's a Windows application, so I apologies to all Linux, Mac, etc. users.
With this tool you can create your custom circular battery icons by specifying the following parameters:
Icon size
Base icon transparency
Circle width and padding
Choice of built-in or custom charging icon
Choice of text of custom overlay for bad charge indication
Percentage text font
Varying of each element (circle, percentage text, charging icon, bad charge indication) based on percentage (this includes custom charging icons and bad charge indication too! - see below for more information on this)
Optional "fixed" colors for the circle
Gradual color changes between specified color levels
A few more minor things
This tool will also allow you to preview the icons based on the current settings using specified background. The actual icons that you save when you're done always have transparent backgrounds, but this will allow you to see how they blend with various backgrounds.
Here is how it looks like:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
I tried to make the UI as intuitive as possible, but I would like to mention a few thing on usage:
1. Color levels:
For each element (circle, percentage text, charging icon, bad charge indication) you can specify up to 5 color levels based on percentage.
First select how many (1-5) color levels you want.
Then specify the cut-off percentage for each level.
Double click each percentage field to edit the color it represents.
The corresponding element will have the given color if the percentage is lower than the given color level.
If gradual colors are specified, then the color of the element will gradually move from one color to the other as percentage changes.
For circle element you can choose "fixed colors". This means that each portion of the circle that represents a percentage range will always have the color specified by the corresponding color level. Otherwise, the circle will have just one color, which will change based on percentage.
2. Custom icons:
You can use custom images for charging icon and bad charge indication. Supported formats: GIF, PNG (the ones that support alpha-channel).
One of the colors in this image will be designated as "key" color, which will vary based on percentage and color levels specified for this element.
This tool will try to auto-detect this "variable" color based on which color is more prevalent in the image, but you can correct this color by double-clicking "variable color" control (it will become visible only after you load your custom image).
Note, that for the purposes of variable color key, each pixel with the same RGB components will be treated as the same color regardless its transparency (alpha), but when this icon is rendered, the original transparency is preserved, while changing the color.
3. Preview panel:
If preview mode is set to "Auto" the preview panel will be updated automatically every time you make a change to any of the parameters, otherwise, click "Preview" to see your changes.
You can change preview percentage by entering 5 different percentage values.
I'm providing a few examples of the icon sets that can be generated using this tool:
1. Default (the way parameters are set when you launch the application):
Download
2. Blue circle, no fixed colors:
Download
3. Default, except for no gradual or fixed circle colors (my favorite):
Download
After you generated your custom icons, you can use them to mod your SystemUI,apk to replace the stock icons. There are many guides available that describe the process.
For example: http://forum.xda-developers.com/showthread.php?t=1814441
This tool and generated icons are donateware. If you like this tool and find it useful, please consider making a donation.
I can accept PayPal and Bitcoin:
Paypal:
http://tinyurl.com/nwfs9jm
[QRCODE]https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=LU9P6CPY9RTEQ[/QRCODE]
Bitcoin:
bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt
[QRCODE]bitcoin:1HvqKzCam5E8KQvb43tWUobUVFNsZhhhzt[/QRCODE]
This information will also be available in the app after you save an icon set.
Comments and suggestions are welcome. Suggestions accompanied by a donation will receive a higher priority for consideration.
Reserved
Looks great, good work and believe me, I sure know about how much time you spent doing this - at least twice as long as it took me to design the icons and lay those stupid things out right!
Congrats and I hope lots of people get use out of this if they want to see their icons in different variations!
Related
..:: X2K2's Tiles Icons ::..
- 220 icons so far (Covers pretty much everything you need, always room for more though)
- Designed for 800x480 screens (Tested on Samsung Galaxy S)
- Designed for 5 rows / 4 columns homescreen setup (LauncherPro or ADW) (Otherwise the layout gets screwed!)
- Designed to be used with Notification bar (Otherwise the layout gets screwed!)
- To be applied with Desktop Visualizer (Can be found on the Market for free)
- Includes various tiles (1x1, 1x2, 2x1, 3x1, 4x1)
- Several versions for each icon
- Clean look, no icon names
- No resizing required (No need for LauchnerPro Plus)
- Precisely measured
- Source pictures grabbed from various places (Props to the original creators!)
- Inspired by Windows Phone 7
Resolutions used
1x1 = 110x122px
1x2 = 115x264px
2x1 = 230x124px
3x1 = 355x124px
4x1 = 475x124px
More versions might follow
Spacing between icons horizontal/vertical = 10px
HowTo
Select the Desktop Visualizer widget size you want to use, then the matching icon size.
For 1x1 icons select Desktop Visualizer (Small).
In Desktop Visualizer remove the icon label and set touch effect to none for the best look.
Things noticed while playing around with different icon sizes
Creating the perfect look with tiles is quite tricky. Exact pixel "mathematics" don't really work out with the different widget sizes.
According to some calcualting I did, the icon sizes should be different, than what they finally turned out to be.
For example the width for the 4x1 icon is 470px, even though the raw image size is 475px.
But when actually using 470px as raw image size, the spacing between the tiles gets reduced to 8px, instead of 10px.
I actually did several drawings on plain old paper to determine the pixel sizes for all icons.
But it turned out to be another case of theory VS praxis. So in the end, these are the icon sizes that work out perfectly in real life.
I haven't tested several configurations, like a homescreen with only 1x1 icons. That's what the end user will have to do.
And that's why I need some feedback on your different configurations.
Preview
Example
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Download
http://www.multiupload.com/7TSJ2T73SB
Or Topic Attachment
Enjoy!
Change Log
V1: Initial Release
V2: 1x1 icons fixed, now 110x122
V3: Added another 34 icons like Twitter, Facebook, Dropbox, Weather, AngryBirds... + fixed one icon
V4: Added 60 more icons in different categories like sports, games, news and comics. Also fixed some icon sizes and names.
V4.1: Some fixes
Nice work! Keep it up!
thanks
Thanks
V2 added with fixed 1x1 icons.
Thanks!
V3 added with even more icons, plus I fixed a flashlight icon.
these look great. i am d/ling and testing this tonight
edit: just finished up what i wanted. it looks awesome. a totally new look/feel. big thanks!
V4 posted. Added a whole bunch of new icons! (60)
More to come like finances, health or TV.
thank you for this awesome work. really appreaciate it.
will try them out when i have time.
Great share, thank you!
I see you have edited your post.
Previously you asked for making these fit on a Droid X.
It's screen has 54 more vertical pixels and since I didn't keep all the sources, I cannot create matching icons without going through a crapload of work.
Just resizing the current ones would lower the quality and if you don't wanna lose aspect ratio, then you'd also gain width, not just height.
So I gotta go with no, it was meant for 800x480 and I'm stickin' to that.
Bit busy right now, but hoping to have more finished soon.
PS: Added a fixed V4.1 + previews, so you can see what's in it.
Very nice icons !
Are you planning to make xbox live icons
Keep it up
Nice work, liked em..
can u make it for a screen with 320x480 pixels ??
Xperia X8.
Any chance of icons for 480 x 854?
What icons and theme are you using for LP?
great, thanks for sharing
Great,,
Thanks for your shared...
Wow, thanks. Will try this out.
Can you upload/explain your Launcherpro Icons too?
And whats the name of the date/weather-widget?
I can't get it to work properly... I suck
Oh wait...nevermind
so how can i apply this to my phone??? do i need to download any files first before i can apply this icon??? i am really interested right now!!!!
Great icons.
Keep up the good work
Standard waiver: I / XDA-Developers.com are not responsible for anything that happens to your machine(s) while doing this, you assume all risk and responsibility. Applying these .apks requires unlocking and rooting your device, which will void your warranty.
Bazar6(17) Presents : Rogue Series - Green
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
DOWNLOAD : CM10 / AOKP Theme Chooser App - v2.0.0 : 20120917
> Please accept the "missing assets" error when applying, there really isn't anything wrong with your device and my theme.
DONATE : via the Google Play Store
The donation version is available via the Play Store, which will let you know when there's an update (so you don't have to continue keeping eyes on the forums), and you'll get it at least one day in advanced of the free version found here. It's never required, but always very much appreciated. Rogue Series: Green - Donate on the Play Store
Click to expand...
Click to collapse
Contains:
Apollo (CM10)
AOSP Keyboard (stock)
Browser (stock)
Framework
People (contacts)
Phone
Settings
SystemUI
Trebuchet
Note: After applying the theme, a reboot may be required to make sure all changes go into effect, including the background and status bar (especially if it disappears on you entirely).
Color hex code (for any custom settings) : #00CC00 (#FF00CC00)
AOKP Users
Settings > Rom Control : No icons are themed. I originally based the update off CM10. I've been able to flash it and will be updating for AOKP-specific items soon (including the Rom Control icon in the home settings screen), just need some time to get everything situated for it
To make everything green, you have to manually set these options (until I find out if I can set them via the theme...)
Settings > Rom Control > Navigation Bar > "Navigation bar glow color" : change hex to #FF00CC00 > Set > [click the color in the right box just above where you entered the hex]
You don't need to change "Navigation bar color", I already did that, even though it looks white in settings
CircleMod images will be coming in the next update.
Battery Bar enabled? Same as the first bullet, change hex code to #FF00CC00
Toggles: Icon toggle style will be updated. Text toggle style : change "Toggle Text Color" and "Enabled Indicator Color" to hex : #FF00CC00
Stock Launcher will be updated as well.
If you see anything that I missed and did not cover in this list, please let me know!!
Issues / Soon to be Fixed
AOKP > Settings > Rom Control > Navigation Bar > Battery icon style > (Set to) Text Only : If you use this, it will be blue, because it changes depending on the charge status and level. Still looking in to whether I have power to change that via a theme. If not, it's something AOKP needs to change at the Rom level.
(Codename) : Volume Slider and Keyboard hide icon (Thanks Sardo Numspa!)
Big thanks to solarus2011 for the permission to use his style icon for my apps!
Tags: theme, rogue, series, ics, jb, chooser, cm10, cm9, aokp, cyanogenmod, android, open kang, bazar, bazar6, xoom, galaxy, nexus, green
Cheers bazar!
I've updated the OP with some things missing in the AOKP Rom, as well as custom settings you have to change to match the theme in Rom Control. Since I based the update on CM10, there will be some things missing in other Roms, I have listed them at the bottom of the OP (such as Codename as well. Thanks Sardo Numspa!). If you come across any issues, please let me know! (Screenshots would be great!)
Thanks!
thanks for the update, i'll give it a try this afternoon.
My bad, I should chose my words a little more carefully... I updated the OP *to add the list* of things for AOKP... I have fixed the circle battery and Rom Control icons, going to take a look at Codename to see if I can make that fix before releasing an updated apk. I'll let you know when I've updated the app (and not just the OP). Sorry for any confusion.
no worries. thanks for the sweet themes.
Sardo are you still on Codename? Do you still have the volume progress issues? I looked at cna's source and it matches CM10 and AOKP for that part. I know it sounds n00bish, but did you try a reboot after applying the theme (sometimes I need to do that for the full theme to take effect).
Bazar617 said:
Sardo are you still on Codename? Do you still have the volume progress issues? I looked at cna's source and it matches CM10 and AOKP for that part. I know it sounds n00bish, but did you try a reboot after applying the theme (sometimes I need to do that for the full theme to take effect).
Click to expand...
Click to collapse
yep, rebooted a few times. on the volume slider, the speaker on the left is green/red, the slider is green/red, the settings button is green/red, but the gap between the speaker and the slide is blue.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Let me start by saying that I used Photoshop CS6 to make this but you can use almost any design software to create it. The base we will be creating can be used for an icon set using the mask we’ll be making as well as stock images or your own. I’ve included the PSD file for easy reference so download it and fire up Photoshop, let’s get started! (Here's the video tutorial if you hate to read. )
THE BASE
Step 1: Open a new document. Name it whatever you like, set the size to 512x512 pixels and the ppi to 300. Set the color mode to RGB.
Step 2: Grab your rounded rectangle tool,(It’s hiding below the rectangle tool). Now click somewhere near the center of your artboard and set the dimensions to 490x490 with a corner radius of 66 pixels. Hit enter, now double click the layer in the layers panel and rename the layer “base”.
Now hold ctrl+a to select everything, switch to your move tool (v) and up in th etop toolbar click the indicators to center the square. Hit ctrl+d to deselect. You should now have something that looks like this.
Step 3: Make a copy of the square by holding down ctrl and tapping J on the keyboard. Hide that layer for now by clicking on the eye next to the thumbnail in the layers panel.
Step 4: It’s time to add a gradient to the base. With the base layer selected, click on the “fx” icon at the bottom of the layers panel and select “gradient overlay”. In the new dialog box that pops up click on the actual gradient to open up the color picker. Double click the color stops and type in C5C5C5 for the hex code on the first color, and E4E4E4 for the second. Leave everything else set to default and click ok until you are back at your artboard. You should now see something like this. (without the shadow)
THE ICON
Step 5: Now draw out a long skinny rectangle using the regular rectangle tool making sure to draw it all the way across your artboard. Like this:
Hold ctrl+T to bring up the transform tool and, holding shift, rotate the rectangle over the top right corner of the base. Rename this layer to “One”. Copy that layer using cntrl+J and rotate it across the right side of the base, a little lower than the corner. Repeat the process until you have something like this:
Step 6: Arrange the rectangles in this order in the layers panel: Two>One>Five>Three>Four. Now select both One and Two using cntrl+left click. With the rectangle tool selected change the fill of the shapes to D7D253. Now select the remaining shapes and color them AEAEAE.
Now draw a brown rectangle to add some color. Use the color code A6917D and place it below all of the “street” layers. You should now have something like this:
Step 7: Group all the rectangles together by selecting them all and hitting ctrl+G. Then right click on the group in the layers panel and select “merge”. Now select the base layer, right click it in the layers panel and select “rasterize layer style”. Reselect the group of shapes and right click, select “create clipping mask”.
Step 8: Next up on our to do list is the little blue location indicator. Grab your ellipse tool and, while holding shift, click then hold down alt as well and drag out a circle. Place it over the number three layer. Let’s give our circle a subtle blue gradient. Go to fx>gradient overlay and set the gradient colors to 88adc5 and 84b1d1. While you've got the fx box open, give it a drop shadow and lower the shadows opacity to 75% with a distance of 7 pixels and a size of 13 pixels. Set the angle to 90 degrees. Click ok. It should now look like this:
THE MASK
Step 9: Make one last copy of the base layer. Right click on it and select “clear layer style”, then move that bad boy to the top of the list. Up in the navigation panel go to filter>noise>add noise and make sure uniform is selected and give it 4% noise, click OK.
Step 10: Let’s add a gradient to the mask. Set the foreground color to eeeeee. And go to fx>gradient overlay. Once in the fx box, select foreground to transparent gradient. Set the style to radial, the angle to 90 degrees and the scale to 150%. It should now look like this:
Now just decrease the opacity of the mask layer to 29%.
Step 11: Next we will give it a nice subtle drop shadow. Re select the base layer. Go to fx>drop shadow. Set the color of the shadow to 595957. Set the opacity to 48%, angle to 90 degrees and both the distance and size to 5. It should now look like this:
Finally, save it as a .png image file. If you’re going to be making an icon set, be sure to place your themed icons in-between the base and mask and save them individually. Thanks for reading, I hope you had fun and learned a thing or two along the way.
Hello everyone!
Into:
What is "SBG Method"?
"SBG Method" is a simple method that users and themers can use to make some of their work easier.
It is mostly targeted on themers that like to make lots of variations for their themes.
"Go on! I like the sound of it!":
It is kind of a complex way and maybe a bit time consuming at first, but it helps a lot.
So, what is this method?
Let's use an example!:
Let's say I am making a CyanogenMod theme which I am gonna release in different color versions.
A CyanogenMod theme replaces original resources(drawables, colors, styles, e.t.c.) from original packages found in Android, such as com.android.systemui(SystemUI.apk). Those resources are the ones who(most of the time) define what you see in your devices screen.
To redirect an icon, for example the Brightness Tile icon, you have to add a redirection. In a redirection you tell Android which resource(drawable, color, e.t.c.) from the original package to replace with which one from your CyanogenMod theme resources.
Most people do this:
They replace an icon,for example "ic_qs_brightness_auto_on.png", with another icon they created which they placed in their CyanogenMod theme adding the original package name as a prefix to better locate it, com_android_systemui_ic_qs_brightness_auto_on.png.
A redirection for this resource would be like this:
<item name="drawable/ic_qs_brightness_auto_on">@drawable/com_android_systemui_ic_qs_brightness_auto_on</item>
Replacing an icon(.png) with an icon(.png), pretty simple and easy.
No one tells you though that you can't do otherwise.
How about replacing an icon(.png) with an .xml?
"Why do that?! As long as .png -> .png works fine why change my ways?"
Well, you are right!
But let's use one more example:
I finished with my CyanogenMod theme. I created new icons for all of my Quick Setting Tiles and I added a blue circle background behind every ON tile and a grey circle background behind every OFF tile.
Users liked my icons and ask me to make the same Tiles but have red squares behind ON tiles and white squares behind OFF tiles. Now I have to make the same icons but add a different background behind them.
If the tiles are for example 123 files it'll take lot's of time, especially if I am a user that has less or no experience at all with Photoshop Actions.
Now users ask me to make the same icons with green triangles/dark grey background for ON/OFF tiles.
Time consuming!
What if I had just 123 icons for Tiles and just 2 more to use as ON/OFF backgrounds?
I would only have to change 2 .pngs each time instead of 123.
Well, that's basically the "SBG Method" and "SBG" stands for "Separated Background".
You can use this method on anything you can imagine!
Resources I used this method on successfully are:
Status Bar icons, Halo, Quick Setting Tiles.
I am sharing that method with you because we all can have different ideas and you can all use this in different ways.
How to make this work:
Let's use an example again:
Let's say I want to change the Brightness Tile.
I'll personally make an .xml called:
brightness_auto_on.xml for when Auto Brightness is ON
brightness_auto_of.xml for when Auto Brightness is OFF
In redirections I'll make this:
<item name="drawable/ic_qs_brightness_auto_on">@drawable/brightness_auto_on</item>
<item name="drawable/ic_qs_brightness_auto_off">@drawable/brightness_auto_off</item>
Now, how is an .xml gonna be uses instead of a .png?:
(Tired of reading? Image examples!)
brightness_auto_on
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
brightness_auto_off
A layer-list will render resources one on top of another.
In this case, a brightness icon on top of a circle background.
Android will replace the stock Brightness ON/OFF tile icons with my two, .xml rendered Brightness ON/OFF resources.
What are the benefits of this method?:
Less time releasing your themes with different colors.
You can provide users with very small VRT flashables that can contain just the replacing backgrounds.
Easier for users to make their own backgrounds.
You can make more backgrounds like blue backgrounds for WiFi/Signal tiles and red backgrounds for all others or make a plethora of colorful backgrounds and assign each background to each Tile.
Lot's of possibilities, just be creative!
Smaller size themes. "Why? I am going to have 123 more files(.xml)." Here's why smaller size:
Having a 4kb background repeated 123 times will be around 123 times larger* so it's best to have just one background. Plus, each .xml you will create will be around 200B large that means...**
4*123=492kB *
200*123=24600B=24kB **
492-24=468kB
You save 468kB
Disadvantages:
One .xml for each icon you replace(for example, 123 Tiles = 123 .xmls).
Lots of writing(.xmls), depending on how many icons you are gonna replace with .xml.
More files.
Performance cost(?)
Notes:
If you have any idea on how to make this guide easier you can tell me.
Maybe the examples were not the best ones but I just wanted to give you an idea on how my method can help you.
I'll make a template myself for Tiles for you all to not have to write the .xmls.
If you find any misspelling you can tell me.
Thanks goes to:
My XDA buddies:
@Chirag_Galani
@joehanh88
@KINGbabasula
@shut_down
My long time friends at #TeamFun IRC channel:
All of you guys!
Nice guide. :good:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
Introduction
Materialize Theme is a theme for AROMA Installer. Inspired by sir Daniiiik49's Material theme and based on the MIUI 4 ICS theme. It applies the Material Design concept to give you a whole new look n' feel It also includes the most common Material Design Icons for you to just choose whichever icon you prefer to use.
NOTE: Currently supports small screen devices, cause Buttons, Icons and other parts of the theme appears small on a larger screen device (see the screenshots below). Sorry for inconvenience.
Screenshots
Device with 320x480 resolution:
Device with 1080x1920 resolution:
Changelog
Materialize 01.05.2017
Set Roboto Light font as the default theme font
Removed Device Pixelate size selection
Removed Font size selection
Minor changes
Materialize 12.12.2016
Added 2 theme colors; Indigo and Blue Grey
Added 70 Material Design Icons
Updated Buttons. Will now raise only on press
Updated Dialog window. Fixed Titlebar text color
Updated Window transition. A bit slower transition
Set default Device Pixelate size to HDPI
Set Poiret One font as the default theme font
Materialize 12.10.2016
Applies Polymer's Paper Shadow
Updated Progress bar
Updated Dialog window
Updated Selection controls
Materialize Lite
Initial release
Customization
I've now moved and updated the source files to a new repository. Here if you want to customize your own theme, click the button below for some basic useful info you may want to know first
Colors
All colors I've used here are from the Color Style guideline. Just choose your primary (500) theme color and you're good to go. The rest of the colors are defaults from the MIUI 4 ICS theme and were already set in the source files, so no need to worry bout it.
First thing is replacing some values of the theme's properties. Open up the file theme.prop, replace the HEX color code values of the following theme properties listed below with your preferred color.
Code:
[FONT="Courier New"]color.selectbg = #RRGGBB
color.selectbg_g = #RRGGBB
color.titlebg = #RRGGBB
color.titlebg_g = #RRGGBB
color.dlgtitlebg = #RRGGBB
color.dlgtitlebg_g = #RRGGBB
color.scrollbar = #RRGGBB
color.progressglow = #RRGGBB[/FONT]
Brief description about the properties; color.selectbg and color.selectbg_g for item selection (e.g Selecting an item in selectbox), color.titlebg and color.titlebg_g for the Titlebar text color, color.dlgtitlebg and color.dlgtitlebg_g for the Dialog's Titlebar text color, color.scrollbar is basically for the Scrollbar, and color.progressglow for the animating gradient color of Progress bar.
Background, Navbar, Dialog & Titlebar
The colors used in Background, Navbar and Dialog can also be found in the Color Style guideline under Themes. Background color is Grey 50 (#FAFAFA), the color of the Navbar is actually the App bar color which is Grey 100 (#F5F5F5), Dialog background color is White (#FFFFFF). And the color for Titlebar, as well as for Dialog's Titlebar will be the primary theme color.
Select Image
The Select image can be seen in the item selection (e.g When pressing an item in menubox). There isn't much use of this one so I just make it totally transparent.
Progress Bar
The Progress bar has two segment, one is the empty Progress bar and the other one is the fill Progress bar. Color used for the empty Progress bar is Grey 300 (#E0E0E0) and for the fill Progress bar is the theme's primary color. Additionally, to change the animating gradient color, just replace the value of the property color.progressglow in the theme.prop file.
Buttons
Here I've implemented the Raised Button which at first is just a classic button, then will raise once it's pressed. The following order of theme properties below will show this implementation.
Code:
[FONT="Courier New"]img.button = button.9
img.button.focus = button_primary.9
img.button.push = button_primary_raised.9[/FONT]
Brief description about the properties; img.button is the classic or let's say the default button, img.button.focus is basically the focused button (not elevated/no drop shadow), and img.button.push is the pressed button (elevated/drop shadow on).
The color used for the default button is Grey 300 (#E0E0E0) and for the primary button is the theme's primary color.
Toggles
There are four states for the Checkbox and Radio button; OFF, ON, FOCUSED, and PRESSED states. Obviously, The OFF state is the unselected one, and of course, the ON state is the selected one. FOCUSED state is only applied to the unselected item where it's simply indicates that the item is just focused but not selected. PRESSED state is where the ripple-like effect is shown which indicates that the item is pressed, either it is selected or unselected.
The following order of theme properties below will show this implementation:
Code:
[FONT="Courier New"]# CHECKBOX
img.checkbox = checkbox
img.checkbox.focus = checkbox_focused
img.checkbox.push = checkbox_focused_ripple
img.checkbox.on = checkbox_on
img.checkbox.on.focus = checkbox_on
img.checkbox.on.push = checkbox_on_ripple
# RADIO BUTTON
img.radio = radio
img.radio.focus = radio_focused
img.radio.push = radio_focused_ripple
img.radio.on = radio_on
img.radio.on.focus = radio_on
img.radio.on.push = radio_on_ripple[/FONT]
Brief description about the properties; img.radio and img.checkbox for the unselected item, img.radio.focus and img.checkbox.focus for the focused unselected item, img.radio.push and img.checkbox.push for the pressed unselected item, img.radio.on and img.checkbox.on for the selected item, img.radio.on.focus and img.checkbox.on.focus for the focused selected item (here, FOCUSED state is not applied to selected item), img.radio.on.push and img.checkbox.on.push for the pressed selected item.
See the Selection Controls guideline for the color style.
NOTICE: Some of the image has a .9 at the end of their names (as seen in the file theme.prop). This is important so don't change it, unless you know what's its purpose.
Other References
The drop shadows I used here is the Polymer Paper Shadow. See this blog for details on how to apply these values in Photoshop.
Credits
Sir @Daniiiik49 for giving me permission to use his theme's resource.
Big THANKS to @Mitsos Vorris for providing screenshots and for those countless test :laugh:
Just a simple Thanks if you liked my work. It will be very much appreciated
Can you post some screenshots?
Mitsos Vorris said:
Can you post some screenshots?
Click to expand...
Click to collapse
I can't right now, I don't have a PC but after the update I'll post it all. Sorry for inconvenience.
Theme updated
Final update.
Turkish Language
Texts are translated for Turkish.
Language File Only
EypCnn said:
Texts are translated for Turkish.
Language File Only
Click to expand...
Click to collapse
Thanks for contribution
AROMA-CONFIG Update
Added Font size selection for small, medium and large screen size
Re-added Device Pixelate size selection but with additional 2 options
great job
great job
Screenshots added.
Minor changes.
Thank you!
Thanks for the work :good: