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.
Device with 320x480 resolution:
Device with 1080x1920 resolution:
- Set Roboto Light font as the default theme font
- Removed Device Pixelate size selection
- Removed Font size selection
- Minor changes
- 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
- Applies Polymer's Paper Shadow
- Updated Progress bar
- Updated Dialog window
- Updated Selection controls
- Initial release
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
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.
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
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.
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.
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.
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.
img.button = button.9 img.button.focus = button_primary.9 img.button.push = button_primary_raised.9
The color used for the default button is Grey 300 (#E0E0E0) and for the primary button is the theme's primary color.
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:
# 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
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.
The drop shadows I used here is the Polymer Paper Shadow. See this blog for details on how to apply these values in Photoshop.
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
Just a simple Thanks if you liked my work. It will be very much appreciated