FORUMS
Remove All Ads from XDA

 View Poll Results: How was this theme appeal to you?

Nice
 
9 Vote(s)
90.00%
Good
 
0 Vote(s)
0%
Bad
 
1 Vote(s)
10.00%

[THEME][AROMA] Materialize Theme for AROMA Installer

25 posts
Thanks Meter: 22
 
Post Reply Email Thread


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:

Click image for larger version

Name:	Screenshot-01.png
Views:	400
Size:	25.4 KB
ID:	3990437 Click image for larger version

Name:	Screenshot-02.png
Views:	434
Size:	19.5 KB
ID:	3990439 Click image for larger version

Name:	Screenshot-03.png
Views:	416
Size:	16.1 KB
ID:	3990444 Click image for larger version

Name:	Screenshot-04.png
Views:	380
Size:	19.3 KB
ID:	3990445 Click image for larger version

Name:	Screenshot-05.png
Views:	358
Size:	19.4 KB
ID:	3990446 Click image for larger version

Name:	Screenshot-06.png
Views:	362
Size:	16.0 KB
ID:	3990448 Click image for larger version

Name:	Screenshot-07.png
Views:	356
Size:	22.0 KB
ID:	3990449 Click image for larger version

Name:	Screenshot-08.png
Views:	336
Size:	19.3 KB
ID:	3990450 Click image for larger version

Name:	Screenshot-09.png
Views:	318
Size:	16.1 KB
ID:	3990451 Click image for larger version

Name:	Screenshot-10.png
Views:	306
Size:	23.5 KB
ID:	3990452


Device with 1080x1920 resolution:

Click image for larger version

Name:	Screenshot-11.png
Views:	486
Size:	194.6 KB
ID:	3968731 Click image for larger version

Name:	Screenshot-12.png
Views:	440
Size:	136.4 KB
ID:	3968732 Click image for larger version

Name:	Screenshot-13.png
Views:	432
Size:	181.6 KB
ID:	3968733 Click image for larger version

Name:	Screenshot-14.png
Views:	400
Size:	136.4 KB
ID:	3968734 Click image for larger version

Name:	Screenshot-15.png
Views:	358
Size:	141.0 KB
ID:	3968735 Click image for larger version

Name:	Screenshot-16.png
Views:	330
Size:	204.5 KB
ID:	3968736 Click image for larger version

Name:	Screenshot-17.png
Views:	312
Size:	195.1 KB
ID:	3968737 Click image for larger version

Name:	Screenshot-18.png
Views:	302
Size:	136.9 KB
ID:	3968738 Click image for larger version

Name:	Screenshot-19.png
Views:	304
Size:	139.5 KB
ID:	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.

Code:
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
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:
img.button         = button.9
img.button.focus   = button_primary.9
img.button.push    = button_primary_raised.9
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:
# 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
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



Just a simple Thanks if you liked my work. It will be very much appreciated
Attached Files
File Type: zip Materialize_01.05.2017.zip - [Click for QR Code] (1.17 MB, 398 views)
The Following 5 Users Say Thank You to Humble Potato II For This Useful Post: [ View ] Gift Humble Potato II Ad-Free
 
 
24th November 2016, 02:27 PM |#2  
Mitsos Vorris's Avatar
Member
Flag Athens
Thanks Meter: 12
 
More
Can you post some screenshots?
24th November 2016, 03:11 PM |#3  
Humble Potato II's Avatar
OP Junior Member
Thanks Meter: 22
 
Donate to Me
More
Quote:
Originally Posted by Mitsos Vorris

Can you post some screenshots?

I can't right now, I don't have a PC but after the update I'll post it all. Sorry for inconvenience.
The Following User Says Thank You to Humble Potato II For This Useful Post: [ View ] Gift Humble Potato II Ad-Free
12th December 2016, 07:45 PM |#6  
EypCnn's Avatar
Senior Member
Flag Ankara
Thanks Meter: 177
 
More
Turkish Language
Texts are translated for Turkish.
Language File Only
Attached Files
File Type: zip tr.lang.zip - [Click for QR Code] (1.4 KB, 28 views)
The Following User Says Thank You to EypCnn For This Useful Post: [ View ] Gift EypCnn Ad-Free
13th December 2016, 08:14 AM |#7  
Humble Potato II's Avatar
OP Junior Member
Thanks Meter: 22
 
Donate to Me
More
Quote:
Originally Posted by EypCnn

Texts are translated for Turkish.
Language File Only

Thanks for contribution
13th December 2016, 08:16 AM |#8  
Humble Potato II's Avatar
OP Junior Member
Thanks Meter: 22
 
Donate to Me
More
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
13th December 2016, 02:05 PM |#9  
Junior Member
Thanks Meter: 0
 
More
great job
great job
Post Reply Subscribe to Thread

Tags
aroma, aroma installer

Guest Quick Reply (no urls or BBcode)
Message:
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes