Comment créer un fond dégradé dans Android

229

Je veux créer un fond dégradé où le dégradé est dans la moitié supérieure et il y a une couleur unie dans la moitié inférieure, comme dans cette image ci-dessous:

Je ne peux pas parce que les centerColorspreads s'étendent pour couvrir le bas et le haut.

Dans le dégradé du bouton, une ligne horizontale blanche s'estompe sur le bleu vers le haut et le bas.

Comment créer un arrière-plan comme la première image? Comment puis-je faire des petits centerColorqui ne sont pas étalés?

Il s'agit du code XML du bouton d'arrière-plan ci-dessus.

<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
la source
1
merci je l'ai déjà résolu. mais je serai fier si vous répondez plus. stackoverflow.com/questions/6652547/…
kongkea
essayez ce webgradients.com
Ivan Aracki

Réponses:

59

Vous pouvez créer ce look «demi-dégradé» en utilisant une liste de couches xml pour combiner les «bandes» supérieures et inférieures en un seul fichier. Chaque bande a une forme xml.

Voir cette réponse précédente sur SO pour un tutoriel détaillé: Formes multi-dégradées .

Gunnar Karlsson
la source
317

Essayez avec ceci:

<?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
la source
Et si je veux mettre un dégradé en arrière-plan pour une disposition linéaire ??
Ankit Srivastava
@Ankit Il évoluera pour remplir la mise en page
Dawid Drozd
2
@Ankit: Vous créez un fichier .xml dessinable, copiez et collez le code ci-dessus dans ce fichier, fave fun. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
De plus, si vous voulez que le dégradé s'éteigne sur tout l'écran, optez pour la bande centrale à 50% d'opacité. Dans ce cas "# 50555994"
Zachary
@Pratik Sharma Comment puis-je spécifier pour commencer ce dégradé à partir d'une portion spécifique? je veux dire que je veux juste commencer un peu le changement de couleur du côté droit
Utilisateur
317

Des exemples visuels aident avec ce genre de question.

Plaque de chaudière

Afin de créer un dégradé, vous créez un fichier xml en res / drawable. J'appelle le mien 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>

Vous le placez à l'arrière-plan d'une vue. Par exemple:

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

type = "linéaire"

Définissez le anglepour un lineartype. Il doit s'agir d'un multiple de 45 degrés.

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

entrez la description de l'image ici

type = "radial"

Définissez le gradientRadiuspour un radialtype. L'utilisation %psignifie qu'il s'agit d'un pourcentage de la plus petite dimension du parent.

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

entrez la description de l'image ici

type = "balayage"

Je ne sais pas pourquoi quelqu'un utiliserait un balayage, mais je l'inclus pour être complet. Je ne pouvais pas comprendre comment changer l'angle, donc je n'inclus qu'une seule image.

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

entrez la description de l'image ici

centre

Vous pouvez également modifier le centre des types de balayage ou radiaux. Les valeurs sont des fractions de la largeur et de la hauteur. Vous pouvez également utiliser la %pnotation.

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

entrez la description de l'image ici

Suragch
la source
49

Le lien suivant peut vous aider à http://angrytools.com/gradient/ . Cela créera un fond dégradé personnalisé dans Android comme dans Photoshop.

Les coups
la source
J'aime CSS Matic celui-ci de plus, pour les autres à venir
krozaine
33

Vous devez d'abord créer un gradient.xml comme suit

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

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

Ensuite, vous devez mentionner le dégradé ci-dessus en arrière-plan de la mise en page.

<?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
la source
dans le livre que je lis, il parle de les mettre dans le dossier drawables. En ai-je besoin d'un par dossier?
JGallardo
1
Créez sur un dossier dessinable et placez le fichier gradient.xml dans lequel vous pouvez y accéder.pas besoin de créer plusieurs dossiers.
Harish
22

Ou vous pouvez utiliser dans le code tout ce que vous pourriez penser dans 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);
    }
miroslavign
la source
et cela devrait être plus rapide que d'utiliser des listes de couches
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);

Référez-vous ici https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

Upendranath Reddy
la source
3

Utilisez ce code dans un dossier dessinable.

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