Cómo crear un efecto dominó en un diseño simple


112

¿Cómo puedo tener un efecto dominó en un diseño lineal / relativo simple al tocar el diseño?

Intenté configurar el fondo de un diseño en algo como:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight" >

    <item android:drawable="@android:color/white"/>

</ripple>

Sin embargo, solo veo un fondo blanco liso y ningún efecto dominó al tocar el diseño. ¿Qué estoy haciendo mal?

Editar:

Como referencia, aquí está mi archivo xml de diseño:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:background="@drawable/test"
        android:clickable="true">
    </RelativeLayout>

2
La vista que aloja la ondulación debe estar habilitada y se debe hacer clic o enfocar.
Alanv

Gracias Alanv, mira a continuación mi respuesta. Básicamente, estoy marcando mi diseño y quiero que se pueda hacer clic en el efecto dominó, pero aún no funciona.
Zach

Además, esto funciona bien si elimino la <item android:drawable="@android:color/white"/>sección. Así que no estoy seguro de cómo se supone que funciona esto si quisiera un color de fondo en el diseño. ¡Colocar esto encima de otro diseño con un color de fondo tampoco funciona!
Zach

4
¿De qué color se dibuja la ondulación en su vista, por ejemplo, a qué color se resuelve colorControlHighlight?
Alanv

Respuestas:


260

Establezca estas propiedades en su diseño (si su diseño tiene el fondo blanco / claro predeterminado):

          android:clickable="true"
          android:focusable="true"
          android:background="?attr/selectableItemBackground"

En este caso, no necesita un dibujante personalizado.

Sin embargo, si su diseño tiene un fondo negro / oscuro, tendrá que crear su propio dibujante ondulado como este:

<?xml version="1.0" encoding="utf-8"?>
<!-- An white rectangle ripple. -->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@android:color/white">
    <item
        android:id="@android:id/mask"
        android:gravity="center">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

Y luego establezca esta ondulación dibujable como su propiedad android: background .

Puede ver muchos ejemplos de estos tipos de ondas en AOSP: aquí


11
¿Qué pasa si tengo que dar un color diferente como fondo? Entonces, ¿cuál debería ser el mejor enfoque?
Anuj Sharma

1
@AnujSharma ¿Ha intentado dar recursos de color para background?
IgorGanapolsky


31
Si desea otro color de fondo, puede establecer ese color como fondo y poner "? Attr / selectableItemBackground" como android: foreground en su lugar
Lucas Arrefelt

2
¡Guauu! esto es genial. Esto debe marcarse como respuesta +1
Zia Ur Rahman

59

Estoy agregando esto además de la respuesta de Igor Ganapolsky en caso de que alguien quiera tener un diseño con un color diferente y también tener un efecto dominó. Simplemente crea un efecto dominó en elementos de diseño como este:

ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="@color/rippleColor"
    tools:targetApi="lollipop"> <!-- ripple effect color -->
    <item android:id="@android:id/background">
        <shape android:shape="rectangle">
            <solid android:color="@color/backgroundColor" /> <!-- background color -->
        </shape>
    </item>
</ripple>

luego, póngalo como fondo de su diseño o cualquier botón como Igor Ganapolsky mencionó en su respuesta.

android:clickable="true"
android:background="@drawable/ripple"

37

Debe modificar el siguiente fragmento de código en cualquier widget ( TextView/ Button) y puede implementar el efecto dominó :

android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"

Y estás listo para irte.


hmm primer plano? ¡esto es genial!
Badr

Esto es útil si ya tiene un juego de android: background = "@ color / colorAccent"
aero

@aero Es útil, incluso si no establece ningún fondo.
Pankaj Lilan

1
esto funciona en diseños y vistas personalizadas además de widgets.
anoo_radha

1
@MichaelKern Sí, tienes razón, también se basa en los requisitos de todos en su código.
Pankaj Lilan

20

Resulta que esto funciona según lo previsto. El valor estándar de colorControlHighlight del tema Material es #40ffffff. Entonces, sobre un fondo blanco, esto no se mostrará. Cambiar el color de resaltado a otra cosa funciona y / o cambiar el color de fondo del objeto.

Gracias a todos (especialmente a Alanv por señalarme en la dirección correcta).


si estoy usando android: background = "? attr / selectableItemBackground" en mi vista, ¿cómo puedo cambiar el fondo del objeto?
codeskraps

1
No importa, encontré que el estado predeterminado de selectableItemBackground es transparente. Entonces, puse una vista debajo con el color que quería.
codeskraps

1
nota rápida: puede cambiar colorControlHighlighten su styles.xml. Agréguelo a su tema personalizado, por ejemplo.
Nuhman


5

Este es un ejemplo para hacer clic en un diseño de muestra con efecto dominó:

 <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:focusable="true"
    android:orientation="vertical">

Es increíble lo simple que es y el simple hecho de que esto simplemente funciona.
Machado

4
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#cfd8dc"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#d1c4e9" />
        </shape>
    </item>
</ripple>

Use este ripple.xml en la carpeta Drawable , luego asígnelo como View

android: background = "@ drawable / ripple"

Android: se puede hacer clic = "verdadero"


2

Simplemente agregue el efecto dominó predeterminado con android:background="?selectableItemBackground"

Me gusta:

<LinearLayout
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="?selectableItemBackground"
            android:clickable="true"
            >

           ...

</LinearLayout>

0

Pon esto en tu diseño:

android:clickable="true"
android:background="?attr/selectableItemBackground"

Nota: hay un error en la documentación de la API. Funcionará solo en API> = 23

Para todos los niveles de API , use esta solución


2
Su enlace redirige esta misma página
TSR

Tenga en cuenta que también tiene la opción de usar android: background = "? Attr / selectableItemBackgroundBorderless" Ya que no tiene bordes, el efecto dominó se extenderá a la vista principal. Esto puede verse mejor en muchos casos.
Michael Kern

0

Probé todas esas respuestas y nada me funcionó, así que lo resolví creando el siguiente estilo:

<style name="Button.Borderless" parent="Base.Widget.AppCompat.Button.Borderless">
    <item name="android:minHeight">0dp</item>
    <item name="android:minWidth">0dp</item>
    <item name="android:layout_marginLeft">-6dp</item>
    <item name="android:layout_marginRight">-6dp</item>
    <item name="android:paddingTop">0dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:paddingLeft">6dp</item>
    <item name="android:paddingRight">6dp</item>
</style>

Y luego, apliqué a mi diseño lineal:

<LinearLayout
      android:id="@+id/ll_my_ripple"
      style="@style/Button.Borderless">
</LinearLayout>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.