Question:
I have some problems finding the documentation of the definitions of shapes in XML for Android. I would like to define a simple circle filled with a solid color in an XML File to include it into my layout files.
Sadly the Documentation on android.com does not cover the XML attributes of the Shape classes. I think I should use an ArcShape to draw a circle but there is no explanation on how to set the size, the color, or the angle needed to make a circle out of an Arc.
Solution:1
This is a simple circle as a drawable in Android.
<?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>
Solution:2
Set this as your view background
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="1dp" android:color="#78d9ff"/> </shape> 
For solid circle use:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#48b3ff"/> </shape> 
Solid with stroke:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#199fff"/> <stroke android:width="2dp" android:color="#444444"/> </shape> 
Note: To make the oval shape appear as a circle, in these examples, either your view that you are using this shape as its background should be a square or you have to set the height and width properties of the shape tag to an equal value.
Solution:3
Code for Simple circle
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="#9F2200"/> <stroke android:width="2dp" android:color="#fff" /> <size android:width="80dp" android:height="80dp"/> </shape>
Solution:4
Look in the Android SDK samples. There are several examples in the ApiDemos project:
/ApiDemos/res/drawable/
- black_box.xml
- shape_5.xml
- etc
It will look something like this for a circle with a gradient fill:
<?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>
Solution:5
You can use VectorDrawable as below :
<?xml version="1.0" encoding="utf-8"?> <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="200dp" android:height="200dp" android:viewportHeight="64" android:viewportWidth="64"> <path android:fillColor="#ff00ff" android:pathData="M22,32 A10,10 0 1,1 42,32 A10,10 0 1,1 22,32 Z" /> </vector> The above xml renders as :
Solution:6
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <!-- fill color --> <solid android:color="@color/white" /> <!-- radius --> <stroke android:width="1dp" android:color="@color/white" /> <!-- corners --> <corners android:radius="2dp"/> </shape>
Solution:7
Here's a simple circle_background.xml for pre-material:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape android:shape="oval"> <solid android:color="@color/color_accent_dark" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="@color/color_accent" /> </shape> </item> </selector> You can use with the attribute 'android:background="@drawable/circle_background" in your button's layout definition
Solution:8
If you want a circle like this
Try using the code below:
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:innerRadius="0dp" android:shape="ring" android:thicknessRatio="2" android:useLevel="false" > <solid android:color="@android:color/white" /> <stroke android:width="1dp" android:color="@android:color/darker_gray" /></shape>
Solution:9
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <stroke android:width="10dp" android:color="@color/white"/> <gradient android:startColor="@color/red" android:centerColor="@color/red" android:endColor="@color/red" android:angle="270"/> <size android:width="250dp" android:height="250dp"/> </shape>
Solution:10
You can try this -
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="ring" android:innerRadiusRatio="700" android:thickness="100dp" android:useLevel="false"> <solid android:color="#CCC" /> </shape> Also, you can adjust the radius of the circle by adjusting android:thickness.
Solution:11
I couldn't draw a circle inside my ConstraintLayout for some reason, I just couldn't use any of the answers above.
What did work perfectly is a simple TextView with the text that comes out, when you press "Alt+7":
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#0075bc" android:textSize="40dp" android:text="•"></TextView>
Solution:12
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="@color/text_color_green"/> <!-- Set the same value for both width and height to get a circular shape --> <size android:width="250dp" android:height="250dp"/> </shape> </item> </selector>
Solution:13
Just use
ShapeDrawable circle = new ShapeDrawable( new OvalShape() ); Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
EmoticonEmoticon