Customizing the ActionBar

Applying Themes to the ActionBar is pretty easy and you have the possibility to change:

• Background of the ActionBar
• Background of the ActionBar Items
• Color of the Separator
• Color of the Title
• Home logo

To change any of these from the default red colors to your own color scheme, you have to set the Attributes of the ActionBar for these.

Let us have some samples to ease the understanding. Somewhere in your axml file you have the ActionBar defined similarly to this:

  <monodroid.actionbar.library.ActionBar
    android:id="@+id/actionbar"
    style="@style/actionbar"
    ab:title="My Awesome App" />

The code above will give you the red colors, which might not be what you want for your application as it does not go well with the general theme.

Change the Background

To change the background of the ActionBar you have the possibility to set the background to a Drawable of your own choice. For instance if you want the ActionBar to be a nice blue gradient you could define your own Drawable like this and lets call it myactionbar_background.xml and remember to put it in the Resources\Drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#49c0f0"
      android:endColor="#2cafe3"
      android:angle="-90" />
</shape>

Then where you have defined your ActionBar you can set the local background attribute to the Drawable you just created:

  <monodroid.actionbar.library.ActionBar
    android:id="@+id/actionbar"
    style="@style/actionbar"
    ab:title="My Awesome App"
    ab:background="@drawable/myactionbar_background" />

That's it, easy huh?

Changing the background of the buttons

Similar to changing the background of the ActionBar you can change it on the buttons the same way. However if you want the background to change to another color when pressing the button, you want to create a selector Drawable which changes itself depending on the state. Let us just dive into the code.

First define a Drawable for how the button looks in the normal state, let us call it myactionbar_btn_normal.xml and put it in the Resources\Drawable folder:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#49c0f0"
      android:endColor="#2cafe3"
      android:angle="-90"/>
</shape>

Then define one for when the button is pressed and call it myactionbar_btn_pressed.xml and put it in Resources\Drawable:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
  <gradient
      android:startColor="#499bea"
      android:endColor="#207ce5"
      android:angle="-90"/>
</shape>

Now we have to create a selector and call it myactionbar_btn.xml and put it in Resources\Drawable:

<?xml version="1.0" encoding="utf-8" ?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- Non focused states -->
  <item
      android:state_focused="false"
      android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/myactionbar_btn_normal"
        />
  <item
      android:state_focused="false"
      android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/myactionbar_btn_pressed"
        />

  <!-- Focused states -->
  <item
      android:state_focused="true"
      android:state_selected="false"
      android:state_pressed="false"
      android:drawable="@drawable/myactionbar_btn_pressed"
        />
  <item
      android:state_focused="true"
      android:state_selected="true"
      android:state_pressed="false"
      android:drawable="@drawable/myactionbar_btn_pressed"
        />

  <!-- Pressed -->
  <item
      android:state_pressed="true"
      android:drawable="@drawable/myactionbar_btn_pressed"
        />
</selector>

Now we just have to set the background_item Attribute of the ActionBar:

  <monodroid.actionbar.library.ActionBar
    android:id="@+id/actionbar"
    style="@style/actionbar"
    ab:title="My Awesome App"
    ab:background="@drawable/myactionbar_background"
    ab:background_item="@drawable/myactionbar_btn" />

There you have it.

Changing the color of the separator and title

You can change the color of the separator to any color you want, this goes for the title as well:

  <monodroid.actionbar.library.ActionBar
    android:id="@+id/actionbar"
    style="@style/actionbar"
    ab:title="My Awesome App"
    ab:separator="#123456"
    ab:title_color="@color/mytitle_color" />

Notice the last line where @color/mytitle_color is used instead of a HEX color value. Android supports defining colors in Resources\Value\Colors.xml like so:

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <color name="mytitle_color">#8B1A1A</color>
  <color name="myactionbar_background">#FFFFFF</color>
</resources>

Setting the Home logo and Action

You can set a Home logo on the ActionBar, that does nothing when pressing it, in your ActionBarActivity as follows:

protected override void OnCreate(Bundle bundle)
{
	base.OnCreate(bundle);
	SetContentView(Resource.Layout.Main);

	ActionBar = FindViewById<ActionBar>(Resource.Id.actionbar);
	ActionBar.CurrentActivity = this;
	ActionBar.SetHomeLogo(Resource.Drawable.ic_launcher);
	...
}

The Home logo is simply a Drawable located in your Resources folder.

You can also set the Action of the Home logo by using the AddHomeAction(Type activity) method, where the Type is the type of the activity you want to launch.