Android Placing Drawable Inside Shape (Circle , Rectangle )

 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 :


No comments:

Post a comment