móviles - manual de programacion android pdf

Gradiente circular en android

Question

Intento hacer un degradado que emita desde el medio de la pantalla en blanco, y se vuelva negro a medida que se mueve hacia los bordes de la pantalla.

Mientras hago un gradiente "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 "oval" al menos obtuve una forma redonda, pero no hubo efecto de degradado. ¿Cómo puedo conseguir esto?''

Answer 1

Puedes 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="250"
        android:startColor="#E9E9E9" android:endColor="#D4D4D4" />
</shape>

Answer 2

Siempre encuentro útiles las imágenes cuando aprendo un nuevo concepto, así que esta es una respuesta suplementaria.

El %p significa un porcentaje del elemento primario, es decir, un porcentaje de la dimensión más estrecha de cualquier vista en la que establezcamos nuestro dibujable. Las imágenes de arriba se generaron al cambiar el gradientRadius en 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 configurar en el atributo de background una vista como este

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

Centrar

Puedes cambiar el centro del radio con

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

donde los decimales son fracciones del ancho y alto para y respectivamente.

Documentación

Aquí hay algunas notas de la documentation explican las cosas un poco más.

android:gradientRadius

Radio del gradiente, usado solo con gradiente radial. Puede ser una dimensión explícita o un valor fraccionario relativo a 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 coma flotante anexado a 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), in (pulgadas) y mm (milímetros).

Puede ser un valor fraccionario, que es un número de coma flotante 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.

Answer 3

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 gradiente horizontal de blanco a negro a blanco.

Answer 4

También puede hacerlo en código si necesita más control, por ejemplo, colores múltiples 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 no dude en ajustar con parámetros adicionales):

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

Answer 5

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