Reputation: 20769
I am currently drawing a number of circles on a canvas in a custom view in code. the circles are static and do not change. I would like to draw them using a ShapeDrawable in xml to help clean up my code. I will have a number of different drawables which the user can select and therefore I don't want to do this in code. having 3 or 4 xml drawables seems a lot neater to me.
I have created one circle in xml using a ShapeDrawable but am unable to add more than one shape to the xml.
How do I add multiple shapes to an xml document using ShapeDrawable.
Upvotes: 65
Views: 75783
Reputation: 414
I have an example check mark icon with 2 oral outsize may help you, put this in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="48dp"
android:height="48dp">
<shape android:shape="oval">
<solid android:color="#5265FF" />
</shape>
</item>
<item
android:width="38dp"
android:height="38dp"
android:left="5dp"
android:top="5dp">
<shape android:shape="oval">
<solid android:color="#636DFF" />
</shape>
</item>
<item
android:width="28dp"
android:height="28dp"
android:left="10dp"
android:top="10dp">
<vector
android:width="27dp"
android:height="27dp"
android:tint="#F3F1FE"
android:viewportWidth="24"
android:viewportHeight="24">
<path
android:fillColor="@android:color/white"
android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>
</item>
</layer-list>
Upvotes: 0
Reputation: 20769
I think I have found a solution to add multiple shapes to my xml file using Layer-list. I havent tried this yet but this seems t be exactly what I want as the shapes will be draw in the order of their array index.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#FFF8F8F8" />
</shape>
</item>
<item android:top="23px">
<shape>
<solid android:color="#FFE7E7E8" />
</shape>
</item>
</layer-list>
Upvotes: 57
Reputation: 5229
Here's how I did a filled red circle with a one-pixel black border, with a white number 72 in the middle:
Create an XML file in res\drawable and name it appropriately, eg red_circle_black_border.xml
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<solid android:color="@android:color/black" />
</shape>
</item>
<item android:top="1dp" android:left="1dp" android:right="1dp" android:bottom="1dp">
<shape android:shape="oval">
<solid android:color="@android:color/red" />
</shape>
</item>
</layer-list>
Then, to use it in your layout, declare it as follows:
<TextView
android:text="72"
android:textSize="14dp"
android:textStyle="bold"
android:background="@drawable/red_circle_black_border"
android:layout_width="22dp"
android:layout_height="22dp"
android:gravity="center_vertical|center_horizontal"
android:textColor="@android:color/white" />
Obviously, change the textSize and layout_width/height as required :-)
Upvotes: 103