If you're modding Android, eventually you're going to have to edit some XML.
Want to center the clock in your statusbar? Rearrange the icons in your navbar? Change the layout of your notification screen? Get rid of a carrier label? Change the colour of some text?
Then you need to edit some XML files.
And you might not have any idea how...
Well, don't worry. The purpose of this thread is to show you just easy XML-editing can be. Once you've read it, you'll be one step closer to being an XML expert!
This guide is meant for noobs, experienced modders and everyone in between. Hopefully everybody can learn something..
Here's what this thread has to offer so far:
- Introduction (This Post)
- How To Delete A Line (Yes, Really) - http://xdaforums.com/showpost.php?p=56522113&postcount=2
- Some Useful Codes To Know - http://xdaforums.com/showpost.php?p=56522122&postcount=3
- How To Change The Colour Of The Status Bar Clock - http://xdaforums.com/showpost.php?p=56522123&postcount=4
- How To Put An Invisible Softkey In The Status Bar - http://xdaforums.com/showpost.php?p=56522135&postcount=5
- How To Center The Clock In The Status Bar...Part 1 - http://xdaforums.com/showpost.php?p=56522157&postcount=6
- How To Center The Clock In The Status Bar...Part 2 - http://xdaforums.com/showpost.php?p=56522168&postcount=7
- Centering The Clock In Xperia KitKat - http://xdaforums.com/showpost.php?p=59569708&postcount=297
- android:layout_gravity, android:gravity AND android:layout_weight - http://xdaforums.com/showpost.php?p=56522180&postcount=8
- Do NOT Edit "public.xml"!! - http://xdaforums.com/showpost.php?p=56522194&postcount=9
- How To Delete A Line (Yes, Really) - http://xdaforums.com/showpost.php?p=56522113&postcount=2
- Some Useful Codes To Know - http://xdaforums.com/showpost.php?p=56522122&postcount=3
- How To Change The Colour Of The Status Bar Clock - http://xdaforums.com/showpost.php?p=56522123&postcount=4
- How To Put An Invisible Softkey In The Status Bar - http://xdaforums.com/showpost.php?p=56522135&postcount=5
- How To Center The Clock In The Status Bar...Part 1 - http://xdaforums.com/showpost.php?p=56522157&postcount=6
- How To Center The Clock In The Status Bar...Part 2 - http://xdaforums.com/showpost.php?p=56522168&postcount=7
- Centering The Clock In Xperia KitKat - http://xdaforums.com/showpost.php?p=59569708&postcount=297
- android:layout_gravity, android:gravity AND android:layout_weight - http://xdaforums.com/showpost.php?p=56522180&postcount=8
- Do NOT Edit "public.xml"!! - http://xdaforums.com/showpost.php?p=56522194&postcount=9
I also encourage others to post guides as well:
- How To Remove "am/pm" From The Clock On Pre-4.2 Roms (by @KronicSkillz) - http://xdaforums.com/showpost.php?p=56624586&postcount=17
- How To Swap The Notification And Status Bar Icons (by @Anmol0022) - http://xdaforums.com/showpost.php?p=57959079&postcount=115
- How To Hide A Centered Status Bar Clock When A Lollipop Device Is Locked (by @S0bes) - http://xdaforums.com/showpost.php?p=58460343&postcount=172
There will be more coming soon!!
*** What Is XML? ***
'XML' stands for 'eXtensible Markup Language'. But you don't need to know that.
What you need to know is that XML is used by Google to define the layout of Android applications.
Look at your statusbar. It's Java that controls how your statusbar works, but it's XML that controls where everything on it is.
(If you want to edit the Java, you can try building the app from source. Or look at editing smali. Smali is harder to understand than XML but there's a great guide by @Goldie here: http://xdaforums.com/galaxy-s2/development-derivatives/guide-understanding-creating-smali-mods-t2488033)
*** Where Can I Find An App's XML? ***
To edit an app's XML, you first need to be able to access it. To do that, you need to decompile the .apk file. If you don't decompile, any XML you try editing won't work.
There are enough tutorials on xda to tell you how to do this that I don't need to fill up space here telling you about it.
But I always recommend using Tickle My Android (http://xdaforums.com/showthread.php?t=1633333) for any decompiling and recompiling.
*** What Does XML Look Like? ***
This is the line of XML that displays the clock on my phone's statusbar:
Code:
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" />
One of the great things about XML is that it ignores whitespace. Or, in other words, we can do stuff like this:
Code:
<com.android.systemui.statusbar.policy.Clock
android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:gravity="start|center"
android:id="@id/clock"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:singleLine="true"
android:paddingStart="6.0dip"
/>
Looks a bit more sensible, doesn't it? In theory, you can do this to every single line in a XML file but that'd be time-consuming and a bit pointless.
XML consists of two parts: 'tags' and 'attributes'. Google also like to talk about 'Views' and 'ViewGroups', but we won't worry about that for now.
Essentially, a tag is something you see (even if it's invisible) and an attribute affects the way that tag works. Let's look at that code again with the tags and attributes highlighted..
Code:
[color="red"]<com.android.systemui.statusbar.policy.Clock
[color="blue"] android:textAppearance="@style/TextAppearance.StatusBar.Clock"
android:gravity="start|center"
android:id="@id/clock"
android:layout_width="wrap_content"
android:layout_height="fill_parent"
android:singleLine="true"
android:paddingStart="6.0dip"[/color]
/>[/color]
Hopefully that code is starting to make a bit more sense. If not, don't worry. The more you edit XML, the more you'll understand it.
We can change those attributes, remove some and add others. And at the end of it all, that clock can look completely different.
And that's before we start moving the line to somewhere else in the XML file and adding other tags. With a little work, and a little patience, we can make a massive difference to our Android device.
*** What Do I Need To Know To Start Modding XML Myself? ***
This is the 'status_bar.xml' from my rom. I have an Xperia Z, runnning stock Sony-themed KitKat, modified by myself and this XML file can be found in 'system/priv-app/SystemUI.apk'.
Code:
<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.phone.PhoneStatusBarView android:orientation="vertical" android:id="@id/status_bar" android:background="@drawable/system_bar_background" android:focusable="true" android:fitsSystemWindows="true" android:descendantFocusability="afterDescendants"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:systemui="http://schemas.android.com/apk/res/com.android.systemui">
<FrameLayout android:id="@id/ongoing_call_bg_parent_layout" android:background="@color/ongoing_call_bg_color" android:visibility="gone" android:layout_width="fill_parent" android:layout_height="fill_parent">
<ImageView android:layout_gravity="left" android:id="@id/ongoing_call_glow" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<ImageView android:id="@id/notification_lights_out" android:paddingBottom="2.0dip" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/ic_sysbar_lights_out_dot_small" android:scaleType="center" android:paddingStart="6.0dip" />
<com.sonymobile.systemui.statusbar.operator.OperatorLabel android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:ellipsize="marquee" android:gravity="start|center" android:id="@id/operator" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" android:paddingEnd="4.0dip" />
<LinearLayout android:orientation="horizontal" android:id="@id/status_bar_contents" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip" android:paddingEnd="6.0dip">
<RelativeLayout android:layout_width="fill_parent" android:layout_height="fill_parent">
<com.panel.Button android:id="@id/button" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentStart="true" />
<LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentStart="true">
<com.android.systemui.statusbar.StatusBarIconView android:id="@id/moreIcon" android:visibility="gone" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="fill_parent" android:src="@drawable/stat_notify_more" />
<com.android.systemui.statusbar.phone.IconPartitioner android:id="@id/notification_icon_area" android:layout_width="0.0dip" android:layout_height="fill_parent" android:layout_weight="1.0">
<com.android.systemui.statusbar.phone.IconMerger android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/notificationIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_alignParentStart="true" />
<LinearLayout android:orientation="horizontal" android:id="@id/system_icon_area" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.panel.Panel android:id="@id/panel" android:layout_width="wrap_content" android:layout_height="fill_parent">
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="fill_parent" />
<LinearLayout android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.android.systemui.statusbar.policy.Traffic android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:id="@id/traffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" />
</LinearLayout>
</com.panel.Panel>
<LinearLayout android:gravity="center_vertical" android:orientation="horizontal" android:id="@id/statusIcons" android:layout_width="wrap_content" android:layout_height="fill_parent" />
</LinearLayout>
</com.android.systemui.statusbar.phone.IconPartitioner>
<LinearLayout android:gravity="center" android:orientation="horizontal" android:id="@id/signal_battery_cluster" android:layout_width="wrap_content" android:layout_height="fill_parent" android:paddingStart="2.0dip">
<include android:id="@id/signal_cluster" android:layout_width="wrap_content" android:layout_height="wrap_content" layout="@layout/signal_cluster_view" />
<LinearLayout android:id="@id/battery" android:layout_width="wrap_content" android:layout_height="fill_parent" android:layout_marginStart="4.0dip">
<ImageView android:layout_gravity="center_vertical" android:id="@id/status" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<com.erryy.BatteryText android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:layout_width="wrap_content" android:layout_height="fill_parent" android:paddingStart="1.0dip" />
<LinearLayout android:id="@id/battery_meter" android:layout_width="0.0dip" android:layout_height="0.0dip">
<ImageView android:layout_gravity="center_vertical" android:id="@id/battery_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="center_vertical" android:id="@id/stamina_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/somc_sys_powersaver" />
</LinearLayout>
<FrameLayout android:id="@id/battery_percent" android:layout_width="wrap_content" android:layout_height="fill_parent">
<com.sonymobile.systemui.statusbar.BatteryImage android:layout_gravity="start|center" android:id="@id/battery_percent_bg" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
</LinearLayout>
<com.android.systemui.statusbar.policy.Clock android:textAppearance="@style/TextAppearance.StatusBar.Clock" android:gravity="start|center" android:id="@id/clock" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="true" android:paddingStart="6.0dip" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal" android:id="@id/ticker" android:animationCache="false" android:layout_width="fill_parent" android:layout_height="fill_parent" android:paddingStart="6.0dip">
<ImageSwitcher android:id="@id/tickerIcon" android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:layout_marginEnd="4.0dip">
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />
<com.android.systemui.statusbar.AnimatedImageView android:layout_width="@dimen/status_bar_icon_size" android:layout_height="@dimen/status_bar_icon_size" android:scaleType="center" />
</ImageSwitcher>
<com.android.systemui.statusbar.phone.TickerView android:id="@id/tickerText" android:paddingTop="2.0dip" android:layout_width="0.0dip" android:layout_height="wrap_content" android:layout_weight="1.0" android:paddingEnd="10.0dip">
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
<TextView android:textAppearance="@style/TextAppearance.StatusBar.PhoneTicker" android:layout_width="fill_parent" android:layout_height="wrap_content" android:singleLine="true" android:textAlignment="viewStart" />
</com.android.systemui.statusbar.phone.TickerView>
</LinearLayout>
<ImageView android:layout_gravity="top|left|center" android:id="@id/rounded_corner_ul" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ul" />
<ImageView android:layout_gravity="top|right|center" android:id="@id/rounded_corner_ur" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/rounded_corner_ur" />
</com.android.systemui.statusbar.phone.PhoneStatusBarView>
If you understand every single line, tag and attribute then you can skip the next three posts. You're clearly an expert and I should probably be calling you 'Sir'...
If you don't, then read on. Hopefully you can see that, even though there's a lot of code there, it's all just tags and attributes. That's all that XML is. It's easier than it looks.
I have a few more things to tell you, then I'll show you a few example mods. Then it'd be time for you to practice editing XML for yourself.
Last edited: