android - color - ¿Cómo hacer una ondulación circular en un botón cuando se hace clic?

ripple effect android

Question

Fondo

En la aplicación de marcador de Android, cuando comienzas a buscar algo y haces clic en el botón de flecha a la izquierda de EditText, obtienes un efecto de onda circular:

El problema

También intenté tenerlo, pero obtuve uno rectangular:

    <ImageButton
        android:id="@+id/navButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="8dp"
        android:background="?android:attr/selectableItemBackground"
        android:src="@drawable/search_ic_back_arrow"/>

La pregunta

¿Cómo hago que el botón tenga un efecto de ondulación circular cuando se hace clic? ¿Tengo que crear un nuevo dibujo, o hay una forma integrada para eso?

Answer 1

Crea y establece una ondulación dibujable como fondo. Algo como esto.

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/grey_15">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="?android:colorPrimary"/>
        </shape>
        <color android:color="@color/white"/>
    </item>
</ripple>

Answer 2

Otro atributo con efecto de onda redonda, especialmente para la barra de acción:

android:background="?actionBarItemBackground"

UPD : el color de ondulación se puede cambiar con este atributo:

<!--somewhere in styles-->
<item name="colorControlHighlight">your_color_here</item>

Pero tenga en cuenta que este atributo se aplica a todos los efectos de onda predeterminados.

Answer 3

Puede crear ondulaciones circulares dibujables con el atributo android:radius en xml.

Ejemplo:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="your_color"
    android:radius="your_radius" />

Preste atención, su your_radius debe ser menor que el ancho y la altura de su vista. Por ejemplo: si tiene una vista con un tamaño de 60dp x 60dp your_radius debe estar cerca de 30dp (ancho / 2 o alto / 2).

Trabaja en Android 5.0 y superior.

Answer 4

Si está utilizando el tema AppCompat, puede establecer el fondo de la vista como:

android:background="?selectableItemBackgroundBorderless"

Esto agregará ondulación circular en 21 y arriba y fondo cuadrado en debajo de 21.

Answer 5

Si quieres archivos XML más genéricos, tengo dos archivos:

1) btn_ripple_background con código:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:state_pressed="true"
    android:state_enabled="true"
    android:drawable="@drawable/ripple_circular_shape"/>
</selector>

2) ripple_circuler_shape con código:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/btn_state_pressed_text_color"
    android:shape="oval">
    <solid android:color="@color/btn_state_pressed_text_color" />
</shape>

finalmente el uso: android:foreground="@drawable/ripple_btn_background"

Answer 6

Si ya tiene una imagen de fondo, aquí hay un ejemplo de una ondulación que se ve cerca de seleccionableItemBackgroundBorderless:

            <ImageButton
                android:id="@+id/btn_show_filter_dialog"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:background="@drawable/ic_filter_state"/>

ic_filter_state.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_pressed="true"
        android:state_enabled="true"
        android:drawable="@drawable/state_pressed_ripple"/>
    <item
        android:state_enabled="true"
        android:drawable="@drawable/ic_filter" />
</selector>

state_pressed_ripple.xml: (opacidad establecida en 10% sobre fondo blanco) 1AFFFFFF

 <?xml version="1.0" encoding="UTF-8"?>    
    <ripple xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="oval">
                <solid android:color="#1AFFFFFF"/>
            </shape>
            <color android:color="#FFF"/>
        </item>
    </ripple>

Answer 7

Simplemente agregue este fondo a su vista "android:background=?android:attr/actionBarItemBackground"