Android How to Remove the Inner Padding of a Vector Asset Drawable

Question

My vector drawable from Vector Asset:

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

    <path
        android:fillColor="@android:color/white"
        android:pathData="M7,14l5,-5 5,5z" />

</vector>

My layout:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:src="@drawable/ic_baseline_arrow_drop_up_24" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:text="Hi, my name is Sam"
        android:textColor="@android:color/white"
        android:textSize="30sp" />

</LinearLayout>

Current output:

How to remove the inner padding of this vector drawable? Any help will be appreciated.

Answer 1

Ok, here is the solution I come up with, not the perfect answer but meets my need.

Modify the Vector Drawable like this:

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

    <group                       //key point
        android:pivotX="12"      //(12, 12) is the center accordig to the viewport, see link below
        android:pivotY="12"
        android:scaleX="2.0"     //twice bigger, adjust as needed
        android:scaleY="2.0"
        android:translateY="8">  //move downward, asjust as needed

        <path
            android:fillColor="@android:color/white"
            android:pathData="M7,14l5,-5 5,5z" />

    </group>

</vector>

Result:

---

The benefit of this solution is that no matter how you change the size of the ImageView , the target shape remains its position (at the bottom in my case), so no need to bother with RelativeLayout , just go with LinearLayout .

"pivot(12, 12)" explain: https://stackoverflow.com/a/51659233/3466808

Answer 2

You can take a look at group tag with (pivotX, pivotY, scaleX, scaleY) and modify asset code

Please take a look at example [here]