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 ) .
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 )
No comments:
Post a Comment