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?

Answer 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)