[MOD] [GUIDE] Status Bar Network Traffic (Separate In/Out)

Search This thread

Morningstar

Senior Member
Apr 2, 2006
1,390
2,531
CA
www.alliance-rom.com
Hello XDA,

This guide will show you how to add network traffic data to your status bar, with customization options in Settings. There are already several similar guides on XDA, but all of the one I've seen only give you one overall speed, whereas this gives you separate in and out speeds.

Everything needed to make this mod work was pulled from CM12, so full credit goes to the Cyanogenmod Team and Temasek, who I believe contributed it to CM. Out of respect, I have left the Temasek folder structure intact, but you may alter it as you see fit...
I have tested this on Kit-Kat and Lollipop TouchWiz ROMs, and on AOSP Lollipop ROMs, but it should work on just about anything. If it does not work on your ROM for some reason, let me know and I'll see if I can help you figure it out.

***Before proceeding, MAKE A BACKUP***
***I am not responsible for any loss of data or ***
***damage to your device resulting from this mod.***​

This mod assumes that you have working knowledge of how to decompile, edit, and recompile apps. If you do not, there are plenty of threads on XDA that will teach you. This is not one of them.

Now, let's get down to business....

We are going to be working with two apps, SystemUI and Settings (or SecSettings, depending on your ROM). Go ahead and decompile both of them, then download the attached zip file, and extract it to a location of your choice.

SystemUI
-Begin by copying the smali files from the attached zip to their respective location in your decompiled SystemUI. The correct folder structure is in the zip file, so just make sure you're putting them in the same place in your apk.
-Do the same thing for the .png files in drawable-xxhdpi.

***Note, if your device has a resolution lower than xxhdpi, you will probably need to resize the included images and place them in the drawable folder corresponding to your device's resolution***​

-Next, open up the values folder in your decompiled SystemUI. In the corresponding folder in the zip file, you will see four xml files: colors, dimens, ids, and styles. Open them up one at a time, and add the lines to the same files in your values folder.
-Finally, go to layout/status_bar.xml in your decompiled SystemUI, and add the following line wherever you choose:
Code:
<com.android.systemui.statusbar.policy.NetworkTraffic android:id="@id/networkTraffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="false" />

***Note: Where you place this line determines where on your status bar it will be shown, so pay attention***​

-Next, recompile your SystemUI, and once it's done, go ahead and decompile the one you just compiled (say that ten times fast).
-Go to res/values/public.xml, keep it open in a separate window, then open up smali/com/android/systemui/statusbar/policy/NetworkTraffic.smali. You are going to search the smali file for the IDs on the left, then search your public.xml for the matching string on the right, and replace the IDs in the smali with the corresponding ID from your public.xml. To make things simpler, I have also included a list of the IDs and what they correspond to in the zip file...
Code:
0x7f0c00c9    <public type="dimen" name="net_traffic_single_text_size"
0x7f0c00ca    <public type="dimen" name="net_traffic_multi_text_size"
0x7f02042a    <public type="drawable" name="stat_sys_network_traffic_updown"
0x7f020429    <public type="drawable" name="stat_sys_network_traffic_up"
0x7f020428    <public type="drawable" name="stat_sys_network_traffic_down"
-Once you have replaced all the IDs, recompile your SystemUI, push it back to your phone, and get ready to do Settings!


Settings
-This will be almost the same as SystemUI....Begin by copying the smali files from the zip to the corresponding locations in your decompiled Settings. Again, be sure to keep the folder structure intact.
-Next up, copy network_traffic.xml from the zip to res/xml, dialog_color_picker.xml and seek_bar_preference to res/layout, add the lines in the five files in values to the corresponding files in your res/values, and finally copy ic_action_set and ic_settings_backup.png to res/drawable-xxhdpi.

***Note: You don't have to worry about resizing ic_settings_backup if you're on a lower resolution device, as you'll never actually see it. It was part of the mod when I pulled it from CM12, so that's why it's here...***
***If you're on a lower resolution than xxhdpi, ic_action_set will need to be resized, or else it will be quite large (though still perfectly functional) in the color picker window.***​

-Next, recompile your Settings, then immediately decompile it again (any guesses as to what comes next?)
-Open up res/values/public.xml in your decompiled Settings, and then navigate to the smali files you copied earlier. Again, you are going to search the smali for the IDs below, then search your public.xml for the string next to the ID, then replace the ID in the smali with the corresponding ID from your public.xml...

NetworkTraffic.smali
Code:
0x7f0e000f    <public type="integer" name="maskUp"
0x7f0e0010    <public type="integer" name="maskDown"
0x7f0e0011    <public type="integer" name="maskUnit"
0x7f0e0012    <public type="integer" name="maskPeriod"
0x7f09188a    <public type="string" name="network_traffic_color_reset"
0x7f09188b    <public type="string" name="network_traffic_color_reset_message"
0x7f091677    <public type="string" name="ok"
0x7f090198    <public type="string" name="cancel"
0x7f0700ef    <public type="xml" name="network_traffic"
0x7f09188a    <public type="string" name="network_traffic_color_reset"
0x7f02021d    <public type="drawable" name="ic_settings_backup"

SeekBarPreference.smali
Code:
0x7f0b0696    <public type="id" name="seekBarPrefBarContainer"
0x7f040229    <public type="layout" name="seek_bar_preference"
0x7f0b0694    <public type="id" name="seekBarPrefValue"
0x7f0b0693    <public type="id" name="seekBarPrefUnitsRight"
0x7f0b0695    <public type="id" name="seekBarPrefUnitsLeft"

ColorPickerDialog.smali
Code:
0x7f04022b    <public type="layout" name="dialog_color_picker”
0x7f091920    <public type="string" name="dialog_color_picker"
0x7f0b069f    <public type="id" name="color_picker_view"
0x7f0b06a2    <public type="id" name="old_color_panel"
0x7f0b069a    <public type="id" name="new_color_panel"
0x7f0b069b    <public type="id" name="white_panel"
0x7f0b069d    <public type="id" name="black_panel"
0x7f0b069c    <public type="id" name="cyan_panel"
0x7f0b069e    <public type="id" name="red_panel"
0x7f0b06a0    <public type="id" name="green_panel"
0x7f0b06a1    <public type="id" name="yellow_panel"
0x7f0b06a5    <public type="id" name="hex"
0x7f0b06a6    <public type="id" name="enter"
0x7f0b069a    <public type="id" name="new_color_panel"
[STRIKE]0x7f020035    <public type=“drawable” name=“ic_action_set”[/STRIKE]
*** NOTE: I made a mistake with 'ic_action_set' above. It is not ***
*** referenced in the smali, only in layouts. If I mentioned it in the ***
*** text file in the zip, please disregard it there as well. ***​

-Finally, paste the following line into the xml corresponding to the Settings Category you wish the options to be listed under. These will either be in res/xml or res/layout. Personally, I've placed mine at the end of display_settings.xml.
Code:
<PreferenceScreen android:title="@string/network_traffic_title" android:key="network_traffic_state " android:summary="@string/network_traffic_summary" android:fragment="com.android.settings.temasek.NetworkTraffic" />
-Once you're done, recompile you Settings.apk, push back to your phone, set permissions, reboot, and you should be all set!

If I've left anything out, or if you have any questions on any part of the process, please feel free to ask!
Enjoy!
 

Attachments

  • Screenshot_2015-01-20-13-22-22.jpg
    Screenshot_2015-01-20-13-22-22.jpg
    221.5 KB · Views: 40,831
  • Screenshot_2015-01-20-13-22-33.jpg
    Screenshot_2015-01-20-13-22-33.jpg
    221.3 KB · Views: 40,078
  • Screenshot_2015-02-07-16-03-57.png
    Screenshot_2015-02-07-16-03-57.png
    89.1 KB · Views: 40,363
  • traffic.zip
    95.6 KB · Views: 16,456
Last edited:

lisbon2004

Senior Member
Sep 13, 2008
258
63
This is a great post, but i did not imagine it would be so much work (even having to recompile)...

there's a great tool (free) which i use over 4 years, does exactly the same thing and does not require root:
Network Monitor Mini by KF Software House.

it will run not in the status bar, but just below it. if you make the label transparent, decrease font size and change the color to something more visible, it will be just perfect.

f3d76ef0d1dc.gif
 
Last edited:

dahawthorne

Senior Member
Nov 15, 2014
2,135
1,927
Brighton
Network Monitor Mini Pro

I've been using Network Monitor Mini Pro for maybe a couple of years, and Pro has an option to display upload & download speeds in the status bar. You'll see it in the middle of the status bar - size, width, font, position all configurable.

I don't have time or expertise to follow the decomple/recompile route, but respect to Morningstar for the post.
 
Last edited:
  • Like
Reactions: phubarr

sawixso81

Senior Member
Jan 25, 2015
714
914
Hey OP have a question for you I havent tried this yet but my said rom I am running has the network deal like this by thanhfhuongf(built into rom) but I was actually going to use your guide to reverse the mod back to stock, needless to say I managed to get it to how I want network indicator gone and regular 4g/lte icon back but the problem is the indicator arrows do not move I have web service able to browse web and download but no arrow movement Im thinking it has to with my icons because I did take from another stock systemUI and copyed/paste into my Current systemUI those icons and later on noticed that the original Icon was 54x54 in size where as my modded systemUI was bigger in size but any way if you can assist me give me a pm,thanks and I do plan on giving this a try I like the looks of this one better if I decide to give it ago.:highfive:
 

Gunthermic

Retired Forum Moderator
Mar 19, 2011
3,534
12,584
Awesome stuff morningstar. Thanx for sharing and taking the time to make this guide.

Sent from my SCH-I545 using Xparent BlueTapatalk 2
 
  • Like
Reactions: Morningstar

am_OS

New member
Dec 8, 2014
2
2
I started from scratch (noob here) and it was worth my time. I read forums on how to decompile and compile an apk and just followed carefully the instructions given plus some patience. Thank you @Morningstar for your effort.


Sent from my GT-I9505 using XDA Free mobile app
 

Attachments

  • 1423498232407.jpg
    1423498232407.jpg
    34 KB · Views: 1,598

Top Liked Posts

  • There are no posts matching your filters.
  • 82
    Hello XDA,

    This guide will show you how to add network traffic data to your status bar, with customization options in Settings. There are already several similar guides on XDA, but all of the one I've seen only give you one overall speed, whereas this gives you separate in and out speeds.

    Everything needed to make this mod work was pulled from CM12, so full credit goes to the Cyanogenmod Team and Temasek, who I believe contributed it to CM. Out of respect, I have left the Temasek folder structure intact, but you may alter it as you see fit...
    I have tested this on Kit-Kat and Lollipop TouchWiz ROMs, and on AOSP Lollipop ROMs, but it should work on just about anything. If it does not work on your ROM for some reason, let me know and I'll see if I can help you figure it out.

    ***Before proceeding, MAKE A BACKUP***
    ***I am not responsible for any loss of data or ***
    ***damage to your device resulting from this mod.***​

    This mod assumes that you have working knowledge of how to decompile, edit, and recompile apps. If you do not, there are plenty of threads on XDA that will teach you. This is not one of them.

    Now, let's get down to business....

    We are going to be working with two apps, SystemUI and Settings (or SecSettings, depending on your ROM). Go ahead and decompile both of them, then download the attached zip file, and extract it to a location of your choice.

    SystemUI
    -Begin by copying the smali files from the attached zip to their respective location in your decompiled SystemUI. The correct folder structure is in the zip file, so just make sure you're putting them in the same place in your apk.
    -Do the same thing for the .png files in drawable-xxhdpi.

    ***Note, if your device has a resolution lower than xxhdpi, you will probably need to resize the included images and place them in the drawable folder corresponding to your device's resolution***​

    -Next, open up the values folder in your decompiled SystemUI. In the corresponding folder in the zip file, you will see four xml files: colors, dimens, ids, and styles. Open them up one at a time, and add the lines to the same files in your values folder.
    -Finally, go to layout/status_bar.xml in your decompiled SystemUI, and add the following line wherever you choose:
    Code:
    <com.android.systemui.statusbar.policy.NetworkTraffic android:id="@id/networkTraffic" android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="false" />

    ***Note: Where you place this line determines where on your status bar it will be shown, so pay attention***​

    -Next, recompile your SystemUI, and once it's done, go ahead and decompile the one you just compiled (say that ten times fast).
    -Go to res/values/public.xml, keep it open in a separate window, then open up smali/com/android/systemui/statusbar/policy/NetworkTraffic.smali. You are going to search the smali file for the IDs on the left, then search your public.xml for the matching string on the right, and replace the IDs in the smali with the corresponding ID from your public.xml. To make things simpler, I have also included a list of the IDs and what they correspond to in the zip file...
    Code:
    0x7f0c00c9    <public type="dimen" name="net_traffic_single_text_size"
    0x7f0c00ca    <public type="dimen" name="net_traffic_multi_text_size"
    0x7f02042a    <public type="drawable" name="stat_sys_network_traffic_updown"
    0x7f020429    <public type="drawable" name="stat_sys_network_traffic_up"
    0x7f020428    <public type="drawable" name="stat_sys_network_traffic_down"
    -Once you have replaced all the IDs, recompile your SystemUI, push it back to your phone, and get ready to do Settings!


    Settings
    -This will be almost the same as SystemUI....Begin by copying the smali files from the zip to the corresponding locations in your decompiled Settings. Again, be sure to keep the folder structure intact.
    -Next up, copy network_traffic.xml from the zip to res/xml, dialog_color_picker.xml and seek_bar_preference to res/layout, add the lines in the five files in values to the corresponding files in your res/values, and finally copy ic_action_set and ic_settings_backup.png to res/drawable-xxhdpi.

    ***Note: You don't have to worry about resizing ic_settings_backup if you're on a lower resolution device, as you'll never actually see it. It was part of the mod when I pulled it from CM12, so that's why it's here...***
    ***If you're on a lower resolution than xxhdpi, ic_action_set will need to be resized, or else it will be quite large (though still perfectly functional) in the color picker window.***​

    -Next, recompile your Settings, then immediately decompile it again (any guesses as to what comes next?)
    -Open up res/values/public.xml in your decompiled Settings, and then navigate to the smali files you copied earlier. Again, you are going to search the smali for the IDs below, then search your public.xml for the string next to the ID, then replace the ID in the smali with the corresponding ID from your public.xml...

    NetworkTraffic.smali
    Code:
    0x7f0e000f    <public type="integer" name="maskUp"
    0x7f0e0010    <public type="integer" name="maskDown"
    0x7f0e0011    <public type="integer" name="maskUnit"
    0x7f0e0012    <public type="integer" name="maskPeriod"
    0x7f09188a    <public type="string" name="network_traffic_color_reset"
    0x7f09188b    <public type="string" name="network_traffic_color_reset_message"
    0x7f091677    <public type="string" name="ok"
    0x7f090198    <public type="string" name="cancel"
    0x7f0700ef    <public type="xml" name="network_traffic"
    0x7f09188a    <public type="string" name="network_traffic_color_reset"
    0x7f02021d    <public type="drawable" name="ic_settings_backup"

    SeekBarPreference.smali
    Code:
    0x7f0b0696    <public type="id" name="seekBarPrefBarContainer"
    0x7f040229    <public type="layout" name="seek_bar_preference"
    0x7f0b0694    <public type="id" name="seekBarPrefValue"
    0x7f0b0693    <public type="id" name="seekBarPrefUnitsRight"
    0x7f0b0695    <public type="id" name="seekBarPrefUnitsLeft"

    ColorPickerDialog.smali
    Code:
    0x7f04022b    <public type="layout" name="dialog_color_picker”
    0x7f091920    <public type="string" name="dialog_color_picker"
    0x7f0b069f    <public type="id" name="color_picker_view"
    0x7f0b06a2    <public type="id" name="old_color_panel"
    0x7f0b069a    <public type="id" name="new_color_panel"
    0x7f0b069b    <public type="id" name="white_panel"
    0x7f0b069d    <public type="id" name="black_panel"
    0x7f0b069c    <public type="id" name="cyan_panel"
    0x7f0b069e    <public type="id" name="red_panel"
    0x7f0b06a0    <public type="id" name="green_panel"
    0x7f0b06a1    <public type="id" name="yellow_panel"
    0x7f0b06a5    <public type="id" name="hex"
    0x7f0b06a6    <public type="id" name="enter"
    0x7f0b069a    <public type="id" name="new_color_panel"
    [STRIKE]0x7f020035    <public type=“drawable” name=“ic_action_set”[/STRIKE]
    *** NOTE: I made a mistake with 'ic_action_set' above. It is not ***
    *** referenced in the smali, only in layouts. If I mentioned it in the ***
    *** text file in the zip, please disregard it there as well. ***​

    -Finally, paste the following line into the xml corresponding to the Settings Category you wish the options to be listed under. These will either be in res/xml or res/layout. Personally, I've placed mine at the end of display_settings.xml.
    Code:
    <PreferenceScreen android:title="@string/network_traffic_title" android:key="network_traffic_state " android:summary="@string/network_traffic_summary" android:fragment="com.android.settings.temasek.NetworkTraffic" />
    -Once you're done, recompile you Settings.apk, push back to your phone, set permissions, reboot, and you should be all set!

    If I've left anything out, or if you have any questions on any part of the process, please feel free to ask!
    Enjoy!
    6
    Thanks - I didn't know about this one. It emphasises my point - why jump through risky and difficult hoops to get a result that is already available?

    Sometimes the answer to that question is just "because it's there". A trite answer but true. Sometimes we mod when we could achieve the same results without messing about with code. Some of the mods I put on my phone I could achieve with Xposed but there's something so...satisfying...about doing it myself.

    But that's just me. I'm weird that way.

    A more practical answer could be that modding can sometimes give you more control. Looking at the two apps mentioned, they both put the traffic information on the status bar by using overlays. Personally I'd want the information next to the WiFi and signal icons, and to move dynamically. So the location changes according to whether I have the WiFi on or not.
    To be fair I haven't tried the apps yet and I could be completely wrong. Maybe they can allow for this and I'm going to look like a prat. But, if I'm right, it proves my point. Modding takes longer but it can give you more flexibility.

    It's nice to have the option to do both though.

    Oh, as for risk, there isn't any. If you have a custom recovery and you know what you're doing, you can easily fix any FC's this will give you.
    4
    I get tired to patch apks by hand after every update, so I managed to write this ugly bash script to apply @Morningstar's Status Bar Network Traffic notification patch. I use it on BlueFlame4's CyanogenMod 12.1 for Elephone P8000. I believe it should work for every apk that you can patch by hand.

    Check attached screenshots. Note that in the default configuration SystemUI patcher swaps status and network icon groups in the status bar so the traffic rate is the leftmost in the right aligned group, thus status icons don't jump left and right when traffic rate numbers change:
    Code:
    [<clock>]<notifications>...[<clock>]...<status icons><network><battery>[<clock>]
    ↓
    [<clock>]<notifications>...[<clock>]...<network><status icons><battery>[<clock>]
    You can customize it in trafficcm-systemui file.

    I summarized here what you have to do.

    Prepare.
    1. Create an arbitrary working directory and reside there. Put there
    2. Unpack archives and symlink apktool to a simple name:
      Code:
      $ tar xzf trafficcm.tar.gz
      $ unzip -o traffic.zip && rm -rf __MACOSX
      $ ln -s apktool_*.jar apktool.jar
    3. (Optional.) Edit trafficcm-settings and trafficcm-systemui files if you want to customize anything.

    Go.
    1. Go to Recovery and backup /system.
    2. Create a folder named after current build or date, say '20160609'. Became root on your phone and download these 3 files from the phone to the folder you created:
      • /system/framework/framework-res.apk
      • /system/priv-app/Settings/Settings.apk
      • /system/priv-app/SystemUI/SystemUI.apk
    3. Launch scripts, providing directory where you have downloaded apks as the only parameter:
      Code:
      $ ./trafficcm 20160609
      ...
      (Merely ignore '... has no default translation' warnings.)
    4. In 'patched' dir should appear patched, yet unsigned Settings-20160609.apk and SystemUI-20160609apk. Upload them somewhere to the user area of your phone.
    5. Sign uploaded apks with ZipSigner.
    6. Became root, remount /system for writing, replace original apks and reboot.
    7. If you're lucky you have a nice traffic rate notification which you can customize in System Settings → Personal → Status bar → Network traffic.
    3
    Thanks Morningstar for this mod. I spent a few hours learning how to deal with apks just to get this counter :) I use latest CM 12.1 for P8000 by BlueFlame4, everything is nice and smooth.

    Two lines are displayed perfectly out of the box. In single line mode, however, text appears unaligned,

    single-top.png


    so you might want to add android:gravity="center|end" attribute to your NetworkTraffic entry:
    Code:
    <com.android.systemui.statusbar.policy.NetworkTraffic android:id="@id/networkTraffic" [B]android:gravity="center|end"[/B] android:layout_width="wrap_content" android:layout_height="fill_parent" android:singleLine="false" />

    This breaks nothing I guess, so Morningstar would you add this to OP?


    And one more, I put this NetworkTraffic entry to signal_cluster_view.xml so counter is displayed on expanded status bar as well. Text appeared shifted down,

    both.png


    this is due to android:layout_height="wrap_content" in include in system_icons.xml. Replacing it with android:layout_height="fill_parent" solves the problem:

    Code:
    <include android:id="@id/signal_cluster" android:layout_width="wrap_content" [I]android:layout_height="wrap_content"[/I] android:layout_marginStart="2.5dip" layout="@layout/signal_cluster_view" />

    Code:
    <include android:id="@id/signal_cluster" android:layout_width="wrap_content" [B]android:layout_height="fill_parent"[/B] android:layout_marginStart="2.5dip" layout="@layout/signal_cluster_view" />

    That's it. Thanks :)
    3
    That's always an option, but I prefer to use in-built services rather than external apps whenever possible, as it results in better performance and less overhead.