Search code examples
androidxmldrawableandroid-drawableandroid-vectordrawable

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


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.


Solution

  • 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