Android vector drawables pixelate when inflating new layouts

100 views Asked by At

Hi all and thanks for your feedbacks in advance.

I've developed an app (minSdk 24, so there should be no reason to set the flag vectorDrawables.useSupportLibrary = true in gradle) which uses several svg's converted to XML vector drawables in Android Studio. So far so good.

I am displaying such drawables in an Imageview (dimensions 60dp x 60dp, say Imageview "A") which in turn is in a viewholder in a recyclerview within fragment "A". No problem at all. By clicking a recyclerview item, the user opens a new fragment "B" (note that fragment B is added to layout - it is not replacing fragment A) whose layout has an Imageview "B" with higher dimensions (100dp x 100dp) that is gonna show the same drawable of the Imageview A. All fine here too. By the way, When the user gets back to fragment A (still added, simply lying below fragment B which gets removed when user taps back button) the image in the Imageview A, within the recyclerview, looks very pixelate and low quality.

I tried to remove Imageview B from the fragment B and the image shown in Imageview A is not pixelate anymore. Same holds if I am using two different (but identical) xml files for the two Imageviews.

It feels like Android is sort of "caching" the xml drawable new size, hence trying to adapt the new xml size to Imageview B, therefore lowering its quality. I get same behaviour when programmatically inflating an Imageview after user action.

I can solve the issue by using a duplicated XML file, but it feels like a terrible solution and I'd really like to understand better what is wrong with my setup.

This is the code of the Imageview within Recyclerview:

<ImageView
    android:id="@+id/icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_marginStart="2dp"
    android:scaleType="fitXY"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

This is the code of the Imageview within Fragment B Layout:

<ImageView
    android:id="@+id/wiki_focus_icon"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginStart="40dp"
    android:layout_marginTop="40dp"
    android:layout_marginEnd="40dp"
    android:scaleType="fitXY"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

I am programmatically setting the image of the imageviews in my code using

icon.setImageResource(R.drawable.mydrawable)

This is an example of one of the drawables vector's attributes.

<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="100dp"
android:height="100dp"
android:viewportWidth="100"
android:viewportHeight="100">

I obviously tried to play with vector's dimensions of course, with no success (indeed, it doesn't make much sense to me). Please feel free to ask me more code in case of need.

0

There are 0 answers