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

user_3466808 0
Viewed 1181

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:

enter image description here

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

android-vectordrawable android-drawable drawable android xml
1 Answers

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:

enter image description here

enter image description here

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

user_34668080
Related