Adjusting the background color of your activities and fragments is one of the easiest ways to add flair to your mobile apps. A strong color palette can make a bad app okay and a good app great if applied with artistic tenderness. In this article, I’m going to explore one component of the tender artist’s toolkit: the gradient. I’ll also go one step further and illustrate how a gradient can be animated on screen automatically or with respect to some other value.
Drawables in Android are essentially a set of instructions that tell the screen how to render itself. Rather than import multiple sizes of the same JPEG to accomodate various screen dimensions, you can instead create a single drawable that tells the device what to draw and where to draw it. Drawables can only be so complex but the space-saving benefit of using them can make up for their simplicity.
When designing a drawable, you can define shapes, colors, line thicknesses, and yes, gradients. In fact a GradientDrawable is simply a shape drawable with a gradient defined. You can take a deeper dive into modifying <shape> elements another time but for now, just know that these are created by:
Right-clicking on the drawable folder in your file tree
Selecting “New -> Drawable Resource File”
Changing the root element to “shape”
The resulting element will be an empty shape but you can easily add a gradient as seen in the image below.
A shape drawable with a gradient = a gradient drawable
The next step is to adjust the gradient attributes.
The colors of the gradient are drawn from top to bottom and you can define the start, center, and end color.
You can also change the angle of the gradient in increments of 45 degrees so the start, center, and end colors appear differently across the drawable. Oddly, the default angle for the gradient is 270.
The type attribute of the gradient determines how the gradient progresses from one color to another. Your options are:
The linear option is shown above so I’ll skip that and get straight to the others.
A radial type gradient is one that starts at a center point and extends outwards in all directions. In this case, the “startColor” is at the center and the other colors follow as you move outwards. The appearance of a radial type gradient can also be adjusted using the gradientRadius attribute (black arrow below).
The radial type gradient begins at a point and travels outward to a specified radius
You can also move the center point around by adjusting the centerX and centerY attributes. Note that the values you place here must fall between 0 and 1 and all decimals should start with a “0” (for example, centerX=“0.4” would place the center of the gradient slightly to the left of center).
Adjusting the centerX and centerY attributes moves the gradient relative to the containing shape
The sweep type gradient starts at a line and progresses clockwise around a center point until making a full rotation. Just like with the radial gradient type, you can also move the center point around. The end result is mad attractive (right).
The sweep type gradient progresses clockwise from startColor to endColor.
Adding More colors
One of the biggest limitations of the basic gradient drawable is that you can only specify three colors. While a simple color palette is technically something you should work diligently to maintain, there may be situations where that’s not enough.
An elegant way of creating a 3+ color gradient is to create a GradientDrawable object in your code that contains an Int array of the colors you want to include.
The 5 color gradient result
Once you have this, you can then programmatically adjust where the color centers are located by (1) calling gradientDrawable.mutate() and then (2) resetting the colors and offsets. The offsets should be any value between 0.0 and 1.0 and they’ll determine where the center of the color is located. By default they are evenly distributed inside the parent view.
Gradients are used in almost every big app on the marketplace and for good reason. They make the product feel finished and refined, they’re softer on the eyes than solid, blue-wall-of-death colors, and as it turns out, they’re also easy to implement. Go gradient wild!