web-dev-qa-db-fra.com

Android Arrière-plan dégradé LinearLayout

Je ne parviens pas à appliquer un fond dégradé à LinearLayout.

Cela devrait être relativement simple d'après ce que j'ai lu, mais cela ne semble tout simplement pas fonctionner. À titre de référence, je développe actuellement la version 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. Est-ce que je manque quelque chose d'évident ici?

androidandroid-layoutandroid-linearlayoutgradient
233
Genesis

Ok j'ai réussi à résoudre cela 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>

Espérons que cela aide quelqu'un qui a le même problème.

385
Genesis

Il est également possible d'avoir la troisième couleur (centre). Et différentes sortes 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 noir - gris - noir (de gauche à droite) ce qui est mon atm préféré de fond sombre.

N'oubliez pas d'ajouter gradient.xml comme 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.

De plus, il y a peu de formes différentes:

Android: forme = "rectangle"

Forme arrondie:

Android: forme = "ovale"

et probablement un peu plus.

J'espère que ça aide, à la vôtre!

67
Sindri Þór

Dans un fichier XML dessinable:

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

enter image description here

31
Pacific P. Regmi

Essayez de supprimer Android: gradientRadius = "90". En voici un 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>
18
Vincent Mimoun-Prat

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.

6
kwahn

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'un ImageView comme suit:

<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 suis pas sûr à 100% pourquoi cela n'a pas fonctionné, mais maintenant je l'ai modifié et mis la propriété drawable 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">
1
instanceof

Je voudrais vérifier votre canal alpha sur vos couleurs de dégradé. Pour moi, lorsque je testais mon code, le canal alpha était mal défini pour les couleurs et cela ne fonctionnait pas pour moi. Une fois le canal alpha défini, tout a fonctionné!

0
Ray Hunter

Vous pouvez utiliser une vue personnalisée pour le faire. Avec cette solution, les formes en dégradé de toutes les couleurs de vos projets sont finies:

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'
0
lopez.mikhael