How to Manually Theme Android System UI

Many Android forum users ask questions like “how to change the Android notification panel color?”, “how to change Android quick settings icons?”, and other similar questions related to the Android UI. Some brands allow this through theme stores, but mileage may vary as to what exactly themes can change.

What this all boils down to, however, is SystemUI.apk – and I am going to show you step-by-step on editing the resources inside of this .apk to customize the Android UI as you like it. Please note that this guide is for mainly AOSP-based ROMs – and references to files inside the SystemUI.apk may be different from what you have, depending on your phone manufacturer. But if that’s the case, you can still achieve what we’re doing, with a little trial and error.

Because this guide revolves around editing Android system files and customizing your ROM, you should also see the following Appual’s guides:

• How to Decompile and Theme Android APKs
• How to Build a Custom Android ROM from Source
• How to Build a Custom Android ROM from Source pt. 2

Requirements:

• A rooted device (search Appual’s for Android root guides)
• ADB & Fastboot Tools (see Appual’s guide How to Install ADB on Windows)
• Java SDK
• APKTool or APKMultiTool
• NotePad++ (or other code-friendly text editor for editing XML and Smali lines)
• Image editing software like GIMP or Photoshop
• 7-Zip or Winrar

Note: For this guide, I’ll be using APKTool as a reference – if you went with APKMultiTool instead, the initial set-up and decompiling/recompiling process may be different, but overall the steps are the same.

 Also, you may want to consider installing your device’s ROM into an Android Emulator on your computer, so you can test and preview your SystemUI changes before loading them onto your device.

APKTool Setup for Windows

1. Download Windows wrapper script (Right click, Save Link As apktool.bat)
2. Download apktool-2 (find newest here)
3. Rename downloaded jar to apktool.jar
4. Move both files (apktool.jar & apktool.bat) to your Windows directory (Usually C://Windows)
5. If you do not have access to C://Windows, you may place the two files anywhere then add that directory to your Environment Variables System PATH variable.
6. Try running apktool via command prompt

APKTool Setup for Linux

1. Download Linux wrapper script (Right click, Save Link As apktool)
2. Download apktool-2 (find newest here)
3. Rename downloaded jar to apktool.jar
4. Move both files (apktool.jar & apktool) to /usr/local/bin (root needed)
5. Make sure both files are executable (chmod +x)
6. Try running apktool via cli

APKTool Setup for Mac OS X

1. Download Mac wrapper script (Right click, Save Link As apktool)
2. Download apktool-2 (find newest here)
3. Rename downloaded jar to apktool.jar
4. Move both files (apktool.jar & apktool) to /usr/local/bin (root needed)
5. Make sure both files are executable (chmod +x)
6. Try running apktool via cli

Decompiling SystemUI.Apk with APKTool

1. After installing APKTool, we need to pull your framework file from your device via ADB. The generic AOSP framework file is named ‘framework-res.apk’ found in /system/framework path on your device, but most manufacturers include their own framework files in addition to the AOSP framework.
2. This can be tricky because you’ll need to figure out that the manufacturer named the framework resources file on your device. They will usually be found in /system/framework, but sometimes they can be hidden in /data/system-framework or /system/priv-app. The files themselves will typically have ‘resources’, ‘res’, or ‘framework’ in the filenames.
3. Once you’ve located your framework file, pull it along with your SystemUI.apk via ADB console. You would do this with the command:
4. adb pull /system/framework/framework-res.apk (change the path if necessary and do the same command for the SystemUI.apk)
5. 
6.  You’ll find the pulled files in your main ADB installation folder on your computer.
7. Now we’re going to install them into APKTool. So in a command prompt, type:
8. Apktool if <framework location> so for example apktool if C:\ADB\framework-res.apk
9. Repeat the above for the SystemUI.apk
10. Now we’re going to decompile the SystemUI.apk, so type into the command window: apktool d SystemUI.apk
11.  This will extract the entire SystemUI.apk into a series of folders.

Editing Icons and UI Colors

So now you need to figure out the DPI of your phone, because you’ll folders like SystemUI/res/drawable-hdpi, SystemUI/res/xhdpi, etc. This is how it works:

• ldpi (low) ~120dpi
• mdpi (medium) ~160dpi
• hdpi (high) ~240dpi
• xhdpi (extra-high) ~320dpi
• xxhdpi (extra-extra-high) ~480dpi
• xxxhdpi (extra-extra-extra-high) ~640dpi

So to edit your SystemUI resources, you’ll need to figure out which category your screen falls under.

Inside the folder, you’ll see pretty much all of the .png files used for your System UI – everything from the notification bar icons, quick settings panel icons, etc. The actual file names can vary depending on the manufacturer, but AOSP-based ROMs should typically have files named like this:

• Notification_panel_bg.9 (your status bar background)
• ic_qs_####.png (quick settings panel icons)
• stat_syst_####.png (status bar icons)

But your manufacturer may not follow those naming conventions, so you’ll just have to look at the .pngs closely to figure out exactly what they’re for.

Important: If you run into .9.png files, do not attempt to directly edit them in GIMP or Photoshop without a tutorial first. These are 9Patch .png files which have visible borders when editing the images, but these borders become invisible in the Android UI through special technique (too long to explain), and there is a special method for manipulating them. You should use the Draw 9-Patch Tool from Android Studio, or learn how to properly edit / create 9Patch images in Photoshop / GIMP.

 To edit the actual background color of the quick settings panel itself, you’ll need to open /res/values/colors.xml and edit the lines accordingly. The lines should actually be commented with explanations or at least fairly easy to understand naming conventions. This is why I recommended using an Android Emulator, to preview and tweak as you go along.

Editing Text Colors

 Check in /res/layout/tw_statusbar.xml for these lines:

Battery icon text color (if your battery is displayed as a text percentage)

<TextView android:textSize=”12.0dip” android:textColor=”#something”

Clock text color:

<com.android.systemui.statusbar.policy.Clock android:textSize=”@dimen/status_bar_clock_text_size” android:textColor=”#something”

Check in /res/layout/tw_status_bar_expanded_header.xml for these lines:

Pull-down clock color

<com.android.systemui.statusbar.policy.Clock android:textAppearance=”@style/TextAppearance.StatusBar.Expanded.Clock” android:textColor=”#something”

Date color

“@style/TextAppearance.StatusBar.Expanded.Date” android:textColor=”#something”

There are so many things to customize in the SystemUI, I cannot explain every little thing in this guide – you could find a SystemUI theme guide that explains each and every line in the .XML files, but you’ll be fine if you just make preview your changes in an Android emulator and tweak as you go along.

Recompiling and Installing Your Modified SystemUI.Apk

1.  In a command window, type: apktool b SystemUI
2.  This will create a new .apk folder in a Dist folder in the decompiled APK directory. So look in /systemUI/dist for the new SystemUI.apk file.
3. Now you need to use something like 7-Zip to copy and replace the META-INF folder and AndroidManifest.XML from the original APK into the new APK, then recompile again.
4. You can now flash the new SystemUI.apk onto your device.

Happy modding!