Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Efecto de material en el botón con el color de fondo

Estoy usando la biblioteca de soporte de Android v21.

He creado un botón con el color de fondo de encargo. Los efectos de diseño de material como ondulación, revelar se han ido (excepto la elevación al hacer clic) cuando utilizo el color de fondo de la espalda.

  • Adición de vista personalizada a una barra de herramientas
  • La aplicación que implementa Parse Unity Plugin se bloquea en el dispositivo android pero funciona bien en el editor
  • ¿Cómo crear notificaciones que no desaparecen cuando se hace clic en Android?
  • Android, encuentra todos los lugares en código para solicitar permisos
  • Causando un error de java.IllegalStateException, ninguna actividad, solamente cuando navega al fragmento por la SEGUNDA vez
  • Los extras de intento se duplican cuando se utiliza FLAG_UPDATE_CURRENT en PendingIntent al crear notificaciones de android
  • <Button style="?android:attr/buttonStyleSmall" android:background="?attr/colorPrimary" android:textColor="@color/white" android:textAllCaps="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button1" /> 

    Fondo Lo siguiente es un botón normal y los efectos están funcionando bien.

     <Button style="?android:attr/buttonStyleSmall" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textAllCaps="true" android:text="Button1" /> 

    Botón predeterminado

  • Diferencia entre setAlpha y setImageAlpha
  • ¿Cómo construyo el SDK de Android con APIs ocultas e internas disponibles?
  • Android - Widget con lista desplegable Listview Manual Actualizar
  • ¿Cuál es la forma correcta de anular el registro de las devoluciones de llamada del ciclo de vida de la actividad?
  • ¿Cómo hacer que el desplazamiento de Listview sea más lento?
  • Android estilo Recopilación de recursos (aapt) fallando: Tabla de recursos no válidos: tamaño de encabezado 0xc
  • 14 Solutions collect form web for “Efecto de material en el botón con el color de fondo”

    Cuando usas android:background , estás reemplazando gran parte del estilo y la apariencia de un botón con un color en blanco.

    Actualización: A partir de la versión 23.0.0 de AppCompat , hay un nuevo estilo Widget.AppCompat.Button.Colored que utiliza el colorButtonNormal su tema para el color desactivado y colorAccent para el color habilitado.

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

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

    Si necesitas un colorButtonNormal o colorAccent , puedes usar un ThemeOverlay como se explica en este pro-tip and android:theme en el botón.

    Respuesta anterior

    Puede utilizar un drawable en su directorio v21 para su fondo 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 garantizará que su color de fondo sea ?attr/colorPrimary y tenga la animación de ondulación predeterminada usando el valor predeterminado ?attr/colorControlHighlight (que también puede establecer en su tema si lo desea).

    Nota: tendrás que crear un selector personalizado para 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> 

    Asumiendo que tiene algunos colores que desea para el estado predeterminado, presionado y enfocado. Personalmente, tomé una captura de pantalla de una ola a medio camino a través de ser seleccionado y sacó el estado principal / enfocado fuera de eso.

    Hay otra solución simple para proporcionar fondo personalizado para los botones "planos" mientras mantiene sus efectos "materiales".

    1. Coloque su botón en ViewGroup con el fondo deseado establecido allí
    2. Set selectableItemBackground del tema actual como fondo para su botón (API> = 11)

    Es decir:

     <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/blue"> <Button style="?android:attr/buttonStyleSmall" android:background="?android:attr/selectableItemBackground" android:textColor="@android:color/white" android:textAllCaps="true" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button1" /> </FrameLayout> 

    Puede utilizarse para botones planos , funciona en API> = 11 y obtendrá efecto de rizo en> = 21 dispositivos, manteniendo botones regulares en pre-21 hasta que AppCompat se actualice para admitir ripple allí también.

    También puede utilizar selectableItemBackgroundBorderless para> = 21 botones solamente.

    Aquí está una manera simple y hacia atrás compatible de entregar el efecto de la ondulación a los botones levantados con el fondo de encargo.

    Tu diseño debería ser como este

     <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/my_custom_background" android:foreground="?android:attr/selectableItemBackground"/> 

    Me encontré con este problema hoy en día jugando con la biblioteca v22.

    Suponiendo que está utilizando estilos, puede establecer la propiedad colorButtonNormal y los botones utilizarán ese color de forma predeterminada.

     <style name="AppTheme" parent="BaseTheme"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/primaryColor</item> <item name="colorPrimaryDark">@color/primaryColorDark</item> <item name="colorAccent">@color/accentColor</item> <item name="colorButtonNormal">@color/primaryColor</item> </style> 

    Fuera de eso usted podría todavía hacer un estilo para el botón entonces utilizar eso por el botón si usted necesitó un surtido de colores (no ha probado, apenas especulando).

    Recuerde agregar android: antes de los nombres de elemento en su estilo v21 .

    Con AppCompat (22.1.1+) puedes añadir un estilo como este:

     <style name="MyGreenButton"> <item name="colorButtonNormal">#009900</item> </style> 

    Y úselo simplemente aplicando el estilo:

     <android.support.v7.widget.AppCompatButton style="@style/MyGreenButton" android:layout_width="match_width" android:layout_height="wrap_content" android:text="A Green Button" /> 

    Programáticamente cambiando el color, encontré que la única manera de actualizar el color (en API 15 o 16) era usar la "lista de tonos de fondo" en su lugar. Y no quita la animación radial agradable en los dispositivos de la API 21:

     ColorStateList colorStateList = new ColorStateList(new int[][] {{0}}, new int[] {0xFF009900}); // 0xAARRGGBB button.setSupportBackgroundTintList(colorStateList); 

    Debido a que button.setBackground(...) y button.getBackground().mutate().setColorFilter(...) no cambian el color del botón en API 15 y 16 como lo hacen en la API 21.

    La respuesta de @ ianhanniballake es absolutamente correcta y simple. Pero me llevó pocos días entenderlo. Para alguien que no entiende su respuesta, aquí está más detallada la aplicación

     <Button android:id="@+id/btn" style="@style/MaterialButton" ... /> <style name="MaterialButton" parent="Widget.AppCompat.Button.Colored"> <item name="android:theme">@style/Theme.MaterialButton</item> ... </style> <style name="Theme.MaterialButton" parent="YourTheme"> <item name="colorAccent">@color/yourAccentColor</item> <item name="colorButtonNormal">@color/yourButtonNormalColor</item> </style> 

    O ===

     <Button android:id="@+id/btn" style="@style/Widget.AppCompat.Button.Colored" android:theme="Theme.MaterialButton" /> <style name="Theme.MaterialButton" parent="YourTheme"> <item name="colorAccent">@color/yourAccentColor</item> <item name="colorButtonNormal">@color/yourButtonNormalColor</item> </style> 

    Utilicé el backgroundTint y el primero plano:

     <Button android:layout_width="match_parent" android:layout_height="40dp" android:backgroundTint="@color/colorAccent" android:foreground="?android:attr/selectableItemBackground" android:textColor="@android:color/white" android:textSize="10sp"/> 

    v22.1 de appcompat-v7 introdujo algunas nuevas posibilidades. Ahora es posible asignar un tema específico sólo a una vista.

    Uso descontinuado de la aplicación: tema para la barra de herramientas de estilo. Ahora puedes usar android: tema para las barras de herramientas en todos los dispositivos de nivel API 7 y superiores y android: soporte de temas para todos los widgets en los dispositivos de nivel 11 de API y superiores.

    Así que en lugar de configurar el color deseado en un tema global, creamos uno nuevo y lo asignamos sólo al Button

    Ejemplo:

     <style name="MyColorButton" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="colorButtonNormal">@color/myColor</item> </style> 

    Y utilice este estilo como tema de su Button

     <Button style="?android:attr/buttonStyleSmall" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Button1" android:theme="@style/MyColorButton"/> 

    Usar backgroundTint lugar de background

    Si estás bien con el uso de una biblioteca de terceros, echa un vistazo a traex / RippleEffect . Le permite agregar un efecto Ripple a cualquier vista con sólo unas pocas líneas de código. Sólo tiene que incluir en el archivo de diseño xml el elemento que desea tener un efecto ripple con un contenedor com.andexert.library.RippleView .

    Como una ventaja adicional que requiere Min SDK 9 para que pueda tener consistencia de diseño entre las versiones del sistema operativo.

    He aquí un ejemplo tomado del reporte GitHub de las bibliotecas:

     <com.andexert.library.RippleView android:layout_width="wrap_content" android:layout_height="wrap_content" app:rv_centered="true"> <ImageView android:layout_width="100dp" android:layout_height="100dp" android:src="@android:drawable/ic_menu_edit" android:background="@android:color/holo_blue_dark"/> </com.andexert.library.RippleView> 

    Puede cambiar el color de rizado agregando este atributo al elemento RippleView: app:rv_color="@color/my_fancy_ripple_color

     <android.support.v7.widget.AppCompatButton android:layout_width="wrap_content" android:layout_height="wrap_content" app:backgroundTint="#fff" android:textColor="#000" android:text="test"/> 

    Utilizar

     xmlns:app="http://schemas.android.com/apk/res-auto" 

    Y el color aceptará en pre-lolipop

    Vine a este poste que busca una manera de tener un color de fondo de mi artículo de ListView , con todo guarde la ondulación.

    Simplemente agregé mi color como fondo y el selectableItemBackground como un primer plano:

     <style name="my_list_item"> <item name="android:background">@color/white</item> <item name="android:foreground">?attr/selectableItemBackground</item> <item name="android:layout_height">@dimen/my_list_item_height</item> </style> 

    Y funciona como un encanto. Supongo que la misma técnica se podría utilizar para los botones también. Buena suerte 🙂

    Si usted está interesado en ImageButton puede probar esta cosa simple:

     <ImageButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@android:drawable/ic_button" android:background="?attr/selectableItemBackgroundBorderless" /> 

    He intentado esto:

     android:backgroundTint:"@color/mycolor" 

    En lugar de cambiar la propiedad de fondo. Esto no elimina el efecto material.

    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.