Creating Circular Shapes with Android Drawables

Android allows you to define custom shapes as drawable resources, which can then be used as backgrounds for views, or as components within more complex layouts. This tutorial focuses on creating circular shapes using XML drawables, providing a straightforward guide to achieve this common design element.

Understanding Drawable Shapes

Drawable shapes are defined using XML files placed in your project’s res/drawable/ directory. The <shape> tag is the root element, defining the overall shape. Several child tags control the appearance, including fill color, stroke (border), size, and gradients.

Creating a Simple Solid Circle

The most basic circular shape is a solid-filled circle. Here’s the XML code:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#666666"/>
    <size
        android:width="120dp"
        android:height="120dp"/>
</shape>

Let’s break down each element:

<shape>: The root element, defining the shape. The android:shape="oval" attribute specifies that we want an oval (which becomes a circle if width and height are equal).
<solid>: Specifies the fill color of the shape. android:color accepts a hexadecimal color value (e.g., #666666).
<size>: Defines the width and height of the shape. Crucially, to create a perfect circle, the android:width and android:height must be equal. You can use dp (density-independent pixels) or sp (scaled pixels) for these values.

Adding a Stroke (Border)

You can add a border around your circle using the <stroke> tag.

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="#444444"/>
    <size
        android:width="80dp"
        android:height="80dp"/>
</shape>

<stroke>: Defines the stroke properties.
- android:width: The width of the stroke in dp.
- android:color: The color of the stroke.

Combining Solid Color and Stroke

You can have both a solid fill and a stroke simultaneously:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid
        android:color="#199fff"/>
    <stroke
        android:width="2dp"
        android:color="#444444"/>
    <size
        android:width="80dp"
        android:height="80dp"/>
</shape>

Using the Drawable in Your Layout

Once you’ve created the XML drawable file (e.g., circle_shape.xml), you can use it as a background for any View in your layout XML:

<ImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:background="@drawable/circle_shape"/>

Or, you can set it programmatically in your Activity or Fragment:

ImageView imageView = findViewById(R.id.myImageView);
imageView.setBackground(ContextCompat.getDrawable(this, R.drawable.circle_shape));

Important Considerations

Equal Width and Height: To ensure a perfect circle, always set the android:width and android:height attributes of the <size> tag to the same value. If these values are different, you’ll get an ellipse.
Drawable States: You can define different shapes for different states of a view (e.g., pressed, focused) using <selector> drawables.
VectorDrawables: For more complex shapes, or shapes that need to scale without loss of quality, consider using VectorDrawables. They are defined using paths and are ideal for creating scalable icons and graphics.

Leave a Reply Cancel reply