Gradient Drawable

A GradientDrawable lets you design complex gradient fills. Each gradient defines a smooth transition between two or three colors in a linear, radial, or sweep pattern.

Gradient Drawables are defined using the <gradient> tag as a subnode within a Shape Drawable definition (such as those defined above).

Each Gradient Drawable requires at least a startColor and endColor attribute and supports on optional middleColor. Using the type attribute you can define your gradient as one of the following:

> linear The default gradient type, it displays a straight color transition from startColor to endColor at an angle defined by the angle attribute.

> radial Draws a circular gradient from startColor to endColor from the outer edge of the shape to the center. It requires a gradientRadius attribute that specifies the radius of the gradient transition in pixels. It also optionally supports centerX and centerY to offset the location of the center of the gradient.

Because the gradient radius is defined in pixels it will not be dynamically scaled for different pixel densities. To minimize banding, you may need to specify different gradient radius values for different screen resolutions.

> sweep Draws a sweep gradient that transitions from startColor to endColor along the outer edge of the parent shape (typically a ring).

Listing 4-18 shows the XML for a linear gradient within a rectangle, a radial gradient within an oval, and a sweep gradient within a ring, as shown in Figure 4-4.

LISTING 4-18: Linear, Radial, and Sweep Gradient definitions Available for downloadon <!-- Rectangle with Linear Gradient --> Wrox.com <?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:useLevel="false"> <gradient android:startColor="#ffffff"

android:endColor="#ffffff"

android:centerColor="#000000"

android:useLevel="false"

android:type="linear"

android:angle="45"

continues

LISTING 4-18 (continued)

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" android:useLevel="false"> <gradient android:type="radial"

android:startColor="#ffffff"

android:endColor="#ffffff"

android:centerColor="#000000"

android:useLevel="false"

android:gradientRadius="3 00"

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:useLevel="false" android:innerRadiusRatio="3" android:thicknessRatio="8"> <gradient android:startColor="#ffffff" android:endColor="#ffffff" android:centerColor="#000000" android:useLevel="false" android:type="sweep"

Was this article helpful?

+1 0
Mobile Apps Made Easy

Mobile Apps Made Easy

Quick start guide to skyrocket your offline and online business success with mobile apps. If you know anything about mobile devices, you’ve probably heard that famous phrase coined by one of the mobile device’s most prolific creators proclaiming that there’s an app for pretty much everything.

Get My Free Training Guide


Responses

  • Huriyyah
    How to apply gradient dynamically in android xml?
    7 years ago
  • fnan
    How to use sweep gradients in android?
    7 years ago

Post a comment