[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Sliding Tab Lockscreen

After comming home from a drive in Winter Wonderland a got the erge for my last X-mas brew from the fridge and some X-mas music.

And now back to the lockscreen show.

We start off with Sliding Tab Lockscreen:

The 2nd sliders (phone and scater icons in top sliders) are added when a 3rd app widget-button is checked in lockscreen settings.

It consists of alot of widget-parts (we talk about them in next post) and the sliders that are build from 3 drawables each.

Notice: There are landscape versions of most of the PNGs.

Here all PNG-drawbles are shown (not all are used).

The filelocations in framework-res.apk is:

res\drawable-land-ldpi
res\drawable-ldpi

(or mdpi depending of ROM)

Top 6 icons are reused in Rotara - and Ring lockscreens.

ic_jog_dial_answer.png
ic_jog_dial_custom.png
ic_jog_dial_sound_off.png
ic_jog_dial_sound_on.png
ic_jog_dial_unlock.png
ic_jog_dial_vibrate_on.png

The next line-up are our .9.PNGs. The black lines in the 1px border around the .9.PNG shows what part are streachable and where content like text or other drawables can be inserted. These make up the part of the slider that appears when a slider is moved.

jog_tab_bar_left_end_confirm_gray.9.png
jog_tab_bar_left_end_confirm_green.9.png
jog_tab_bar_left_end_confirm_red.9.png
jog_tab_bar_left_end_confirm_yellow.9.png
[COLOR="red"]jog_tab_bar_left_end_normal.9.png
jog_tab_bar_left_end_pressed.9.png[/COLOR]
jog_tab_bar_right_end_confirm_gray.9.png
jog_tab_bar_right_end_confirm_green.9.png
jog_tab_bar_right_end_confirm_red.9.png
jog_tab_bar_right_end_confirm_yellow.9.png
[COLOR="red"]jog_tab_bar_right_end_normal.9.png
jog_tab_bar_right_end_pressed.9.png[/COLOR]

(I have only seen the red ones in use)

Read more about 9.9PNGs in post #6 and #7 here http://xdaforums.com/showthread.php?t=2033415

Next we got the "button" outlines:

jog_tab_left_confirm_gray.png
jog_tab_left_confirm_green.png
jog_tab_left_confirm_red.png
jog_tab_left_confirm_yellow.png
[COLOR="red"]jog_tab_left_normal.png
jog_tab_left_pressed.png[/COLOR]
jog_tab_right_confirm_gray.png
jog_tab_right_confirm_green.png
jog_tab_right_confirm_red.png
jog_tab_right_confirm_yellow.png
[COLOR="red"]jog_tab_right_normal.png
jog_tab_right_pressed.png[/COLOR]

(I have only seen the red ones in use)

The small dots are used for the animation (fading from grey to green/red/yellow) when a sliderbutton is tapped:

jog_tab_target_gray.png
jog_tab_target_green.png
jog_tab_target_red.png
jog_tab_target_yellow.png

Center buttom is shown how the drawables are combines to make a slider.

I have also inserted the music player buttons buttom left corner:

ic_media_next.png
ic_media_pause.png
ic_media_play.png
ic_media_previous.png

Notice

Aside from the files listed above, there are also some files in:

res\drawable

They controle the animation of pressing the buttons. The files are easy to fond, they all start with: jog_

In my comming post we will edit the PNGs into our XPERIA S look.

After that we will have a look at the two XMLs that builds the lockscreen layout:

res\layout\keyguard_screen_tab_unlock.xml
res\layout\keyguard_screen_tab_unlock_land.xml

We will break it down to it's seperet parts and comment every line and arguments, and try moving the widgets around to make it look like the XPERIA S lockscreen.

It would so cool if we could make the DigiClock and MusicPlayer slide like in the real stock XPERIA S lockscreen

@00:30 in this vid http://youtu.be/0QQv8gchRp0

Happy modding :laugh: