Cómo hacer un fondo degradado en Android

229

Quiero crear un fondo degradado donde el degradado esté en la mitad superior y haya un color sólido en la mitad inferior, como en esta imagen a continuación:

No puedo porque se centerColorextiende para cubrir la parte inferior y superior.

En el gradiente del botón, una línea horizontal blanca se desvanece sobre azul hacia la parte superior y el botón.

¿Cómo puedo hacer un fondo como la primera imagen? ¿Cómo puedo hacer algo pequeño centerColorque no esté extendido?

Este es el código en XML del botón de fondo anterior.

<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
fuente
1
gracias ya lo resolví. pero estaré orgulloso si respondes más. stackoverflow.com/questions/6652547/…
kongkea
prueba esto webgradients.com
Ivan Aracki

Respuestas:

59

Puede crear este aspecto de 'medio gradiente' utilizando una Lista de capas xml para combinar las 'bandas' superiores e inferiores en un solo archivo. Cada banda tiene una forma xml.

Consulte esta respuesta anterior en SO para obtener un tutorial detallado: formas de gradiente múltiple .

Gunnar Karlsson
fuente
317

Prueba con esto:

<?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
fuente
¿Qué pasa si quiero poner un degradado en el fondo para un diseño lineal?
Ankit Srivastava
@Ankit Se escalará para llenar el diseño
Dawid Drozd
2
@Ankit: crea un archivo .xml dibujable, copia y pega el código anterior en este archivo, diviértete. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
Además, si desea que el degradado se desvanezca en toda la pantalla, haga que la banda central tenga una opacidad del 50%. En este caso "# 50555994"
Zachary
@Pratik Sharma ¿Cómo puedo especificar comenzar este gradiente desde una porción específica? Quiero decir, solo quiero comenzar un poco el cambio de color desde el lado derecho
Usuario
317

Los ejemplos visuales ayudan con este tipo de preguntas.

Repetitivo

Para crear un degradado, crea un archivo xml en res / drawable. Estoy llamando al mío 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 pones en el fondo de alguna vista. Por ejemplo:

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

tipo = "lineal"

Establecer el anglepara un lineartipo. Debe ser un múltiplo de 45 grados.

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

ingrese la descripción de la imagen aquí

tipo = "radial"

Establecer el gradientRadiuspara un radialtipo. Usar %psignifica que es un porcentaje de la dimensión más pequeña del padre.

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

ingrese la descripción de la imagen aquí

tipo = "barrido"

No sé por qué alguien usaría un barrido, pero lo estoy incluyendo por completo. No sabía cómo cambiar el ángulo, por lo que solo incluyo una imagen.

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

ingrese la descripción de la imagen aquí

centrar

También puede cambiar el centro del barrido o los tipos radiales. Los valores son fracciones de ancho y alto. También puedes usar %pnotación.

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

ingrese la descripción de la imagen aquí

Suragch
fuente
33

Primero necesitas crear un gradient.xml de la siguiente manera

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

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

Luego, debe mencionar el gradiente anterior en el fondo del diseño.

<?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
fuente
en el libro que estoy leyendo habla sobre ponerlos en la carpeta de dibujos. ¿Necesito uno por carpeta?
JGallardo
1
Cree en una carpeta dibujable y coloque el archivo gradient.xml para que desde allí pueda acceder a él. No es necesario crear varias carpetas.
Harish
22

O puede usar en el código lo que pueda pensar en 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
fuente
y debería ser más rápido que usar listas de capas
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);

Consulte desde aquí https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

Upendranath Reddy
fuente
3

Use este código en la carpeta dibujable.

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