Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android Implementing Designs for Android Customizing the Action Bar Using the Action Bar Style Generator

IF USING Android Studio, you're going to NEED this...

Using Android Studio, SDK 21, AppCompat theme...

You'll want to change a few styles.xml properties...

First, change the top line:



<resources xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android">

Next, you're going to want to change all the action bar properties to the following:

<style name="Theme.Ribbit" parent="@style/Theme.AppCompat.Light">
    <item name="actionBarItemBackground">@drawable/selectable_background_ribbit</item>
    <item name="popupMenuStyle">@style/PopupMenu.Ribbit</item>
    <item name="dropDownListViewStyle">@style/DropDownListView.Ribbit</item>
    <item name="actionBarTabStyle">@style/ActionBarTabStyle.Ribbit</item>
    <item name="actionDropDownStyle">@style/DropDownNav.Ribbit</item>
    <item name="actionBarStyle">@style/ActionBar.Solid.Ribbit</item>
    <item name="actionModeBackground">@drawable/cab_background_top_ribbit</item>
    <item name="actionModeSplitBackground">@drawable/cab_background_bottom_ribbit</item>
    <item name="actionModeCloseButtonStyle">@style/ActionButton.CloseMode.Ribbit</item>
    <item name="android:editTextBackground">@drawable/apptheme_edit_text_holo_light</item>

<style name="ActionBar.Solid.Ribbit" parent="@style/Widget.AppCompat.ActionBar.Solid">
    <item name="android:background" tools:ignore="NewApi">@drawable/ab_solid_ribbit</item>
    <item name="android:backgroundStacked">@drawable/ab_stacked_solid_ribbit</item>
    <item name="android:backgroundSplit">@drawable/ab_bottom_solid_ribbit</item>
    <item name="android:progressBarStyle">@style/ProgressBar.Ribbit</item>

    <item name="background">@drawable/ab_solid_ribbit</item>
    <item name="backgroundStacked">@drawable/ab_stacked_solid_ribbit</item>
    <item name="backgroundSplit">@drawable/ab_bottom_solid_ribbit</item>
    <item name="progressBarStyle">@style/ProgressBar.Ribbit</item>

<style name="ActionBar.Transparent.Ribbit" parent="@style/Widget.AppCompat.ActionBar">
    <item name="android:background">@drawable/ab_transparent_ribbit</item>
    <item name="android:progressBarStyle">@style/ProgressBar.Ribbit</item>

<style name="PopupMenu.Ribbit" parent="@style/Widget.AppCompat.Light.ListPopupWindow">
    <item name="android:popupBackground">@drawable/menu_dropdown_panel_ribbit</item>

<style name="DropDownListView.Ribbit" parent="@style/Widget.AppCompat.Light.ListView.DropDown">
    <item name="android:listSelector">@drawable/selectable_background_ribbit</item>

<style name="ActionBarTabStyle.Ribbit" parent="@style/Widget.AppCompat.ActionBar.TabView">
    <item name="android:background">@drawable/tab_indicator_ab_ribbit</item>

    <item name="background">@drawable/tab_indicator_ab_ribbit</item>

<style name="DropDownNav.Ribbit" parent="@style/Widget.AppCompat.Spinner">
    <item name="android:background">@drawable/spinner_background_ab_ribbit</item>
    <item name="android:popupBackground">@drawable/menu_dropdown_panel_ribbit</item>
    <item name="android:dropDownSelector">@drawable/selectable_background_ribbit</item>

    <item name="background">@drawable/spinner_background_ab_ribbit</item>

<style name="ProgressBar.Ribbit" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
    <item name="android:progressDrawable">@drawable/progress_horizontal_ribbit</item>

<style name="ActionButton.CloseMode.Ribbit" parent="@style/Widget.AppCompat.ActionButton.CloseMode">
    <item name="android:background">@drawable/btn_cab_done_ribbit</item>

    <item name="background">@drawable/btn_cab_done_ribbit</item>

And, you'll probably get a few errors with the .9 image files. You'll need to open each one that throws an error, and draw a full black line on the bottom and right edge of each, as well as add a single black dot to the top and left edges. Most of the .9 files have these already, but there are a few that will cause you a headache.

I don't know if this applies ALL the styles (probably not...), but it will certainly make a huge step in the right direction to get it looking like the tutorial.


You can get immediately usable files AND styles (opposed to using the ones from the project files) if you use the action bar creator, and select "AppCompat" from the drop down, instead of the "Holo" option. Then everything works out nicely.

Nasir Mahamoud
Nasir Mahamoud
22,892 Points

Perfect! This answer really helped. Treehouse should update their video or mention your answer in the teacher's notes. Great Job Michael!

4 Answers

Setting as answered.

Follow the same pattern for further additions to the styles.xml file in later videos.

Wesley Seago
Wesley Seago
10,424 Points

Chances are if a person has been using Android Studio with SDK 21 for this application, in their AndroidManifest.xml file they have been using:


If this is the case, after making the changes you have pointed out, they will need to change the manifest to:


Thanks for sharing your code above...what a time saver.

Good call. I forgot to mention that. Yes, they need to change the theme in the manifest.

Andre Colares
Andre Colares
5,437 Points

Can anyone send the images with this correction to me?

Andre Colares
Andre Colares
5,437 Points

Can anyone send a git for the use of AppCompact?