How to Add Custom Icons to the Navigation Bar in Android O

If you’ve been following our coverage of Android O, then you might have seen our tutorials on how to modify the navigation bar to toggle picture-in-picture mode, enable media control keys while playing music, and today how to add forward/previous buttons to quickly browse through your e-mails. The possible uses of a customizable navigation bar are huge, and our first three tutorials only scrape the surface. But while we do have a couple of more useful tutorials to share with our readers, there’s one thing we had to cover before we can move on to our next tutorials: how to add custom icons to the navigation bar keys in Android O.

Android O’s new navigation bar customizer, accessible through SystemUI Tuner, allows you to set a keycode to a navigation key. (Reminder: in order to access SystemUI Tuner, you have to pull down the status bar and long-press on the gear icon in the top right until you see a toast message telling you that SystemUI Tuner is now accessible.) Because there are so many keycodes, Android O does not offer an icon for each keycode you can place on the nav bar, but instead allows you to select from 6 icons: circle, plus, minus, left, right, and menu.

Since we figured out how to manually set keycodes from shell commands, we also wanted to figure out what icon possibilities were available. We first discovered that the two navigation bar keys are defined as two system properties under the Settings.Secure class. These two properties are named sysui_nav_bar_left and sysui_nav_bar_right, corresponding to the left nav bar key and the right nav bar key respectively. The properties take a string value, one of either clipboard, menu_ime, or key(KEYCODE_KEY:ICON_RESOURCE).

Using a test Google Pixel device running the Android O Developer Preview, we discovered that the 6 icons shown by default correspond to particular content resources contained in the SystemUI, represented by a URI.

1. com.android.systemui/2131230944 (circle)
2. com.android.systemui/2131230848 (plus)
3. com.android.systemui/2131231002 (minus)
4. com.android.systemui/2131230907 (left)
5. com.android.systemui/2131231004 (right)
6. com.android.systemui/2131230913 (menu)

Since these values were pulled from the Google Pixel, it’s possible that these icon resources won’t be the same on other Google devices running the Android O Developer Preview. But since the icon resource is a content URI, we are able to replace this with a file URI scheme to point to any icon stored on our device.

How to set Custom Nav Bar Icons in Android O

A file URI looks like the following:

file:///storage/emulated/0/PATH/TO/FILE

Combining this with our knowledge of setting custom keycodes above, we can now set any arbitrary image as our icon to be shown in the nav bar. For instance, if I want to set my left navigation bar key to KEYCODE_DPAD_DOWN (#20) with a custom down arrow icon saved as down.png and my right navigation bar key to KEYCODE_DPAD_UP (#19) with a custom up arrow icon saved as up.png, both icons stored on the root of my internal storage, my commands would look like these:

settings put secure sysui_nav_bar_left key(20:file:///storage/emulated/0/down.png)
settings put secure sysui_nav_bar_right key(19:file:///storage/emulated/0/up.png)

You can enter these commands using either an ADB shell or by granting the WRITE_SECURE_SETTINGS permission to SecureTask and then using Tasker to trigger nav bar changes based on certain conditions, as I’ve outlined in my previous tutorials (and will also showcase in another tutorial).

How to get Custom Icons for your Nav Bar

Of course, given the size of your nav bar, you can’t just place any image you download off of the Internet. The image needs to be the right size, otherwise it will either appear too small or most likely appear way too blown up. Getting your own image in the proper size can be a challenge if you don’t already have experience with PhotoShop or other image manipulation software, but luckily there are websites out there that offer many free icons that we can use.

The first thing you’ll need to do is determine your device’s display metrics, which is something you may already know, but in case you don’t, you can look it up on Material.io. Next, you’ll need to correlate your display density with an icon reference chart to determine what size icons you’ll need. Finally, use the free icons database to download the icon you’re looking for in the right size.

Make sure you save the icons you’ll be using in a particular folder such as /NavIcons, and name the icons something simple you can easily reference in your commands.

---

We hope you find this tutorial useful! For me, personally, one of my major qualms with the navigation bar customizer was the inability to select custom icons for nav keys so I would always immediately know what my nav keys are doing. But now that we’ve figured out how to place our own custom keys and custom icons on our own conditions, we can start making some real use out of our navigation bar.