---
# System prepended metadata

title: Gradient Background in Android
tags: [Android, Gradient, Design]

---

# Gradient Background in Android
###### tags: `Android` `Gradient` `Design`
[TOC]

## How to make a gradient background?
**Two Methods available:**
1. Background Image
    :::info
    STEPS:
    1. Input gradient image in ++drawable folder++
    2. Set drawable image as layout background
    :::
2. XML Shape Gradient File


## XML Shape Gradient File
### 1. Step1: New a Drawable resource file
New a Drawable resource file:
![](https://i.imgur.com/Uaz5iXi.png =300x80)

### 2. Step2: Set Up Item, Shape and Gradient
>**Note:**
>Inside Gradient, you will havw many selections. In this case, I used two colors, however, if you want three colors, then you will just need to use centerColor.
>![](https://i.imgur.com/FaFAT35.png =200x180)[color=#187fce]

**XML code:**
``` java==
<?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="@color/gradient_start"
                android:endColor="@color/gradient_end"
                android:type="linear"/>
        </shape>
    </item>
</selector>
```

### 3. Set XML to your Layout!
In my case, I used Linear Layout as my Layout background. 
In order to set gradient XML to it, we set it as its background:
``` java==
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"  
    android:background="@drawable/background_gradient"
    tools:context=".LoginActivity"/>
```

### 4. Don't know which color you want as Gradient?

You can check out different websites, such as 
1. **UIGradient** (https://uigradients.com/)
![](https://i.imgur.com/pogS2sh.jpg =600x250)
2. **WebGradients** (https://webgradients.com/)
![](https://i.imgur.com/WPqSomX.png =600x230)