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>

1
obrigado eu já resolvi isso. mas ficarei orgulhoso se você responder mais. stackoverflow.com/questions/6652547/…
kongkea

Respostas:



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>

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



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>

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);
    }

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


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>

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.