Theming 101 – Kickstart Your RRO Layers Development Streak

Datetime:2016-08-22 23:18:12          Topic: Android Studio           Share

Theming on Android has matured tremendously since in the past few years, with zip-modding APKs and the like giving way to more elegant solutions such as RRO Layers and the newly introducedSubstratum. While the latter is new and still in early stages, RRO Layers has skyrocketed in terms of popularity and adaptability, with the community contributing aggressively to the pool of overlays.

What is RRO Layers?

Runtime Resource Overlay was a solution developed internally at Sony for the functioning of Xperia Themes and for quick prototyping, in the wake of Android Lollipop’s limited theming abilities. Given its excessive potential, a few developers from the community built upon Sony’s base, bringing forth the RRO Layers Framework that worked effortlessly with most custom and lightly modified stock ROMs.

The Layers framework, as its ‘RRO’ prefix aptly states, replaces an app’s resources at runtime, allowing developers to hook into it and theme a variety of objects, such as color strings, dimensions, integer values used by the app, and even drawables, enabling power users to flawless theme apps on their phone with ease and granular control.

Getting Started

Due to the simplicity with which the RRO framework operates, swapping in resources at runtime, building Layers themes is a straightforward and undemanding task, the only prerequisites being basic markup knowledge and a general idea of color strings. That, and a handful of tools and you’re on your way to building something beautiful, so let’s get started –

Step 1: Setting up your build environment

The actual process of building an overlay requires a set of tools, which are all completely free and can be setup in minutes. The list includes:

Step 2: Generate a base project

The Layers project generator is a handy tool that takes the most complex part of building an overlay out of the equation – configuring a new project. Restricted to Windows only, the small piece of software takes a bunch of parameters such as the package name of the target app, the author name, project name and package icon, and generates a Gradle-ready Android Studio package, springboarding you right into the actual theming process.

Step 3: Import the project into Android Studio

Launch Android Studio – if it’s your first time you will have to set it up  and hit the ‘Open an existing Android Studio project’ option. Select the generated folder, which is generally in the same location as the Generator, and go ahead and import it.

Step 4: Finish project setup

You should now see the Android Studio project window, with the list of files in the pane on the left. The default view doesn’t work quite well for us, so go ahead and select the Project  view from the dropdown. Gradle, Android’s preferred build system will kick in anytime now, and begin the final configuration and processing steps. Once it’s done, head over to the  Build  menu and rebuild the project to be on the safe side, ignoring any Gradle warnings that might be displayed.

Step 5: Get your resources

To theme an application’s resources, you need to get your hands on its resource identifiers, which are defined in the original APK’s resource files. How might one get those, you ask? APKTool, naturally. The powerful tool allows one to reverse engineer application files, giving the decompiled project as an output, and while Java code remains in its dexed smali form, resources are reproduced exactly as they appear in the project before compilation. Once you’vedecompiled an apk, copy its desired resource files to the same location in your project, such as colors.xml to alter the application’s color scheme.

Step 6: Theme, theme, theme

You’re now ready to begin theming your overlay. The process is pretty straightforward once you have the app’s resource files, with the majority effort being simply locating the appropriate resource. For example, if one aims to change an application’s primary and accent colors, the colorPrimary and colorAccent resources need to be located and their hex values altered. Once done, all you need to do is hit the green run button from the toolbar, connect a device via adb and let the overlay install on your device, following which you can enable it from the Layers Manager app and see your work in action. Elementary, isn’t it?

Notes

The theming process is extremely easy in itself, but along the way you might encounter some gotchas which may catch you off guard. Some of them to look out for are –

Hex Color Strings

If you’re not familiar with the hex color scheme, there are a bunch of tools available online, that allow you to pick a color from a palette and generate a corresponding hex code, such as HexColorTool and Adobe Kuler , which goes on to even generate a complementary color should you be on the lookout for a  colorAccent  value. In short, the hex color scheme defines colors in the #RRGGBB or #RGB formats, with values ranging from 00 to ff, the three base colors combining to form a definite color. Occasionally, you might run into eight character hex strings, but fret not, for the two extra characters are part of the scheme and are used to indicate  alpha , which is the transparency value of the color, and come in the formats #AARRGGBB or #ARGB.

Dimension Units

In order to support multiple screen sizes , Android uses a unit of measurement called dp or dip , which are abbreviations for  density independent pixels . These values translate to actual pixel values by the framework at runtime, and are of the order of the device’s density bucket which assigns a suitable multiplier to the value.

Drawable Changes

Changing drawables is a seemingly straightforward process, an image by the same name and same size being the only requirements. However, Android’s drawable density system must be kept in mind, with tools such as Android Asset Studio simplifying this with predefined drawable sets and image resizing options.

Style Editing

Occasionally, some attributes might not be found in their respective files, with some developers opting to enter values such as primary and accent colors directly in the app’s theme. These attributes can be found in the styles.xml file, usually under the  AppTheme  group.

Build any interesting overlays? Have an idea for an alluring theme? Let us know in the comments below!





About List