Aplicar ColorFilter a ImageView con ShapedDrawable

4 minutos de lectura

Yo tengo un ImageView con android:src establecido en un ShapedDrawable, es decir, un círculo blanco. lo que quiero es colorear esto ImageView en tiempo de ejecución respondiendo a algunos eventos. imgView.setColorFilter parece ser la solución, pero después de usar esto (probé con diferentes parámetros) la imagen se vuelve invisible (no la veo en la pantalla).

¿Cómo resolver esto? ¿Y hay mejores formas de tener círculos de color?

  • Puede encontrar interesantes estas preguntas y respuestas relacionadas.

    – M. H.

    11 abr.

  • Lo siento, pero no pude encontrar nada relacionado con esta pregunta.

    – aplavin

    11 abr.

  • No estoy seguro de cómo no puede encontrar la respuesta aceptada relacionada … De todos modos, aquí hay otro tema similar: enlace. Como se sugiere allí, intente: imgView.setColorFilter( 0xff00ffff, PorterDuff.Mode.MULTIPLY );. Si eso no se ajusta a sus necesidades, allí también se propone una solución más sofisticada.

    – M.H.

    12 abr.


  • he escrito, que setColorFilter no funciona de la manera que esperaba: después de aplicarlo, la imagen simplemente desaparece de la pantalla (dejando un espacio vacío allí).

    – aplavin

    12 abr.

Muy bien, jugué rápidamente con esto y noté que el problema de los círculos desaparecía. sin que describas qué exactamente lo que intentó, supongo que no ha intentado configurar el filtro de color en el Drawable mismo todavía? (a diferencia de la ImageView, que solo parece funcionar con BitmapDrawables).

Las siguientes declaraciones funcionan perfectamente bien para un xml declarado ShapeDrawable con blanco como color inicial:

ImageView redCircle = (ImageView) findViewById(R.id.circle_red_imageview);
ImageView greenCircle = (ImageView) findViewById(R.id.circle_green_imageview);
ImageView blueCircle = (ImageView) findViewById(R.id.circle_blue_imageview);

// we can create the color values in different ways:
redCircle.getDrawable().setColorFilter(Color.RED, PorterDuff.Mode.MULTIPLY );
greenCircle.getDrawable().setColorFilter(0xff00ff00, PorterDuff.Mode.MULTIPLY );
blueCircle.getDrawable().setColorFilter(getResources().getColor(R.color.blue), PorterDuff.Mode.MULTIPLY );

El ShapeDrawable para completar: (configuré el tamaño en el ImageView, vea abajo)

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <solid android:color="@android:color/white" />
</shape>

y uno de los ImageViews como ejemplo:

<ImageView
    android:id="@+id/circle_red_imageview"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:padding="5dp"
    android:src="https://stackoverflow.com/questions/10114420/@drawable/circle_white" />

Resultado visual:

Captura de pantalla de círculos de colores

  • vocación mutable() sobre el Drawable ayudará a mantener el estado de los dibujables.

    – Sufí

    25 mar. 14 a las 13:13


  • Wow, esto me acaba de salvar, definitivamente quieres aplicar el filtro a la Drawable y no simplemente el ImageView.

    – Mauricio

    30 jul.

  • @SadeepDarshana: ¿No estoy seguro de lo que estás preguntando aquí? MULITPLY se define implícitamente como [Sa * Da, Sc * Dc], es decir, el resultado se compone de multiplicar el canal alfa de origen por el de destino, y lo mismo para cada uno de los canales de color (r, g y b). Si haces que cualquiera de las fuentes sea igual a 1 (ignorando el canal alfa por simplicidad), entonces el resultado es 1 * Dc = Dc, que es solo el canal de destino. Viceversa, si el destino es igual 1, entonces es solo el canal de origen. Las mismas matemáticas se aplican al canal alfa.

    – M.H.

    26 oct.


  • @SadeepDarshana: Eso sería [0,1], de lo contrario la operación de multiplicación (y muchas otras) tendría poco sentido. Para más detalles sobre PorterDuff.Mode en Android, sugeriría tener un leer aquí o comience una nueva pregunta si encuentra algún inconveniente.

    – M.H.

    27 oct.


  • @RahulChowdhury: Claro, dependiendo de su caso de uso, querrá explorar diferentes modos. PorterDuff.Mode.MULTIPLY fue solo un ejemplo que se ajusta a la pregunta original y funciona porque el color inicial del círculo es blanco. El punto a destacar aquí es cómo aplicar un filtro de color usando uno de los disponibles PorterDuff.Mode opciones proporcionadas por el marco.

    – M. H.

    01 nov.

Aplicar ColorFilter a ImageView con ShapedDrawable
Vishwas Vaishnav

Si desea cambiar el color de la imagen, use

PorterDuff.Mode.SRC_ATOP instead
PorterDuff.Mode.MULTIPLY

en el ejemplo anterior.

  • Creo que el autor preguntó sobre cualquier filtro, no solo SRC_ATOP o MULTIPLY.

    – Kelin

    14 dic. 15 en 12:33

  • Solución adecuada para vistas de imágenes con fuente PNG

    – Mahdi Khansari

    10 jul.

Puedes usar el atributo android:tint en ImageView en xml.

Ejemplo:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="https://stackoverflow.com/questions/10114420/@drawable/your_drawable"
    android:tint="@color/your_color" />

Probado en Android 4.1.2 y 6.0.1

  • buena respuesta no es necesario ejecutar

    – marlonpya

    31 oct.

Puedes hacerlo muy, muy simple usando esta biblioteca:
https://github.com/jrvansuita/IconHandler

Funcionará así:

Icon.on(yourImageView).color(R.color.your_color).icon(R.mipmap.your_icon).put();

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad