Android gradient Usage summary

Use in Androidgradient (gradient)Usually throughdrawableFile to set the background. Here is a summary of several usage methods that can be used directly, including linear gradient, radial gradient, scan gradient (sweep), etc.:

✅ 1. Linear Gradient

<!-- res/drawable/bg_gradient_linear.xml -->
<gradient xmlns:andro
    android:type="linear"
    android:startColor="#FF512F"
    android:endColor="#DD2476"
    android:angle="45" />

🔹 angleValue range: 0~360, indicating the gradient direction (0 is from top to bottom, 90 is from left to right).

✅ 2. Radial Gradient

<!-- res/drawable/bg_gradient_radial.xml -->
<gradient xmlns:andro
    android:type="radial"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

🔹 centerX/Y: Percentage (0.5 means center)
🔹 gradientRadius: Gradient radius, unit in px

✅ 3. Sweep Gradient

<!-- res/drawable/bg_gradient_sweep.xml -->
<gradient xmlns:andro
    android:type="sweep"
    android:centerX="0.5"
    android:centerY="0.5"
    android:startColor="#FF512F"
    android:endColor="#DD2476" />

✅ 4. Multicolor gradient

<gradient xmlns:andro
    android:type="linear"
    android:startColor="#FF512F"
    android:centerColor="#F09819"
    android:endColor="#DD2476"
    android:angle="90" />

✅ 5. Set the background to View

android:background="@drawable/bg_gradient_linear"

✅ 6. Create GradientDrawable in the code

val gradient = GradientDrawable(
    .LEFT_RIGHT,
    intArrayOf(, )
)
 = 20f
 = gradient

✅ 7. Round corners + gradient (commonly used)

<shape xmlns:andro
    android:shape="rectangle">
    <corners android:radius="16dp"/>
    <gradient
        android:type="linear"
        android:startColor="#FF512F"
        android:endColor="#DD2476"
        android:angle="90"/>
</shape>

android:angle direction diagram

On AndroidgradientUsed inandroid:angleWhen the property isControl the direction of the gradient. Its unit is angle, and ** is based on "rotating clockwise from left to right".

✅ android:angleDirection diagram (based ontype="linear"）

✅ Give examples:

<gradient
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

The above isFrom bottom to topGradient (i.e. red at the bottom and blue at the top), not from left to right! This is also a point of difference between Android and CSS, which is easy to be confused.

❗ Note:

• angle Must be an integer multiple of 45, otherwise it will be ignored or processed by default.
• angleThe value isRotate the angle clockwise,from0 degrees (from left ➜ right)。

0: From left to right
45: From bottom left to top right
90: From bottom to top
135: From bottom right to top left
180: From right to left
225: From top right to bottom left
270: From top to bottom
315: From top left to bottom right

✅Illustration reference:

          ↑
    270°  ↑  90°
← 180° ←     → 0° →
         ↓

🌟 Note: This angle is in AndroidLogical values ​​used to define gradient direction，The coordinate direction is not a mathematical angle。

✅ Example 1: Gradient from left to right

<gradient
    android:type="linear"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:angle="90"/>

🔸 The color changes from left (red) → right (blue).

✅ Example 2: Gradient from top to bottom

<gradient
    android:type="linear"
    android:startColor="#00FF00"
    android:endColor="#000000"
    android:angle="0"/>

🔸 The color changes from top (green) → bottom (black).

⚠️ Notes:

• angle Only multiples of 45(such as 0, 45, 90, 135…), otherwise Android will ignore it.
• defaultangleyes0, that isFrom top to bottom。
• android:type="linear"hour,angleOnly effective.
• forradialandsweeptype,angleNot working.

threeradialandsweepThe difference

🔵 radial(Radial gradient)

✅ Features:

• fromCenter outwardDivergence.
• Gradient isCircular diffusioneffect.
• Similar to water waves or spotlights, halos.

✅ Usage example:

<gradient
    android:type="radial"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:centerX="0.5"
    android:centerY="0.5"
    android:gradientRadius="200"/>

✅ Parameter description:

• centerX / centerY: The center point position (0~1, indicating the percentage).
• gradientRadius: The radius of the gradient (must be set).
• angleinvalid!

✅ Visual Schematic:

  Gradient diffuses like a circle：
     R G B
     ↓↓↓
   ●●●●●●●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●◎◎◎●●
   ●●●●●●●●

🟣 sweep(Scan/scan gradient)

✅ Features:

• From the center pointGo aroundRotate (360°) to change the color.
• Similar to clock pointer rotation and radar scanning.

✅ Usage example:

<gradient
    android:type="sweep"
    android:startColor="#FF0000"
    android:endColor="#0000FF"
    android:centerX="0.5"
    android:centerY="0.5"/>

✅ Parameter description:

• centerX / centerY: Set the gradient center.
• Not supportedangle，The direction is fixed: from 0° to 360° clockwise.

✅ Visual Schematic:

   Colors circle in the middle：
      red → orange → yellow
      ↑       ↓
     purple ← blue ← green

🔄 Summary comparison table:

This is the end of this article about Android gradient usage. For more information about Android gradient usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!