Customize the Color of the Navigation Bar on Android

Edited by Jay

One of Android's greatest strengths is the level of customization users can make. Tweaking the look and feel of your phone or tablet is a significant factor when it comes to personalization. The lock and home screen, for instance, are two areas most users ad a personal touch to as soon as they take ownership of a new device. The Navigation bar (back, home, recent apps buttons), on the other hand, is something many users overlook. With its location and frequency of use, the navigation bar is an area worth adding some personal flair to.

Was this helpful? Yes | No| I need help

The good news is, we can customize the navigation bar on Android without root access. With the use of a neat little app and some creativity, users can change the color, as well as add images and Emoji to their navigation bar.

Was this helpful? Yes | No| I need help

In the following VisiHow tutorial, we're going to walk through the steps for customizing the color of your navigation bar on Android. For this guide, we used a Google Pixel running Android 8.1.0 and an app called Navbar Apps. Below we show how to use the features available in the free version on Navbar Apps. If you enjoy the application and would like to remove the ads, please consider supporting the developer by upgrading to the paid version.

Was this helpful? Yes | No| I need help

Install Navbar Apps for Android

  1. 1
    On the home screen, swipe upward to access your app drawer.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    From your app drawer, tap the "Play Store" icon.
    Advertisement
    Was this step helpful? Yes | No| I need help
  3. 3
    Once inside the Play Store, type; "navbar app" into the search field
    .
    When the results return, tap the first link.
    Was this step helpful? Yes | No| I need help
  4. 4
    On Navbar Apps' information page, tap the green "INSTALL" button.
    Was this step helpful? Yes | No| I need help
  5. 5
    Once the application is fully installed on your device, tap "OPEN" and continue to the next section of this guide.
    Was this step helpful? Yes | No| I need help

Use the Color from an Active App

One of Navbar Apps' cool features is the ability to match your navigation bar's color to the color of an active app.

  1. 1
    To use the Active App' feature, we first have to enable detection of running apps from the Accessibility settings
    .
    Tap the orange "Enable" link in the lower right corner.
    Advertisement
    Was this step helpful? Yes | No| I need help
  2. 2
    Under Download services", tap "Navbar Apps".
    Was this step helpful? Yes | No| I need help
  3. 3
    Next, toggle the switch in the top right corner, then tap "OK" when the pop-up box appears.
    Was this step helpful? Yes | No| I need help
  4. 4
    Head back to Navbar apps, tap the "Get color from currently running app" option, then tap the gear icon next to it.
    Was this step helpful? Yes | No| I need help
  5. 5
    Here on the Custom Colors screen we can do two things; set a custom color for specific apps, as well as skip apps from being detected
    .
    To set an app so that it won't be detected, tap the "here" link.
    Was this step helpful? Yes | No| I need help
  6. 6
    When the Pick an app" pop-up appears, select an app from the list
    .
    If you want to view system app, toggle the switch at the top of the pop-up.
    Was this step helpful? Yes | No| I need help
  7. 7
    Now when you open the app you selected to bypass app detection, the navigation bar will remain the same as it was before running Navbar Apps.
    Was this step helpful? Yes | No| I need help
  8. 8
    With Navbar Apps open again, tap the gear next to "Get color from the currently running app".
    Was this step helpful? Yes | No| I need help
  9. 9
    To add a custom color for a particular app, tap the "+" sign in the lower right corner of the screen
    .
    When the Pick an app" pop-up appears, select the application you'd like to set a custom color for.
    Was this step helpful? Yes | No| I need help
  10. 10
    With the app selected, tap on in from the Custom Colors screen, then use the color wheel or enter a hex code to choose a color
    .
    Tap "SELECT THIS COLOR" once you're ready. You can also play around with the saturation and opacity by moving the horizontal sliders.
    Was this step helpful? Yes | No| I need help
  11. 11
    Now when you visit the app you set a custom color for, the navigation bar will display as that color
    .
    You can do this for as many apps as you wish.
    Was this step helpful? Yes | No| I need help

Set a Static Color

You can have the navigation bar as one color for all your apps, by using the Static Color option.

  1. 1
    From the main screen, tap "Static Color", then tap the gear icon to the right of it.
    Was this step helpful? Yes | No| I need help
  • 2
    Use the color wheel to adjust the color
    .
    Once you're happy with the color, tap "SELECT THIS COLOR". You can adjust the opacity and saturation once you've set a color by moving their respective sliders.
    Was this step helpful? Yes | No| I need help
  • 3
    You also have the option to enter a six-digit hex code to set a color
    .
    Tap "ENTER HEX COLOR", type the six digit number, then tap "SET COLOR".
    Was this step helpful? Yes | No| I need help
  • 4
    Once you've set a static color, the navigation bar will be the same for all your applications.
    Was this step helpful? Yes | No| I need help
  • Use Navigation Bar Widgets

    Navbar Apps also supports a few navigation bar widgets; Battery percentage, Image, and Emoji.

    1. 1
      From the main screen, tap "Battery percentage", followed by the gear icon.
      Was this step helpful? Yes | No| I need help
    2. 2
      The Battery percentage widget will display the color you choose as the battery meter
      .
      So 100% battery will display the color across the full width of the navigation bar. You can also change the position and size tapping selecting a different preset and moving the slider. To choose the color, tap "Pick color".
      Was this step helpful? Yes | No| I need help
    3. 3
      Use the wheel or a hex code to pick a color, then tap "SELECT THIS COLOR".
      Was this step helpful? Yes | No| I need help
    4. 4
      Once you set a color, your navigation bar will display it to match your battery percentage.
      Was this step helpful? Yes | No| I need help
    5. 5
      To show an image under the navigation bar, tap the "Image" widget, then tap the gear icon next to it.
      Was this step helpful? Yes | No| I need help
    6. 6
      From the SAVED IMAGES tab you can scroll through and select an image
      .
      To hide the image when the navigation bar is transparent, toggle the switch near the top.
      Was this step helpful? Yes | No| I need help
    7. 7
      On the SHARED IMAGES tab you can browse through images created by the Navbar Apps community
      .
      Tap "Touch to download" to download one of the shared images. To browse more images shared by community members, tap the "VISIT OUR Google PLUS COMMUNITY PAGE" button,
      Was this step helpful? Yes | No| I need help
    8. 8
      The third available widget is Emoji
      .
      Select it, then tap the gear for more options.
      Was this step helpful? Yes | No| I need help
    9. 9
      Navbar Apps can display four Emoji on top of your navigation bar
      .
      Tap the pencil icon next to an emoji position, then select one from the pop-up that appears. To shorten the list, tap "Show only popular Emoji" at the top.
      Was this step helpful? Yes | No| I need help
    10. 10
      To change the space between and size of the Emoji, adjust each horizontal slider.
      Was this step helpful? Yes | No| I need help

    If you have problems with any of the steps in this article, please ask a question for more help, or post in the comments section below.

    Comments

    VisiHow welcomes all comments. If you do not want to be anonymous, register or log in. It is free.

    Article Info

    Categories : Software | Use Android Oreo | Use Google Pixel and Pixel XL

    Share this Article:

    Thanks to all authors for creating a page that has been read 4 times.

    x

    Thank Our Volunteer Authors.

    Would you like to give back to the community by fixing a spelling mistake? Yes | No