[Android Themes] Humble Potato II:
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 :D 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:

View attachment 3990437 View attachment 3990439 View attachment 3990444 View attachment 3990445 View attachment 3990446 View attachment 3990448 View attachment 3990449 View attachment 3990450 View attachment 3990451 View attachment 3990452

Device with 1080x1920 resolution:

View attachment 3968731 View attachment 3968732 View attachment 3968733 View attachment 3968734 View attachment 3968735 View attachment 3968736 View attachment 3968737 View attachment 3968738 View attachment 3968739

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.

[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 :D 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.

[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 :D 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:

[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 [MENTION=5570742]Daniiiik49[/MENTION] for giving me permission to use his theme's resource.

Big THANKS to [MENTION=6886266]Mitsos Vorris[/MENTION] for providing screenshots and for those countless test :laugh:

Just a simple Thanks if you liked my work. It will be very much appreciated :)