Sfondo sfumato Android LinearLayout


247

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?


android: backgroundTint android: backgroundTintMode stackoverflow.com/a/43341289/3209132
Pramod Garg

Risposte:


407

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.


5
Grande. Cordiali saluti, vedi altri tipi di gradiente: developer.android.com/reference/android/graphics/drawable/…
Bamaco

87

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


40

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>

inserisci qui la descrizione dell'immagine


Ciao, come hai ottenuto la barra di stato trasparente? Se lo imposto trasparente in styles.xml diventa nero ..
kironet,

21

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>

Sfortunatamente questo non funziona per me. Ho aggiornato la domanda originale con quello che ho ora.
Genesi,

Non funziona ancora quando aggiungi un widget nel layout (ad esempio un TextView?
Vincent Mimoun-Prat,

Corretto: continua a non funzionare con un TextView all'interno del layout. Ancora una volta, se applico un colore statico piuttosto che un disegno, funziona perfettamente. Una cosa che ho notato è che posso (a volte) farlo funzionare usando un selettore, ma ciò non dovrebbe essere necessario dalla mia comprensione.
Genesi,

6

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.


3

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

inserisci qui la descrizione dell'immagine


1

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

0

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!


0

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

Sembra interessante. Funziona con le versioni successive di Android. Avevo problemi con le altre risposte in quanto sembrano ormai deprecate: issuetracker.google.com/issues/37114374
trees_are_great
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.