57

How would I achieve a round shape in Android, like below, through an Android shape drawable:

enter image description here

Graham Smith
  • 25,627
  • 10
  • 46
  • 69
AndroidDev
  • 2,627
  • 6
  • 29
  • 41

1 Answers1

116

You need to create a shape drawable in the drawable folder that looks something like:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval" >
    <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
        android:angle="270"/>
</shape>

(For this example I have saved the drawable as circle.xml and it will have a gradient fill)

Then in your layout you need to define a view and set the shape as the background:

<View android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/circle"/>

The View defines the size and dimensions of the shape.

Edit - Screenshots of the result of the code

Graphical View

Code Image

Graham Smith
  • 25,627
  • 10
  • 46
  • 69
  • I have tried oval shape but it gives oval shape not round shape. I have not used gradient as I dont require it. – AndroidDev Apr 11 '12 at 13:13
  • 3
    The oval shape will give you a circle, it is based on the View's dimensions. If you have an oval the the height and width of the View must not be equal.. – Graham Smith Apr 11 '12 at 14:56
  • I am using two cases in first layout_width and layout_height is wrap-content, in second case layout_width and layout_height is fixed say 150dip. In both cases the resulting shape is oval. But I need circle. – AndroidDev Apr 12 '12 at 06:34
  • 1
    See my screenshots above. If you use wrap_content then you shall not guarantee the results you need. To achieve a circle you will need both the width and height to be equal. Shape drawables defined in XML do not have a size until attached to a View that defines the size. – Graham Smith Apr 12 '12 at 09:31
  • 1
    will try and let you know...did actually same yesterday but it was oval coming everytime. Thanks:) – AndroidDev Apr 12 '12 at 09:46
  • @GrahamSmith that means this is not a flexible option. – mr5 May 14 '14 at 02:02
  • Later if I need to change color programmatically, the circle is removed? – zIronManBox Jan 14 '15 at 05:17
  • This would give you circle shape only if width and height of view is same, if there is any variation in height and width of view then it would produce oval shape not circle. – RQube Oct 06 '15 at 12:43
  • one CAN define size in shape's xml view attribute - – Re'em Aug 11 '16 at 16:34