Introduction

A drawable resource  is basically a graphic that can be drawn to the screen in your application. Drawables are used to define shapes, colors, borders, gradients, etc which can then be applied to views within an Activity. There are many different kinds of drawables each for a particular design context. In this post, we focus on shape drawables in android app design.

What is a shape drawable

During the design of your application, perhaps you don’t like the default look and feel of the views created for you by Android. If you need to style them differently, that’s where shape drawables will prove very helpful to you.

A shape drawable is an XML file that defines a geometric shape, including colors and gradients. This is used to create a complex shapes  that can be attached as the background of a layout or view on screen. For example, one can use a shape drawable to change the shape, border and gradient of a button background.

Shape drawables are created using the shape element and are stored in the resources folder under the location; res/drawable/filename.xml. The filename is the resource ID by which you reference the resource in your code.

Syntax

A shape is a collection of properties that are combined to describe a background. The shape can be described with properties such as corners for rounding, gradient for backgrounds, padding for spacing, solid for background colors, and stroke for border. The syntax of a shape drawable is as shown below;

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" | "oval" | "line" | "ring" >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type="linear" | "radial" | "sweep"
        android:useLevel="true" | "false" />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

Understanding the Elements

Let us look at the various elements within the shape drawable:

Shape Element

This is the root element of every shape drawable. It’s a required element. It contains the following variables;

xmlns:android: This is a string that defines the XML namespace which must be "http://schemas.android.com/apk/res/android"

android:shape: This is a keyword that defines the type of shape to create. The accepted values for the shape are;

• “rectangle”: A rectangle that fills the containing view. This is the default shape.
• “oval”: An oval shape that fits the dimensions of the containing view
• “line”: A horizontal line that spans the width of the containing view. This shape requires the <stroke> element to define the width of the line.
• “ring”: A ring shape

Only when you specify your shape as a “ring”, should you use the following attributes:

• android:innerRadius: This is the radius for the inner part of the ring.
• android:innerRadiusRatio: This is the radius for the inner part of the ring expressed as a ratio of the ring’s width. For instance a ratio of 10 means that; ring’s width / inner radius = 10.
• android:thickness: This is the thickness of the ring.
• android:thicknessRatio: The thickness of the ring expressed as a ratio of the ring’s width. For instance a ratio of 4 means that; ring’s width / thickness = 4.
• android:useLevel: This is a boolean value that is set to true if the shape is to be used as a level list drawable. You normally set it to false or else your shape might not appear.

Corners Element

This is a child element that creates rounded corners for the shape. It applies only when the shape is a rectangle. It features the following attributes;

• android:radius: This is a radius for all the corners, as a dimension value or resource.
• android:topLeftRadius: This is the radius for the top-left corner, as a dimension value or resource.
• android:topRightRadius: This is the radius for the top-right corner, as a dimension value or resource.
• android:bottomLeftRadius: This is the radius for the bottom-left corner, as a dimension value or resource.
• android:bottomRightRadius: This is the radius for the bottom-right corner, as a dimension value or resource.

Every corner must initially be provided a corner radius greater than 1 or else on corners are rounded and you can specify 0 (0dp) where you don’t want rounded corners.

Gradient Element

This is a child element that specifies the gradient color of the shape. It contains the following attributes:

• android:angle: This is an integer that specifies the angle of the gradient, in degrees. 0 is left to right, 90 is bottom to top. It must be a multiple of 45 and its default value is 0.
• android:centerX: This is a float value which specifies the relative X-position for the center of the gradient (0 – 1.0)
• android:centerY: This is a float value which specifies the relative Y-position for the center of the gradient (0 – 1.0)
• android:startColor: This is the starting color, as a hexadecimal value or color resource.
• android:endColor: This is the end color, as a hexadecimal value or color resource.
• android:centerColor: This is an optional color that comes between the start and end colors, as a hexadecimal value or color resource.
• android:type: This is the gradient pattern to apply to the shape. It carries the following values; “linear” for a linear gradient, “radial” for a radial gradient where the start color is the center color and “sweep” for a sweeping line gradient.
• android:gradientRadius: This is the radius for the gradient. This is only applied when android:type=”radial”

Padding Element

This is a child element to apply padding (space) to the containing view element. The space is applied to the view content, not the shape. It has the following attributes:

• android:left: This is the left padding as a dimension value or resource.
• android:right: This is the right padding, as a dimension value or resource.
• android:top: This is the right padding, as a dimension value or resource.
• android:bottom: This is the bottom padding, as a dimension value or resource.

Size Element

This is a child element that specifies the size of the shape with the following attributes:

• android:height; This is the height of the shape as a dimension value or resource.
• android:width; This is the width of the shape as a dimension value or resource.

Solid Element

This is a child element that specifies the solid color to fill the shape using this attribute;

• android:color; This is the color of the line. as a hexadecimal value or color resource

Stroke Element

This specifies a stroke line for the shape using the following attributes:

• android:width; This is the thickness of the line, as a dimension of value or a resource
• android:color; This is the color of the line. as a hexadecimal value or color resource
• android:dashGap: This is the distance between line dashes, as a dimension value or resource.
• android:dashWidth: This is the size of each dash line, as a dimension value or resource. Its only valid if android:dashGap is set.

Examples

Creating a button with rounded corners

To illustrate the above concepts, let us assume in your android project, you have created an XML shape drawable resource saved as rounded_button.xml at res/drawable/rounded_button.xml Its basically a  rounded rectangle, with a solid color and without a border.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="#FF859E3B" />
    <corners android:radius="10dp" />
    <padding
        android:left="7dp"
        android:right="7dp"
        android:top="7dp"
        android:bottom="7dp"/>
</shape>

And then applied to a Button view inside the layout XML file using the background property:

<Button
    android:id="@+id/subscribeButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounded_button"
    android:text="Subscribe"
    android:textColor="#FFFFFFFF" />

And the resulting view looks like:

You can also add a golden yellow border around the button by adding a stroke element to the rounded_button.xml file like;

<stroke
    android:width="4dp"
    android:color="#FFFFDF00" />

This results into:

Creating a stroked or lined text input

Here is an example of drawing a rectangle shape drawable with a stroked (line) rounded boundary saved as res/layout/drawable/stroked_text_input.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="10dp" />
    <stroke 
        android:color="#FF859E3B" 
        android:width="1dp"/>
</shape>

And then applied to an EditText element using the background property:

<EditText 
    android:id="@+id/nameEditText" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:width="200dp" 
    android:background="@drawable/stroked_text_input" 
    android:text="Name" />

This results into: