Wie man Gradientenhintergrund in Android macht

228

Ich möchte einen Verlaufshintergrund erstellen, bei dem sich der Verlauf in der oberen Hälfte befindet und in der unteren Hälfte eine Volltonfarbe angezeigt wird, wie in diesem Bild unten:

Ich kann nicht, weil sich die centerColorAusbreitung unten und oben ausbreitet.

Im Farbverlauf für die Schaltfläche wird eine weiße horizontale Linie nach oben und unten über Blau ausgeblendet.

Wie kann ich einen Hintergrund wie das erste Bild erstellen? Wie kann ich kleine machen centerColor, die nicht ausgebreitet sind?

Dies ist Code in XML der obigen Hintergrundschaltfläche.

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient 
        android:startColor="#6586F0"
        android:centerColor="#D6D6D6"
        android:endColor="#4B6CD6"
        android:angle="90"/>
    <corners 
        android:radius="0dp"/>


</shape>
Kongkea
quelle
1
danke ich habe es schon gelöst. aber ich werde stolz sein, wenn Sie mehr antworten. stackoverflow.com/questions/6652547/…
kongkea
versuchen Sie diese webgradients.com
Ivan Aracki

Antworten:

59

Sie können diesen Look mit halbem Farbverlauf erstellen, indem Sie eine XML -Ebenenliste verwenden , um die oberen und unteren "Bänder" in einer Datei zu kombinieren. Jedes Band hat eine XML-Form.

In dieser vorherigen Antwort zu SO finden Sie ein detailliertes Tutorial: Formen mit mehreren Verläufen .

Gunnar Karlsson
quelle
317

Versuchen Sie es damit:

<?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:centerColor="#555994"
        android:endColor="#b5b6d2"
        android:startColor="#555994"
        android:type="linear" />

    <corners 
        android:radius="0dp"/>

</shape>
Pratik Sharma
quelle
Was ist, wenn ich einen Verlauf für ein lineares Layout in den Hintergrund stellen möchte?
Ankit Srivastava
@Ankit Es wird skaliert, um das Layout zu füllen
Dawid Drozd
2
@Ankit: Sie erstellen eine zeichnbare XML-Datei, kopieren den obigen Code und fügen ihn in diese Datei ein. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
Wenn Sie möchten, dass der Verlauf über den gesamten Bildschirm ausgeblendet wird, stellen Sie das mittlere Band auf 50% Deckkraft ein. In diesem Fall "# 50555994"
Zachary
@Pratik Sharma Wie kann ich angeben, dass dieser Gradiant von einem bestimmten Teil aus gestartet werden soll? Ich meine, ich möchte nur ein wenig von der rechten Seite mit dem Farbwechsel beginnen
User
314

Visuelle Beispiele helfen bei dieser Art von Fragen.

Boilerplate

Um einen Verlauf zu erstellen, erstellen Sie eine XML-Datei in res / drawable. Ich rufe meine my_gradient_drawable.xml auf :

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:type="linear"
        android:angle="0"
        android:startColor="#f6ee19"
        android:endColor="#115ede" />
</shape>

Sie setzen es auf den Hintergrund einer Ansicht. Beispielsweise:

<View
    android:layout_width="200dp"
    android:layout_height="100dp"
    android:background="@drawable/my_gradient_drawable"/>

Typ = "linear"

Stellen Sie das anglefür einen linearTyp ein. Es muss ein Vielfaches von 45 Grad sein.

<gradient
    android:type="linear"
    android:angle="0"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

Geben Sie hier die Bildbeschreibung ein

Typ = "radial"

Stellen Sie das gradientRadiusfür einen radialTyp ein. Verwenden %pbedeutet, dass dies ein Prozentsatz der kleinsten Dimension des übergeordneten Elements ist.

<gradient
    android:type="radial"
    android:gradientRadius="10%p"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

Geben Sie hier die Bildbeschreibung ein

type = "sweep"

Ich weiß nicht, warum jemand einen Sweep verwenden würde, aber ich füge ihn der Vollständigkeit halber hinzu. Ich konnte nicht herausfinden, wie ich den Winkel ändern kann, daher füge ich nur ein Bild hinzu.

<gradient
    android:type="sweep"
    android:startColor="#f6ee19"
    android:endColor="#115ede" />

Geben Sie hier die Bildbeschreibung ein

Center

Sie können auch die Mitte des Sweeps oder die radialen Typen ändern. Die Werte sind Bruchteile der Breite und Höhe. Sie können auch die %pNotation verwenden.

android:centerX="0.2"
android:centerY="0.7"

Geben Sie hier die Bildbeschreibung ein

Suragch
quelle
49

Der folgende Link kann Ihnen helfen, http://angrytools.com/gradient/. Dadurch wird ein benutzerdefinierter Verlaufshintergrund in Android wie in Photoshop erstellt.

Treffer
quelle
Ich mag CSS Matic noch mehr, damit andere kommen
Krozaine
33

Zuerst müssen Sie eine gradient.xml wie folgt erstellen

<shape>
    <gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" />

    <stroke android:width="1dp" android:color="#343434" />
</shape>

Dann müssen Sie den obigen Farbverlauf im Hintergrund des Layouts erwähnen

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/gradient"
    >   
</LinearLayout>
Harish
quelle
In dem Buch, das ich gerade lese, geht es darum, sie in den Ordner mit den Zeichen zu legen. Benötige ich eine pro Ordner?
JGallardo
1
Erstellen Sie einen zeichnbaren Ordner und legen Sie die Datei gradient.xml dort ab, wo Sie darauf zugreifen können. Sie müssen nicht mehrere Ordner erstellen.
Harish
22

Oder Sie können in Code alles verwenden, was Sie sich in PSD vorstellen:

    private void FillCustomGradient(View v) {
        final View view = v;
        Drawable[] layers = new Drawable[1];

        ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                LinearGradient lg = new LinearGradient(
                        0,
                        0,
                        0,
                        view.getHeight(),
                        new int[] {
                                 getResources().getColor(R.color.color1), // please input your color from resource for color-4
                                 getResources().getColor(R.color.color2),
                                 getResources().getColor(R.color.color3),
                                 getResources().getColor(R.color.color4)},
                        new float[] { 0, 0.49f, 0.50f, 1 },
                        Shader.TileMode.CLAMP);
                return lg;
            }
        };
        PaintDrawable p = new PaintDrawable();
        p.setShape(new RectShape());
        p.setShaderFactory(sf);
        p.setCornerRadii(new float[] { 5, 5, 5, 5, 0, 0, 0, 0 });
        layers[0] = (Drawable) p;

        LayerDrawable composite = new LayerDrawable(layers);
        view.setBackgroundDrawable(composite);
    }
miroslavign
quelle
und es sollte schneller sein als mit Layer-Listen
miroslavign
8
//Color.parseColor() method allow us to convert
// a hexadecimal color string to an integer value (int color)
int[] colors = {Color.parseColor("#008000"),Color.parseColor("#ADFF2F")};

//create a new gradient color
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);

gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(gd);

Siehe hier https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

Upendranath Reddy
quelle
3

Verwenden Sie diesen Code in einem Zeichenordner.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#3f5063" />
    <corners
        android:bottomLeftRadius="30dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="30dp"
        android:topRightRadius="0dp" />
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <gradient
        android:angle="45"
        android:centerColor="#015664"
        android:endColor="#636969"
        android:startColor="#2ea4e7" />
    <stroke
        android:width="1dp"
        android:color="#000000" />
</shape>
Muthu Krishnan
quelle
1

Warum nicht ein Image oder ein 9 Patch Image erstellen und dieses verwenden?

Der Link unten enthält eine nette Anleitung dazu:

http://android.amberfog.com/?p=247

Wenn Sie darauf bestehen, eine Form zu verwenden, probieren Sie die folgende Site aus (Wählen Sie unten links Android aus): http://angrytools.com/gradient/

Ich habe einen ähnlichen (nicht exakten) Verlauf erstellt wie den, den Sie unter diesem Link haben: http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

Feras Arabiat
quelle