web-dev-qa-db-fra.com

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

Je veux créer un fond dégradé avec le dégradé dans la moitié supérieure et une couleur unie dans la moitié inférieure, comme dans l'image ci-dessous:

Je ne peux pas parce que la centerColor s'étend pour couvrir le bas et le haut.

In the gradient for the button, a white horizontal line fades over blue toward the top and botton.

Comment puis-je créer un fond comme la première image? Comment puis-je faire de petites centerColor qui ne soient pas dispersées?

C'est le code en XML du bouton de fond 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>
androidbackgroundgradientshapes
188
kongkea

Vous pouvez créer cet aspect de "demi-dégradé" en utilisant un xml Layer-List pour combiner les "bandes" supérieure et inférieure dans un seul fichier. Chaque groupe est une forme XML.

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

54
Gunnar Karlsson

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>
281
Pratik Sharma

Des exemples visuels aident à résoudre ce type de question.

Plaque de cuisson

Afin de créer un dégradé, vous créez un fichier xml dans 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 définissez à 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 angle pour un type linear. Ce doit être un multiple de 45 degrés.

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

enter image description here

type = "radial"

Définissez le gradientRadius pour un type radial. Utiliser %p signifie 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" />

enter image description here

type = "balayage"

Je ne sais pas pourquoi quelqu'un utiliserait un balayage, mais je l'inclue par souci de complétude. Je n'arrivais pas à comprendre comment changer l'angle. Je n'inclus donc qu'une seule image.

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

enter image description here

centre

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

Android:centerX="0.2"
Android:centerY="0.7"

enter image description here

243
Suragch

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

46
Hits

Vous devez d’abord créer un fichier 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 dans l’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>
28
Harish

Ou vous pouvez utiliser dans le code 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);
    }
21
miroslavign
//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);

Reportez-vous à partir d'ici https://Android--code.blogspot.in/2015/01/Android-button-gradient-color.html

6
UpendranathReddy

** utilisez ce code dans un dossier pouvant être tiré **

<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="#3f5063"
    />

<corners Android:bottomRightRadius="0dp" Android:bottomLeftRadius="30dp" Android:topLeftRadius="30dp" Android:topRightRadius="0dp" />
<padding Android:left="2dp" Android:top="2dp" Android:right="2dp" Android:bottom="2dp" />
<gradient
    Android:startColor="#2ea4e7"
    Android:centerColor="#015664"

    Android:endColor="#636969"
    Android:angle="45"
    >

</gradient>
<stroke Android:color="#000000"

    Android:width="1dp">

</stroke>
1
Muthu Krishnan

Pourquoi ne pas créer une image ou une image 9 Patch et l'utiliser?

Le lien ci-dessous contient un guide pratique sur la procédure à suivre:

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

Si vous insistez pour utiliser une forme, essayez le site ci-dessous (sélectionnez Android en bas à gauche): http://angrytools.com/gradient/

J'ai créé un dégradé similaire (non exact) à celui que vous avez sur ce lien: http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269

1
Feras Arabiat