0

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?

WebViewer
  • 761
  • 7
  • 21

1 Answers1

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)

RadekJ
  • 2,835
  • 1
  • 19
  • 25
  • 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. – WebViewer Dec 06 '22 at 07:43
  • 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. – RadekJ Dec 06 '22 at 08:23
  • 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: https://stackoverflow.com/q/51963077/2597758 – WebViewer Dec 06 '22 at 12:57