Android LinearLayout Farbverlauf Hintergrund

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?

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.

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!

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>

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>

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.

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

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

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!

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'