ImageButton drawable background not centered and cropped

[Elia Bigogno]

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 looks not aligned with the center of the circle 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



I also made a try removing the image from the button, but as you can see the result is always the same, 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



Any idea why this is happening?

TIA

[Elia Bigogno]

OMG! It's just a problem of the preview in Android Studio and in the emulator (if not really zoomed)!