androidandroid-layoutandroid-support-libraryandroid-drawableandroid-api-levels

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


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:

enter image description here

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

enter image description here

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?


Solution

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