Android Window Title Bar Color

John Meschke - August 3, 2019

Background

On modern Android devices, you'll have the ability to see your recently used or paused apps with the press of a button. This overview menu gives a preview of each app inside a window with a title bar, most of them with a unique color to match the theme of the app. Ideally, our apps should also have a specified color to give the best possible user experience.

This article assumes we are targeting a minimum of API level 21 (Lollipop) for our apps, giving us the flexibility of material themes. This should cover about 90% of devices at the time of this writing. I recommend this API level for high-performance games because we also get OpenGL 3.0 support while levels prior to this are a bit spotty.

Setup

We want to set up a single activity that will have a single view to render our game graphics. It should be an immersive experience, so a full-screen display theme is exactly what we need. The Android manifest file should reference this theme and we'll define it in the styles.xml file like so.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="game_theme" parent="android:Theme.Material.NoActionBar.Fullscreen">
	</style>
</resources>

After running the app and putting it into the background.

app window title

Simple enough. It works as expected, but there are a couple things we can do to make it look nicer. First, when viewing the app in the overview (recent apps) menu, the title bar has defaulted to black. This could be ugly if it doesn't really match the style we're going for. Secondly, a background color or image when the app starts up would be nice to have as things are loading.

We will create or edit the colors.xml file to define the colors we want to use.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<color name="primary">#00A99D</color>
	<color name="primary_dark">#00756A</color>
	<color name="accent">#DEDFE1</color>
	<color name="startup_background">#FFFFFF</color>
</resources>

Now if we follow most tutorials out there, we just need to add a few lines to the styles.xml file to apply the color theme and it should be good to go.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="game_theme" parent="android:Theme.Material.NoActionBar.Fullscreen">
		<item name="colorPrimary">@color/primary</item>
		<item name="colorPrimaryDark">@color/primary_dark</item>
		<item name="colorAccent">@color/accent</item>
		<item name="android:windowBackground">@color/startup_background</item>
	</style>
</resources>

After running the app again, the background color on startup appears to be working, but the title bar has not changed. Everything compiled just fine, but it isn't looking the way we expected. So what went wrong? The issue lies with the way items names are defined. Using colorPrimary targets a support library while android:colorPrimary targets API level 21 and above. Since we're only concerned with the latter, we can update the styles.xml file and try again.

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="game_theme" parent="android:Theme.Material.NoActionBar.Fullscreen">
		<item name="android:colorPrimary">@color/primary</item>
		<item name="android:colorPrimaryDark">@color/primary_dark</item>
		<item name="android:colorAccent">@color/accent</item>
		<item name="android:windowBackground">@color/startup_background</item>
	</style>
</resources>

Let's see what happens when we run the app.

app window title

Perfect. A short and simple layout that matches any them we're going for. Notice that the text appears to contrast with the background color even though it wasn't specified. Android automatically selects the best color based on the background, so this is one thing we don't need to worry about.

Programmatically Updating the Title Bar

A dynamic solution also exists by using a feature new to Android Lollipop called TaskDescription. It allows the programmer to change the text, icon, and background color shown on the window title bar. This is a bit overkill for our purposes, but it's good to know that exists. Big Nerd Ranch has a writeup and example of how it can be used, so check them out if you're interested.

Targeting Older Devices

Even though this article focuses on API level 21, there are times when it simply isn't an option to omit a significant portion of users, so a lower target API level is required. When setting up layouts for lower levels, create your layout as you see fit, then add a values-21 directory to your Android project containing a styles.xml file specific to API level 21. Newer devices will take notice of this and should look as expected.

Conclusion

I'm not sure why, but most top search results never really addressed this issue, even though it should be a trivial task. Knowing exactly what you're working with in layouts and styles can make your app look great or hinder the user experience, so remember to look over your apps with a keen eye and test on various devices and configurations.