Use colorPrimary to colorize your App Bar
Pro-tip by +Ian Lake
The app bar , or action bar, is an iconic part of many Android apps, providing a consistent place for navigation affordances and frequent, important actions. But it can also be a great opportunity to bring some personality to your app. An easy way to do that is by using your branding color as the background of the app bar.
In fact, AppCompat makes this very straightforward using a technique of providing a color palette
 for your app. While introduced in the Material themes added in Android 5.0, AppCompat makes this technique available to all Android 2.1+ devices.
If you’re using a theme such as Theme.AppCompat
, you’d only need to add a colorPrimary
<style name="AppTheme" parent="@style/Theme.AppCompat">
And your App Bar will automatically be colored appropriately. You’ll note we’re using just colorPrimary
and not android:colorPrimary
only works on Android 5.0 devices unlike the AppCompat provided colorPrimary
. Just make sure you’re using the right theme so that the text and icons have enough contrast:
- Theme.AppCompat -> dark activity, dark app bar
- Theme.AppCompat.Light -> light activity, light app bar
- Theme.AppCompat.Light.DarkActionBar -> light activity, dark action bar
But perhaps you’ve already moved over to Toolbars (perhaps wrapped in the Design Library’s AppBarLayout )? In those cases, you’re probably using a Theme.AppCompat.NoActionBar
theme and including those elements in your layout XML files. Thankfully, you can still take advantage of your colorPrimary using the format ?attr/colorPrimary
format allows you to pull any attribute out of your theme, making it easy to consolidate your theming into a single place and avoid finding/replacing across many files.
The other thing we’ve lost is our text coloring though - there’s no Theme.AppCompat.Light.DarkActionBar.NoActionBar
. Here’s where a ThemeOverlay
can prove incredibly helpful. ThemeOverlays, unlike a full theme, only seek to overlay
the current theme, changing the few things they need to. For example, if we had a light theme but wanted a dark Toolbar, we could use:
With just that change, our text and icons are now back to a white color - perfect for a dark Toolbar.
You’ll find a number of other colors you can and should add to your theme such as colorPrimaryDark
for changing the status bar on 5.0+ devices to a darker branding color and colorAccent
for a contrasting accent color designed to make elements such as a FloatingActionButton really pop out. If you’d want to learn more about AppCompat, check out our video on Consistent Design with AppCompat .
For now, bring some personality to your app by using colorPrimary
to color your App Bar or Toolbar!#BuildBetterApps
 - http://goo.gl/Meu1sE
 - https://goo.gl/EHaUMj
 - https://goo.gl/Wo1IBv
 - https://www.youtube.com/watch?v=5Be2mJzP-Uw