[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Styles and colors

styles.xml

When you for the first time open and look at the content of styles.xml you might regret starting to learn about theming.

But it's not that hard first you understand what it's all about.

Lets start with a very simple example.

We got this simple app: Calculator.apk with the package ID: com.android.calculator2

NOTICE: Some genius made a fixed black background in the layout-XML for this app. That's why the background can't be themed, but I fixed that. Grab the fixed Calculator.apk here. http://www.mediafire.com/?8x4q08tpcqnl2jf

Calculator.apk looks like this unthemed:

The steps to learn how to theme that app would be to decompile it and then read it's "AndroidManifest.xml"

<?xml version="1.0" encoding="utf-8"?>
<manifest android:versionCode="10" android:versionName="2.3.7" package="com.android.calculator2"
xmlns:android="http://schemas.android.com/apk/res/android">
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="10" />
<original-package android:name="com.android.calculator2" />
<application android:label="@string/app_name" android:icon="@drawable/icon">
<activity [COLOR="Red"]android:theme="@android:style/Theme.Black.NoTitleBar"[/COLOR] android:name="Calculator">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>

Here we learn that it's themed by the style named "Theme.Black.NoTitleBar" from "@android" (red line) wich is the same as "framework-res.apk".

So we decompile "framework-res.apk" and open "res/values/styles.xml" and look for a style named "Theme.Black.NoTitleBar" and find this:

<style name="Theme.Black.NoTitleBar" parent="@style/Theme.Black">
<item name="windowNoTitle">true</item>
</style>

It doesn't look of much, but it tells us, it enheriets it's styles from "Theme.Black". Aha! We find it and it looks like this:

<style name="Theme.Black" parent="@style/Theme">
<item name="colorBackground">@color/black</item>
<item name="windowBackground">@color/black</item>
</style>

It should be very obvious, that the style makes a solid black background. Let's change that from our theme.

First lets set up a string for a transparent color. We will almost for sure need that a lot anyway. Chances are, that you a using an exsisting theme as a base for your theme, and most likely it's already defined.

In our theme-APK-folder we open "res/values/colors.xml" and add this inside the resources-tags:

<resources>
...
<color name="transparent">#00000000</color>
...
</resources>

Still in our theme-APK-folder we open "res/values/styles.xml" and add this inside the resources-tags:

<resources>
...
<style name="Theme.Black" parent="@android:style/Theme.Black">
<item name="android:colorBackground">@android:color/transparent</item>
<item name="android:windowBackground">@drawable/semc_bg</item>
</style>
...
</resources>

Notice the difference in how to write the style in our theme and how it was written in the original framework-res.apk!

Lets explain what it does:

First of all we give it a name. It's smart to keep the same names to make it easy to remember what this is for.

Next we add an argument that inheriets styles from the original style from the original framework-res.apk. It's not nessesery for this style as we change everything, but for other styles where we only will change a few things this is smart.

The two item-lines then sets background-color to transparent and sets background-image to "res/drawable-ldpi/semc_bg.png" from our theme-APK.

Final step is to add style-reference. In our theme-APK-folder we open "res/xml/android.xml" and add this line inside the resource-redirections-tags

<resource-redirections>
...
<item name="style/Theme.Black">@style/Theme.Black</item>
...
</resource-redirections>

Now Theme Chooser will replace the style in framework-res.apk with the style from our theme-APK.

We have made our first themed style (In post #6 we will also theme the PNGs of Calculator.apk). The result looks like this:

So your next question will be: What all the style-names in styles.xml are responsible for different texts etc.?

Well, I will gather all info about that. Untill then read here:

http://developer.android.com/guide/topics/ui/themes.html

https://android.googlesource.com/pl...s/heads/master/core/res/res/values/styles.xml

------ for geeks ------

The problem is in Calculator.apk in the file main.xml in folders layout-land and layout-port.

At the top of both XMLs we find these lines:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:background="#[COLOR="red"][B]ff[/B][/COLOR]000000" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
...

The problem is the part highlighted in red.

This defines a non-transparent full black background for the entire layout of the app.

The first 2 hex ff is = no transparency. 00 would = full transparency. The rest is just normal hex-RGB-color-code.

Yes, the app starts by getting it's layout as described in my link in post #5 above. This is all fine. But then on top of that, we get a LinearLayout-container with solid black background, covering any other background defines by our styles... not clever at all LOL.

The fix i made in link above is just to change the background to full transparency, like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:orientation="vertical" android:background="#[COLOR="Red"][B]00[/B][/COLOR]000000" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:android="http://schemas.android.com/apk/res/android">
...