About design and nearby

Android Tricks: ‘drawable’ Objects, or how to Draw a Circle

Posted: June 17th, 2015 | Author: | Filed under: Mobile Design and Development | Tags: , , , , , , , | 1 Comment »

Android supports all sorts of ‘drawable’ objects, or ‘something that can be drawn.’ Drawables may take a variety of forms:

  • Bitmap: a *.png or *.jpeg image.
  • 9-Patch: an extension to the *.png format with stretchable regions.
  • Layers: manages an array of other drawables. These are drawn in array order, so the element with the largest index is be drawn on top.
  • States: an XML file that references different bitmap graphics based on its state.
  • Levels: an XML file that defines a drawable that manages a number of alternate Drawables, each assigned a maximum numerical value.
  • Scale: an XML file that defines a drawable that changes the size of another Drawable based on its current level value.
  • Shape: an XML file that defines a geometric shape, including colors and gradients.

Drawable object: shape

Standalone drawable objects are probably not very useful, but their combinations can be helpful for implementation of design ideas.

Let’s talk about an app there it’s logo should be placed inside the circle (Icon.png is my Android logo file).

It’s easy to realize with drawable object with ‘android:background’ attribute like below (‘FrameLayout’ is used to block out an area on the screen to display my single item).

Main.axml file:

  1.   <FrameLayout
  2.         android:layout_width="180dp"
  3.         android:layout_height="180dp"
  4.         android:layout_gravity="center"
  5.         android:background="@drawable/logoShape">
  6.     <ImageView
  7.         android:src="@drawable/Icon"
  8.         android:layout_width="fill_parent"
  9.         android:layout_height="fill_parent"
  10.         android:scaleType="center" />
  11.   </FrameLayout>

Here comes a nuance. You can use a Bitmap for ‘android:background=”@drawable/logoShape’, i.e. include ‘logoShape.png’ file to res/drawable/ folder (it should be an image of a light-blue circle).

Rather smarter solution, as for my mind, is to draw this circle with Shape Drawable.

Shape drawables are defined with a simple XML syntax and located in the drawable folder of an Android project:

  1. res/drawable/filename.xml

there the ‘filename’ is used as the resource ID.

In my case it’s logoShape.xml file placed in

  1. res/drawable/logoShape.xml

The file itself:
‘shape’ must be the root element (basic shapes like rectangle, oval, line, ring are supported, you just need to stylize them). You can define such elements as ‘corners’, ‘gradient’, ‘padding’, ‘size’, ‘solid’, ‘stroke’ also. So my logoShape.xml file:

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
  3.   <solid android:color="#ffffff" />
  4.   <gradient android:angle="90"
  5.       android:startColor="#9ed1e9"
  6.       android:endColor="#b1d7e9" />
  7.   <padding android:left="8dp" android:top="8dp"
  8.            android:right="8dp" android:bottom="8dp" />
  9.   <corners android:radius="200dp" />
  10. </shape>

Shape drawable: oval with an image inside
The result is shown at the attached image (the dark-blue-colored background is defined at my Main.axml file).

There is lots you can do to customize to look however you want ))

Share Button

Check Related Posts:

One Comment on “Android Tricks: ‘drawable’ Objects, or how to Draw a Circle”

  1. 1 Amit said at 9:17 am on January 12th, 2016:
    Reply  |  Quote

    thanks. its working.

Leave a Reply

  • 8 + = seventeen

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now