Search code examples
xmlvectorvector-graphics

XML Vector - How to create a virtical line with rounded corners


I want to create this image using XML vector, the line width and height of this vector should be the same as the provided code's vector.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M16.5,6v11.5c0,2.21 -1.79,4 -4,4s-4,-1.79 -4,-4V5c0,-1.38 1.12,-2.5 2.5,-2.5s2.5,1.12 2.5,2.5v10.5c0,0.55 -0.45,1 -1,1s-1,-0.45 -1,-1V6H10v9.5c0,1.38 1.12,2.5 2.5,2.5s2.5,-1.12 2.5,-2.5V5c0,-2.21 -1.79,-4 -4,-4S7,2.79 7,5v12.5c0,3.04 2.46,5.5 5.5,5.5s5.5,-2.46 5.5,-5.5V6h-1.5z"/>
</vector>

The result I'm looking for

enter image description here


Solution

  • Ok, I got my result.

    • Step 1: Design the image.
    • Step 2: Export the image as SVG*.
    • Step 3: Open Android Studio > Right-click on drawable folder > new Vector asset > From local SVG file > choose your SVG file.

    *if your editor doesn't support SVG exporting you can convert it online.

    Here is the result

    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="3dp"
        android:height="30dp"
        android:viewportWidth="1290"
        android:viewportHeight="12040"
        android:tint="?attr/colorControlNormal">
        <path
            android:fillColor="@android:color/white"
            android:pathData="M510,11939c-25,-5 -82,-27 -129,-49 -152,-73 -272,-220 -315,-387 -14,-55 -16,-591 -16,-5503 0,-4912 2,-5448 16,-5503 43,-167 163,-314 315,-387 95,-45 160,-60 264,-60 104,0 169,15 264,60 152,73 272,220 315,387 14,55 16,591 16,5503 0,4912 -2,5448 -16,5503 -43,167 -163,314 -315,387 -46,22 -108,44 -138,50 -64,12 -198,11 -261,-1z" />
    </vector>