Home Page

A1

Wallpaper

A2

act_drawer_png

A3

act_widget_png

C1

Bubble background

C2

Icons

S1

home_background

S2

dock_bg

S3

searchbar_bg

S4

S5

clock

Graphical Assets

A1

Measures are expressed in dp.

NAMEFILESIZEINFO
Wall0
PNG
1920 x 1920
Change Wallpaper
(drawable-nodpi)
A2  A3

Measures are expressed in dp.

NAMEFILESIZEINFO
act_drawer_png
PNG
168 x 168
Go to Drawer Panel
act_drawer_pressed_pngPNG
168 x 168
Go to Drawer Panel (hover)
act_widget_pngPNG
168 x 168
Go to Widget Panel
act_widget_pressed_pngPNG
168 x 168
Go to Widget Panel (hover)
(drawable-xxhdpi)

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

C1  

Measures are expressed in dp.

NAMEFILESIZEINFO
bubble
PNG
256 x 256
Set background for icons in homescreen
(drawable-xhdpi)
C2  

Measures are expressed in dp.

NAMEFILESIZEINFO
ic_message
PNG
192 x 192
Open message Smart Folder
ic_musicPNG
192 x 192
Open music Smart Folder
ic_photoPNG
192 x 192
Open photo Smart Folder
ic_genericPNG
192 x 192
Open generic app
ic_emailPNG
192 x 192
Open email Smart Folder
ic_dialPNG
192 x 192
Open phone Smart Folder
ic_cameraPNG
192 x 192
Open camera Smart Folder
ic_browserPNG
192 x 192
Open browser Smart Folder
ic_folderPNG
192 x 192
Open general Folder
(drawable-xxhdpi)

Styling

Home overlay

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

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

Inside theme.xml find the value home_background 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>
...

Docked Searchbar

The docked search bar can be edited with a custom design. Use the XML for a simple customization, or create a nine-patch with the same name if you want a complex design.

S1  

Measures are expressed in dp.

NAMEFILESIZEINFO
dock_bg
(drawable-xxhdpi)
nine-patch
.9.PNG

168 x 168
Stylize docked search bar with a complex shape
otherwise
dock_bg
(drawable)
XML
-
Stylize docked search bar with a colors and strokes

dock_bg.xml should include these edits:

<?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"
        android:top="1px">
        <shape android:shape="rectangle">

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

            <stroke
                android:width="0dp"
                android:color="#ff009aff" />

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

            <gradient   
                android:startColor="#00000000"
                android:endColor="#ff000000"
                android:angle="270"/>

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

Float Searchbar

The float search bar can be edited with a custom design. Use the XML for a simple customization, or create a nine-patch with the same name if you want a complex design.

S2  

Measures are expressed in dp.

NAMEFILESIZEINFO
searchbar_bg
(drawable-xxhdpi)
nine-patch
.9.PNG

168 x 168
Stylize floating search bar with a complex shape
otherwise
searchbar_bg
(drawable)
XML
-
Stylize floating search bar with a basic shape and color

searchbar_bg.xml should include these edits:

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

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

<shape 
   android:shape="rectangle">
      <corners android:radius="50dp"></corners>
      <solid android:color="#000000"></solid>
 </shape>
 </item>

</layer-list>

Previous section

Theme project setup

Next section

Customize App page