[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Making the XPERIA S Advanced Lockscreen

And now to what you all have been waiting for :)

The XPERIA S Sliding Tab and Rotary.

I wil only mention Portrait-mode here. The same must be done for Landspace. Only note for Landscape is, that the slider-track must have a little transparant border to the sides, as the element for some reason gets it width from the tabs height.. doh'

Let us first examine the CM7 sliding tab:

I have added a transparent background color to the unlock element to help me sizing and stuff. The transparent background color will later be exchanged with the XPERIA S slider-track.

Aside from the slider tab, we got some small target dots that fades in when a slider tab is pressed.

The colors depend on wich of the icons is pressed.

The PNGs are shown here in Pixlr.

If we do not use custom app starter, the green is used only by the left tab (unlock tab), the grey and orange is used by the right tab (sound tab).

This is good knowledge to make the XPERIA S arow-fade-in in the slider-track later :)

If we use the custom app starter, the green is also used by the right tab (custom app starter).

I have added a transparent background color to the custom app starter element also. The transparent background color will later be exchanged with the XPERIA S slider-track.

Let us pull the unlock tab appart to see how it is build up

It is made up of 5 parts.

Back side of slider is a .9.PNG that is streacable

Text on top of the back side

Main slider tab

Icon on top of slider tab depending of the sliders function

Goto target dots (green, gray and orange)

The slider tab comes in a normal and a pressed state. The PNGs are shown here in Pixlr.

The XPERIA S has no back-part, so for now we just ignore that.

Copying the icon-PNG on top of the main slider tab-PNG, we notice that the icon fits correct if placed in the center.

We also notice, that the main part of the slider tab is placed on the edge of the screen.

This knowledge is helpfull when editing the CM7 slindig tab PNGs.

The stock XPERIA S sliding tab comes in 3 states (I will use ghost-state for all other CM7-PNGs that not apear to be used just in case).

The original PNGs from UxpNxtLockScreen.apk are in MDPI, and in order to be faithfull and true to XPERIA S we first must resize the PNGs in acording to official scaling ratio.

They are 3:4:6:8 (LDPI:MDPI:HPDI:XDPI). Read more here http://developer.android.com/guide/practices/screens_support.html

To go from MDPI to LDPI just devide by 4 and multiply with 3.

Here are the Sliding-PNG from UxpNxtLockScreen.apk resized to LDPI:

First we notice, that the icons are integreted into the tabs. These has to be edited away.

Here are the slider track PNGs from UxpNxtLockScreen.apk resized to LDPI:

The scaling ratio works just fine, the LDPI-tracks are 240 pixels wide :)

If we want the tabs to fit correct in the track I recomend that we just use the resized PNGs and rename them to the PNGs in CM7... but first I will crop off unused space on top and buttom.

The finished cropped PNGs looks like this (remember to keep same px height for tabs and track after cropping):

I made a mirror-image of the track-arrows, they need to be edited even more, before they can be used like the target-dots.

The end-part of the sliding-tabs should just be 100% transparent.

Editing .9.PNG is not difficult, but you must be carefull about the 1 px border. See my .9.PNG school here:

http://xdaforums.com/showthread.php?t=2033415

It would work with a simplest .9.PNG, 3x3 px. (100% transparent center px, and 100% black middle px on all 4 borders, all 4 corners are always 100% transparent)

The sliding tab icons in CM7 looks like this:

Let's go mining for some PNGs we can use on the XPERIA S slider tabs.

From UxpNxtLockScreen.apk we already got the open-lock-icon (making lock-lock should be easy to make).

Inside CM7 framework-res.apk we got the 3 sound-icons.

Our mining continue in SemcPhome.apk from stock XPERIA S. Here I found some PNGs used for the phone-sliding tabs:

Luckily it has a phone-icon (it is MDPI, so it has to be scaled and cropped), and it fits perfect then :)

Hmmmm the custom app icon... Android on a skateboard... when I ever activate the custom app starter it is always for the camera, tempting to just make it the camera icon, and we already got that one from UxpNxtLockScreen.apk.

After cropping/adding canvas to make them all square and same size, they looks like this (i edited a unlocked lock goto-icon into an unlocked lock):

Last we will make the track arrows.

On the stock XPERIA S a small goto-icon appears along with the track arrows, but as we have the same PNG in CM7 for different results (sound on/off, vibrate, custom app swype left and unlock, phone swype right), I will leave this icon out.

As mentioned above, we also got some small target dots that fades in when a slider tab is pressed.

The colors depend on wich of the icons is pressed.

If we do not use custom app starter, the green is used only by the left tab (unlock tab), the grey and orange is used by the right tab (sound tab).

No matter what size the goto-PNG is, it is always placed center horizontal to the sliders, and 47 pixels left and 48 pixels right from the screen-edge, and the PNG is cropped to the hight of the sliders.

See test here with different size of blown dandelion.

If we want to use the custom app starter, the "green" is also used by the right tab (custom app starter). We can still have track-arrows, simply stick the 2 PNGs with opposit arrows togeather.

The arrows are too light to give the cool XPERIA S effect, so i trippled the layer with the arrows for a darker transparency.

I also made Rotary Revamped into an XPERIA S look :laugh:

The result looks cool :)

yes yes... you will get a finished flashable for GDX 030 and 031b later tonight.... I will also give you my build-files so you can make the XPERIA S Advanced Lockscreen to ANY CM7 LDPI ROM. But first I will watch my wife doing aerobics. L8r