He creado un botón y quiero agregar efecto dominó a ese botón!

He creado un botón bg archivo XML: (bg_btn.xml)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient android:startColor="#FFFFFF" android:endColor="#00FF00" android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>

Y este es mi efecto dominó en el archivo: (ripple_bg.xml)

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:color="#f816a463"
    tools:targetApi="lollipop">
    <item android:id="@android:id/mask">
        <shape android:shape="rectangle">
            <solid android:color="#f816a463" />
        </shape>
    </item>
</ripple>

Y Este es mi Botón que quiero añadir el efecto de la ondulación:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New Button"
android:id="@+id/button"
android:layout_centerHorizontal="true"
android:layout_marginTop="173dp"
android:textColor="#fff"
android:background="@drawable/ripple_bg"
android:clickable="true" />

Pero después de la adición efecto dominó botón de fondo es transparente, y el botón de la pantalla sólo cuando se hace clic,
como este:

Antes De Que Haga Clic En

Agregar efecto dominó a mi el botón con el botón color de fondo?

Haga Clic En

Agregar efecto dominó a mi el botón con el botón color de fondo?

Pero necesito botón color de fondo y el efecto dominó,
He encontrado algunos de este código en los diferentes blogs de Desbordamiento de Pila, pero todavía no está funcionando!

  • por favor, hacer capturas de pantalla mucho más pequeña próxima vez.. (cambiar el tamaño antes de subirlas)
  • también puede agregar un l o m para el vínculo de la imagen. (véase mi edición)
InformationsquelleAutor rakcode | 2016-10-12

12 Comentarios

  1. 85

    Aquí es otro dibujable xml para aquellos que quieren añadir todos juntos fondo degradado, radio de la esquina y el efecto dominó:

    <?xml version="1.0" encoding="utf-8"?>
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/colorPrimaryDark">
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorPrimaryDark" />
                <corners android:radius="@dimen/button_radius_large" />
            </shape>
        </item>
    
        <item android:id="@android:id/background">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="90"
                    android:endColor="@color/colorPrimaryLight"
                    android:startColor="@color/colorPrimary"
                    android:type="linear" />
                <corners android:radius="@dimen/button_radius_large" />
            </shape>
        </item>
    </ripple>

    Agregue en el fondo de tu botón.

    <Button
        ...
        android:background="@drawable/button_background" />
    • Cómo los chicos de obtener esta información a partir de? Me refiero a cómo sabes que hay un elemento XML llamado ripple a hacer este trabajo?
    • Es uno de los conceptos utilizados en el diseño de materiales. Por favor, comience a escribir una nueva etiqueta raíz en un dibujable xml en Android Studio, a continuación, usted debería ser capaz de ver todas las etiquetas disponibles, incluyendo ripple.
    • ¿cuál es el uso de elemento de máscara?
    • Se trata de la máscara en la cual efecto dominó se aplica. Sin ella, usted no será capaz de hacer que el efecto de la ondulación a ser en la misma forma del fondo.
    • esto requiere de la api de nivel 21
    • funciona pero, ¿cómo funciona no se explica. debe estar relacionado con el identificador del elemento. Se debe tener como referencia.

  2. 113

    agregar el "?attr/selectableItemBackground" a la vista foreground atributo si ya tiene un fondo junto con android:clickable="true"

    • Este debe ser marcado como la respuesta!
    • no siempre funciona, pero puede agregar un fondo para el efecto dominó, como se señaló en los comentarios de la aceptó responder
    • que diablos es forground atributo en el Botón de vista
    • tienes razón, no hay forground atributo en el Botón de Vista, porque su foreground.
    • He tenido que utilizar esta solución como la que he usado un fondo personalizado para mi botón. Funcionó muy bien.
    • Creo que en primer plano sólo funciona para la API > 23.
    • eso es correcto, pero por lo menos: «Este no es un error, la aplicación simplemente ignorar el atributo. Sin embargo, si el atributo es importante la apariencia o funcionalidad de la aplicación, usted debe considerar la búsqueda de una forma alternativa de lograr el mismo resultado con sólo los atributos disponibles y, a continuación, tiene la opción de crear una copia de la presentación en un esquema de vNN carpeta que se utilizará en la API de NN o superior donde usted puede tomar ventaja de la nueva atributo.» Por lo que funciona bien en los dispositivos por encima de la API de 23 y se omite cuando a continuación (podemos tools:ignore="UnusedAttribute).
    • sin Android support library, sería ?android:attr/selectableItemBackground (android:attr en lugar de attr)

  3. 55

    Agregar Efecto Dominó/Animación a un Android Botón

    Basta con sustituir su fondo de botón atributo con android:background=»?attr/selectableItemBackground» y su código se parece a esto.

          <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/selectableItemBackground"
            android:text="New Button" />

    Otra Forma de Agregar Efecto Dominó/Animación a un Android Botón

    Usando este método, usted puede personalizar el efecto de la ondulación de color. En primer lugar, usted tiene que crear un archivo xml en el dibujable directorio de recursos. Crear un ripple_effect.xml archivo y agregar el siguiente código.
    res/drawable/ripple_effect.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="#f816a463"
        tools:targetApi="lollipop">
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="#f816a463" />
            </shape>
        </item>
    </ripple>

    Y establece el color de fondo del botón de arriba dibujable archivo de recursos

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ripple_effect"
        android:padding="16dp"
        android:text="New Button" />
    • Para mí, el efecto dominó no aparecen. fue sólo un cambio de color para el botón :/ Mi versión de android es 5.1.1 así que debería funcionar. Podría usted ayudar? He seguido tus pasos
    • android:el color debe ser diferente de la del mástil android:color, o desea ver el efecto de la ondulación
    • No trabajo por debajo de lollipop
    • si quieres un fondo que acaba de agregar otro elemento a la ondulación, como: <item android:dibujable=»?attr/colorPrimary»/>
  4. 30

    Además Jigar Patel‘s solución, agregar esto a la ripple.xml para evitar que se transparente el fondo de los botones.

    <item
        android:id="@android:id/background"
        android:drawable="@color/your-color" />

    Xml completo :

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:color="@color/your-color"
        tools:targetApi="lollipop">
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="@color/your-color" />
            </shape>
        </item>
        <item
            android:id="@android:id/background"
            android:drawable="@color/your-color" />
    </ripple>

    Utilizar este ripple.xml como fondo en el botón :

    android:background="@drawable/ripple"
    • No tuvo necesidad de utilizar el <item android:id="@android:id/mask"> [...]. A menos que quieras un óvalo de la máscara. Gracias por tu respuesta!
    • Lo que hace este <item android:id=»@android:id/máscara»> hacer de todos modos, he creado 2 elementos similares con y sin ese atributo, y se ven exactamente la misma
    • oficial de google docs: Si una máscara de capa está establecido, el efecto dominó se ocultará en contra de la capa antes de que se dibujan sobre la composición de las restantes capas secundarias. Si no hay ninguna capa de máscara se establece, el efecto dominó se enmascara en contra de la composición de las capas secundarias. Este es el enlace, developer.android.com/reference/android/graphics/drawable/…
    • eso sólo la hace más confuso
    • Desde que la documentación oficial Es bastante claro creo. Efecto de la ondulación que se dibuje sobre el niño/enmascarados capas. Por favor, lea el doc de nuevo, usted consigue el punto.
    • Usted necesidad de utilizar diferentes colores para la ondulación y de fondo, pero no el mismo "@color/your-color"
    • Absolutamente. Yo no significaba que esos son los mismos colores.. Solo usar cualquier color que usted quiera..

  5. 26

    Cuando el botón tiene un fondo de la imagen, podemos añadir el efecto dominó para el primer parámetro.. Comprobar a continuación el código en su trabajo para mi botón con un fondo diferente

        <Button
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:gravity="center"
        android:layout_centerHorizontal="true"                                                             
        android:background="@drawable/shape_login_button"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:text="@string/action_button_login"
         />

    Agregar a continuación del parámetro para el efecto dominó

       android:foreground="?attr/selectableItemBackgroundBorderless"
       android:clickable="true"

    De referencia consulte el enlace de abajo
    https://jascode.wordpress.com/2017/11/11/how-to-add-ripple-effect-to-an-android-app/

    • trabajo fino. podemos aumentar el tamaño de la ondulación ?
    • Atributo android:primer plano no tiene ningún efecto sobre la API de niveles inferiores a 23
  6. 7

    AppCompat v7+

    Si no el prefijo ?android: la aplicación se bloquee.

    Debe utilizar "?android:attr/selectableItemBackground" o "?android:attr/selectableItemBackgroundBorderless", según su preferencia. Yo prefiero Borderless.

    Se puede poner en android:background o android:foreground para mantener las propiedades existentes.

    El elemento debe tener android:clickable="true" y android:focusable="true" en orden para que esto funcione, pero muchos elementos, tales como botones, tienen ellos true por defecto.

    <Button
        ...
        android:background="@color/white"
        android:foreground="?android:attr/selectableItemBackgroundBorderless"
    />
    <TextView
        ...
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:clickable="true"
        android:focusable="true"
    />
  7. 4

    Al uso de android:antecedentes, se reemplaza mucho de que el estilo y el aspecto de un botón con un espacio en blanco de color.

    Actualización: a partir de la versión 23.0.0 liberación de AppCompat, hay un nuevo Widget.AppCompat.El botón.Un estilo de color que utiliza el tema de la colorButtonNormal para la movilidad de color y colorAccent para el habilitado de color.

    Esto permite aplicarlo a su botón directamente a través de

    <Button
     ...
    style="@style/Widget.AppCompat.Button.Colored" />

    Puede utilizar una imagen en su v21 directorio para el fondo tal como:

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

    Esto se asegurará de que su color de fondo es ?attr/colorPrimary y tiene el defecto de ondulación de la animación utilizando el valor predeterminado ?attr/colorControlHighlight (que también se puede establecer en el tema si te gustaría).

    Nota: usted tendrá que crear un selector personalizado por menos de v21:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/primaryPressed"            android:state_pressed="true"/>
    <item android:drawable="@color/primaryFocused" android:state_focused="true"/>
    <item android:drawable="@color/primary"/>
    </selector>
    • im usando minSDK lvl 21
    • no hay v21 dibujable carpeta, solo una carpeta carpeta carpeta v21
    • que @Rak usted necesita para ir de terceros api github.com/traex/RippleEffect
    • sí, he utilizado esta API también, si puedo usar esta API después de hacer clic en mi aplicación se bloquea
    • en realidad, im a probar mi aplicación en mi teléfono con el modo de depuración, y mi sistema operativo es CyanogenMod13 (Android 6, Marshmellow)
  8. 4

    Además Sudheesh R

    Agregar Efecto Dominó/Animación a un Android el Botón con el botón con forma de rectángulo con la esquina

    Crear archivo xml res/drawable/your_file_name.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/colorWhite"
        tools:targetApi="lollipop">
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="@color/colorPrimaryDark" />
                <corners android:radius="50dp" />
            </shape>
        </item>
    
        <item android:id="@android:id/background">
            <shape android:shape="rectangle">
                <gradient
                    android:angle="90"
                    android:endColor="@color/colorAccent"
                    android:startColor="@color/colorPrimary"
                    android:type="linear" />
                <corners android:radius="50dp" />
            </shape>
        </item>
    </ripple>
    • se ve bonito…..
  9. 4

    probar este

    <Button
                android:id="@+id/btn_location"
                android:layout_width="121dp"
                android:layout_height="38dp"
                android:layout_gravity="center"
                android:layout_marginBottom="24dp"
                android:layout_marginTop="24dp"
                android:foreground="?attr/selectableItemBackgroundBorderless"
                android:clickable="true"
                android:background="@drawable/btn_corner"
                android:gravity="center_vertical|center_horizontal"
                android:paddingLeft="13dp"
                android:paddingRight="13dp"
                android:text="Save"
                android:textColor="@color/color_white" />
  10. 4

    La adición de primer plano y hacer clic atributos trabajó para mí.

    <Button
        ... 
        android:background="@color/your_color"
        android:foreground="?attr/selectableItemBackgroundBorderless"
        android:clickable="true" />
  11. 2

    Sólo tiene que utilizar :

    android:backgroundTint="#f816a463"

    Lugar de:

    android:background="#f816a463"

    No se olvide de cambiar su Button a android.support.v7.widget.AppCompatButton

    • Lo malo es que si usted necesita un botón para completar el 100% de la pantalla horizontal no.
  12. 1

    Una solución alternativa a la utilización de la <ripple> etiqueta (que yo personalmente prefiero no hacerlo, porque los colores no son «default»), es el siguiente:

    Crear una imagen para el fondo del botón, y se incluyen <item android:drawable="?attr/selectableItemBackground"> en el <layer-list>

    Entonces (y creo que esta es la parte importante) establecer mediante programación backgroundResource(R.drawable.custom_button) en su instancia de botón.

    Actividad/Fragmento

    Button btn_temp = view.findViewById(R.id.btn_temp);
    btn_temp.setBackgroundResource(R.drawable.custom_button);

    Diseño

    <Button
        android:id="@+id/btn_temp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_button"
        android:text="Test" />

    custom_button.xml

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

Dejar respuesta

Please enter your comment!
Please enter your name here