Ever since Google first introduced the concept of software navigation keys to Android, users have been asking for a way to customize what keys are available to users. Although custom ROMs have offered this level of customization for years, it’s only in the first Android O Developer Preview do we find an official method from Google to modify the nav bar. However, like many features before it, this nav bar tuner did not appear out of nowhere, and was actually secretly in testing for Android Nougat. It was only recently, though, that we discovered that this hidden nav bar tuner in Android Nougat can actually be accessed without needing root access, a custom ROM, or System UI mods. Hence, a new avenue of rootless customization has opened up for many users, and today we’ll be guiding you through one popular request: how to add media playback controls to the nav bar when playing music (Android 7.0+, no root needed!)

As you can see in the screen capture above, my test device (an unrooted, bootloader locked Google Nexus 6 device on Android 7.0 Nougat) has the standard set of nav bar keys until music playback is initiated in Google Play Music. When music playback begins, two new keys are added to the nav bar: a button to play the previous track and a button to play the next track. These keys stay on the nav bar until I dismiss the Google Play Music notification – that way, I can still use my phone for other apps while retaining these playback control keys until I decide that I’m done listening to music.

Although my screen capture above shows this setup being used for Google Play Music, this can easily be modified to work with virtually every music, podcast, or radio app that’s out there – so long as that app displays a notification during playback and accepts media previous/next keys (both highly likely). This tutorial is slightly modified from my original tutorial aimed at Android O users, however, many, many more users will be able to take advantage of this tutorial as it is not limited to users running the Android O Developer Preview. That being said, let’s get started.

Add Media Playback Keys to the Nav Bar when Playing Music

Requirements

Setup: Custom Navigation Bar

The reason we need Custom Navigation Bar is obvious – this application is what will allow us to modify the nav bar to display these media playback keys. (Technically, we don’t actually need this app for these modifications as we can use shell commands or other Tasker plugins, but to make things easier for our users, we will show how to set this up using this wonderful app.) Notification Listener is needed to monitor what notifications get posted to the status bar, so we know when music playback has started and ended. Finally, Tasker is the automation app that bridges the gap between Notification Listener and Custom Navigation Bar – it uses Notification Listener to detect when music has started/ended and then trigger Custom Navigation Bar to change the nav bar accordingly.

The first thing we need to do is to make sure that it’s even possible to modify the nav bar on your device. If your device is one of the ones listed as compatible in the Custom Navigation Bar thread, then chances are it will be. We can verify by running through the brief tutorial that accompanies this app.

Install the app from the Google Play Store, then open up the app and proceed through the introductory screens. Custom Navigation Bar will ask you to grant it a certain permission called WRITE_SECURE_SETTINGS in order to proceed with using the app. There are two ways you can do this, as stated in the application.

1. If you have a rooted device, Custom Navigation Bar will request superuser access. Grant it, and the app will automatically grant itself this permission.


2. If your device is not rooted, then you will need to grant the permission through ADB. Open up a command prompt/terminal on your machine, and then enter the following command: adb shell pm grant xyz.paphonb.systemuituner android.permission.WRITE_SECURE_SETTINGS

Once you’ve granted the app this permission through either of the two methods above, then the app will proceed with a compatibility test. If your nav bar doesn’t change, then you’re unfortunately out of luck. If your nav bar changes to display a right arrow button, then congrats your device is supported! We can now move on to modifying our nav bar.

Setup: Notification Listener

In order for Notification Listener to intercept notifications, we have to grant it a special permission known as the “notification access” permission. This permission is not granted through a standard permission dialog, but needs to be granted through a special settings menu by the user. Luckily, this is very simple to do. Simply open up the Notification Listener app and the app will bug you to enable this permission. Just press the button and the app will take you to the screen where you can grant the app this permission. Enable notification access for the app.

Tutorial

Once you’ve confirmed that Custom Navigation Bar is compatible with your device and that notification access is enabled for Notification Listener, it’s time to set up this all up. The first thing we need to do is to create a new profile in Custom Navigation Bar that, when enabled, will add a previous/next key to our nav bar. Here are the step-by-step instructions:

1. Open up Custom Navigation Bar and tap on Profiles under the Automation section.


2. Tap on the + icon on the top right to add a new Profile.


3. Tap on the Profile that was just created.


4. Under the Profile section, tap on Name to name the profile. Name it Media Control.


5. Under the “Extra left button” section press Type. Select Keycode as the type.


6. Now under the “Extra left button” section you will see two additional options. Tap on Keycode.


7. Scroll down and find the Media Previous key.


8. Now tap on Icon under “Extra left button.” For the icon select skip previous.


9. Repeat steps 5-8 but for “Extra right button.” This time, however, the keycode will be Media Next and the icon should be skip next.


10. Test your Profile by scrolling back up and checking Enabled. If you see the previous/next nav bar keys at the bottom, then this profile works!

Now that we’ve got the Custom Navigation Bar profile set up, we will create our Tasker Profile that will enable/disable this profile when music is playing. First, we will create the Profile that will trigger when our music/podcast/radio app posted a notification. Here are the step-by-step instructions:

1. Open up Tasker and create a new Profile by tapping on the + icon on the bottom right.


2. Select the Event context.


3. Tap on Plugin.


4. Select the Notification Listener plugin.


5. Select the notification listener action that pops up.


6. Tap on the pencil icon to open up Notification Listener’s configuration.


7. Leave the notification event as posted but under apps select the app(s) that you want to monitor. For instance, I picked Google Play Music here. Tap the checkmark icon in the top right when done.


8. Back in Tasker, press the back arrow key in the top left to go back to Tasker’s main screen.


9. Tasker will ask you to attach a Task to this Profile we just made. Select to create a New Task. Don’t bother naming the Task.


10. Once you’re in Tasker’s Task editing screen, add a new Action by tapping on the + button in the bottom middle.


11. Select Plugin from the Action categories.


12. Choose the Custom Navigation Bar plugin.


13. Tap the pencil icon again which this time will bring us to Custom Navigation Bar’s configuration page.


14. For the action leave it as “Enable profile.” Under Select profile, choose Media Control. Hit the checkmark in the top right when done.


15. Press back, and then back once more until you’re at Tasker’s main screen.

The above Tasker Profile we created will activate the Media Control Custom Navigation Bar profile to add the media playback keys when media playback begins, but now we need to disable the Media Control profile when we dismiss the media app’s notification. Here are the instructions:

1. Create a new Profile and select the Event context.


2. Go to Plugin –> Notification Listener –> Notification Listener.


3. Under “Notification event” this time select Removed. Again select the same app(s) that you want to monitor. I chose Google Play Music here. Tap the checkmark when done.


4. Go back to Tasker’s main screen where it will ask you to add a Task to this new Profile. Add a Task but don’t bother naming it.


5. Once you’re in Tasker’s Task editing screen, add a new Action. Go to Plugin –> Custom Navigation Bar.


6. This time for “Action” select to Disable profile but again choose the Media Control profile. Tap the checkmark button up top when done.


7. Exit out of the Task back to Tasker’s main screen.

When you’ve made both Tasker Profiles, one for when the media app’s notification is posted and another for when those same notification(s) are removed, you’re done. Tasker will now display media playback keys in your nav bar whenever media playback has started, and clear the nav bar of these keys when media playback has ended!

Using Shell Commands

Given how easy it is to use XDA Senior Member paphonb‘s Custom Navigation Bar app, I don’t really see the need for providing detailed step-by-step instructions on how to do this with other Tasker plugins such as SecureTask or AutoTools (or the run shell function in Tasker). However, it is certainly possible, and at the very least I will provide a summary of the commands you need to replicate this setup without the use of paphonb’s app.

The first thing you need to do is install either SecureTask or AutoTools. You will need to grant the WRITE_SECURE_SETTINGS permission to whichever app you pick in order to control the nav bar tuner.

For SecureTask:

adb shell pm grant com.balda.securetask android.permission.WRITE_SECURE_SETTINGS

For AutoTools:

adb shell pm grant com.joaomgcd.autotools android.permission.WRITE_SECURE_SETTINGS

Next, you will need to download the icons that you will use for the previous/next keys. You’ll need the icons in the PNG format, and as for the size, you can determine the size of the icons you need by looking up your device’s display density metrics on Material.io and correlating that with an icon size reference chart. IconsDB.com is a good resource for free icons. Save the icons you will be using as previous.png and next.png in a folder called /NavIcons on the root directory of your storage.

Finally, you will be entering this command to show the media control buttons:

settings put secure sysui_nav_bar "key(88:file:///storage/emulated/0/NavIcons/previous.png),back;home;recent,key(87:file:///storage/emulated/0/NavIcons/next.png)"

where key #88 refers to KEYCODE_MEDIA_PREVIOUS and key #87 refers to KEYCODE_MEDIA_NEXT.

Then to revert your nav bar keys to the default layout (ie. when you swipe away the media playback notification), enter this command:

settings put secure sysui_nav_bar "space,back;home;recent,menu_ime"

In essence, the Tasker Profile setup will be the exact same as Notification Listener’s configuration above won’t change. But if you choose not to use the Custom Navigation Bar app to control the nav bar, then you can use the above two shell commands as an alternative. Just note that, unless you are rooted and using the “run shell” action in Tasker, the process to get these commands into SecureTask or AutoTools is all on you. It’s really not that hard to do, but many users find just using paphonb’s app easier to use so I won’t go into much more detail here.

Conclusion

That’s it for this tutorial. In future tutorials I will show off more potential practical uses of changing your nav bar, especially in a contextual manner using an automation app such as Tasker.

Please support XDA-Developers in whatever way you can! We recently discovered that there were several blogs cut, copy, pasting our original tutorials and other content shared by our users on the forums. These blogs have been trying to take credit for the huge amount of effort we do in compiling these tutorials rather than providing quality content on their own. You won’t find tutorials such as the ones we’ve written in our tutorials category or tutorials from our forums anywhere else.

Follow us on Twitter, Google+, Facebook, or YouTube. Check out our XDA Labs app for a fast way to browse our forums (and consider getting XDA Ad-Free too!) on your mobile device, and check out our recently released XDA Feed app if you own a OnePlus 3 or OnePlus 3T! Thanks, and stay tuned for our next tutorial!

Those of you who are running the first Android O Developer Preview may have toyed around with its hidden navigation bar customizer located in the SystemUI Tuner. This nav bar customizer has actually been around in AOSP for months, but it was thought that the only way to access it on Android Nougat was through a modification of the System UI APK, which, of course, would require root access. It wasn’t until just this week that we discovered that Android Nougat’s hidden nav bar customizer could actually be accessed without needing root access, a custom ROM, or a System UI mod. With this feature, we can change the nav bar icons, swap the keys around, or add additional buttons.

That’s right – it’s possible to modify your navigation bar on a completely stock, unrooted ROM with a locked bootloader. Functionality people thought was limited to Android O is actually accessible to anyone running Android Nougat on Nexus, Pixel, OnePlus, and some Sony, HTC, and Motorola phones. If your device is running software that is close to Google’s software (sorry Samsung and Huawei/Honor users), then chances are your device has the hidden AOSP nav bar customizer that we can use. In this tutorial, I will show you how you can use the nav bar customizer to change the button icons to whatever you want or re-arrange them in whatever order you want.

Google Pixel Nav Bar on the Nexus 6

Reversed Nav Bar on Nexus 6

Modifying the Nav Bar – Setup

There are two ways to modify our nav bar. One is with an app, and the other is through ADB shell commands (which is how the app works). We will be showing you both for completeness, but note that as of right now, you can’t modify the stock nav bar icons through the app until the developer updates his app to include this feature.

The first thing we need to do is to make sure that it’s even possible to modify the nav bar on your device. If your device is one of the ones listed as compatible in the Custom Navigation Bar thread, then chances are it will be. We can verify by running through the brief tutorial that accompanies this app.

Install the app from the Google Play Store (and also sign up for beta testing so we can use its experimental feature to re-arrange the nav bar later on). Next, open up the app and proceed through the introductory screens. Custom Navigation Bar will ask you to grant it a certain permission called WRITE_SECURE_SETTINGS in order to proceed with using the app. There are two ways you can do this, as stated in the application.

1. If you have a rooted device, open up Terminal Emulator on your phone and grant it root access by typing su. Then, enter this command: pm grant xyz.paphonb.systemuituner android.permission.WRITE_SECURE_SETTINGS


2. If your device is not rooted, then you will need to grant the permission through ADB. Open up a command prompt/terminal on your machine, and then enter the following command: adb shell pm grant xyz.paphonb.systemuituner android.permission.WRITE_SECURE_SETTINGS

Once you’ve granted the app this permission through either of the two methods above, then the app will proceed with a compatibility test. If your nav bar doesn’t change, then you’re unfortunately out of luck. If your nav bar changes to display a right arrow button, then congrats your device is supported! We can now move on to modifying our nav bar.

Re-arranging the Nav Bar Buttons

App Method

Now that you’ve set up the app, it’s very, very easy to re-arrange the nav bar buttons. You have to be on the beta testing version of the Custom Navigation Bar app to be able to do this, so go back and make sure you’re on the beta channel before proceeding.

If you’re on the beta version, you’ll see a section called experimental tweaks in the main Settings section. Tap on that and you’ll see options that allow you to replace the existing back, home, and recent keys. You can easily re-arrange your keys here by having the back button change to the overview (recent) button and having the overview (recent) button change to the back button. Or change them in whatever way you want, there’s no real limitations here. After swapping your keys, you can also play around with the layout options in the navigation bar settings menu.

ADB Method

And here’s how to do the same using ADB commands, if you would prefer that. The command that we will be modifying is the Secure setting preference called sysui_nav_bar. This preference is a string that contains the nav bar layout. The default structure of the preference is as follows

space,back;home;recent,space

Where space represents an empty space that separates the nav bar keys from one another, and back, home, and recent represent the 3 default buttons in the nav bar. If we want to swap the back and the recent key, for instance, we would need to modify the string as follows

space,recent;home;back,space

Now, in order to actually modify this string, we need to use the ADB shell command with this syntax

adb shell settings put secure sysui_nav_bar "STRING"

Hence, the command we would send to swap the recent and back keys would look like this

adb shell settings put secure sysui_nav_bar "space,recent;home;back,space"

As you might guess, this is fairly flexible. We can move the keys around however we want by modifying the string value of the preference. We can, for instance, make our flipped nav bar keys left-justified or right-justified by changing where the two spaces are placed:

Left-justified:

adb shell settings put secure sysui_nav_bar "recent;home;back,space,space"

Right-justified:

adb shell settings put secure sysui_nav_bar "space,space,recent;home;back"

But we can also change the nav bar buttons to be something entirely different than the standard back, home, or recent keys, such as sending one of the many KeyEvents. We’ll take advantage of this fact in the next section, where we show you how to change the icons on the nav bar buttons.

Custom Nav Bar Icons

Now, the following section may not seem like a huge deal due to the fact that there are numerous applications on the Play Store that promise to change your navigation bar without root. And they do work – however, many users report that these apps are buggy in certain apps like Chrome, when playing full screen video, or some games. Furthermore, many of these apps require you to enable an Accessibility Service to monitor apps to know when to re-color the nav bar, which may reduce performance. Finally, if you rely on these apps for too long, then you may be suddenly surprised to see them stop working when Android O rolls out because the next Android version is killing the ability of these apps to draw on top of System UI elements.

The method that we are using is based on Google’s implementation of the nav bar tuner, so it has none of these issues. However, there is one issue currently that we want to be upfront about: if you choose to follow this method to modify your home button, then the long-press home button action will no longer work meaning you can’t quickly access Google Assistant from the home button anymore. If you’re okay with that, then here’s how to change the icons on the nav bar.

The first thing you will need to do is download the icons that you want to replace your default nav bar keys’ icons with. I’ll be providing download links for you to grab the Google Pixel nav bar icons, but it’s up to you to find your own icons if you want anything else. You’ll need the icons in the PNG format, and as for the size, you can determine the size of the icons you need by looking up your device’s display density metrics on Material.io and correlating that with an icon size reference chart.

Credits for the extracting these Google Pixel nav bar icons goes to XDA Senior Member dariomrk. Download this archive if you have a 1920x1080p display and this one if you have a 2560x1440p display. Extract the contents of either zip file into a folder called “NavIcons” on the root directory of your storage.

Once you have the icons in the appropriate place, enter the following ADB shell command (warning, it’s a long one):

adb shell settings put secure sysui_nav_bar "space,key(4:file:///storage/emulated/0/NavIcons/back.png);key(3:file:///storage/emulated/0/NavIcons/home.png);key(187:file:///storage/emulated/0/NavIcons/recents.png),space"

What this command does is replace back, home, and recent keys with KeyEvents that do the same function. In particular, back is replaced with KEYCODE_BACK, home is replaced with KEYCODE_HOME, and recent is replaced with KEYCODE_APP_SWITCH. These key codes perform the exact same function, but because we are using KeyEvents, we can specify what icon we want to use for them. In this case, we are pointing towards the back.png, home.png, and recents.png that we saved in /NavIcons.

However, by replacing the stock keys with KeyEvents, we lose the long-press home ability because currently there is no way to recognize long-press events of simulated key inputs.

I realize that right now, this method might not seem ideal or easy to implement, but at the time of this writing the Custom Navigation Bar app has not been updated to support adding your own icons. For now, my method (which is exactly how that app works, and when the app does get updated, it will face the same limitation) is how you can get whatever custom icons you want on your nav bar.

That’s it for this tutorial. In future tutorials I will show off potential practical uses of changing your nav bar, especially in a contextual manner using an automation app such as Tasker. Follow the tutorials category on XDA to keep up to date with all the latest tips and tricks that we publish.