[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Advanced image and color animation [updated 14/4-13]

/color

The "color"-folder is a somewhat misleading foldername. Here we place XML-files that are used instead af a HEX-color-code. Yes, the XML-file it self is the color.

Normaly to set a text color in a style-class, you would use a tag like this:

<item name="android:textColor">#ffffffff</item>

Notice 8 HEX-digits.

This will just make the text full bright white. The first 2 hex-digits sets transparancy to "ff" = no transparency (00 = full transparency). The next 6 digits is the color in RGB-format, 2 hex-digits for each (red, green and blue).

But we could also set the color of some text to - not a HEX-color-code, but - the name of an XML-file in the "color" folder, like this:

<item name="android:textColor">@color/eclair_button_default</item>

This tag sets the text color to the XML-file "res/color/eclair_button_default.xml". The content of the XML-file can then define colors for different stages like selected, pressed etc.

In this way we can have the color of the text change when eg. a button is tapped. Cool stuff right?

---- MORE COMMING -----

/drawable

This folder is used just like the "color" folder, just for PNGs instead of colors, so eg. the PNG will change when tapped.

Normally the XML that theme an app will make a reference to a new PNG-file from the theme-APKs drawable-ldpi folder, but if no PNG with the refered name exists, Android looks for an XML-file in "res/drawable" instead.

The content of the XML-file can then define PNGs for different stages like selected, pressed etc.

Theming Calculator.apk we came across two XMLs in the drawable-folder.

The content of the 2 XMLs in Calculator.apk from CM7 ROM looks like this:

button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff000000" android:endColor="#ff333333" android:angle="90.0" />
<corners android:radius="0.0dip" />
</shape>

blue-button.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:startColor="#ff071622" android:endColor="#ff253541" android:angle="90.0" />
<corners android:radius="0.0dip" />
</shape>

As noted, the XMLs defines a gradient color for two different colors (blue and black), that looks like this:

When tapped there is no button-animation aside from edge-glow when relesed.

The chalange is to make it look like in stock Eclair ROM; transparent and when tapped the whole button glows bright:

The two steps (normal and pressed) comes from two .9.PNGs mentioned above.

In Calculator.apk from stock Eclair ROM this is accomplished by the use of a drawable-XML:

transparent_button.xml

<?xml version="1.0" encoding="utf-8"?>
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false" android:drawable="@drawable/calculator_button" />
<item android:state_pressed="true" android:drawable="@drawable/calculator_button_pressed" />
</selector>

The other two XMLs are not used, but must be leftovers from the original devs.

Looking at the XML-code, we notice a fairly simple way of making animations in buttons. We have got two item-lines acording to a pressed or not-pressed state.

Thats all there is to it.

The drawables refered to is the two .9.PNGs

So we rename transparent_button.xml to calc_button.xml (carefull not to use filenames already used by other drawables like another PNG) and copy it to "res/drawable" in our theme-apk-folder.

The result looks like this with the old icon, look and feel from the stock Eclair ROM:

You might notice a slight difference in spacing betwean the buttons from the stock one. Well, we will fix this too in another post - here in this thread - soon.

HA! Not a dry eye in the room.