Gradient Drawable no Android – Create Gradient Backgrounds

BY admin
|

Vimos as cores Gradient em muitos sites como fundos, usados em logotipos App, como no logotipo Instagram mostrado abaixo, fundo App, botões, barras de progresso, etc. Um Gradiente torna a IU de qualquer aplicativo, seja ele Mobile App ou um website, mais bonita e vibrante. Muitos desenvolvedores estão usando o gradiente em seus aplicativos e sites para torná-lo mais atraente. Então, neste tutorial, vamos aprender como definir um gradiente de fundo para a nossa atividade do aplicativo Android.

O que é gradiente?

Segundo a Wikipedia:

Em computação gráfica, um gradiente de cor especifica uma gama de cores dependentes de posição, normalmente usadas para preencher uma região. Por exemplo, muitos gerenciadores de janela permitem que o fundo da tela seja especificado como um gradiente. As cores produzidas por um gradiente variam continuamente com a posição, produzindo transições de cores suaves.

Um gradiente de cor também é conhecido como rampa de cor ou uma progressão de cor. Na atribuição de cores a um conjunto de valores, um gradiente é um mapa de cores contínuo, um tipo de esquema de cores.

Então vamos adicionar um gradiente simples ao nosso aplicativo Android.

Passo 1: Criar um novo projecto

  1. Abrir o seu Android Studio Clique em “Iniciar um novo projecto Android Studio” (Saiba como configurar o Android Studio e criar o seu primeiro projecto Android)

  2. Escolha “Actividade vazia” a partir da janela do modelo do projecto e clique em Next

  3. Entrar o nome do aplicativo, Nome do pacote, salvar localização, linguagem(Java/Kotlin, nós usamos Java para este tutorial), e no mínimo SDK(estamos usando API 19: Android 4.4 (KitKat))

  4. Próximo clique no botão Finish após preencher os detalhes acima

  5. Agora, aguarde o projeto terminar o build.

    >

Passo 2: Criando cor gradiente

Para criar uma cor gradiente precisamos criar um arquivo .xml na pasta drawable. Então vá para app -> res -> drawable e clique com o botão direito no drawable -> New -> Drawable Resource File e crie gradient_drawable.xml file.

O código do gradient_drawable.O arquivo xml é mostrado abaixo:

Como você pode ver no código acima, estamos usando a tag gradiente juntamente com o fornecimento de atributos android:startColor, android:centerColor e android:endColor para definir a cor que será usada no gradiente. Então vamos aprender sobre os atributos disponíveis no gradiente que pode ser desenhado.

XML attributes of Gradient Drawable

Following are the attributes of the <gradient> drawable:

Atributos Descrição
android:startColor

Cor inicial do gradiente.

O valor da cor pode estar em qualquer uma das formas “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb”
andróide:endColor

Cor final do gradiente

O valor da cor pode estar em qualquer uma das formas “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb”
android:centerColor

Cor central do gradiente. Pode ser opcional mas você pode usá-lo se quiser

O valor da cor pode estar em qualquer uma das formas “#rgb”, “#argb”, “#rrggbb”, “#aarrggbb”
android:centerX

X posição do ponto central do gradiente dentro da forma como uma fração da largura

0.5 é o valor padrão
android:centerY

Y-posição do ponto central do gradiente dentro da forma como uma fração da altura

0.5 é o valor padrão
andróide:ângulo

O ângulo do gradiente e só é usado com o gradiente linear

Deve ser múltiplo de 45 no intervalo

andróide:tipo

É usado para definir o tipo de gradiente e o valor padrão é linear . e é de 3 tipos

  • linear

  • radial

  • sweep
android:gradientRadius

É usado para definir o raio do gradiente. É usado somente com o gradiente radial.

Step 3: Modifique activity_main.xml

Agora abra o arquivo activity_main.xml e remova o código padrão e mude o layout para RelativeLayout e defina o fundo para fundo de gradiente como mostrado abaixo:

android:background = "@drawable/gradient_background"

com isto nossa activity_main.xml é feito e o código completo será parecido com:

E a saída do acima é mostrada abaixo:

Podemos também adicionar o gradiente a diferentes Views e layouts no nosso aplicativo Android. Vamos cobrir alguns outros componentes do aplicativo Android em que podemos usar fundos de gradiente.

Gradiente de fundo com Button:

Aqui usaremos o gradiente de fundo para button:

A saída do código acima é:

Gradiente de fundo com TextView:

Aqui usaremos o fundo de gradiente para TextView:

A saída do código acima é:

Gradiente de fundo com ImageView:

Aqui usaremos o fundo de gradiente para ImageView:

A saída do código acima é:

Fundo de gradiente com SeekBar:

Aqui usaremos o fundo de gradiente para SeekBar:

A saída do código acima é:

Conclusão: