sven
sven

Reputation: 4171

How to change the overflow icon of the contextual action bar without changing it for the standard action bar?

My app's theme looks like shown in the following screenshot:

action bar with white overflow icon

As the theme is based on Theme.Holo.Light which contains dark action bar texts and overflow icon, I adjusted the overflow icon using the following style:

<style name="ActionBar.Light" parent="android:style/Widget.Holo.ActionBar">
  <item name="android:background">@color/highlight</item>
  <item name="android:titleTextStyle">@style/TextAppearance.ActionBar.Title.Light</item>
  <item name="android:subtitleTextStyle">@style/TextAppearance.ActionBar.Subtitle.Light</item>
</style>
...
<style name="Theme.Light" parent="@android:style/Theme.Holo.Light">
  ...
  <item name="android:actionBarStyle">@style/ActionBar.Light</item>
  <item name="android:actionOverflowButtonStyle">@android:style/Widget.Holo.ActionButton.Overflow</item>
  ...
</style>

When one or more list entries are checked I want to show a white contextual action bar, but unfortunately the white overflow icon isn't visible on the white background:

contextual action bar with white overflow icon on white background

Any idea on how to change the overflow icon only for the contextual bar -- either via style or programatically?

Final Workaround (February 27 2014)

It seems as there isn't an option to change the overflow icon of the contextual action bar independent from the one of the standard action bar. So I had no other choice but changing the background color of the contextual bar to a dark gray, to make the white overflow button visible:

gray contextual action bar

The icons on the right are under my control, so it was easy to change them. The "done" icon on the left and the text (check counter) can easily be changed using theme attributes. Only the thin separator between the "done" icon and the check counter cannot be changed using attributes. They would require a custom layout -- that's why I left it how it is for now.

Here's my contextual bar style and the relevant part from the theme:

<style name="TextAppearance.ActionBar.Title" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:fontFamily">sans-serif-light</item>
</style>
<style name="TextAppearance.ActionBar.Title.Light">
    <item name="android:textColor">#ffffff</item>
</style>

<style name="ContextualBar.Light" parent="android:style/Widget.Holo.ActionMode">
    <item name="android:background">#666666</item>
    <item name="android:titleTextStyle">@style/TextAppearance.ActionBar.Title.Light</item>
    <item name="android:actionMenuTextColor">#ffffff</item>
</style>

<style name="Theme.Light" parent="@android:style/Theme.Holo.Light">
    ...
    <item name="android:actionBarStyle">@style/ActionBar.Light</item>
    <item name="android:actionModeStyle">@style/ContextualBar.Light</item>
    <item name="android:actionModeCloseDrawable">@drawable/ic_action_done</item>
    <item name="android:actionOverflowButtonStyle">@android:style/Widget.Holo.ActionButton.Overflow</item>
    <item name="android:actionMenuTextColor">#ffffff</item>
    ...
</style>

Ads: You can see the full result in the final app "uPod" which is available at Google play!

Upvotes: 8

Views: 2049

Answers (1)

forcewill
forcewill

Reputation: 1647

On your theme and assuming your using Appcompat

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
   <item name="android:actionOverflowButtonStyle">@style/OverFlowStyle</item>
</style>
<style name="OverFlowStyle"  parent="Widget.AppCompat.ActionButton.Overflow">
   <item name="android:src">@drawable/your_selector_drawable_here</item>  
</style>

Upvotes: 3

Related Questions