Fundo de gradiente de layout linear Android


246

Estou tendo problemas para aplicar um plano de fundo gradiente a um LinearLayout.

Isso deve ser relativamente simples do que eu li, mas simplesmente não parece funcionar. Para fins de referência, estou desenvolvendo o 2.1-update1.

header_bg.xml:

<?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:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

Se eu alterar @ drawable / header_bg para uma cor - por exemplo, # FF0000, ele funcionará perfeitamente. Estou perdendo algo óbvio aqui?


android: backgroundTint android: backgroundTintMode stackoverflow.com/a/43341289/3209132
Pramod Garg

Respostas:


406

Ok, eu consegui resolver isso usando um seletor. Veja o código abaixo:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

Espero que isso ajude alguém que tenha o mesmo problema.


5
Ótimo. Para sua informação, consulte outros tipos de gradiente: developer.android.com/reference/android/graphics/drawable/…
Bamaco 7/16

86

Também é possível ter a terceira cor (centro). E diferentes tipos de formas.

Por exemplo, em drawable / gradient.xml:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

Isso fornece preto - cinza - preto (da esquerda para a direita), que é o meu atm de fundo escuro favorito.

Lembre-se de adicionar gradient.xml como plano de fundo no seu xml de layout:

android:background="@drawable/gradient"

Também é possível girar, com:

angle = "0"

fornece uma linha vertical

e com

ângulo = "90"

fornece uma linha horizontal

Os ângulos possíveis são:

0, 90, 180, 270.

Também existem alguns tipos diferentes de formas:

android: shape = "retângulo"

Forma arredondada:

android: shape = "oval"

e provavelmente mais alguns.

Espero que ajude, felicidades!


40

No arquivo extraível XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

No seu arquivo de layout: android: background = "@ drawable / gradient_background"

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

insira a descrição da imagem aqui


Olá, como você conseguiu a barra de status transparente? Se eu defini-lo transparente em styles.xml torna-se preto ..
kironet

21

Tente remover o android: gradientRadius = "90". Aqui está um que funciona para mim:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

Infelizmente isso não está funcionando para mim. Atualizei a pergunta original com o que tenho agora.
Genesis

Será que ele ainda não trabalho quando você adicionar um widget no layout (por exemplo, um TextView?
Vincent Mimoun-Prat

Correto - ele ainda não funciona com um TextView dentro do layout. Novamente, se eu aplicar uma cor estática ao invés de um drawable, ela funcionará perfeitamente. Uma coisa que notei é que (às vezes) posso fazê-lo funcionar usando um seletor, mas isso não deve ser necessário para mim.
Genesis

6

Meu problema foi que a extensão .xml não foi adicionada ao nome do arquivo XML recém-criado. A adição da extensão .xml corrigiu meu problema.


3

Com o Kotlin, você pode fazer isso em apenas 2 linhas

Alterar valores de cores na matriz

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Resultado

insira a descrição da imagem aqui


1

Não sei se isso vai ajudar alguém, mas meu problema era que eu estava tentando definir o gradiente para a propriedade "src" de um ImageView da seguinte maneira:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

Não tenho 100% de certeza por que isso não funcionou, mas agora eu mudei e coloquei o drawable na propriedade "background" do pai do ImageView, que é um RelativeLayout no meu caso, assim: (isso funcionou com êxito)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

0

Gostaria de verificar o seu canal alfa em suas cores de gradiente. Para mim, quando eu estava testando meu código, o canal alfa estava errado nas cores e não funcionou para mim. Depois que eu consegui o canal alfa, tudo funcionou!


0

Você pode usar uma exibição personalizada para fazer isso. Com esta solução, foram finalizadas as formas de gradiente de todas as cores em seus projetos:

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

Também crio um projeto de código aberto GradientView com esta visualização personalizada:

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

Parece interessante. Isso funciona com versões posteriores do Android. Eu estava tendo problemas com as outras respostas, pois agora elas parecem obsoletas: issuetracker.google.com/issues/37114374
trees_are_great 15/10/19
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.