Search code examples
androidsvgandroid-vectordrawable

Create thin rectangular border lines around my VectorDrawable image

I want to create a rectangular border around my VectorDrawable image file that I'm currently using, but I couldn't do it so far.

Here is my image xml file:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">


        <path
            android:fillColor="@color/white_white"
            android:pathData="M17,8c0.552,0 1,0.449 1,1s-0.448,1 -1,1 -1,-0.449 -1,-1 0.448,-1 1,-1zM17,6c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM7,12c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM17,4c0.343,0 0.677,0.035 1,0.101v-2.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v2.101c0.323,-0.066 0.657,-0.101 1,-0.101zM7,10c0.343,0 0.677,0.035 1,0.101v-8.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v8.101c0.323,-0.066 0.657,-0.101 1,-0.101zM17,14c-0.343,0 -0.677,-0.035 -1,-0.101v8.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-8.101c-0.323,0.066 -0.657,0.101 -1,0.101zM7,20c-0.343,0 -0.677,-0.035 -1,-0.101v2.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-2.101c-0.323,0.066 -0.657,0.101 -1,0.101z" />

</vector>

This is what I tried so far: 

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="24"
    android:viewportWidth="24">

    <group android:name="groupName">

        <path
            android:strokeWidth="2"
            android:strokeColor="@color/white_white"/>

        <path
            android:fillColor="@color/white_white"
            android:pathData="M17,8c0.552,0 1,0.449 1,1s-0.448,1 -1,1 -1,-0.449 -1,-1 0.448,-1 1,-1zM17,6c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM7,12c-1.657,0 -3,1.343 -3,3s1.343,3 3,3 3,-1.343 3,-3 -1.343,-3 -3,-3zM17,4c0.343,0 0.677,0.035 1,0.101v-2.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v2.101c0.323,-0.066 0.657,-0.101 1,-0.101zM7,10c0.343,0 0.677,0.035 1,0.101v-8.101c0,-0.552 -0.447,-1 -1,-1s-1,0.448 -1,1v8.101c0.323,-0.066 0.657,-0.101 1,-0.101zM17,14c-0.343,0 -0.677,-0.035 -1,-0.101v8.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-8.101c-0.323,0.066 -0.657,0.101 -1,0.101zM7,20c-0.343,0 -0.677,-0.035 -1,-0.101v2.101c0,0.552 0.447,1 1,1s1,-0.448 1,-1v-2.101c-0.323,0.066 -0.657,0.101 -1,0.101z" />
    </group>

</vector>

but it did not work.

Solution

  • If I understand correctly, you have some vector drawable and you wish you give it a white rectangular border. In this case, I would suggest using a layerdrawable, which can be done programmatically, but can also be done by making the following layer-list xml file:

    yourvector_withbackground.xml

    <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/yourvector"
    android:left="5dp"
    android:top="5dp"
    android:right="5dp"
    android:bottom="5dp"></item>
    <item android:drawable="@drawable/background"></item>
</layer-list>

    This layer-list xml just puts two drawables on top of each other, the order of the items determines which is in the foreground and which is in the background. The '5dp's give padding to the drawable, helping you position your vector inside the border. The drawable yourvector.xml is your original vector drawable, and background.xml contains the border and is shown in the code below:

    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <stroke android:width="1dip" android:color="@color/white"/>
</shape>