Friday, April 21, 2017

How to Add Left/Right Keyboard Cursors to the Nav Bar during Text Input

Customizing the navigation bar has been a staple of custom ROMs ever since Google introduced the Galaxy Nexus with Android 4.0 Ice Cream Sandwich (we don’t talk about the Motorola Xoom and Honeycomb around these parts). Although a few OEMs offer some kind of software key customization on their phones, it’s only with the first Android O Developer Preview that Google is officially including nav bar customization. However, users on our forums discovered that Google’s nav bar tuner was actually hidden in AOSP since Android Nougat, but it was only this week that we discovered that this hidden nav bar tuner could be accessed through shell commands without needing root, custom ROMs, or System UI mods. Is it now possible to implement popular custom ROM features like adding keyboard cursors to the nav bar?

You bet, as this revelation has opened the flood gates for rootless customization of the nav bar, and at the forefront is XDA Senior Member paphonb who developed an application called Custom Navigation Bar to help users modify the nav bar without having to run shell commands. His application is quite feature-filled; for instance, it provides a Tasker plugin so you can contextually change the nav bar. Since many users are not familiar with Tasker, I am writing these tutorials to help users take advantage of nav bar customization.

In this tutorial, I will show you how to add left/right keyboard cursors to the nav bar while the keyboard is showing (Android 7.0+, no root needed!) This tutorial is similar to the one I wrote for Android O users, but this tutorial will be much more accessible since it works on Android Nougat.

Yes, yes, we know that Swiftkey and Gboard, among others have keyboard cursors built in to the keyboard. Not every keyboard does, though, and in my opinion it’s more convenient using buttons on the nav bar rather than the buttons in Swiftkey (that take up space) or the ones in Gboard (which require imprecise swipes over the space bar or switching to a special mode).

Recommended Reading 1: How to change your Nav Bar Icons or Re-arrange the Buttons without Root

Recommended Reading 2: How to Add Media Playback Controls to the Nav Bar when Playing Music

 Add Left/Right Keyboard Cursors to the Nav Bar during Text Input

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: 

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.) AutoInput Beta is a Tasker plugin that will help us detect when the keyboard is showing (technically, the plugin will detect when a text input box is showing rather than the keyboard itself showing, but this is the closest we can get). Finally, Tasker bridges the gap between AutoInput Beta and Custom Navigation Bar.

Setup: Custom Navigation Bar

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: AutoInput Beta

In order for AutoInput Beta to detect when a text input box is showing, we have to enable its Accessibility Service. All you have to do is go to Settings –> Accessibility (depending on your device, it may be within another submenu) and find AutoInput in the list of Services. Tap on it then hit the toggle up top to enable the Accessibility Service.

Tutorial

Once you’ve confirmed that Custom Navigation Bar is compatible with your device and that the Accessibility Service is enabled for AutoInput Beta, 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 the left/right key to our nav bar. Here are the step-by-step instructions:

  1. Open up the Custom Navigation Bar app and tap on Profiles under the Automation section.
  2. Tap on the + icon in 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 and name this profile Keyboard Cursors.
  5. Under “Extra left button” tap on Type. Set the Type to Keycode.
  6. There should be two new options under “Extra left button” called Keycode and Icon. Tap on Keycode.
  7. Scroll down and select Dpad Left.
  8. Now tap on Icon under “Extra left button” section.
  9. Select the chevron left icon.
  10. Repeat steps 5-9 for “extra right button.” However, set the Keycode to Dpad Right and set the Icon to chevron right.
  11. Back up top under the Profile section, tap on Enabled to test this Profile out. If you see a left and right arrows pop up in your nav bar, then this is working correctly.

Now that we’ve got the Custom Navigation Bar Profile set up, we’re ready to set up our Tasker Profile which will enable/disable this profile when text input is detected/disappears. All of this will be done in one single Profile. Here are the instructions:

  1. Open up Tasker and create a new Profile by tapping on the + icon in the bottom right.
  2. Select the Event context.
  3. Choose Plugin –> AutoInput –> UI Action. Tap the pencil icon to open AutoInput configuration.
  4. Once in AutoInput UI Action configuration, tap on Action Types. Select Input Element Focused and Input Element Focus Lost. Ignore the Element Text section. Tap on the checkmark icon up top when done.
  5. Go back to Tasker’s main screen, and Tasker will ask you to attach a Task to this Profile. Choose to create a New Task. Don’t bother naming the Task.
  6. Add an Action to this Task by tapping the + icon in the bottom middle.
  7. Go to Task –> If. Set it to If %aifocus ~ true. The ~ is “matches.”
  8. For the second Action, go to Plugin –> Custom Navigation Bar. Hit the pencil icon to open the configuration. For the Action select Enable Profile. Under Select Profile pick the Keyboard Cursors profile that we made earlier.
  9. For the third Action, go to Task –> Else.
  10. For the fourth Action, go to Plugin –> Custom Navigation Bar. Hit the pencil icon to open the configuration. For the Action select Disable Profile. Under Select Profile pick the Keyboard Cursors profile once again.
  11. For the last Action, go to Task –> End If.
  12. Press back and exit the Task editing screen.

Once you’ve done all of the steps above, we’re done! Go ahead and try it out by opening any text input box and seeing if your nav bar changes to include the left/right keyboard cursors. If it isn’t working, double check that AutoInput’s Accessibility Service is enabled.

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 left.png and right.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(21:file:///storage/emulated/0/NavIcons/left.png),back;home;recent,key(22:file:///storage/emulated/0/NavIcons/right.png)"

where key #21 refers to KEYCODE_DPAD_LEFT and key #22 refers to KEYCODE_DPAD_RIGHT.

Then to revert your nav bar keys to the default layout (ie. the text input focus has been lost), 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 the setup above, except in place of the two Custom Navigation Bar Tasker Actions, you will use SecureTask/AutoTools/Run Shell. 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. I will occasionally post future tutorials when I find more practical uses of changing your nav bar, especially in a contextual manner using an automation app such as Tasker. If you have any clever ideas but don’t know how to implement it yourself, do send us a message using our Tip Form or e-mail us directly, and we’ll do our best to figure it out!

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!

HostGator Web Hosting

0 comments:

Post a Comment