style - theme editor android studio

¿Utilizando? SelectableItemBackground con un color de fondo blanco

Question

Siempre he estado usando android:background="?selectableItemBackground" para obtener un efecto LinearLayout cuando se hace clic en una vista (por ejemplo, un LinearLayout ). Creo que leí en alguna parte que esto es compatible con API 14.

Sin embargo, he encontrado que necesito usar este efecto de onda pero con un fondo blanco. Específicamente, tengo un diseño para un elemento de la lista que se mostrará en el fondo de color predeterminado (estoy extendiendo desde Theme.AppCompat.Light.NoActionBar ), así que quiero que el elemento de la lista se destaque de este fondo coloreando la lista Artículo blanco liso ( #FFFFFF ).

Aquí está el diseño del elemento de lista:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="?selectableItemBackground"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    ...

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/mdu_keyline_1"
        android:paddingRight="@dimen/mdu_keyline_1"
        android:paddingTop="@dimen/mdu_padding_normal"
        android:paddingBottom="@dimen/mdu_padding_normal">

        ...

    </LinearLayout>

</FrameLayout>

Lo anterior produce el efecto de ondulación sin el fondo blanco.

Si lo intento

<FrameLayout ...
    android:background="@color/white">

Esto obviamente produce un fondo blanco pero sin el efecto de onda.

También probé otra cosa, y esto produjo un resultado más cercano a lo que estoy buscando:

<FrameLayout ...
    android:background="@color/white">

    ...

    <LinearLayout ...
        android:background="?selectableItemBackground">

Lo anterior me dio el fondo blanco con un efecto dominó. Sin embargo , la ondulación siempre parece comenzar desde el centro, independientemente de en qué parte del elemento haga clic.

Aquí hay algunas capturas de pantalla que muestran el resultado actual (ignorar la sombra en la parte superior de los elementos de la lista: esta es la sombra del AppBarLayout y la Toolbar que estoy usando).

¿Cómo podría lograr el efecto deseado?

Answer 1

Puede crear una lista de capas en su carpeta de elementos dibujables y establecer esto en su fondo:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white"/>
    <item android:drawable="?attr/selectableItemBackground"/>
</layer-list>

Answer 2

Puede utilizar el primer plano de su FrameLayout:

<FrameLayout ...
    android:background="@android:color/white"
    android:foreground="?attr/selectableItemBackground">

Answer 3

Ripple LayerDrawable es un LayerDrawable . Así que la forma correcta de hacer esto es:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="?attr/colorControlHighlight">

    <item>
        <shape>
            <solid
                android:color="#FFFFFF"/>
        </shape>
    </item>

    <item android:id="@android:id/mask">
        <shape>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

</ripple>