• Share a link to this article:

Custom Android Address Bars

If you're a frequent Android user, you may have noticed that some websites display the address bar with a custom colour. This is especially true of popular websites like the BBC and Facebook. They do this to give their website a more native app-like feel. Recolouring the address bar in Android is relatively easy to do in RapidWeaver and adds a very nice 'finishing touch' to your website. This can improve the overall user experience, which ultimately could boost website popularity and conversions.

Start by using any colour-picking tool available to decide on a good colour to use. Ideally the colour you use should match your existing theme or corporate branding. So if for example your header or banner region is predominately dark blue, you could choose to use dark blue for your custom Android address bar. Regardless of what colour you want to use, you need the 6-digit hexadecimal colour value.

Colour Picker Tool

In RapidWeaver, click Settings in your sidebar, then navigate to the Code > Metatags section. Click the '+' button to add a new metatag.

RapidWeaver Metatags

For the Name attribute, type theme-color (note the americanised spelling of 'color'). For the Content attribute, enter your hex colour code. The screenshot above shows this information entered.

Now do a full republish of your website. This new metadata will be included on all pages. If you were using an older version of RapidWeaver or you only wanted to enable custom Android address bars on certain pages, then you can also enter the same metatag in the Page Inspector.

When you view your website on an Android device, you should see the address bar change colour. The Stacks4Stacks website is a prime example of where a custom Android address bar is in use. This website is using the ThemeFlood Volcano theme. The address bar emulates the colour of the hero unit above the page fold:

Android Custom Address Bar

Android automatically inverts the colour of the address bar text and buttons, so you do not need to be concerned about changing these yourself. These elements will either be rendered in white or black.

Custom Android address bars are compatible with all ThemeFlood theme designs and work in most newer versions of the Chrome web browser, running under Android.