ImageButton elevation issue

Question

Good afternoon, I am trying to create en ImageButton with a shadow.

To do that :

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:padding="5sp">

    <ImageButton
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/circle_shape_little"
        android:src="@drawable/ic_keyboard_arrow_right_black_24dp"
        android:elevation="3sp"/>
</LinearLayout>

But here is the result :

As you can see, the borders are "cut", and I do not know why.

Does anyone can help me ? Thank you.

Answer 1

Add a layout_margin to your ImageButton. The elevation shadow gets clipped to the margins of the View (which defaults to zero):

<ImageButton
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:layout_margin="5dp"
    android:background="@drawable/circle_shape_little"
    android:src="@drawable/ic_keyboard_arrow_right_black_24dp"
    android:elevation="3dp"/>

Alternatively, you could set the padding of the view and set clipToPadding="false", but this could lead to unexpected results depending on your layout.

Lastly, you should be using dp for everything but textSize, in which case you would use sp.