Gradiente circular en android


109

Estoy tratando de hacer un degradado que emite desde el centro de la pantalla en blanco y se vuelve negro a medida que se mueve hacia los bordes de la pantalla.

Mientras hago un degradado "normal" como este, he estado experimentando con diferentes formas:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#E9E9E9" android:endColor="#D4D4D4"
        android:angle="270"/>
</shape>

Cuando usé la forma "ovalada" obtuve al menos una forma redonda, pero no hubo efecto de degradado. ¿Cómo puedo conseguir esto?'

Respuestas:


241

Puede obtener un degradado circular usando android:type="radial":

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:type="radial" android:gradientRadius="250dp"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

108
¡No solo funcionó, sino que también resolvió la hambruna mundial! ¡Gracias!
pgsandstrom

2
Nota al margen: también es posible utilizar el byte de transparencia en el color. # ff00ff00 a # 7f0000ff se desvanecerá de rojo completamente opaco a azul semitransparente.
Simon Forsberg

10
android: gradientRadius = "250" será ignorado. Debe apuntar a un recurso dimen con un valor px o dp, como: android: gradientRadius = "@ dimen / gradient_radius"
Bolling

2
Gracias Bolling, tienes razón en que android: gradientRadius = "250" no funciona en absoluto, supongo que se comportó de manera diferente en versiones anteriores de Android.
Justin

113

Siempre encuentro útiles las imágenes al aprender un nuevo concepto, así que esta es una respuesta adicional.

ingrese la descripción de la imagen aquí

Los %pmedios un porcentaje de la matriz, es decir, un porcentaje de la dimensión más estrecha de lo que consideramos que fijamos nuestra dibujable sucesivamente. Las imágenes de arriba fueron generadas cambiando el gradientRadiusen este código

my_gradient_drawable

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="radial"
        android:gradientRadius="10%p"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

Que se puede establecer en el backgroundatributo de una vista como este

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

Centrar

Puede cambiar el centro del radio con

android:centerX="0.2"
android:centerY="0.7"

donde los decimales son fracciones del ancho y alto para xy yrespectivamente.

ingrese la descripción de la imagen aquí

Documentación

Aquí hay algunas notas de la documentación que explican un poco más las cosas.

android:gradientRadius

Radio del degradado, utilizado solo con degradado radial. Puede ser una dimensión explícita o un valor fraccionario en relación con la dimensión mínima de la forma.

Puede ser un valor de coma flotante, como "1,2".

Puede ser un valor de dimensión, que es un número de punto flotante agregado con una unidad como "14.5sp". Las unidades disponibles son: px (píxeles), dp (píxeles independientes de la densidad), sp (píxeles escalados según el tamaño de fuente preferido), en (pulgadas) y mm (milímetros).

Puede ser un valor fraccionario, que es un número de punto flotante agregado con% o% p, como "14.5%". El sufijo% siempre significa un porcentaje del tamaño base; el sufijo% p opcional proporciona un tamaño relativo a algún contenedor principal.


en kikat tipo radial funcionará cuando elimine% p del radio de degradado Para Kikat android: gradientRadius = "10"
mehmoodnisar125

1
@ mehmoodnisar125, agregué una nota de la documentación que explica la diferencia entre incluir %o no.
Suragch

4

También puede hacerlo en código si necesita más control, por ejemplo, varios colores y posicionamiento. Aquí está mi fragmento de Kotlin para crear un degradado radial dibujable:

object ShaderUtils {
    private class RadialShaderFactory(private val colors: IntArray, val positionX: Float,
                                      val positionY: Float, val size: Float): ShapeDrawable.ShaderFactory() {

        override fun resize(width: Int, height: Int): Shader {
            return RadialGradient(
                    width * positionX,
                    height * positionY,
                    minOf(width, height) * size,
                    colors,
                    null,
                    Shader.TileMode.CLAMP)
        }
    }

    fun radialGradientBackground(vararg colors: Int, positionX: Float = 0.5f, positionY: Float = 0.5f,
                                 size: Float = 1.0f): PaintDrawable {
        val radialGradientBackground = PaintDrawable()
        radialGradientBackground.shape = RectShape()
        radialGradientBackground.shaderFactory = RadialShaderFactory(colors, positionX, positionY, size)
        return radialGradientBackground
    }
}

Uso básico (pero siéntase libre de ajustar con parámetros adicionales):

view.background = ShaderUtils.radialGradientBackground(Color.TRANSPARENT, BLACK)

1

Supongo que deberías agregar android: centerColor

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
  android:startColor="#FFFFFF"
  android:centerColor="#000000"
  android:endColor="#FFFFFF"
  android:angle="0" />
</shape>

Este ejemplo muestra un degradado horizontal de blanco a negro a blanco.


13
Esta respuesta debe marcarse como la solución. No importa que quieras hacer un degradado radial, ¡haz uno horizontal!
erdomester

1

<gradient
    android:centerColor="#c1c1c1"
    android:endColor="#4f4f4f"
    android:gradientRadius="400"
    android:startColor="#c1c1c1"
    android:type="radial" >
</gradient>


1

Aquí está el xml completo con degradado, stoke y forma circular.

<?xml version="1.0" encoding="utf-8"?>

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

    <!-- You can use gradient with below attributes-->
    <gradient
        android:angle="90"
        android:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <!-- You can omit below tag if you don't need stroke -->
   <stroke android:color="#3b91d7" android:width="5dp"/>

    <!-- Set the same value for both width and height to get a circular shape -->
    <size android:width="200dp" android:height="200dp"/>


    <!--if you need only a single color filled shape-->
    <solid android:color="#e42828"/>


</shape>

Buen ejemplo. Gracias.
Sinan Ceylan

-1

<!-- Drop Shadow Stack -->
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#00CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#10CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#20CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#30CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>
<item>
    <shape android:shape="oval">
        <padding
            android:bottom="1dp"
            android:left="1dp"
            android:right="1dp"
            android:top="1dp" />

        <solid android:color="#50CCCCCC" />

        <corners android:radius="3dp" />
    </shape>
</item>

<!-- Background -->
<item>
    <shape android:shape="oval">
        <gradient
            android:startColor="@color/colorAccent_1"
            android:centerColor="@color/colorAccent_2"
            android:endColor="@color/colorAccent_3"
            android:angle="45"
            />
        <corners android:radius="3dp" />
    </shape>
</item>

<color name="colorAccent_1">#6f64d6</color>
<color name="colorAccent_2">#7668F8</color>
<color name="colorAccent_3">#6F63FF</color>
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.