[THEME][AROMA] Materialize Theme for AROMA Installer

How was this theme appeal to you?


  • Total voters
    11
Search This thread
Nov 10, 2016
35
43
Vc88qwb.png


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:

Screenshot-01.png Screenshot-02.png Screenshot-03.png Screenshot-04.png Screenshot-05.png Screenshot-06.png Screenshot-07.png Screenshot-08.png Screenshot-09.png Screenshot-10.png


Device with 1080x1920 resolution:

Screenshot-11.png Screenshot-12.png Screenshot-13.png Screenshot-14.png Screenshot-15.png Screenshot-16.png Screenshot-17.png Screenshot-18.png Screenshot-19.png



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

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

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 :)
 

Attachments

  • Materialize_01.05.2017.zip
    1.2 MB · Views: 1,006
Last edited:
Nov 10, 2016
35
43
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
 

Top Liked Posts

  • There are no posts matching your filters.
  • 10
    Vc88qwb.png


    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:

    Screenshot-01.png Screenshot-02.png Screenshot-03.png Screenshot-04.png Screenshot-05.png Screenshot-06.png Screenshot-07.png Screenshot-08.png Screenshot-09.png Screenshot-10.png


    Device with 1080x1920 resolution:

    Screenshot-11.png Screenshot-12.png Screenshot-13.png Screenshot-14.png Screenshot-15.png Screenshot-16.png Screenshot-17.png Screenshot-18.png Screenshot-19.png



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

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

    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 :)
    3
    1
    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.