ImageButton可绘制的背景未居中并裁剪

Question

I have this ImageButton

    <ImageButton
        android:id="@+id/imageButton"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@drawable/crimson_round_button"
        android:src="@drawable/play_white"/>

where crimson_round_button.xml drawable is

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true">
            <shape android:shape="oval">
                <solid android:color="@color/hibiscus"/>
                <stroke
                    android:width="4dp"
                    android:color="@color/crimson"/>
            </shape>
        </item>

        <item>
            <shape android:shape="oval">
                <solid android:color="@color/crimson"/>
                <stroke
                    android:width="4dp"
                    android:color="@color/crimson"/>
            </shape>
        </item>
    </selector>

and the play_white.png drawable represents only the white play icon in the button.

My final result is this one

A you can see the inner icon is not centered and you can notice that the right and bottom borders are a little bit cropped.

The reason is that the applied background is not fitting the ImageButton, as you can see in this image where I selected the ImageButton in Android Studio preview

Any idea why this is happening?

---

EDIT:

Ok, let's try to forget about the white arrow. This is my new code for the Image button (and its container)

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:background="@color/white">

        <ImageButton
            android:id="@+id/save_record_dialog_play_imageButton"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:background="@drawable/crimson_round_button"/>
    </FrameLayout>

as you can see the circle set as ImageButton background is no more a circle, it's cropped on the left side and at the bottom

and setting a 4dp elevation to the ImageButton the cropped border is much more visible

Answer 1

I think the problem is that the triangle-shaped play button just doesn't look centered.

I tried your layout with my own triangle-shaped button:

It looks like it's too far to the right, but if we picture the bounds of the triangle button (sorry about my paint skills) like so:

the icon itself does seem to be centered.

One solution is to adjust the left padding so it looks better:

<ImageButton
    android:id="@+id/imageButton"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@drawable/crimson_round_button"
    android:src="@drawable/play_white"
    android:paddingLeft="3dp"/>

Which gives this:

With regard to the second part of your question, have you observed the cropping on the design tab? In an emulator? On a device? For me, I see this issue on the layout design tab:

but not on a device (this is from a screenshot):