Drawer

A3

ic_search

A4

ic_play_store

A5

ic_menu

A6

cat_selected

C3

Categories

S5

Drawer overlay

S6

drawer_card

S7

Theme font

S8

drawer_dock_bg

S9

cat_selector

 

 

 

 

Graphical Assets

A3 A4 A5
NAMEFILESIZEINFO
ic_search
PNG
96 x 96 px
Run index search in drawer
ic_play_storePNG
96 x 96 px
Open Play Store app
ic_menuPNG
96 x 96 px
Open drawer settings
(drawable-xxxhdpi)

searchbar_bg.xml should include these edits:

C3    
NAMEFILESIZEINFO
ic_business
PNG
192 x 192
Business category icon
ic_cameraPNG
192 x 192
Camera category icon
ic_educationPNG
192 x 192
Education category icon
ic_entertainPNG
192 x 192
Entertainment category icon
ic_favoritePNG
192 x 192
Favorite category icon
ic_financePNG
192 x 192
Finance category icon
ic_fitnessPNG
192 x 192
Fitness category icon
ic_gamesPNG
192 x 192
Games category icon (main)
ic_internetPNG
192 x 192
Internet category icon (main)
ic_languagesPNG
192 x 192
Language apps category icon
ic_lifestylePNG
192 x 192
Lifestyle category icon
ic_mediaPNG
192 x 192
Media category icon (main)
ic_medicalPNG
192 x 192
Medical category icon
ic_musicPNG
192 x 192
Music category icon
ic_navigationPNG
192 x 192
Navigation category icon
ic_phonePNG
192 x 192
Communication category (main)
ic_productivityPNG
192 x 192
Productivity category icon
ic_readingPNG
192 x 192
Reading apps category icon
ic_settingsPNG
192 x 192
Settings category icon (main)
ic_shoppingPNG
192 x 192
Shopping category icon
ic_socialPNG
192 x 192
Social networks category icon
ic_sportPNG
192 x 192
Sport category icon
ic_themingPNG
192 x 192
Customization category icon
ic_travelPNG
192 x 192
Travel category icon
ic_utilityPNG
192 x 192
Utility category icon (main)
ic_weatherPNG
192 x 192
Weather category icon
(drawable-xxxhdpi)

It’s suggested to add ~4dp (16px) of padding before exporting.

Styling

Drawer Overlay

Overlay lets you empower the readability of apps and icons in the drawer panel. You can apply both a black overlay and a colored one to better merge the drawer with the wallpaper.

S5  
NAMEFILESIZEINFO
theme
XML
-
Edits many aspects of the theme
(values)

Inside theme.xml find the value drawer_bg_color and edit the color and the opacity:

Hint: “B3” represent the opacity value, while “000000” is the color in hexadecimal.

...
<!-- ___ In the homescreen -->

       <integer name="home_background">0x33000000</integer>

<!-- ___ In the drawer -->

      <integer name="drawer_bg_color">0xb3000000</integer>

      <string-array name="clocknames">
           <item>@string/app_name</item>
       </string-array>

      <string-array name="clockpreviews">
           <item>clockpreview</item>
       </string-array>
...

Drawer Card

Drawer card it’s the container of the apps in the drawer. Here you can edit colors and opacity or apply a nine-patch for a custom shape.

S6  
NAMEFILESIZEINFO
drawer_card
(nodpi)
nine-patch
.9.PNG

custom
Stylize the drawer card with a complex shape
otherwise
drawer_card
(nodpi)
XML
-
Stylize the drawer card with a basic shape and color

Inside drawer_card.xml, you can edit the card changing these values:

Hint: the first “ff” represent the opacity value, while “000000” is the color in hexadecimal.

<stroke
     android:width="2dp"
     android:color="#ff000000” />

<corners
 android:radius="12dp" />

<solid
 android:color=“#ff000000” />

To edit the padding of the card refers to this:

<item
    android:right="8dp"
    android:left="8dp"
    android:bottom="8dp"
    android:top="8dp">

Set padding to “0” to have a fullscreen card.

Custom font

You can set a custom font for your theme, it will change both the titles and the app icons text style.

S7  
NAMEFILESIZEINFO
theme_font
TFF
-
Define a custom font for your theme
(assets)

Simply rename your custom font file (.tff) in theme_font.tff and place it in Assets folder.

Categories Dock background

It let you customize the style of the categories bar. By default, the background style is the same as the one defined in dock_bg. If you want to have a different background from dock_bg, create a new file called drawer_dock_bg (nine-patch or XML) and place it into Drawable folder.

S8  
NAMEFILESIZEINFO
drawer_dock_bg
(nodpi)
nine-patch
.9.PNG

custom
Stylize the categories dock with a complex shape
otherwise
drawer_dock_bg
(nodpi)
XML
-
Stylize the categories dock with a basic shape and color

Inside drawer_dock_bg, you can edit the card changing these values:

Hint: the first “ff” represent the opacity value, while “000000” is the color in hexadecimal.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <item
        android:bottom="-4dp"
        android:left="-4dp"
        android:right="-4dp"
        android:top="0dp">     
        <shape android:shape="rectangle"

            <stroke
                android:width="1dp"
                android:color="#ff000000" />

            <solid android:color=“#ff000000” />

        </shape>
    </item>
</layer-list>

To edit the padding of the card refer to this values:

<item
        android:bottom="-4dp"
        android:left="-4dp"
        android:right="-4dp"
        android:top="0dp">
</item>

Active category indicator

It let you edit the style of current active category indicator.

For each drawer layout, you need an XML, for the bottom bar you have cat_selector_b for the sidebar you have cat_selector, and for the left-handed mode you have cat_selector_l.

S9  
NAMEFILESIZEINFO
cat_selector_b
(drawable)
XML
-
Defines the state of the category for the bottom bar layout
cat_selector
(drawable)
XML
-
Defines the state of the category for the side bar layout
cat_selector_l
(drawable)
XML
-
Defines the state of the category for the side bar in left-handed mode

These XMLs are linked to the graphical resources called cat_selector_b for the bottom bar, cat_selector for the sidebar, and cat_selector_l for the left-handed mode.

cat_selector_b

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item 
         android:state_focused="false" 
         android:state_selected="true" 
         android:drawable="@drawable/cat_selected_b” />
</selector>

cat_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item 
         android:state_focused="false" 
         android:state_selected="true" 
         android:drawable="@drawable/cat_selected” />
</selector>

cat_selector_l

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item 
         android:state_focused="false" 
         android:state_selected="true" 
         android:drawable="@drawable/cat_selected_l” />
</selector>
A6  
NAMEFILESIZEINFO
cat_selected_b
(drawable)
XML
custom
Defines a simple style of the indicator of the active category for the bottom bar layout
otherwise
cat_selected_b
(xxhdpi)
nine-patch
.9.PNG

custom
Defines a complex style of the indicator of the active category for the bottom bar layout
otherwise
cat_selected_b
(xxhdpi)
PNG
168 x 168 px
Defines a complex style of the indicator of the active category for the bottom bar layout
Caution: PNG will stretch to fill its container.

Inside cat_selected_b.xml, you can edit the card changing these values:

Hint: the first “ff” represent the opacity value, while “000000” is the color in hexadecimal.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <item
        android:bottom="-8dp"
        android:left="-8dp"
        android:right="-8dp">

        <shape android:shape="rectangle">

            <!-- This tag draw the horizontal line. -->

            <stroke
                android:width="2dp"
                android:color="#ff000000" />

            <!-- You can edit this tag to change the background color -->

            <solid android:color="#00000000" />

        </shape>
    </item>
</layer-list>
NAMEFILESIZEINFO
cat_selected
(drawable)
XML
custom
Defines a simple style of the indicator of the active category for the side bar layout
otherwise
cat_selected
(xxhdpi)
nine-patch
.9.PNG

custom
Defines a complex style of the indicator of the active category for the side bar layout
otherwise
cat_selected
(xxhdpi)
PNG
168 x 168 px
Defines a complex style of the indicator of the active category for the side bar layout
Caution: PNG will stretch to fill its container.

Inside cat_selected.xml, you can edit the card changing these values:

Hint: the first “ff” represent the opacity value, while “000000” is the color in hexadecimal.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <item
        android:bottom="-8dp"
        android:left="-8dp"
        android:top="-8dp">

        <shape android:shape="rectangle">

            <!-- This tag draw the vertical line. -->

            <stroke
                android:width="2dp"
                android:color="#ff000000" />

            <!-- You can edit this tag to change the background color -->

            <solid android:color="#00000000" />

        </shape>
    </item>
</layer-list>
NAMEFILESIZEINFO
cat_selected_l
(drawable)
XML
custom
Defines a simple style of the indicator of the active category for the side bar layout in left-handed mode
otherwise
cat_selected_l
(xxhdpi)
nine-patch
.9.PNG

custom
Defines a complex style of the indicator of the active category for the side bar layout in left-handed mode
otherwise
cat_selected_l
(xxhdpi)
PNG
168 x 168 px
Defines a complex style of the indicator of the active category for the side bar layout in left-handed mode
Caution: PNG will stretch to fill its container.

Inside cat_selected_l.xml, you can edit the card changing these values:

Hint: the first “ff” represent the opacity value, while “000000” is the color in hexadecimal.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <item
        android:bottom="-8dp"
        android:right="-8dp"
        android:top="-8dp">

        <shape android:shape="rectangle">

            <!-- This tag draw the vertical line. -->

            <stroke
                android:width="2dp"
                android:color="#ff000000" />

            <!-- You can edit this tag to change the background color -->

            <solid android:color="#00000000" />

        </shape>
    </item>
</layer-list>

Previous section

Customize Home page