How to add a background to a Vector Asset that I want to use as my app's icon?

55
July 16, 2019, at 2:40 PM

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 android:height="48dp" android:viewportHeight="24.0"
    android:viewportWidth="24.0" android:width="48dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <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?

Answer 1

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.

Answer 2

After putting a ton of work and research into this, I have finally come up with a solution.

You need three drawables, the background, the vector itself and the drawable that combines the two of them together.

This code gives a brief demonstration:

@drawable/ic_vector.xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<group
    android:scaleX="0.8"
    android:scaleY="0.8"
    android:pivotX="12"
    android:pivotY="12">
<path
    android:fillColor="#ffffff"
    android:pathData="M6,18c0,0.55 0.45,1 1,1h1v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L11,19h2v3.5c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5L16,19h1c0.55,0 1,-0.45 1,-1L18,8L6,8v10zM3.5,8C2.67,8 2,8.67 2,9.5v7c0,0.83 0.67,1.5 1.5,1.5S5,17.33 5,16.5v-7C5,8.67 4.33,8 3.5,8zM20.5,8c-0.83,0 -1.5,0.67 -1.5,1.5v7c0,0.83 0.67,1.5 1.5,1.5s1.5,-0.67 1.5,-1.5v-7c0,-0.83 -0.67,-1.5 -1.5,-1.5zM15.53,2.16l1.3,-1.3c0.2,-0.2 0.2,-0.51 0,-0.71 -0.2,-0.2 -0.51,-0.2 -0.71,0l-1.48,1.48C13.85,1.23 12.95,1 12,1c-0.96,0 -1.86,0.23 -2.66,0.63L7.85,0.15c-0.2,-0.2 -0.51,-0.2 -0.71,0 -0.2,0.2 -0.2,0.51 0,0.71l1.31,1.31C6.97,3.26 6,5.01 6,7h12c0,-1.99 -0.97,-3.75 -2.47,-4.84zM10,5L9,5L9,4h1v1zM15,5h-1L14,4h1v1z"/>
</group>
</vector>

NOTE: The group android:scale tags give padding to your vector.

@drawable/background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#36dad2"
    android:endColor="#5877e6"
    android:angle="45" />
<size
    android:width="25dp"
    android:height="25dp"/>
<corners
    android:radius="5dp"/>

</shape>

And Finally @drawable/icon.xml:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/background"/>
<item android:drawable="@drawable/ic_android_black_24dp"
    android:gravity="center"/>
</layer-list>

Then Implement icon.xml into your manifest as usual even though you WILL not be able to see a preview of it in manifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.dobleu.peek">
<application
    android:allowBackup="true"
    android:icon="@drawable/icon"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    <activity android:name=".MainActivity">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>
</manifest>

And Voila! You have a full professional icon.

READ ALSO
How to position sceneform node/model orthogonal to floor while anchor is the camera pose?

How to position sceneform node/model orthogonal to floor while anchor is the camera pose?

For a university project, I need to render two similar 3D models a bit apart from each other and away from the camera and track thoseI handle this with Google ArCore and Sceneform

30
I have my goDaddy shared web Hosting and I need to host a NuxtJs app

I have my goDaddy shared web Hosting and I need to host a NuxtJs app

I have my nuxt app built and I need to host in my goDaddy shared account

46
How to get predicted value of my linear regression model on html page

How to get predicted value of my linear regression model on html page

I'm preparing machine learning model via django project but I'm not able to get that value via viewspy to html page

38
Slider not drag-able on mobile

Slider not drag-able on mobile

I'm trying to get the below code to work with mobile:

53