The Guide to Color Gradients in Android Studio

image_pdfimage_print

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.

Gradient Drawables

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:

  1. Right-clicking on the drawable folder in your file tree
  2. Selecting “New -> Drawable Resource File”
  3. 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.

Colors

The colors of the gradient are drawn from top to bottom and you can define the start, center, and end color.

Angles

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.

Type

The type attribute of the gradient determines how the gradient progresses from one color to another. Your options are:

  • Linear (default)
  • Radial
  • Sweep

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.

In Conclusion

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!

Additional Resources

  • HTML Color Codes — I use this site all the time to get hex codes for different colors. The Chart tab is especially useful since it has a Material design color chart

Leave a Reply