[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
Rearanging the elemenst on the lockscreen

So, it's imperative, to make the lockscreen look as much like XPERIA S as possible.

We know that the Digital Clock and Music Control swype along a horizontal line. If you read this thread you already know that I made this possible, but let's take it one by one.

Reading the Android API Reference Guide I came across HorizontalScrollView.

It appered to work very simple. Any child-element inside HorizontalScrollView, that is wider than the HorizontalScrollView-element will be scrolled. This is the summery from http://developer.android.com/reference/android/widget/HorizontalScrollView.html

So... It can only hold one child, and inside that child we can put our elements. For the child to hold everything LinearLayout is an obvious choise, as we want the Digital Clock and Music Control to be side by side.

We also know, that the size of HorizontalScrollView should fill the width of the screen and just be as high as whatever is inside. And it should be placed under the carrier label.

Notice: We must give them both new IDs, and we must remember to add the new IDs to ids.xml before compiling the APK again.

The LinearLayout that should hold the Digital Clock and Music Control must be twize the width of the screen (480px), and Digital Clock and Music Control must in some way be aligned horizontal. Back to that in a minute.

Lets put the HorizontalScrollView and LinearLayout togeather first:

<HorizontalScrollView android:id="@id/digiplay" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" android:layout_below="@id/carrier">
<LinearLayout android:id="@id/scrollroot" android:orientation="horizontal" android:layout_width="480px" android:layout_height="wrap_content">
...
</LinearLayout>
</HorizontalScrollView>

The above should do what we described above.

Next step is to ensure, that the Digital Clock and the Music Control are put into two boxes that is placed side by side. We know that everything from beginning is inside a RelativeLayout, så we can keep this and place two RelativeLayout-elements with a width of 240px side by side inside the above code.

This shold be done like this:

<RelativeLayout android:id="@id/clockroot" android:layout_width="240px" android:layout_height="wrap_content">
... Digital Clock
</RelativeLayout>
<RelativeLayout android:id="@id/musicroot" android:layout_width="240px" android:layout_height="wrap_content">
... Music Control
</RelativeLayout>

Next we can adapt the elements that builds our Digital Clock.

It looks like this (the red markings must be removed):

<com.android.internal.widget.DigitalClock android:id="@id/time" android:paddingBottom="2.0dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20.0dip" android:layout_marginTop="26.0dip" [COLOR="red"]android:layout_below="@id/carrier"[/COLOR]>
<TextView android:textAppearance="?textAppearanceMedium" android:textSize="68.0sp" android:ellipsize="none" android:id="@id/timeDisplay" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="0.0dip" android:singleLine="true" android:shadowColor="#c0000000" android:shadowDx="0.0" android:shadowDy="0.0" android:shadowRadius="3.0" />
<TextView android:textAppearance="?textAppearanceMedium" android:textSize="22.0sp" android:ellipsize="none" android:id="@id/am_pm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="8.0dip" android:singleLine="true" android:shadowColor="#c0000000" android:shadowDx="0.0" android:shadowDy="0.0" android:shadowRadius="3.0" android:layout_toRightOf="@id/timeDisplay" android:layout_alignBaseline="@id/timeDisplay" />
</com.android.internal.widget.DigitalClock>
<TextView android:textAppearance="?textAppearanceMedium" android:id="@id/date" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_below="@id/time" />

Next we can adapt the elements that builds the Music Controls.

To make the positions correct we need to do alot of changes to position-elements. The new arguments are marked in red:

<ImageButton android:id="@id/albumArt" android:background="@color/transparent" android:padding="3.0px" android:visibility="gone" android:layout_width="105.0dip" android:layout_height="105.0dip" android:layout_marginTop="4.0dip" android:scaleType="fitCenter" android:adjustViewBounds="true" android:layout_centerHorizontal="true" />
<TextView android:textAppearance="?textAppearanceSmall" android:ellipsize="marquee" android:gravity="center" android:id="@id/musicNowPlaying" android:paddingTop="10.0dip" android:focusable="true" android:focusableInTouchMode="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:lines="1" android:scrollHorizontally="true" android:singleLine="true" [COLOR="red"]android:layout_below="@id/albumArt"[/COLOR] android:layout_centerHorizontal="true" android:layout_alignWithParentIfMissing="true" android:marqueeRepeatLimit="marquee_forever" />
<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" android:src="@drawable/ic_media_play" android:layout_centerInParent="true" [COLOR="red"]android:layout_below="@id/musicNowPlaying"[/COLOR] />
<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" android:src="@drawable/ic_media_pause" android:layout_centerInParent="true" [COLOR="red"]android:layout_below="@id/musicNowPlaying"[/COLOR] />
<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" android:src="@drawable/ic_media_previous" [COLOR="red"]android:layout_below="@id/musicNowPlaying"[/COLOR] 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" android:src="@drawable/ic_media_next" [COLOR="red"]android:layout_below="@id/musicNowPlaying"[/COLOR] android:layout_toRightOf="@id/musicControlPause" />

Notice, we can have more than one position argument like:

android:layout_below="@id/musicNowPlaying" android:layout_toRightOf="@id/musicControlPause"

This will end up in the video here:

[YOUTUBE]WHq7cRTpNkk[/YOUTUBE]

In my next post I will make the Music Controle look just like the one on the XPERIA S lockscreen. I will also make button animations when pressed. I know it won't show under our fat fingers LOL, but I will make it anyway, for the learning experience :)

After that we will move on to the slidertabs.

PS: Please give feedback on idears on how the landscape lockscreen looks like on XPERIA S. Any Screenshots of the actual one?