Thursday

How to Add Media Playback Controls to the Nav Bar when Playing Music

9:33 PM Android , android 71 nougat 0 Comments

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



System Requirements: You will need an Android 7.0+ device compatible with the AOSP nav bar customizer. Google Nexus, Pixel, and some Sony/HTC phones are known to work. Most devices that are close to stock Android are likely to have not removed the AOSP nav bar customizer and should work. This means it likely won’t work on your stock LG, Samsung, or Huawei/Honor device. See the “compatibility” section in the first post of this thread. (Note: your device’s OEM may not be listed in that thread. The only way to know for sure if your device is compatible is to try the app out, which we will show you how to do below.)


App 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!

By at
Labels: , , , , , , , , , , ,

Follow Us @soratemplates