Sfondo sfumato Android LinearLayout

Ho problemi ad applicare uno sfondo sfumato a un LinearLayout.

Questo dovrebbe essere relativamente semplice da quello che ho letto, ma non sembra funzionare. Per motivi di riferimento, sto sviluppando 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>

Se cambio @ drawable / header_bg in un colore - ad es. # FF0000, funziona perfettamente. Mi sto perdendo qualcosa di ovvio qui?

Ok, sono riuscito a risolverlo usando un selettore. Vedi il codice qui sotto:

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>

Spero che questo aiuti qualcuno che ha lo stesso problema.

È anche possibile avere il terzo colore (al centro). E diversi tipi di forme.

Ad esempio in 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>

Questo ti dà il nero - grigio - nero (da sinistra a destra) che è il mio atm di sfondo scuro preferito.

Ricorda di aggiungere gradient.xml come sfondo nel tuo layout xml:

android:background="@drawable/gradient"

È anche possibile ruotare, con:

angolo = "0"

ti dà una linea verticale

e con

angolo = "90"

ti dà una linea orizzontale

Gli angoli possibili sono:

0, 90, 180, 270.

Inoltre ci sono alcuni diversi tipi di forme:

Android: forma = "rettangolo"

Forma arrotondata:

android: Forma = "ovale"

e probabilmente qualche altro.

Spero che ti aiuti, salute!

Nel file Drawable 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>

Nel tuo file di layout: 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>

Prova a rimuovere android: gradientRadius = "90". Eccone uno che funziona per me:

<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>

Il mio problema era che l'estensione .xml non era stata aggiunta al nome del file XML appena creato. L'aggiunta dell'estensione .xml ha risolto il mio problema.

Con Kotlin puoi farlo in sole 2 righe

Modifica i valori di colore nell'array

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

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Risultato

Non so se questo aiuterà qualcuno, ma il mio problema era che stavo cercando di impostare il gradiente sulla proprietà "src" di ImageView in questo modo:

<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"/>

Non sono sicuro al 100% del perché non abbia funzionato, ma ora l'ho modificato e ho inserito il disegno nella proprietà "background" del genitore di ImageView, che nel mio caso è un RelativeLayout, in questo modo: (ha funzionato correttamente)

<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">

Vorrei controllare il tuo canale alfa sui tuoi colori sfumati. Per me, quando stavo testando il mio codice, avevo impostato il canale alfa sui colori e non funzionava per me. Una volta impostato il canale alfa, ha funzionato tutto!

È possibile utilizzare una vista personalizzata per farlo. Con questa soluzione, ha finito le forme sfumate di tutti i colori nei tuoi progetti:

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)
    }

}

Creo anche un progetto open source GradientView con questa vista personalizzata:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'