DEV Community

Cover image for Android: Como configurar um background degradê no seu App
Johnny Meneses
Johnny Meneses

Posted on • Edited on

1 1

Android: Como configurar um background degradê no seu App

Já pensou em deixar seu app Android com um visual mais profissional sem impactar no tamanho da aplicação? Vamos falar de GradientDrawable.

Um plano de fundo degradê (ou gradient) pode ser uma opção mais bonita e mais leve e é incrivelmente fácil de fazer:

No diretório drawable, adicione um novo arquivo do tipo Drawable Resource File
res> drawable > new > Drawable Resource File

Image description

Vamos chamar este arquivo de background. No campo root element, escreva shape e clique em OK.

Image description

Os atributos que vamos usar ficarão dentro da tag gradiente. São eles:

android:startColor: para a cor Inicial
android:centerColor: para a cor que ficará no centro
android:endColor: para a cor que ficará no final

 <gradient
        android:startColor="#FB528B"
        android:centerColor="#f899b9"
        android:endColor="#FFB344"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

Ainda é possível usar a tag angle para direcionar a ordem das cores:

 <gradient
        android:startColor="#FB528B"
        android:centerColor="#f899b9"
        android:endColor="#FFB344"
        android:angle="90"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

Você poderá tanto digitar o código hexadecimal de cada cor, ou definir diretamente no arquivo colors e chamá-las pelo nome indicado
(res / values / colors.xml)

    <gradient
        android:startColor="@color/pink"
        android:centerColor="@color/pink_light"
        android:endColor="@color/orange"
        android:angle="90"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

Para adicionar o backgroud criado à sua activity, basta incluir a tag android:background apontando para o arquivo drawable criado.

Image description

Aí é só soltar a criatividade:

 <gradient
        android:startColor="#0014FF"
        android:endColor="#00FF5b"
        android:angle="280"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

    <gradient
        android:startColor="#FF2CDF"
        android:endColor="#0014ff"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

    <gradient
        android:startColor="#ffe53b"
        android:endColor="#ff2525"
        android:angle="300"
        />
Enter fullscreen mode Exit fullscreen mode

Image description

Quer conhecer um pouco mais? Documentação oficial da GradientDrawable

Meus projetos: GitHub - Johnny Meneses

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more