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.