VectorDrawable image looks shrunken in ImageView

Question

VectorDrawable image looks stoo small in an ImageView. Please have to look in to the space around Imageview

Here is my foreground xml file of VectorDrawable image which is kept in drawable folder

 <vector xmlns:android="http://schemas.android.com/apk/res/android"
            android:width="108dp"
            android:height="108dp"
            android:viewportWidth="91.83673"
            android:viewportHeight="91.83673">
        <group android:translateX="0.9183673"
                android:translateY="38.918365">
            <path
                android:pathData="M49.245,0l0,13.057l-3.88,0l0,-8.612l-4.026,8.731l-2.396,0l-3.872,-8.731l0,8.612l-2.806,0l0,-13.057l5.074,0l3.464,7.993l3.624,-7.993z"
                android:strokeColor="#00000000"
                android:fillType="evenOdd"
                android:fillColor="#FFFFFF"
                android:strokeWidth="1"/>
            <path
                android:pathData="M61.856,0l0,2.435l-6.074,0l0,2.922l5.297,0l0,2.196l-5.297,0l0,3.067l6.199,0l0,2.556l-10.189,0l0,-13.176z"
                android:strokeColor="#00000000"
                android:fillType="evenOdd"
                android:fillColor="#FFFFFF"
                android:strokeWidth="1"/>
            <path
                android:pathData="M76.415,0l0,13.176l-4.309,0l-4.836,-8.451l0,8.451l-2.741,0l0,-13.176l4.435,0l4.711,8.306l0,-8.306z"
                android:strokeColor="#00000000"
                android:fillType="evenOdd"
                android:fillColor="#FFFFFF"
                android:strokeWidth="1"/>
        </group>
    </vector>

Here is the xml code & View(Width & Height made as wrap_content)

Code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/inner_circle_light_blue">

    <ImageView
        android:layout_marginTop="50dp"
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/foreground" />

</RelativeLayout>

Here is the xml code & View(Width & Height I'm taking from dimens.xml)

Code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/inner_circle_light_blue">

    <ImageView
        android:layout_marginTop="50dp"
        android:id="@+id/imageview"
        android:layout_width="@dimen/width"
        android:layout_height="@dimen/height"
        android:layout_centerHorizontal="true"
        android:src="@drawable/foreground" />

</RelativeLayout>

score 0 · Answer 1 · answered Mar 13 '18 at 12:49

I am assuming that your VectorDrawable started as an SVG.

Your problem is that your SVG has been designed as a small piece of text in the middle of a much larger square canvas. That overly-large canvas size has been retained after conversion to VectorDrawable. The viewportWidth and viewportHeight attributes in your VectorDrawable describe the document area. They are approximately 92x92, but your text is only about 44x13 in size.

You need to make sure that either:

you fit your text to the size of the document, or
you resize your document to the size of your objects (the text) before you save

If you are using Inkscape, there is an easy way to do option #2. Select Edit -> Resize Page to Selection from the menu before you save and convert to a VectorDrawable.

Other editors should have a similar function. If not, then you could always run it through Inkscape before conversion.

VectorDrawable image looks shrunken in ImageView

1 Answers1