CODEWITHSUNDEEP
androidxmlandroid-vectordrawable
Ahmad Sattout
Ahmad Sattout

Reputation: 2486

Vector Drawable inside Layer-list is stretching

When I use a layer-list with a vector-drawable inside, it works fine on API 23+ but not prior.

I have enabled vectorDrawables.useSupportLibrary = true and AppCompatDelegate.setCompatVectorFromResourcesEnabled(true), yet the drawable is very stretched.

Left is Oreo 26 and right is Lollipop 21

Left is Oreo 26 and right is Lollipop 21

This is the drawable

<layer-list>
            <item>
                <shape>
                    <stroke android:width="0.9dp" android:color="@color/colorPrimaryDark" />
                    <solid android:color="#FFF" />
                    <corners android:radius="16dp" />
                </shape>
            </item>

            <item android:drawable="@drawable/arrow_drawable" android:gravity="center_vertical|left" android:left="18dp" />
        </layer-list>

And this is where the drawable is applied

<Spinner
        android:id="@+id/countrySpinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@drawable/spinner_background"
        android:popupBackground="@drawable/spinner_dropdown_background"
        android:popupElevation="4dp"
        app:popupTheme="@style/PopupTheme"
        app:layout_constraintBottom_toTopOf="@id/citySpinner"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.8" />

It's inside a ConstraintLayout, but I can't post the whole layout file.

What can I do to fix the stretching Pre API 23? Would creating the whole layer-list in code be any different?

Edit: I did try it before, but forgot to add it. I did try the following xml

<layer-list>
            <item>
                <shape>
                    <stroke android:width="0.9dp" android:color="@color/colorPrimaryDark"/>
                    <solid android:color="#FFF"/>
                    <corners android:radius="16dp"/>
                </shape>
            </item>

            <item android:left="18dp">
                <bitmap android:src="@drawable/arrow_drawable" android:gravity="center_vertical|left"/>
            </item>
        </layer-list>

But this made the app crash as soon as it starts saying android.content.res.Resources$NotFoundException: File res/drawable/spinner_background.xml from drawable resource ID #0x7f0700de Which is probably not alot of sense. And this is what the preview in Android Studio shows

enter image description here

Upvotes: 4

Views: 2534

Answers (1)

Ben P.
Ben P.

Reputation: 54244

The documentation for layer-list drawables states:

All drawable items are scaled to fit the size of the containing View, by default. Thus, placing your images in a layer list at different positions might increase the size of the View and some images scale as appropriate. To avoid scaling items in the list, use a <bitmap> element inside the <item> element to specify the drawable and define the gravity to something that does not scale, such as "center".

Try this out:

<layer-list>
    <item>
        <shape>
            <stroke android:width="0.9dp" android:color="@color/colorPrimaryDark" />
            <solid android:color="#FFF" />
            <corners android:radius="16dp" />
        </shape>
    </item>

    <item android:left="18dp">
        <bitmap
            android:src="@drawable/arrow_drawable"
            android:gravity="center_vertical|left"/>
    </item>
</layer-list>

Upvotes: 1

Related Questions