Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 818
sven Avatar asked Oct 22 '13 15:10

sven


People also ask

What is the overflow action icon?

The action overflow in the action bar provides access to your app's less frequently used actions. The overflow icon only appears on phones that have no menu hardware keys. Phones with menu keys display the action overflow when the user presses the key. Action overflow is pinned to the right side.

Where is the action overflow icon located?

The right-hand side of the action bar shows the actions. The action buttons (3) show the most important actions of your app. Actions that do not fit in the action bar are moved to the action overflow, and an overflow icon appears on the right. Tap on the overflow icon to display the list of remaining action views.

How to add button in appbar android?

Add Action Buttons To add actions to the action bar, create a new XML file in your project's res/menu/ directory. The app:showAsAction attribute specifies whether the action should be shown as a button on the app bar.


1 Answers

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>
like image 176
forcewill Avatar answered Sep 20 '22 04:09

forcewill