Use Shape Drawables Android

Thursday, 19/11/2020

Tram Ho

Why use ShapeDrawable

When we use PNG or JPEG images in an app, we will need to have multiple copies of them depending on screen resolution. Because of that, it will increase the size of the app. Of course for special cases we need to use images, but in some cases we should use ShapeDrawable instead, which will greatly reduce the size of the application.

For example, with the buttons in the image below, we can use the image to set it as that background, but we should use ShapeDrawable.

What is ShapeDrawable?

ShapeDrawable is a collection of commands that help to draw certain shapes with custom sizes and colors without changing the image quality.

Create a ShapeDrawable in XML

First we will create a drawable resource file.

Right click res / drawable> New> Drawable resource file> Enter file name> use shape as root element> Click Ok

A sample file will have a format like this:

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> shape</span> <span class="token attr-name"><span class="token namespace">xmlns:</span> android</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> http://schemas.android.com/apk/res/android <span class="token punctuation">"</span></span>
    <span class="token attr-name"><span class="token namespace">android:</span> shape</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> rectangle <span class="token punctuation">"</span></span> <span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> corners</span>
        <span class="token attr-name"><span class="token namespace">android:</span> bottomRightRadius</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 10dp <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> radius</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 40dp <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> gradient</span>
        <span class="token attr-name"><span class="token namespace">android:</span> angle</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 45 <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> centerX</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> float <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> centerY</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> float <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> endColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #01f1fa <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> gradientRadius</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> integer <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> startColor</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #0189ff <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> type</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> linear <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--If your shape requires only one solid color--&gt;</span>
    <span class="token comment">&lt;!--&lt;solid
        android:color="#FFFFFF" /&gt;--&gt;</span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> size</span>
        <span class="token attr-name"><span class="token namespace">android:</span> width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 82dp <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> height</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 82dp <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--Use android:dashWidth="2dp" and android:dashGap="2dp"
    to add dashes to your stroke--&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> stroke</span>
        <span class="token attr-name"><span class="token namespace">android:</span> width</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> 2dp <span class="token punctuation">"</span></span>
        <span class="token attr-name"><span class="token namespace">android:</span> color</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> #FFFFFF <span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>

    <span class="token comment">&lt;!--If you want to add padding--&gt;</span>
    <span class="token comment">&lt;!-- &lt;padding
         android:left="10dp"
         android:top="20dp"
         android:right="40dp"
         android:bottom="8dp" /&gt;--&gt;</span>
    
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span> shape</span> <span class="token punctuation">&gt;</span></span>

< shape xmlns: android = " http://schemas.android.com/apk/res/android "

android: shape = " rectangle " >

< corners

android: bottomRightRadius = " 10dp "

android: radius = " 40dp " />

< gradient

android: angle = " 45 "

android: centerX = " float "

android: centerY = " float "

android: endColor = " #01f1fa "

android: gradientRadius = " integer "

android: startColor = " #0189ff "

android: type = " linear " />

<!--<solid

android:color="#FFFFFF" />-->

< size

android: width = " 82dp "

android: height = " 82dp " />

<!--Use android:dashWidth="2dp" and android:dashGap="2dp"

to add dashes to your stroke-->

< stroke

android: width = " 2dp "

android: color = " #FFFFFF " />

<!-- <padding

android:left="10dp"

android:top="20dp"

android:right="40dp"

android:bottom="8dp" />-->

</ shape >

Result:

Attributes when creating a shape

1. Shape type

Defines the type of shape to be drawn. If we do not define the shape type then default it will be rectangle, in addition it also provides other shapes like oval, line and ring.

android:shape= “oval”

1 2	android:shape= “oval”

2. Rounded Coneres

Defines the rounded corners of a rectangle when we use the rectangle shape type.

android:radius=”21dp”

1 2	android:radius=”21dp”

We can also stroke in every rectangle with the attributes: android: topLeftRadius, android: topRightRadius, android: bottomLeftRadius, android: bottomRightRadius

android:bottomLeftRadius=”10dp”

1 2	android:bottomLeftRadius=”10dp”

3. Gradient or Solid color

Defines the background color of the shape, be it gradient or solid.If you want to use solid color, we add the solid tag and add the color attribute to define it.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> solid</span> <span class="token attr-name"><span class="token namespace">android:</span> color</span> <span class="token attr-value"><span class="token punctuation">=</span> @color/your_color_name</span> <span class="token punctuation">/&gt;</span></span>

< solid android: color = @color/your_color_name />

If we want to use gradient colors, we’ll add a gradient tag and define the start, center, and end colors

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> gradient</span>
    <span class="token attr-name"><span class="token namespace">android:</span> startColor</span> <span class="token attr-value"><span class="token punctuation">=</span> @color/your_color_name</span>
    <span class="token attr-name"><span class="token namespace">android:</span> centerColor</span> <span class="token attr-value"><span class="token punctuation">=</span> @color/your_color_name</span>
    <span class="token attr-name"><span class="token namespace">android:</span> endColor</span> <span class="token attr-value"><span class="token punctuation">=</span> @color/your_color_name</span>
<span class="token punctuation">/&gt;</span></span>

< gradient

android: startColor = @color/your_color_name

android: centerColor = @color/your_color_name

android: endColor = @color/your_color_name

/>

If you do not define the type of the gradient it will leave the type as linear by default, in addition to other types such as radial, sweep.

android:type=”radial”

1 2	android:type=”radial”

If we want to change the angle, the gradient direction, we will change the angel attibute. For example, we give the gradient from bottom left to top right corner, we will set angel with value 45

android:angle="45"

1 2	android:angle="45"

4. Size

Defines the size of the shape to use for specific situations

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> size</span>
    <span class="token attr-name"><span class="token namespace">android:</span> layout_height</span> <span class="token attr-value"><span class="token punctuation">=</span> ”40dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span> layout_width</span> <span class="token attr-value"><span class="token punctuation">=</span> ”10dp”</span>
<span class="token punctuation">/&gt;</span></span>

< size

android: layout_height = ”40dp”

android: layout_width = ”10dp”

/>

5. Stroke

Define the border of the shape with width and color, to define the dash distance and the width of the dash we use dashGap and dashWidth.

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span> stroke</span>
    <span class="token attr-name"><span class="token namespace">android:</span> width</span> <span class="token attr-value"><span class="token punctuation">=</span> ”2dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span> color</span> <span class="token attr-value"><span class="token punctuation">=</span> @color/your_beautiful_color</span>
    <span class="token attr-name"><span class="token namespace">android:</span> dashGap</span> <span class="token attr-value"><span class="token punctuation">=</span> ”1dp”</span>
    <span class="token attr-name"><span class="token namespace">android:</span> dashWidth</span> <span class="token attr-value"><span class="token punctuation">=</span> ”4dp”</span>
<span class="token punctuation">/&gt;</span></span>

< stroke

android: width = ”2dp”

android: color = @color/your_beautiful_color

android: dashGap = ”1dp”

android: dashWidth = ”4dp”

/>

Use the shape in View

After we have created the drawable file, we use it in the view as follows

&lt;ImageView
    xmlns:android=”http://schemas.android.com/apk/res/android"
    android:id=”@+id/my_image_view”
    android:layout_width=”wrap_content”
    android:layout_height=”wrap_content”
    android:background=”@drawable/my_custom_circle”
    android:text=”@string/hello_world”
/&gt;

<ImageView

xmlns:android=”http://schemas.android.com/apk/res/android"

android:id=”@+id/my_image_view”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:background=”@drawable/my_custom_circle”

android:text=”@string/hello_world”

Instead of using android: background , we can use:

android:src=”@drawable/my_custom_circle”

1 2	android:src=”@drawable/my_custom_circle”

Use on Java:

ImageView myImageView = (ImageView) findViewById(R.id.my_image_view);
imageView.setImageResource(R.drawable.my_custom_circle);

ImageView myImageView = (ImageView) findViewById(R.id.my_image_view);

imageView.setImageResource(R.drawable.my_custom_circle);

Editing the shape in Java

We can also edit the shape drawable with java

Drawable drawable = getDrawable(R.drawable.button_shape);
GradientDrawable gradientDrawable = (GradientDrawable) drawable;
gradientDrawable.setColor(ContextCompat.getColor(this, R.color.colorPrimary));
gradientDrawable.setShape(GradientDrawable.OVAL);
gradientDrawable.setStroke(12, Color.CYAN);

Drawable drawable = getDrawable(R.drawable.button_shape);

GradientDrawable gradientDrawable = (GradientDrawable) drawable;

gradientDrawable.setColor(ContextCompat.getColor(this, R.color.colorPrimary));

gradientDrawable.setShape(GradientDrawable.OVAL);

gradientDrawable.setStroke(12, Color.CYAN);

Conclude

Thank you for reading the article, hope it helps you.

Reference: https://android.jlelse.eu/android-shape-drawables-tutorial-17fbece6fef5

Share the news now

Source : Viblo