Ripple-colored Listview selector

Question

The standard ListView selector in the android L preview preview uses colorControlHighlight for a pulsating touch effect and has a transparent background in an unfocused state.

I would like to define a ListView element that has a colored background and still shows a ripple effect when touched with the same highlight color. Now, if I define the following valid:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@color/my_background_color"/> </ripple> 

it works, but the ripple starts in the middle of the ListView , regardless of the position of the touch. If I use the same background outside the ListView , for example. with a LinearLayout it works as expected (ripple starts at the touch position).

Answer 1

I managed to get individually colored list items, while retaining the ripple effect. Set the background of the list items using any adapter you have, and set the list to show the selector at the top:

 <ListView android:layout_width="match_parent" android:layout_height="match_parent" android:drawSelectorOnTop="true" /> 

This will cause a ripple effect over the background.

Answer 2

As far as I can judge this error only in Android 5.0, and not in 5.1. The trick seems to be to use Drawable # setHotspot as Google dev hints here https://twitter.com/crafty/status/561768446149410816 (since obscure Twitter hints are a great form of documentation!)

Suppose you have a line layout, something like this

 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:id="@+id/row_content" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:background="?attr/selectableItemBackground"> .... content here ..... </LinearLayout> </FrameLayout> 

The following worked for me

  row.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { v.findViewById(R.id.row_content) .getBackground() .setHotspot(event.getX(), event.getY()); return(false); } }); 

Answer 3

I found that it only works if you apply the background to the root element of a list item.

Also, consider using RecyclerView instead of ListView.

An example of viewing a list of elements:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="@dimen/list_padding" android:layout_marginLeft="@dimen/list_padding" android:layout_marginRight="@dimen/list_padding" android:padding="@dimen/list_padding" android:background="@drawable/ripple_bg"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Large Text" android:id="@+id/tvTitle"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Small Text" android:id="@+id/tvSubtitle" /> </RelativeLayout> 

Answer 4

I adapted @ArhatBaid to respond to a small bit, tested it, and it works fine:

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:drawable="@color/light_grey_header_navigation_drawer"/> </ripple> 

Thus, it allows you to set the background color and still have a ripple effect.
for me, target and minSdk are 21.

Answer 5

An example layout that contains the Ripple effect as the background of the parent layout.

 <RelativeLayout android:id="@+id/id4" android:layout_width="fill_parent" android:layout_height="wrap_content" android:background="@drawable/ripple_effect" android:clickable="true"> <ImageView android:id="@+id/id3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:background="@drawable/image" android:layout_centerVertical="true"/> <LinearLayout android:id="@+id/id2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" android:layout_alignParentRight="true" android:layout_centerVertical="true"> <TextView android:id="@+id/id1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/text"/> </LinearLayout> </RelativeLayout> 

Ripple_effect.xml Here you can use any color of your choice. Make sure you are using sdk version 21 and have drawable-v21 and style-v21 folder and put the whole file related to v21 in it.

 <ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="?android:colorControlHighlight"> <item android:id="@android:id/mask"> <shape android:shape="oval"> <solid android:color="?android:colorAccent" /> </shape> </item> 

Here you can use a different shape, such as a rectangle, instead of an oval ...

Answer 6

You can achieve this with a nested layout. Just create, for example. LinearLayout as the root layout around the existing layout, set the ripple effect to the root layout and the background color to nested.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/ripple_effect" android:orientation="vertical"> <RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/containterContent" android:background="@color/yourCOLOR" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Your content --> </RelativeLayout> </LinearLayout>