‹ Back to Symbility Intersect Blog

If you’ve already published an application on the Google Play Store, you might have been frightened by the number of supported devices for your application. Android screen size fragmentation requires developers to keep an eye on their application’s UI for most common screen sizes. It is essential to have an efficient use of Drawables to develop a dynamic UI that can support different generations of phones as well as tablets. Android provides different drawable types to avoid using images. These Drawables adjust themselves on every screen size.

Shapes

In most applications, graphics needn’t be images, so developers should avoid using too many PNG files, as it makes APKs heavier and views slower to load. Simple backgrounds or shadows can be done programmatically with different drawable types provided by Android. These dynamic drawables can be written with xml and then placed in the /res/drawable folder as they are not density-dependent. Then, they can be used exactly the same way as images are referenced with @drawable/file_name in XML and R.drawable.file_name in code. The most basic one is ‘shape’. There are different way to use shapes, from the simple solid shape to some more complex combined ones. We chose three examples to share with you.

Simple Shape –  Background

The most common usage is to create a simple shape with XML and use it as background of any UI widget. The tag <shape> is the root element, and it has attributes to determine its type and some values depending on this type. The types can be rectangles, ovals, lines or rings. Then, different elements can be added to the root to customize the shape. They can impact either trim or filling.

  • Corners : to make corners rounded
  • Gradient : to fill the shape with a gradient
  • Padding : to add padding to the shape
  • Size : to specify a static size to the shape
  • Solid : to fill the shape with a single color
  • Stroke : to add a border to the shape

In this example, we defined an xml shape to create a custom background for a button.

Layer List– Smooth Shadow (e.g. SayWhat?)

A Drawable can be defined by layers of shapes that are drawn on the top of each other. The tag <layer-list> is the root element, and it can contain several items as elements. Each item is a drawable that can have offsets. Items can be defined in another XML file by using the Drawable attribute or directly as a new nested element in the same XML file. In this example, we use layer-list to create a smooth shadow around a gradient background. Every layer is a shape filled with a solid translucent grey and shift with padding. The item’s position is relative to the previous layer.

Programmatically – Custom TextView (ie: TheScore)

Shapes can be built programmatically as well. Each XML element matches an Android Class extending Drawable. These elements are useful for custom views or widgets. Drawables can be created dynamically at runtime and used as background or drawn directly on a Canvas. In this example, we created a custom TextView with a GradientDrawable as the background. Two colours can be set to this custom TextView, and they will be used to create the gradient. No XML file is needed in this case.

To create a new class that extends TextView, you need to Override the three constructors. Then, you need to create a method setGradientColors that take two colours as int (bottom and top).

To use this new widget, open the palette ‘Custom & Library Views’, and then you can drag and drop your custom widget in your view. In the Activity class, get your GradientTextView with findViewById and call setGradientColors on it.

Conclusion

Shapes are a good way to create a dynamic UI and to be sure that it looks good on every screen. By using different types and nesting shapes, it is easy to build more complex graphics. Unfortunately, limits are quickly reached and with more advanced designs, we need to find another way to match different screen sizes. When shapes are not powerful enough, the next solution is to use a 9-patch drawables to have stretchable areas within the images.

Camille Bossoutrot
Senior Android Developer