[Xperia Z Themes and Apps] Ticklefish:
When I'm at home, I nearly always have the WiFi on. I have email to check, comics to read, people to talk to..and, of course, the XDA forum to look at.

The trouble is, I don't really like the way I have two separate icons for my network signal and for my WiFi.

Since they're showing signal strength, I figured I may as well merge the two together.

A few minutes with an xml editor and a graphics package later and it was done.

And now I'm going to show you how to do it yourself!

What You Need:

To do this, it's pretty simple. But you will need a few things..

An Android phone or tablet (obviously) running ICS or later

A PC with your devices drivers installed (worth installing any PC suite, if available)

A USB cable to connect your device to your PC

A program that uses apktool. I recommend using Tickle My Android, which is fast, user-friendly and very powerful...but it's up to you. And you'll also need...

..some patience.

Got all that? Excellent! Then let us begin!

Now, before we do any modding of any sort, we need to make a backup so it really helps if you have a recovery installed as well.

We need to edit some of the files contained within system/app/SystemUI.apk. So to do that, we need to decompile it. That's where your apktool-based program comes in. There's a few of those so you'll need to refer to the instructions for that particular program.

Once it's been decompiled, we need to edit layout\signal_cluster_view.xml.

You can edit xml files with MS Notepad, but if you're going to be doing a lot of this, I suggest installing Notepad++. It's specifically designed to editing code and it's free!

This is the code we're faced with:

<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.SignalClusterView android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@id/no_sim" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<View android:id="@id/no_sim_spacer" android:visibility="gone" android:layout_width="6.0dip" android:layout_height="6.0dip" />
<FrameLayout android:id="@id/wifi_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<View android:id="@id/spacer" android:visibility="gone" android:layout_width="0.0dip" android:layout_height="6.0dip" />
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<View android:visibility="invisible" android:layout_width="6.0dip" android:layout_height="6.0dip" />
<LinearLayout android:orientation="horizontal" android:id="@id/mobile_separate" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_roaming" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
<FrameLayout android:id="@id/mobile_combo" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="bottom|right|center" android:id="@id/mobile_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</FrameLayout>
<ImageView android:id="@id/airplane" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</com.android.systemui.statusbar.SignalClusterView>

Looks intimidating, doesn't it? If you've never faced xml before, this may look completely incomprehensible to you. But don't worry. It makes sense..and you don't actually need to understand any of it.

This is the portion of code that displays the WiFi icons:

[COLOR="RoyalBlue"] <FrameLayout android:id="@id/wifi_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>[/COLOR]

And this is the portion of code that displays the signal icons:

[COLOR="Red"] <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<View android:visibility="invisible" android:layout_width="6.0dip" android:layout_height="6.0dip" />
<LinearLayout android:orientation="horizontal" android:id="@id/mobile_separate" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_roaming" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
<FrameLayout android:id="@id/mobile_combo" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="bottom|right|center" android:id="@id/mobile_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</FrameLayout>[/COLOR]

Currently the WiFi code is above the signal code, which means the WiFi icons are displayed on the left of the signal icons.

For this mod, we want the WiFi icons to be on the right]/i] of the signal icons. So, to do that, let's just swap the two portions of code..

<?xml version="1.0" encoding="utf-8"?>
<com.android.systemui.statusbar.SignalClusterView android:orientation="horizontal" android:layout_width="wrap_content" android:layout_height="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android">
<ImageView android:id="@id/no_sim" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<View android:id="@id/no_sim_spacer" android:visibility="gone" android:layout_width="6.0dip" android:layout_height="6.0dip" />
<View android:id="@id/spacer" android:visibility="gone" android:layout_width="0.0dip" android:layout_height="6.0dip" />
[COLOR="Red"] <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<View android:visibility="invisible" android:layout_width="6.0dip" android:layout_height="6.0dip" />
<LinearLayout android:orientation="horizontal" android:id="@id/mobile_separate" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_separate_roaming" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_separate_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</LinearLayout>
<FrameLayout android:id="@id/mobile_combo" android:visibility="gone" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/mobile_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:id="@id/mobile_type" android:layout_width="wrap_content" android:layout_height="wrap_content" />
<ImageView android:layout_gravity="bottom|right|center" android:id="@id/mobile_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>
</FrameLayout>
[/COLOR][COLOR="royalblue"] <FrameLayout android:id="@id/wifi_combo" android:layout_width="wrap_content" android:layout_height="wrap_content">
<ImageView android:id="@id/wifi_signal" android:layout_width="wrap_content" android:layout_height="wrap_content" android:scaleType="center" android:layout_alignParentRight="true" android:layout_centerVertical="true" />
<ImageView android:layout_gravity="bottom|center" android:id="@id/wifi_inout" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</FrameLayout>[/COLOR]
<ImageView android:id="@id/airplane" android:layout_width="wrap_content" android:layout_height="wrap_content" />
</com.android.systemui.statusbar.SignalClusterView>

Please don't just copy and paste this code into your xml file. That will only work if your rom is the same as the one I got this code from. You'll need to change your actual xml yourself.

Now we've put the icons in the right place, we need to change what the WiFi icons actually look like.

Download the attachment, extract it and add the icons to whichever drawable folder your devices uses. This may take a little trial and error. The Xperia Z is a xxhdpi device, so just add them to drawable-xxhdpi. If you're using a different device, you might need to put these icons in a different folder.

You'll be asked if you want to overwrite the existing files. Just say 'yes'!

And that's all the modding we need to do. Now you need to recompile, sort out the signature, the compression rate, etc. Again, refer to your compiling programs instructions.

Push, flash or manually move your modded SystemUI.apk back to your phone, wait for it to think about everything..then marvel as your statusbar looks that little bit neater and your WiFi icon looks like it's part of your signal icon. :D

Enjoy! :cool: