Como fazer fundo gradiente no android

229

Eu quero criar um fundo gradiente onde o gradiente está na metade superior e há uma cor sólida na metade inferior, como nesta imagem abaixo:

Eu não posso, porque o se centerColorespalha para cobrir o fundo e o topo.

No gradiente do botão, uma linha horizontal branca desbota sobre o azul em direção à parte superior e inferior.

Como criar um plano de fundo como a primeira imagem? Como posso fazer pequenos centerColorque não estão espalhados?

Este é o código em XML do botão de plano de fundo acima.

<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
fonte
1
obrigado eu já resolvi isso. mas ficarei orgulhoso se você responder mais. stackoverflow.com/questions/6652547/…
kongkea
tente este webgradients.com
Ivan Aracki

Respostas:

59

Você pode criar essa aparência de 'semi-gradiente' usando uma Lista de camadas xml para combinar as 'bandas' superior e inferior em um arquivo. Cada banda é uma forma xml.

Consulte esta resposta anterior no SO para obter um tutorial detalhado: Formas com vários gradientes .

Gunnar Karlsson
fonte
317

Tente com isto:

<?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
fonte
E se eu quiser colocar um gradiente em segundo plano para o layout linear?
Ankit Srivastava
@Ankit ele será ampliado para preencher o layout
Dawid Drozd
2
@ Ankit: Você cria um arquivo .xml extraível, copia e cola o código acima neste arquivo, se diverte. <RelativeLayout ... android: background = "@ drawable / your_xml_name" ...>
TomeeNS
Além disso, se você deseja que o gradiente desapareça em toda a tela, torne a banda central 50% de opacidade. Neste caso "# 50555994"
Zachary
@Pratik Sharma Como posso especificar para iniciar este gradiant a partir de uma parte específica? Quer dizer, eu só quero começar a mudança de cor do lado direito um pouco pequena
Usuário
317

Exemplos visuais ajudam nesse tipo de pergunta.

Chapa de ebulição

Para criar um gradiente, você cria um arquivo xml em res / drawable. Estou chamando o meu 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>

Você o define como plano de fundo de alguma visualização. Por exemplo:

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

type = "linear"

Defina anglepara um lineartipo. Deve ser um múltiplo de 45 graus.

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

insira a descrição da imagem aqui

type = "radial"

Defina gradientRadiuspara um radialtipo. Usar %psignifica que é uma porcentagem da menor dimensão do pai.

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

insira a descrição da imagem aqui

type = "varredura"

Não sei por que alguém usaria uma varredura, mas estou incluindo-a por completo. Não consegui descobrir como alterar o ângulo, por isso estou incluindo apenas uma imagem.

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

insira a descrição da imagem aqui

Centro

Você também pode alterar o centro dos tipos de varredura ou radial. Os valores são frações da largura e altura. Você também pode usar %pnotação.

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

insira a descrição da imagem aqui

Suragch
fonte
49

O link a seguir pode ajudá-lo http://angrytools.com/gradient/ .Isso criará um fundo gradiente personalizado no android, como no photoshop.

Exitos
fonte
I como CSS Matic este mais um, para que outros possam vir
krozaine
33

Primeiro, você precisa criar um gradient.xml da seguinte maneira

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

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

Então, você precisa mencionar o gradiente acima no plano de fundo do layout.

<?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
fonte
no livro que estou lendo, ele fala sobre colocá-los na pasta de desenhos. Preciso de um por pasta?
perfil completo de JGallardo
1
Crie na pasta drawable e coloque o arquivo gradient.xml, de onde você pode acessá-lo. Não é necessário criar várias pastas.
Harish
22

Ou você pode usar no código o que você pode imaginar no 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
fonte
e ele deve ser mais rápido, em seguida, usando camadas listas
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 aqui https://android--code.blogspot.in/2015/01/android-button-gradient-color.html

Upendranath Reddy
fonte
3

Use esse código na pasta drawable.

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