Vector drawable is pixelated when size changes to smaller

Question

I am using this image:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="32dp"
    android:height="39dp"
    android:viewportWidth="32"
    android:viewportHeight="39">
 <path
    android:pathData="M15.8575,6.5831L15.8575,1.0031C15.8575,0.1031 14.7775,-0.3369 14.1575,0.3031L6.5575,7.8831C6.1575,8.2831 6.1575,8.9031 6.5575,9.3031L14.1375,16.8831C14.7775,17.5031 15.8575,17.0631 15.8575,16.1631L15.8575,10.5831C23.3175,10.5831 29.2175,17.4231 27.5775,25.1631C26.6375,29.7031 22.9575,33.3631 18.4375,34.3031C11.2975,35.8031 4.9375,30.9031 3.9775,24.2831C3.8375,23.3231 2.9975,22.5831 2.0175,22.5831C0.8175,22.5831 -0.1425,23.6431 0.0175,24.8431C1.2575,33.6231 9.6175,40.1231 19.0775,38.2831C25.3175,37.0631 30.3375,32.0431 31.5575,25.8031C33.5375,15.5431 25.7375,6.5831 15.8575,6.5831Z"
    android:strokeWidth="1"
    android:fillColor="#fff"
    android:fillType="evenOdd"
    android:strokeColor="#00000000"/>
  <path
    android:pathData="M-34,-30h100v100h-100z"
    android:strokeWidth="1"
    android:fillType="evenOdd"
    android:strokeColor="#00000000"/>
</vector>

in this ImageView:

<ImageView
   android:id="@+id/icon"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/icon"
   android:scaleType="fitXY"/>

I am using focus navigation and thus I need to enlarge and reduce the size of a image. I tried these aproaches in onFocusChanged methods

override fun onFocusChanged(gainFocus: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
  if (gainFocus) {
    imageView.layoutParams.height = 60
    imageView.layoutParams.width = 60
  } else {
    imageView.layoutParams.height = 50
    imageView.layoutParams.width = 50
  }
}

and

override fun onFocusChanged(gainFocus: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
 if (gainFocus) {
   imageView.drawable.setBounds(0,0,60,60)
 } else {
   imageView.drawable.setBounds(0,0,50,50)
 }
}

None of these two methods are working. Icon is pixelated when reduced to smaller state. Why is this happening and how can i fix it?

Note that:

minSdkVersion 26
targetSdkVersion 28

EDIT: I just found out that the actual behavior is like this:

app is first launched - icon is in reduced state - not pixelated
icon focused - enlarged state - not pixelated
icon not focused - reduced state - pixelated
icon focused - enlarged state - not pixelated ...

EDIT2: According to comments, tried mutate() method in these combinations:

    if (gainFocus) {
        imageView.layoutParams.height = 60
        imageView.layoutParams.width = 60
        imageView.drawable.mutate().setBounds(0,0,60,60)
    } else {
        imageView.layoutParams.height = 50
        imageView.layoutParams.width = 50
        imageView.drawable.mutate().setBounds(0,0,50,50)
    }

then the same, but without layoutParams and one more:

override fun onFocusChanged(gainFocus: Boolean, direction: Int, previouslyFocusedRect: Rect?) {
 if (gainFocus) {
   imageView.drawable.setBounds(0,0,60,60)
 } else {
   imageView.drawable.setBounds(0,0,50,50)
 }
 imageView.invalidateDrawable(imageView.drawable.mutate())
}

Nothing helped. Also tried to do it via animation, but the result is the same. I am starting to run out of ideas.

https://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio does this help? — Matthew E. Miller, Aug 20 '19 at 12:49
I believe this is the same issue as https://stackoverflow.com/a/56152587/8298909 — Ben P., Aug 20 '19 at 20:00
@BenP. It looked promising, but it didn't help. Tried couple combinations with mutate(). I am using only one ImageView, maybe that prevented it from working. Updated question. — Matej Košút, Aug 21 '19 at 07:58

score 0 · Accepted Answer · answered Aug 21 '19 at 14:13

0

Solved it by using pngs instead. Vectors are not usable in this scope.

answered Aug 21 '19 at 14:13

Matej Košút

590
2
10
27

Vector drawable is pixelated when size changes to smaller

1 Answers1