Android LinearLayout Farbverlauf Hintergrund

246

Ich habe Probleme beim Anwenden eines Verlaufshintergrunds auf ein LinearLayout.

Dies sollte nach dem, was ich gelesen habe, relativ einfach sein, aber es scheint einfach nicht zu funktionieren. Als Referenz entwickle ich am 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>

Wenn ich @ drawable / header_bg in eine Farbe ändere - zB # FF0000 - funktioniert das einwandfrei. Vermisse ich hier etwas Offensichtliches?

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

Antworten:

406

Ok, ich habe es geschafft, dies mit einem Selektor zu lösen. Siehe Code unten:

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>

Hoffentlich hilft dies jemandem, der das gleiche Problem hat.

Genesis
quelle
5
Toll. Zu
Ihrer Information
86

Es ist auch möglich, die dritte Farbe (Mitte) zu haben. Und verschiedene Arten von Formen.

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

Dies gibt Ihnen Schwarz - Grau - Schwarz (von links nach rechts), was mein Lieblings-Hintergrund mit dunklem Hintergrund ist.

Denken Sie daran, gradient.xml als Hintergrund in Ihre Layout-XML einzufügen:

android:background="@drawable/gradient"

Es ist auch möglich zu drehen, mit:

Winkel = "0"

gibt Ihnen eine vertikale Linie

und mit

Winkel = "90"

gibt Ihnen eine horizontale Linie

Mögliche Winkel sind:

0, 90, 180, 270.

Es gibt auch einige verschiedene Formen:

android: shape = "rechteck"

Abgerundete Form:

android: shape = "oval"

und wahrscheinlich noch ein paar mehr.

Hoffe es hilft, Prost!

Sindri Þór
quelle
40

In XML Drawable File:

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

In Ihrer Layoutdatei: 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>

Geben Sie hier die Bildbeschreibung ein

Pacific P. Regmi
quelle
Hallo, wie haben Sie eine transparente Statusleiste erreicht? Wenn ich es transparent in styles.xml setze, wird es schwarz ..
kironet
21

Versuchen Sie, Android zu entfernen: gradientRadius = "90". Hier ist eine, die für mich funktioniert:

<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>
Vincent Mimoun-Prat
quelle
Leider funktioniert das bei mir nicht. Ich habe die ursprüngliche Frage mit dem aktualisiert, was ich jetzt habe.
Genesis
Funktioniert es immer noch nicht, wenn Sie dem Layout ein Widget hinzufügen (zum Beispiel eine Textansicht?
Vincent Mimoun-Prat
Richtig - es funktioniert immer noch nicht mit einer Textansicht im Layout. Auch hier funktioniert es einwandfrei, wenn ich eine statische Farbe anstelle einer Zeichenfarbe auftrage. Eine Sache, die mir aufgefallen ist, ist, dass ich es (manchmal) mit einem Selektor zum Laufen bringen kann, aber das sollte nach meinem Verständnis nicht notwendig sein.
Genesis
6

Mein Problem war, dass die XML-Erweiterung nicht zum Dateinamen der neu erstellten XML-Datei hinzugefügt wurde. Das Hinzufügen der XML-Erweiterung hat mein Problem behoben.

kwahn
quelle
3

Mit Kotlin können Sie das in nur 2 Zeilen tun

Ändern Sie die Farbwerte im Array

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

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Ergebnis

Geben Sie hier die Bildbeschreibung ein

Hitesh Sahu
quelle
1

Ich weiß nicht, ob dies jemandem helfen wird, aber mein Problem war, dass ich versucht habe, den Verlauf auf die Eigenschaft "src" einer ImageView wie folgt zu setzen:

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

Ich bin mir nicht 100% sicher, warum das nicht funktioniert hat, aber jetzt habe ich es geändert und das Drawable in die "background" -Eigenschaft des übergeordneten ImageView-Elements eingefügt, was in meinem Fall ein RelativeLayout ist: (dies hat erfolgreich funktioniert)

<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">
Instanz von
quelle
0

Ich würde Ihren Alphakanal auf Ihre Verlaufsfarben überprüfen. Beim Testen meines Codes hatte ich den Alphakanal für die Farben falsch eingestellt und es hat bei mir nicht funktioniert. Sobald ich den Alpha-Kanal eingestellt hatte, funktionierte alles!

Ray Hunter
quelle
0

Sie können dazu eine benutzerdefinierte Ansicht verwenden. Mit dieser Lösung sind die Verlaufsformen aller Farben in Ihren Projekten fertig:

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

}

Ich erstelle auch ein Open Source-Projekt GradientView mit dieser benutzerdefinierten Ansicht:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'
lopez.mikhael
quelle
Sieht interessant aus. Funktioniert dies mit späteren Versionen von Android? Ich hatte Probleme mit den anderen Antworten, da sie jetzt veraltet zu sein scheinen: issuetracker.google.com/issues/37114374
tree_are_great