In the previous post / article we have seen how to Convert SVG to Vector drawable in android studio .
In the post we will how to place the Vector drawable inside the any shape ( Oval , Rectangle) Using Layer-List drawable .
Lets place the below Home Icon (Vector Drawable) , Inside the circle , rectangle .
Example 1
For placing above vector drawable inside the any shape we will create a drawable with root tag layer-list and add two items to it .
- Item 1 : add shape drawable and define its stroke (width,color), padding,solid(its background color).
- Item 2 : add above mentioned vector drawable.
TAG's Inside Item
- The shape tag of item defines the shape of drawable .
- The stroke tag of item define the border of the drawable .
- The padding tag of item define the inner padding of drawable .
<?xml version="1.0" encoding="utf-8"?>
<layer-list
xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="oval">
<stroke
android:width="2dp"
android:color="#3db5ea" />
<padding
android:bottom="8dp"
android:left="8dp"
android:right="8dp"
android:top="8dp" />
</shape>
</item>
<item android:drawable="@drawable/ic_home_filled" />
</layer-list>
The Shape TAG contains attribute andriod:shape which defines the shape of item ( Oval , Rectangle ) .
Result:
Example 2
Similarly like above example we will place the below arrow icon (Vector Drawable) , Inside the circle , rectangle and also on the line
we will place the arrow-icon (vector-drawable) inside layer-list with shape item
<?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="#fff" />
<stroke
android:width="2dp"
android:color="#3db5ea" />
<padding
android:bottom="@dimen/ic_padding"
android:left="@dimen/ic_padding"
android:right="@dimen/ic_padding"
android:top="@dimen/ic_padding" />
</shape>
</item>
<item android:drawable="@drawable/ic_right" />
</layer-list>
Using Shape TAG of Item we can place the vector drawable inside ( oval , rectangle , line )
Result :
Read More »