App Widget: Ripple effect lost on list item when background is added to outer layout

Question

This thing is driving me crazy. Here's how it works

1. everything is set as default

• ripple effect works
• list view item separator is visible

2. white background added to the widget layout

• ripple lost
• list view item separator also gone
• looks like list item style has been removed

Here's the code

main widget layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              ...
              android:background="@android:color/white" -- this line only applies for case 2
              android:padding="@dimen/widget_padding">

    <TextView
        ...
        android:background="@color/primary"
        android:textColor="@android:color/white"/>

    <ListView
        ...
        android:drawSelectorOnTop="true""/>

    <TextView
        ...
        android:textColor="?android:attr/textColorSecondary"/>

</LinearLayout>

list item layout

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    ...
    android:id="@+id/widgetItem">

    <TextView
        ...
        android:textColor="@android:color/black"
        android:textSize="14sp"/>

    <TextView
        ...
        android:textColor="@color/negative_amount"
        android:textSize="16sp"
        android:textStyle="bold"/>

</RelativeLayout>

I've spent a day trying all possible combinations but nothing helped. And I don't get the fact that unrelated background change to some layout around the list view completely alters the behaviour. WTF?

I would like to solve it in the cleanest way possible - e.i. no hacking with custom selectors. This should work straight out of the box if possible.

Answer 1

It looks like you're using a dark theme for your activity, so the ripple is white and thus not visible over a white background. The simplest solution is to use a light variant of the theme, which will cause the ripple to be black.

For example, if you're using an AppCompat theme, you can add this line to your ListView:

<ListView
    ...
    android:drawSelectorOnTop="true"
    style="@style/Theme.AppCompat.Light"/>

You can also apply this to a view hierarchy, e.g.:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      ...
      android:background="@android:color/white"
      android:padding="@dimen/widget_padding"
      android:theme="@style/Theme.AppCompat.Light">

This will cause the theme to be used in the LinearLayout and all of its child views.

Also, you can specify a theme activity-wide or even app-wide by adding android:theme attribute to the <activity> or <application> tag to your AndroidManifest.xml.