Android LinearLayout Gradient Background

Tengo problemas para aplicar un fondo degradado a un diseño lineal.

Esto debería ser relativamente simple de lo que he leído, pero simplemente no parece funcionar. Por motivos de referencia, estoy desarrollando 2.1-update1.

header_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="90"
        android:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

Si cambio @ drawable / header_bg a un color, por ejemplo, # FF0000, funciona perfectamente bien. ¿Me estoy perdiendo algo obvio aquí?

Ok, he logrado resolver esto usando un selector. Ver código a continuación:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

Esperemos que esto ayude a alguien que tiene el mismo problema.

También es posible tener el tercer color (centro). Y diferentes tipos de formas.

Por ejemplo en drawable / gradient.xml:

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

Esto le da negro - gris - negro (de izquierda a derecha), que es mi cajero automático de fondo oscuro favorito.

Recuerde agregar gradient.xml como fondo en su diseño xml:

android:background="@drawable/gradient"

También es posible rotar, con:

ángulo = "0"

te da una línea vertical

y con

ángulo = "90"

te da una línea horizontal

Los ángulos posibles son:

0, 90, 180, 270.

También hay algunos tipos diferentes de formas:

android: shape = "rectángulo"

Forma redondeada:

android: shape = "oval"

y probablemente algunos más.

Espero que ayude, saludos!

En archivo dibujable XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

En su archivo de diseño: android: background = "@ drawable / gradient_background"

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

Intenta eliminar android: gradientRadius = "90". Aquí hay uno que me funciona:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

Mi problema fue que la extensión .xml no se agregó al nombre de archivo del archivo XML recién creado. Agregar la extensión .xml solucionó mi problema.

Con Kotlin puedes hacerlo en solo 2 líneas

Cambiar valores de color en la matriz

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Resultado

No sé si esto ayudará a alguien, pero mi problema fue que estaba tratando de establecer el gradiente en la propiedad "src" de un ImageView así:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

No estoy 100% seguro de por qué eso no funcionó, pero ahora lo cambié y puse el dibujo en la propiedad "background" del padre de ImageView, que es un RelativeLayout en mi caso, así: (esto funcionó con éxito)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

Verificaría tu canal alfa en tus colores degradados. Para mí, cuando estaba probando mi código, tenía el canal alfa configurado incorrectamente en los colores y no funcionó para mí. Una vez que obtuve el canal alfa, ¡todo funcionó!

Puede usar una vista personalizada para hacer eso. Con esta solución, ha terminado las formas de degradado de todos los colores en sus proyectos:

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

También creo un proyecto de código abierto GradientView con esta vista personalizada:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'