Come creare uno sfondo sfumato in Android


229

Voglio creare uno sfondo sfumato in cui il gradiente è nella metà superiore e c'è un colore uniforme nella metà inferiore, come in questa immagine qui sotto:

Non posso perché si centerColorestende per coprire il fondo e la parte superiore.

Nella sfumatura per il pulsante, una linea orizzontale bianca sfuma sull'azzurro verso l'alto e il basso.

Come posso creare uno sfondo come la prima immagine? Come posso fare piccoli centerColorche non sono sparsi?

Questo è il codice in XML del pulsante di sfondo sopra.

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

1
grazie l'ho già risolto. ma sarò orgoglioso se risponderai di più. stackoverflow.com/questions/6652547/...
kongkea

Risposte:


59

È possibile creare questo aspetto a "metà gradiente" utilizzando un elenco di livelli xml per combinare le "bande" superiori e inferiori in un unico file. Ogni banda ha una forma xml.

Vedi questa precedente risposta su SO per un tutorial dettagliato: forme multi-gradiente .


317

Prova con questo:

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

E se volessi mettere un gradiente sullo sfondo per un layout lineare ??
Ankit Srivastava,

@Ankit Si ridimensionerà per riempire il layout
Dawid Drozd

2
@Ankit: crei un file .xml disegnabile, copia e incolla il codice sopra in questo file, divertiti. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS

Inoltre, se si desidera che il gradiente sbiadisca sull'intero schermo, rendere la banda centrale del 50% di opacità. In questo caso "# 50555994"
Zaccaria

@Pratik Sharma Come posso specificare per iniziare questo gradiente da una parte specifica? Voglio dire, voglio solo iniziare un po 'il cambio di colore dal lato destro
Utente

317

Esempi visivi aiutano con questo tipo di domanda.

boilerplate

Per creare un gradiente, si crea un file XML in res / drawable. Sto chiamando il mio my_gradient_drawable.xml :

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

Lo si imposta sullo sfondo di una vista. Per esempio:

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

digitare = "lineare"

Impostare angleper un lineartipo. Deve essere un multiplo di 45 gradi.

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

inserisci qui la descrizione dell'immagine

digitare = "radiale"

Impostare gradientRadiusper un radialtipo. Utilizzando %psignifica che è una percentuale della dimensione più piccola del genitore.

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

inserisci qui la descrizione dell'immagine

digitare = "sweep"

Non so perché qualcuno dovrebbe usare uno sweep, ma lo sto includendo per completezza. Non riuscivo a capire come cambiare l'angolazione, quindi includo solo un'immagine.

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

inserisci qui la descrizione dell'immagine

centro

Puoi anche cambiare il centro dello sweep o dei tipi radiali. I valori sono frazioni di larghezza e altezza. Puoi anche usare la %pnotazione.

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

inserisci qui la descrizione dell'immagine



33

Per prima cosa devi creare un gradiente.xml come segue

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

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

Quindi è necessario menzionare il gradiente sopra nello sfondo del layout. Come segue

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

nel libro che sto leggendo parla di metterli nella cartella dei disegni. Ne ho bisogno per cartella?
JGallardo,

1
Crea su una cartella disegnabile e inserisci il file gradient.xml in quello da lì puoi accedervi.Non è necessario creare più cartelle.
Harish,

22

Oppure puoi usare nel codice qualunque cosa tu possa pensare in PSD:

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

e dovrebbe essere più veloce dell'uso degli elenchi di livelli
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);

Fare riferimento da qui https://android--code.blogspot.in/2015/01/android-button-gradient-color.html


3

Usa questo codice nella cartella disegnabile.

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.