[Sony Ericsson XPERIA X10 Mini] Emperor.dk:
XML walk through (1 of 2)

Let's do the XML walk through

If I got something wrong, please correct me :)

Please don't QUOTE everything if you REPLY, it will make the thread look ridiculous

First thing you will notice is, that TAGs are build with a start and end TAG just like HTML, APS, PHP, etc:

<object arguments>
... other content ...
</object>

Some TAGs got their start and end TAG within 1 TAG like (again just like in some cases HTML)

<object arguments />

This will not be a full XML lesson, just explanation of what the different objects of keyguard_screen_tab_unlock.xml is responsible of on the tab lockscreen, with some usefull links whan apropiate.

keyguard_screen_tab_unlock.xml

<?xml version="1.0" encoding="utf-8"?>
<android.gesture.GestureOverlayView android:orientation="none" android:id="@id/gestures" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gestureStrokeType="multiple" android:eventsInterceptionEnabled="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout android:gravity="center_horizontal" android:id="@id/root" android:background="#70000000" android:layout_width="fill_parent" android:layout_height="fill_parent"
xmlns:tabunlock="http://schemas.android.com/apk/res/com.android.tabunlock">
<TextView android:textAppearance="?textAppearanceMedium" android:ellipsize="marquee" android:gravity="bottom|right|center" android:id="@id/carrier" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2.0dip" android:layout_marginRight="8.0dip" android:singleLine="true" android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
<TextView android:textAppearance="?textAppearanceSmall" android:textColor="@color/white" android:id="@id/emergencyCallText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="0.0dip" android:layout_marginRight="8.0dip" android:text="@string/emergency_calls_only" android:layout_below="@id/carrier" android:layout_alignParentRight="true" />
<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" android:layout_below="@id/carrier">
<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" />
<LinearLayout android:orientation="vertical" android:id="@id/status_box" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/date">
<TextView android:textAppearance="?textAppearanceMedium" android:ellipsize="end" android:id="@id/status_charging" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_marginTop="2.0dip" android:maxLines="2" android:drawablePadding="4.0dip" />
<TextView android:textAppearance="?textAppearanceMedium" android:ellipsize="end" android:id="@id/status_alarm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_marginTop="2.0dip" android:maxLines="2" android:drawableLeft="@drawable/ic_lock_idle_alarm" android:drawablePadding="4.0dip" />
<TextView android:textAppearance="?textAppearanceMedium" android:ellipsize="end" android:id="@id/status_calendar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_marginTop="2.0dip" android:maxLines="2" android:drawableLeft="@drawable/ic_lock_idle_calendar" android:drawablePadding="4.0dip" />
</LinearLayout>
<TextView android:textAppearance="?textAppearanceSmall" android:id="@id/customMsg" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_marginTop="0.0dip" android:layout_marginRight="24.0dip" android:layout_below="@id/status_box" />
<TextView android:textAppearance="?textAppearanceMedium" android:id="@id/screenLocked" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="24.0dip" android:layout_marginTop="2.0dip" android:drawablePadding="4.0dip" android:layout_below="@id/customMsg" />
<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_above="@id/musicNowPlaying" android:layout_centerInParent="true" />
<com.android.internal.widget.SlidingTab android:orientation="horizontal" android:id="@id/tab_selector2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="128.0dip" android:layout_alignParentBottom="true" />
<com.android.internal.widget.SlidingTab android:orientation="horizontal" android:id="@id/tab_selector" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="60.0dip" android:layout_alignParentBottom="true" />
<com.android.internal.widget.RotarySelector android:orientation="horizontal" android:id="@id/rotary_selector" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" />
<com.android.internal.widget.RingSelector android:orientation="horizontal" android:id="@id/ring_selector" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentBottom="true" />
<Button android:id="@id/emergencyCallButton" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="62.0dip" android:drawableLeft="@drawable/ic_emergency" android:drawablePadding="8.0dip" android:layout_alignParentBottom="true" android:layout_centerInParent="true" style="@style/Widget.Button.Transparent" />
<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_alignParentBottom="true" android:layout_centerInParent="true" />
<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_alignParentBottom="true" android:layout_centerInParent="true" />
<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" android:layout_toLeftOf="@id/musicControlPause" android:layout_alignParentBottom="true" />
<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" android:layout_toRightOf="@id/musicControlPause" android:layout_alignParentBottom="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" android:layout_above="@id/musicControlPause" android:layout_centerInParent="true" android:layout_alignWithParentIfMissing="true" android:marqueeRepeatLimit="marquee_forever" />
</RelativeLayout>
</android.gesture.GestureOverlayView>

First line is just to tell the reading app, that this is an XML file. This is not part of the XML-elements.

<?xml version="1.0" encoding="utf-8"?>

Gesture Unlock Method

The first element is responsible for the gesture unlock method.

Notice, that this element is wrapped around all elements, with it's end TAG at the end of the XML. This ensures, that the gesture unlock method works on the full screen. I won't comment any of the arguments here.

<android.gesture.GestureOverlayView android:orientation="none" android:id="@id/gestures" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gestureStrokeType="multiple" android:eventsInterceptionEnabled="false" xmlns:android="http://schemas.android.com/apk/res/android">
...
</android.gesture.GestureOverlayView>

Lockscreen parent

The next element is a parent (like a container) for all the elements on the lockscreen. This element also has it's end TAG at the end, just before the gesture unlock method end TAG.

<RelativeLayout android:gravity="center_horizontal" android:id="@id/root" android:background="#70000000" android:layout_width="fill_parent" android:layout_height="fill_parent" xmlns:tabunlock="http://schemas.android.com/apk/res/com.android.tabunlock">
...
</RelativeLayout>

RelativeLayout

This tells the XML parser, that elements within the parent are positioned relative to each other.

It also sets the overall rules for all elements inside the start and end TAG. Let's look at the arguments one by one:

android:gravity="center_horizontal"

Places all objects centeret horizontal

android:id="@id/root"

Reference ID for the element. This is used by the XML parser to change content and by other elements to set relative position.

android:background="#70000000"

This sets a dimed-like filter on top of the lockscreen background image. The first two digits after the hach (#) sets transparency to 70 (hex). The rest 6 digits sets the color to black (RGB-color), just like you know it from HTML or Photoshop.

The value could also be a PNG from drawables, eg: @drawable/semcbg

android:layout_width="fill_parent"

android:layout_height="fill_parent"

This sets the element size to fill the parent. As this is the top parent it's just full screen size.

xmlns:tabunlock="http://schemas.android.com/apk/res/com.android.tabunlock"

Is used by the XML parser. xmlns = XML namespace. You don't need knowledge about this, just don't change it, haha.

And now we get to the widget-parts of the lockscreen :)

Carrier lable and "Emergency call only"

The two first elements are the carrier lable and the "Emergency call only" text.

Emergency call only apears when you are at a place with a lot of people and not enough slots at reachable radiotowers or when no SIM card is in the phone. You might have seen this at a beach in summertime.

Eg. if a radiotower got 64 slots, it can only handle 64 calls/dataconnections. A few slots are always reserved for emergency call, and when almost all slots are in use, the radiotower tells all connected cellphones, that the limit has been reached.

<TextView android:textAppearance="?textAppearanceMedium" android:ellipsize="marquee" android:gravity="bottom|right|center" android:id="@id/carrier" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2.0dip" android:layout_marginRight="8.0dip" android:singleLine="true" android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
<TextView android:textAppearance="?textAppearanceSmall" android:textColor="@color/white" android:id="@id/emergencyCallText" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="0.0dip" android:layout_marginRight="8.0dip" android:text="@string/emergency_calls_only" android:layout_below="@id/carrier" android:layout_alignParentRight="true" />

TextView

This element simply shows text.

Let's look at the arguments:

android:textAppearance="?textAppearanceMedium"

android:textAppearance="?textAppearanceSmall"

This argument pulls a style from res\values\styles.xml (color, size etc)

Another way to set appearance is used for the "Emergency call only" text:

android:textColor="@color/white"

Here the text color is set to the color string "white" from res\values\colors.xml, where we find this: "#ffffffff" (first two hex-digits tells no transparency, and the rest 6 is full white)

android:ellipsize="marquee"

This is set for carrier label, and just cuts off the label and scrolls, id it's longer than the element width.

android:gravity="bottom|right|center"

This specify how text inside the TextView are positioned. As the size of TextView is fittet around the text, this has no real function.

android:id="@id/carrier"

android:id="@id/emergencyCallText"

This sets the IDs for the two elements.

android:layout_width="wrap_content"

android:layout_height="wrap_content"

This sets the size of the TextViews to fitt close around the text.

android:layout_marginTop="2.0dip"

android:layout_marginRight="8.0dip"

These arguments sets a margin (empty space) on the sides of the elements. By now you should have noticed, that XML is not that dificult to read and understand, names of elements and arguments often does what it says in plain english.

android:singleLine="true"

This is set for the carrier label, to ensure it shows on one line only.

android:layout_alignParentTop="true"

android:layout_alignParentRight="true"

These two arguments are set for the carrier label, and are very important. Untill now, we have no other elements to refere to as a relative position. So we neew to define a position.

Here we define a position top-right of the screen. The XML parser can always change the arguments of an element. You might have noticed that this is centered on some of my screen shoots. The XML parser can do that using the elements IDs, just like scripts can change content on a webpage on the fly using DHTML.

You will also notice, that no text has been defined for the carrier label. The XML parser does that too, using the element ID.

So don't go at change all element IDs before you truely knows what you are doing ;)

android:text="@string/emergency_calls_only"

This is the text for the "Emergency calls only" text. The text comes from res\values-ISO\strings.xml (ISO is the local country code)

android:layout_below="@id/carrier"

This should now be self explained. It's set for the "Emergency calls only" text, and tells the XML parser, to place it under the carrier text-element that has the ID "@id/carrier".

Now we will move on to the more complicated parts of the XML. I will only repeat explanations for arguments that are already covered above if it's necessary.

DigitalClock widget and Date

These elements displays the time and date.

<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" android:layout_below="@id/carrier">
<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" />

The Clock is an example of an element TAG with a start and end TAG, and elements inside those TAGs. The Date is a single TAG example.

We got a parent (yellow) that contains the time and the AM/PM <com...> </com...>

And outside as an independent element we got the date <TextView ... />.

Let's start with the yellow parent:

com.android.internal.widget.DigitalClock

Just to let the XML parser know, that here we got the DigitalClock widget

android:id="@id/time"

As before, the ID for the parent.

android:paddingBottom="2.0dip"

Sets inner padding (like margin) of the parent.

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20.0dip"

android:layout_marginTop="26.0dip"

These are already coveret above.

android:layout_below="@id/carrier">

Again the relative position set below the carrier label.

The time and AM/PM is covered togeather:

android:textAppearance="?textAppearanceMedium"

android:textSize="68.0sp"

android:textSize="22.0sp"

android:ellipsize="none"

Already covered above. Big font for time and small font for AM/PM, and no scrolling.

android:id="@id/timeDisplay"

android:id="@id/am_pm"

The IDs for the two elements.

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginBottom="0.0dip"

android:layout_marginLeft="8.0dip"

Already coveren above.

android:singleLine="true"

Ensures that the text is in one line and not broken up.

android:shadowColor="#c0000000"

android:shadowDx="0.0"

android:shadowDy="0.0"

android:shadowRadius="3.0"

This adds some cool shade around the time and AM/PM. Compare to the carrier label here:

android:layout_toRightOf="@id/timeDisplay"

As covered above, this sets the relative position of AM/PM to the right of the time.

android:layout_alignBaseline="@id/timeDisplay"

This ensures that AM/PM is positioned on the same baseline as the time.

... continue in next post ...