I used the Vector Asset to create an Icon that I want for my app. I set it in the manifest file and it works. However it has a transparent background. I would like to fill that transparent background with a solid color.
Here is the XML file:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportHeight="24.0"
android:viewportWidth="24.0"
android:height="48dp"
android:width="48dp" >
<path android:fillColor="#FF000000" android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1s3.1,1.39 3.1,3.1v2L8.9,8L8.9,6zM18,20L6,20L6,10h12v10z"/>
</vector>
How can I set background color to this?
You can now create a vector background like below for yourself in less than 1 minute ! Open Vecta.io, and create a drawing. Draw a rectangle, and fill it with the background color you want. Drop your preferred shape into the drawing, then run the plugin - Scatterer to randomly distribute the shapes around your drawing!
xml , create alternative drawable resources in your app for backward-compatibility with Android 8.0 (API level 26). You can then use the <adaptive-icon> element to define the foreground, background, and monochromatic layer drawables for your icons.
Since there is no direct way to make a background to a VectorDrawable
! So the alternative way is to use a group to arrive to the same Appearance (like a background).
The logic is to make another path before your own vector drawable path so that it may act as a background (No one will notice the difference!) when added together in a group.
For your case this image (with an amber background)!
Was made by adjusting your code like this:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="48dp"
android:height="48dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<group>
<path android:name="square"
android:fillColor="#FFFF6F00"
android:pathData="M0,0 L24,0 L24,24 L0,24 z" />
<path android:fillColor="#FF000000"
android:pathData="M12,17c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,8h-1L17,6c0,-2.76 -2.24,-5 -5,-5S7,3.24 7,6v2L6,8c-1.1,0 -2,0.9 -2,2v10c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2L20,10c0,-1.1 -0.9,-2 -2,-2zM8.9,6c0,-1.71 1.39,-3.1 3.1,-3.1s3.1,1.39 3.1,3.1v2L8.9,8L8.9,6zM18,20L6,20L6,10h12v10z"/>
</group>
</vector>
So from there you can change the shape (to circular may be) or color (amber to blue) to fit your needs.
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