[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Animated Music Player Buttons

I want to create animated Music Player buttons from the originat PNGs in UxpNxtLockScreen.apk from XPERIA S.

I start by cropping off unused space around the original PNGs. This gives me the PNGs I want to use.

All the files should just be copied to res\drawable-ldpi in our framework-res.apk.

Next we can build the animation.

Animation are made from drawable XMLs, placed in res\drawable.

The easiest way is to edit an existing animation like jog_ring_holo_ring.xml.

I made 4 copies of jog_ring_holo_ring.xml and renamed them to:

semc_music_next.xml

semc_music_pause.xml

semc_music_play.xml

semc_music_previous.xml

Next we must edit the 4 new XMLs to have this content:

semc_music_next.xml

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

semc_music_pause.xml

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

semc_music_play.xml

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

semc_music_previous.xml

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

To explain it very short, this results in showing ..._normal.png when button is not pressed and showing ..._pressed.png when the button is pressed.

Yes it's just that simple...

The XMLs in res\drawable must be refered to just like it was a PNG. This means we can edit the Music Player arguments in the lockscreen-XML that referes to the old original PNGs like this. (Find the red marked arguments, scroll right)

keyguard_screen_tab_unlock.xml

<ImageButton android:id="@id/musicControlPlay" android:background="@color/transparent" android:padding="5.0px" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" [COLOR="Red"]android:src="@drawable/semc_music_play"[/COLOR] android:layout_centerInParent="true" android:layout_below="@id/musicNowPlaying" />
<ImageButton android:id="@id/musicControlPause" android:background="@color/transparent" android:padding="5.0px" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" [COLOR="red"]android:src="@drawable/semc_music_pause"[/COLOR] android:layout_centerInParent="true" android:layout_below="@id/musicNowPlaying" />
<ImageButton android:id="@id/musicControlPrevious" android:background="@color/transparent" android:padding="5.0px" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginRight="20.0dip" [COLOR="red"]android:src="@drawable/semc_music_previous"[/COLOR] android:layout_below="@id/musicNowPlaying" android:layout_toLeftOf="@id/musicControlPause" />
<ImageButton android:id="@id/musicControlNext" android:background="@color/transparent" android:padding="5.0px" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20.0dip" [COLOR="red"]android:src="@drawable/semc_music_next"[/COLOR] android:layout_below="@id/musicNowPlaying" android:layout_toRightOf="@id/musicControlPause" />

After building the framework-res.apk i get this (the low framerate for the Screen Stream causes that not all animation displays in the video):

[YOUTUBE]g2pxW5DqrU4[/YOUTUBE]

I know the buttons are too big, this is just to make it more easy to see the animations. I will resize the PNGs later.

Next we will start to make the sliding tabs into XPERIA S look.

Happy modding :)