Question

I am using a split ActionBar to display some simple media controls. See Below:

I used MenuItem.setActionView to override the default view for the Fast Forward and Rewind buttons because I need to detect when the user initially touches the control (to start rewinding) and subsequently releases the control (to finish rewinding). See code below:

            ImageView rewindButton = new ImageView(getBaseContext());
        rewindButton.setId(rewindViewID);
        rewindButton.setClickable(true);
        rewindButton.setImageResource(R.drawable.ic_action_rewind);
        rewindButton.setOnTouchListener(forwardBackwardListener);
        MenuItem rewindMenu = menu.findItem(R.id.menu_rewind);
        rewindMenu.setActionView(rewindButton);
        return true;

This is all working well for me but has had an unintended side effect. When I touch the fast forward or rewind button I do not get the default blue background (as shown on the skip backward control above). It displays no background at all. I tried setting the background in the onTouch handler but the background does not fill the height of the ActionBar in the same way as the default one (see example image below), it seems like there is some padding or margin in place, but I don’t know how to remove it.

I have tried the following with no luck:

• Setting the height of the ImageView Manually to try to fill the ActionBar
• Returning True or False from the onTouch Handler

Does anyone know how I might resolve this?

Answer 1

I came up with a workaround which was to set the background of all the items to a small radial gradient when the item is selected. The gradient is still cut off a little but it is hardly noticeable. It makes the custom and regular buttons look almost the same.

First I created the radial gradient in a file called res/drawable/radialbackground.xml . Notice the end color is transparent, this is important to fade the gradient into nothing so it doesn’t fill the whole rectangle.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">

      <gradient
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#00FFFFFF"
        android:gradientRadius="35"
        android:startColor="@color/Gray"
        android:type="radial"
         />
</shape>

Then I created a StateListDrawable called res/drawable/actionitembackground.xml

<?xml version="1.0" encoding="utf-8"?>


<selector xmlns:android="http://schemas.android.com/apk/res/android"
                  android:exitFadeDuration="@android:integer/config_mediumAnimTime" >
        <item android:state_pressed="true" android:drawable="@drawable/radialbackground" />
        <item android:drawable="@android:color/transparent" />
</selector>

Then I assigned that statelistdrawable to the backgrounds of my custom ActionViews :

rewindButton.setBackgroundResource(R.drawable.actionitembackground);

Then I altered the style for the actionbar to include this new radial fill for the regular action bar items.

So, in values/styles.xml I added:

<style name="Theme.MyTheme" parent="Theme.Sherlock.Light">
        <item name="android:selectableItemBackground">@drawable/actionitembackground</item>
        <item name="selectableItemBackground">@drawable/actionitembackground</item>
</style>

In my case, the base style was Theme.Sherlock.Light but you would replace that with whatever style you wanted to amend.

Then I set that style as the style for my application in AndroidManifest.xml

<application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.MyTheme" 
        android:uiOptions="splitActionBarWhenNarrow" >

This seemed easier than digging through trying to debug why the background is cut off. Perhaps I will spend more time on it another day.