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 APKsHow to Build a Custom Android ROM from SourceHow 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 SDKAPKTool or APKMultiToolNotePad++ (or other code-friendly text editor for editing XML and Smali lines)Image editing software like GIMP or Photoshop7-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
APKTool Setup for Linux
APKTool Setup for Mac OS X
Decompiling SystemUI.Apk with APKTool 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) ~120dpimdpi (medium) ~160dpihdpi (high) ~240dpixhdpi (extra-high) ~320dpixxhdpi (extra-extra-high) ~480dpixxxhdpi (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 Happy modding!
4 Simple Ways to Change Android Notification Panel ThemeHow to Decompile and Theme Android APKsHow to Include a Dark Theme in your Android AppHow to Completely Theme Android with Xposed Modules
