johannilsson / android-actionbar

DEPRECATED Android Action Bar Implementation
1.31k stars 564 forks source link

dropdown background colors aren't visible #32

Open LorneLaliberte opened 13 years ago

LorneLaliberte commented 13 years ago

The action bar is using actionbar_background_dropdown_start and actionbar_background_dropdown_end for the background of the dropdown list itself, but that background isn't visible because each item's background is drawn above it.

(Well, I suppose it would be if you used a translucent color. :)

Specifically, right now it's using actionbar_background_item_pressed_start and actionbar_background_item_pressed_end for each item in the dropdown list.

This is because drawable/actionbar_list_item_background.xml is using actionbar_btn_normal and actionbar_btn_pressed for the state list.

Suggestion:

(1) Add drawable/actionbar_list_item_normal.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/actionbar_background_dropdown_item_start"
        android:endColor="@color/actionbar_background_dropdown_item_end"
        android:angle="-90"/>
</shape>

(2) Add drawable/actionbar_list_item_pressed.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="@color/actionbar_background_dropdown_item_pressed_start"
        android:endColor="@color/actionbar_background_dropdown_item_pressed_end"
        android:angle="-90"/>
</shape>

(3) Modify drawable/actionbar_list_item_background.xml as follows:

<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/actionbar_list_item_normal"
        />
    <item
        android:state_focused="false"
        android:state_selected="true"
        android:state_pressed="false"
        android:drawable="@drawable/actionbar_list_item_pressed"
        />

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

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

    <!-- Default -->
    <item
        android:drawable="@drawable/actionbar_list_item_normal"
        />
</selector>

(4) Add the four new colors to the colors.xml file:

<resources>
    <color name="actionbar_divider">#8B1A1A</color>
    <color name="actionbar_title">#FFFFFF</color>
    <color name="actionbar_subtitle">#E0E0E0</color>
    <color name="actionbar_background_start">#8B1A1A</color>
    <color name="actionbar_background_end">#CD2626</color>
    <color name="actionbar_background_dropdown_start">#8B1A1A</color>
    <color name="actionbar_background_dropdown_end">#B02121</color>
    <color name="actionbar_background_dropdown_item_start">#8B1A1A</color>
    <color name="actionbar_background_dropdown_item_end">#B02121</color>
    <color name="actionbar_background_dropdown_item_pressed_start">#FF7F00</color>
    <color name="actionbar_background_dropdown_item_pressed_end">#EE7600</color>
    <color name="actionbar_background_item_pressed_start">#FF7F00</color>
    <color name="actionbar_background_item_pressed_end">#EE7600</color>
    <color name="actionbar_tab_bar_background">#999999</color>
</resources>

Note: you only need to add 2 colors if you don't want the list background colors to be configurable.

LorneLaliberte commented 13 years ago

Ah -- there's a problem with my suggested fix: in List Navigation mode, the dropdown item background becomes the action bar's background, since it's used for the selected item shown in the spinner.

So there's the added caveat that you would need to use a SpinnerAdapter that provides a different view for the spinner itself.

Hmmm.

Yeah, it works if I add layout/actionbar_list_mode_title.xml like so:

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionbar_list_mode_title"
    android:layout_width="fill_parent"
    android:layout_height="@dimen/actionbar_height"
    android:gravity="center_vertical"
    android:paddingLeft="10dip"
    android:paddingRight="10dip"
    android:textSize="16dip"
    android:textStyle="bold"
    android:textColor="@color/actionbar_title"
    android:lines="1"
    android:background="@drawable/actionbar_btn"
    android:focusable="true"
    />

...and then create the SpinnerAdapter like this:

            ArrayAdapter adapter = ArrayAdapter.createFromResource(context, R.array.activity_titles, R.layout.actionbar_list_mode_title);
            adapter.setDropDownViewResource(R.layout.actionbar_list_dropdown_item);
            SpinnerAdapter listAdapter = adapter;
johannilsson commented 13 years ago

Thank you. Yes we definitely need a way to configure the dropdown and this looks good. I haven't tested it yet but I hopefully find the time to do so soon.