android - Selector de vista de lista con fondo de color y efecto dominó
listview material-design (6)
El selector estándar de ListView en Android L La vista previa del desarrollador utiliza colorControlHighlight para el efecto dominó en el tacto y tiene un fondo transparente en estado desenfocado.
Me gustaría definir un elemento ListView que tenga un fondo de color y aún muestre el efecto dominó al tocar con el mismo color de resaltado. Ahora, si defino el siguiente drawable:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="@color/my_background_color"/>
</ripple>
funciona, pero la onda se inicia en el medio del elemento ListView , independientemente de la posición táctil. Si utilizo el mismo fondo fuera de ListView , por ejemplo, para LinearLayout , funciona como se espera (la ondulación se inicia en la posición táctil).
Adapté un poco la respuesta de @ArhatBaid, la probé y funciona perfectamente:
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item android:drawable="@color/light_grey_header_navigation_drawer"/>
</ripple>
Por lo tanto, esto le permite establecer un color de fondo y aún así tener el efecto dominó.
para mí target y minSdk son 21.
Descubrí que solo parece funcionar correctamente si aplica el fondo al elemento raíz del elemento de la lista.
Además, considere usar el nuevo RecyclerView lugar de un ListView
Ejemplo de vista de elemento de lista:
<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>
El diseño de muestra, que contiene el efecto Ripple como fondo del diseño principal.
<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 Aquí puede usar cualquier color de su elección. Asegúrese de utilizar sdk versión 21 y tener drawable-v21 y style-v21 carpeta y poner todo el archivo relacionado con v21 en ellos.
<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>
Aquí puedes usar una forma diferente, como un rectángulo en lugar de un óvalo ...
Logré obtener elementos de la lista individualmente coloreados mientras mantengo el efecto dominó. Establezca el fondo de los elementos de su lista con el adaptador que tenga y configure la vista de lista para mostrar el selector en la parte superior:
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:drawSelectorOnTop="true" />
Esto dibujará el efecto dominó sobre el fondo.
Por lo que puedo decir, este error solo está en Android 5.0, no en 5.1. El truco parece ser el uso de Drawable # setHotspot como sugerencias de un desarrollador de Google aquí https://twitter.com/crafty/status/561768446149410816 (¡porque los consejos oscuros de twitter son una gran forma de documentación!)
Supongamos que tiene un diseño de fila algo como esto
<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>
Lo siguiente funcionó para mí
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);
}
});
Puede lograr esto con un diseño anidado. Simplemente cree, por ejemplo, un LinearLayout como diseño raíz alrededor de su diseño existente, establezca el efecto dominó en el diseño de la raíz y el color de fondo en el anidado.
<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>