Fond de dégradé LinearLayout Android


246

J'ai du mal à appliquer un fond dégradé à un LinearLayout.

Cela devrait être relativement simple d'après ce que j'ai lu, mais cela ne semble tout simplement pas fonctionner. Pour référence, je développe sur 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 je change @ drawable / header_bg en une couleur - par exemple # FF0000 cela fonctionne parfaitement bien. Suis-je en train de manquer quelque chose d'évident ici?


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

Réponses:


406

Ok, j'ai réussi à résoudre ce problème en utilisant un sélecteur. Voir le code ci-dessous:

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>

J'espère que cela aide quelqu'un qui a le même problème.


5
Génial. Pour info, voir d'autres types de dégradés: developer.android.com/reference/android/graphics/drawable/…
Bamaco

86

Il est également possible d'avoir la troisième couleur (centre). Et différents types de formes.

Par exemple dans 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>

Cela vous donne du noir - gris - noir (de gauche à droite) qui est mon atmosphère de fond sombre préférée.

N'oubliez pas d'ajouter gradient.xml en arrière-plan dans votre mise en page xml:

android:background="@drawable/gradient"

Il est également possible de faire pivoter, avec:

angle = "0"

vous donne une ligne verticale

et avec

angle = "90"

vous donne une ligne horizontale

Les angles possibles sont:

0, 90, 180, 270.

Il existe également peu de formes différentes:

android: shape = "rectangle"

Forme arrondie:

android: forme = "ovale"

et probablement un peu plus.

J'espère que ça aide, bravo!


40

Dans un fichier dessinable 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>

Dans votre fichier de mise en page: 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>

entrez la description de l'image ici


Salut, comment avez-vous atteint la barre d'état transparente? Si je le mets en transparence dans styles.xml, il devient noir ..
kironet

21

Essayez de supprimer android: gradientRadius = "90". En voici une qui fonctionne pour moi:

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

Malheureusement, cela ne fonctionne pas pour moi. J'ai mis à jour la question d'origine avec ce que j'ai maintenant.
Genesis

Cela ne fonctionne-t-il toujours pas lorsque vous ajoutez un widget dans la mise en page (par exemple un TextView?
Vincent Mimoun-Prat

Correct - cela ne fonctionne toujours pas avec un TextView à l'intérieur de la mise en page. Encore une fois, si j'applique une couleur statique plutôt qu'un dessinable, cela fonctionne très bien. Une chose que j'ai remarquée est que je peux (parfois) le faire fonctionner à l'aide d'un sélecteur, mais cela ne devrait pas être nécessaire d'après ma compréhension.
Genesis

6

Mon problème était que l'extension .xml n'a pas été ajoutée au nom de fichier du fichier XML nouvellement créé. L'ajout de l'extension .xml a résolu mon problème.


3

Avec Kotlin, vous pouvez le faire en seulement 2 lignes

Modifier les valeurs de couleur dans le tableau

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

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Résultat

entrez la description de l'image ici


1

Je ne sais pas si cela aidera quelqu'un, mais mon problème était que j'essayais de définir le dégradé sur la propriété "src" d'une ImageView comme ceci:

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

Je ne sais pas à 100% pourquoi cela n'a pas fonctionné, mais maintenant je l'ai changé et j'ai mis le dessinable dans la propriété "background" du parent de ImageView, qui est un RelativeLayout dans mon cas, comme ceci: (cela a fonctionné avec succès)

<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

Je vérifierais votre canal alpha sur vos couleurs dégradées. Pour moi, lorsque je testais mon code, le canal alpha était mal réglé sur les couleurs et cela ne fonctionnait pas pour moi. Une fois que j'ai réglé le canal alpha, tout a fonctionné!


0

Vous pouvez utiliser une vue personnalisée pour ce faire. Avec cette solution, c'est fini les formes dégradées de toutes les couleurs dans vos projets:

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

}

Je crée également un projet open source GradientView avec cette vue personnalisée:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

Semble intéressant. Est-ce que cela fonctionne avec les versions ultérieures d'Android. J'avais des problèmes avec les autres réponses car elles semblent désormais obsolètes: issuetracker.google.com/issues/37114374
trees_are_great
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.