[XDA-University] Ticklefish:
*** Some Useful Codes To Know ***​

This object of this thread is to help you understand and master XML but I'm not going to explain what every tag and attribute means.

I don't have the space nor the time to do so. There are a lot of Android XML codes available.

And I don't need to, either. Google got there first. This is a link to their developers website: http://developer.android.com/reference/packages.html. Do a search for any Android XML tag or attribute you're unsure about and you'll be given a lot of information about it from the people that created it. I visit this site nearly every day.

But there are some things I think you could do with knowing about right now. And those are LinearLayout, RelativeLayout, FrameLayout, android:layout_width and android:layout_height.

*** LinearLayout, RelativeLayout And FrameLayout ***​

In Android, a 'Layout' is a collection of tags or 'objects' arranged together in a particular manner. These are essential to get an app laid out correctly.

A 'LinearLayout' is a collection of objects laid out in a line. The first object within the Layout sits at the top or the left of that Layout. LinearLayouts can be vertical or horizontal, according to their 'android:orientation' attribute.

The second object sits underneath or to the right of that Layout.

This is a sample LinearLayout taken from my SystemUI.apk's navigation_bar.xml:

<LinearLayout android:orientation="horizontal" android:id="@id/nav_buttons" android:clipChildren="false" android:clipToPadding="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:animateLayoutChanges="true">
<View android:visibility="invisible" android:layout_width="40.0dip" android:layout_height="fill_parent" android:layout_weight="0.0" />
<com.android.systemui.statusbar.policy.KeyButtonView android:id="@id/back" android:layout_width="@dimen/navigation_key_width" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_back" android:layout_weight="0.0" android:contentDescription="@string/accessibility_back" android:layout_marginStart="@dimen/navigation_key_outer_margin" systemui:keyCode="4" systemui:glowBackground="@drawable/ic_sysbar_highlight" />
<View android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" />
<com.android.systemui.statusbar.policy.KeyButtonView android:id="@id/home" android:layout_width="@dimen/navigation_key_width" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_home" android:layout_weight="0.0" android:contentDescription="@string/accessibility_home" systemui:keyCode="3" systemui:keyRepeat="false" systemui:glowBackground="@drawable/ic_sysbar_highlight" />
<View android:visibility="invisible" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1.0" />
<com.android.systemui.statusbar.policy.KeyButtonView android:id="@id/recent_apps" android:layout_width="@dimen/navigation_key_width" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_recent" android:layout_weight="0.0" android:contentDescription="@string/accessibility_recent" android:layout_marginEnd="@dimen/navigation_key_outer_margin" systemui:keyCode="187" systemui:glowBackground="@drawable/ic_sysbar_highlight" />
<com.android.systemui.statusbar.policy.KeyButtonView android:id="@id/menu" android:visibility="invisible" android:layout_width="@dimen/navigation_menu_key_width" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_menu" android:layout_weight="0.0" android:contentDescription="@string/accessibility_menu" systemui:keyCode="82" systemui:glowBackground="@drawable/ic_sysbar_highlight" />
</LinearLayout>

Here the tags that display my different softkeys are arranged in a horizontal line, which looks something like this:

​

A 'RelativeLayout' also arranges objects in a line, but lets you put them in different places relative to each other and the Layout. There's a wonderful example of this here: http://www.mkyong.com/android/android-relativelayout-example/. This explains this sort of Layout far better than I ever could.

RelativeLayouts are very flexible, but it can get quite complicated keeping track of what's supposed to be going where.

A 'FrameLayout' arranges objects in a frame. Which doesn't explain things well.

Think of it as creating a photo frame. Every object in that FrameLayout is placed into the middle of the frame, laid on top of the object before it. FrameLayouts can be very useful if you want to put multiple objects in the same place. My rom uses a FrameLayout to overlay my data connection icons on top of my signal icons. Here's one from my signal_cluster_view.xml:

<FrameLayout android:id="@id/wifi_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/somc_sys_signal_wifi_activity" />
</FrameLayout>

For more detailed info on these Layouts, have a look at Google's developer site. The link is in the text above.

(There's another Layout available in Android. It's called a TableLayout but I haven't mentioned it because you'll rarely, if ever, see it when you're modding your apk's. In over two years of being a Recognized Themer, I've been asked about it once.)

*** android:layout_height And android:layout_width ***​

In the Layouts above, we had some tags inside other tags. This is known as 'nesting' and is fine as long as you remember to include the correct 'end tag'.

<FrameLayout android:id="@id/wifi_combo" android:layout_width="wrap_content" android:layout_height="wrap_content"[COLOR="Red"]>[/COLOR]
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/somc_sys_signal_wifi_activity" />
[COLOR="Red"] </FrameLayout>[/COLOR]

That '</FrameLayout>' in red is the end tag for this FrameLayout. Every line between this line and the first one are considered to be nested within the Layout.

Note that the first line, because the tag doesn't end there, finishes in a '>', not a '/>' as usual.

In programming terms, the FrameLayout in that example is considered the 'parent' and the two ImageView lines are considered the 'children'.

Let's have another look at my clock XML:

<com.android.systemui.statusbar.policy.Clock
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:gravity="start|center"
android:id="@id/clock"
android:layout_width="[COLOR="Red"]wrap_content[/COLOR]"
android:layout_height="[COLOR="Blue"]fill_parent[/COLOR]"
android:singleLine="true"
android:paddingStart="6.0dip"
/>

This clock can be thought of as being inside a 'layout'. Not a 'Layout' with a capital, just a lower-case layout. This may seem odd, but just go with it.

Here the clock layout's height, or the 'layout_height', is set to "fill_parent". This means the clock's layout occupies a section of space on the screen the same height as the parent Layout (with a capital L). This ultimately means the clock occupies a section of space the same height as the statusbar.

This doesn't mean, the clock is the same height as the statusbar. To make the clock itself the same height, we'd have to change the size of the text. Think of it like the difference between the size of a painting and the size of its canvas..

The width of the clock, or the 'layout_width', is set to "wrap_content". This means the clocks 'layout' is exactly as wide as the content inside it. In other words, it's the exact same width as the clock itself.

It's important to know the difference between wrap_content and fill_parent and just as important to understand that these control the space an object uses, not the size of the object itself.

*** Now For The Fun Part ***​

Brain starting to hurt? I know mine is and I understand XML fairly well. (Although I should stress I'm no expert.)

Let's start putting everything I've talked about into practice, shall we? Read on to the next post to start modding!