In Android Studio, open an Android app project. In the Project window, select the Android view. Right-click the res folder and select New > Vector Asset.
A VectorDrawable is a vector graphic defined in an XML file as a set of points, lines, and curves along with its associated color information. The major advantage of using a vector drawable is image scalability.
wrap your path tags with group tag. then and add attribute scaleX, scaleY, pivotX and pivotY in group tag to create padding effect. like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:alpha="0.6"
android:viewportHeight="24.0"
android:viewportWidth="24.0">
<group
android:scaleX="0.5"
android:scaleY="0.5"
android:pivotX="12"
android:pivotY="12">
<path
android:fillColor="#FF000000"
android:pathData="M3,4L3,1h2v3h3v2L5,6v3L3,9L3,6L0,6L0,4h3zM6,10L6,7h3L9,4h7l1.83,2L21,6c1.1,0 2,0.9 2,2v12c0,1.1 -0.9,2 -2,2L5,22c-1.1,0 -2,-0.9 -2,-2L3,10h3zM13,19c2.76,0 5,-2.24 5,-5s-2.24,-5 -5,-5 -5,2.24 -5,5 2.24,5 5,5zM9.8,14c0,1.77 1.43,3.2 3.2,3.2s3.2,-1.43 3.2,-3.2 -1.43,-3.2 -3.2,-3.2 -3.2,1.43 -3.2,3.2z"/>
</group>
</vector>
*pivot values depends on size of width and height of your vector
Well scaleX
and ScaleY
works, but I found it difficult to align via android:pivotX
and android:pivotY
, so this is what I did:
Create a new xml drawable
file, like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:top="15dp" android:left="15dp" android:right="15dp" android:bottom="15dp"
android:drawable="@drawable/your_image_or_icon"/>
</layer-list>
Create a new drawable file, add a layer-list and wrap your vector image inside item block. like this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<vector
android:width="40dp"
android:height="40dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#4086f4"
android:pathData="m451,135 l-105,-30 -30,-105h-210c-24.853,0 -45,20.147 -45,45v422c0,24.853 20.147,45 45,45h300c24.853,0 45,-20.147 45,-45z" />
<path
android:fillColor="#4175df"
android:pathData="m451,135v332c0,24.853 -20.147,45 -45,45h-150v-512h60l30,105z" />
<path
android:fillColor="#80aef8"
android:pathData="m451,135h-105c-16.5,0 -30,-13.5 -30,-30v-105c3.9,0 7.8,1.5 10.499,4.501l120,120c3.001,2.699 4.501,6.599 4.501,10.499z" />
<path
android:fillColor="#fff5f5"
android:pathData="m346,241h-180c-8.291,0 -15,-6.709 -15,-15s6.709,-15 15,-15h180c8.291,0 15,6.709 15,15s-6.709,15 -15,15z" />
<path
android:fillColor="#fff5f5"
android:pathData="m346,301h-180c-8.291,0 -15,-6.709 -15,-15s6.709,-15 15,-15h180c8.291,0 15,6.709 15,15s-6.709,15 -15,15z" />
<path
android:fillColor="#fff5f5"
android:pathData="m346,361h-180c-8.291,0 -15,-6.709 -15,-15s6.709,-15 15,-15h180c8.291,0 15,6.709 15,15s-6.709,15 -15,15z" />
<path
android:fillColor="#fff5f5"
android:pathData="m286,421h-120c-8.291,0 -15,-6.709 -15,-15s6.709,-15 15,-15h120c8.291,0 15,6.709 15,15s-6.709,15 -15,15z" />
<path
android:fillColor="#e3e7ea"
android:pathData="m256,421h30c8.291,0 15,-6.709 15,-15s-6.709,-15 -15,-15h-30z" />
<path
android:fillColor="#e3e7ea"
android:pathData="m256,361h90c8.291,0 15,-6.709 15,-15s-6.709,-15 -15,-15h-90z" />
<path
android:fillColor="#e3e7ea"
android:pathData="m256,301h90c8.291,0 15,-6.709 15,-15s-6.709,-15 -15,-15h-90z" />
<path
android:fillColor="#e3e7ea"
android:pathData="m256,241h90c8.291,0 15,-6.709 15,-15s-6.709,-15 -15,-15h-90z" />
</vector>
</item>
inset
can be used starting from API level-21
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="16dp"
android:insetTop="16dp"
android:insetRight="16dp"
android:insetBottom="16dp">
<vector
// ....... my vector
</vector>
</inset>
Another option to cover APIs below level-21 to use with android:translateX
& android:translateY
.. And adjust a proper android:width
& android:height
of the vector.
To add padding to the right/bottom use negative values for android:translateX
& android:translateY
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="40dp"
android:height="40dp"
android:viewportWidth="24"
android:viewportHeight="24">
<group android:translateX="-3"
android:translateY="2">
<path
android:fillColor="#B72B579A"
android:pathData="M18,16.08c-0.76,0 -1.44,0.3 -1.96,0.77L8.91,12.7c0.05,-0.23 0.09,-0.46 0.09,-0.7s-0.04,-0.47 -0.09,-0.7l7.05,-4.11c0.54,0.5 1.25,0.81 2.04,0.81 1.66,0 3,-1.34 3,-3s-1.34,-3 -3,-3 -3,1.34 -3,3c0,0.24 0.04,0.47 0.09,0.7L8.04,9.81C7.5,9.31 6.79,9 6,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3c0.79,0 1.5,-0.31 2.04,-0.81l7.12,4.16c-0.05,0.21 -0.08,0.43 -0.08,0.65 0,1.61 1.31,2.92 2.92,2.92 1.61,0 2.92,-1.31 2.92,-2.92s-1.31,-2.92 -2.92,-2.92z" />
</group>
</vector>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With