How to fix distorted R.drawable icons when updating app from API 8 to API 26+

Question

I am trying to revive and revise a 10+ years old app (Android 2.2, 4.1) that was displaying and functioning fine back then but now, when installed on an Android 8.1 device, it exhibits the following odd visual issue:

On API 8/16 it displays R.drawable icons/buttons as intended:

But on API 26/29 it displays the same this way (unintended):

The main.xml section responsible for displaying this is:

        <!-- horizontal row of 3 buttons (prev, pause/play, next) -->
<LinearLayout
    android:id="@+id/prev_pauseplay_next_buttons"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal" >

    <com.susu.mylib.core.MyButton
        android:id="@+id/btn_prev"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:drawable/ic_media_previous"
        />
    
    <LinearLayout
        android:id="@+id/ll_pause_or_play_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical" >
        <com.susu.mylib.core.MyButton
            android:id="@+id/btn_pause"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/ic_media_pause"
            android:layout_marginLeft="36dp"
            android:layout_marginRight="36dp"
            />
        <com.susu.mylib.core.MyButton
            android:id="@+id/btn_play"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/ic_media_play"
            android:layout_marginLeft="36dp"
            android:layout_marginRight="36dp"
            android:visibility="gone" />
    </LinearLayout> <!-- end ll_pause_or_play_button -->
    
        <com.susu.mylib.core.MyButton
            android:id="@+id/btn_next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:drawable/ic_media_next"
            />
</LinearLayout> <!-- end prev_pauseplay_next_buttons -->

Any idea why is this happening and how to fix this?

Also, which Android SDK library or jar contains these images?

use vector images

Heshan Sandeepa
– Heshan Sandeepa

2022-12-05 10:01:16 +00:00
Commented Dec 5, 2022 at 10:01 — Heshan Sandeepa
– Heshan Sandeepa, Commented Dec 5, 2022 at 10:01

RadekJ · Accepted Answer · 2022-12-06 08:22:45Z

1

use

<ImageView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:scaleType="centerCrop"
/>

instead of background

or wrap your old drawables into:

res/drawable/wrapped_ic_media_pause.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@android:drawable/ic_media_pause"
        android:gravity="center"
        height="24dp"
        width="24dp"
        />
</layer-list>

and then in your xml use @drawable/wrapped_ic_media_pause instead of @android:drawable/ic_media_pause

specify height and width if needed (otherwise icon might be tiny)

edited Dec 6, 2022 at 8:22

answered Dec 6, 2022 at 5:29

RadekJ

3,0731 gold badge21 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

WebViewer Over a year ago

Thank you for the detailed solutions. I see no reference to the actual R.drawable "stock items" (e.g ic_media_pause, ic_media_play). Where do these fit in your solutions? If you could use my posted XML to illustrate how your solutions fits into it (especially the first one), this would be super.

RadekJ Over a year ago

I have updated my answer so it showcases how you can use @android:drawable/ic_media_pause as background and have it centered instead of having it stretched. I have also updated the width and height to be 24dp as it is very likely to be the value you want.

WebViewer Over a year ago

Thank you @RadekJ. This works now like a charm. Your guess regarding 24p is correct. BTW, I think that this also answers a 4+ year old question that went unanswed: stackoverflow.com/q/51963077/2597758

Collectives™ on Stack Overflow

How to fix distorted R.drawable icons when updating app from API 8 to API 26+

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related