How to apply spacing between ShapeableImageView and its stroke

Question

I am using ShapeableImageView thus:

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/myImage"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/larry"
        app:strokeColor="@color/red"
        app:strokeWidth="9dp"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerCircle" />

and it's drawing quite alright. However, I want a little spacing between the view and the stroke. I have tried android:padding="10dp" but that doesn't seem to be working.

I have also tried removing the stroke properties and using this drawable resource to set the background of the view:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">

    <stroke
        android:width="9dp"
        android:color="#00FF00" />
</shape>

but the border didn't appear at all.

Please, do you know of any way I can achieve it?

Answer 1

I was looking for this myself, and just stumbled on contentPadding in the Android documentation.

In XML:

app:contentPadding="10dp"

In code:

.setContentPadding(left, top, right, bottom)

Answer 2

It is not elegant but you can try something like this:

<com.google.android.material.card.MaterialCardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:elevation="0dp"
    app:cardBackgroundColor="@color/red600"
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerCircle"
    >

    <com.google.android.material.imageview.ShapeableImageView
        app:srcCompat="@drawable/..."
        android:padding="9dp"
        app:strokeWidth="1dp"
        app:strokeColor="@color/white"
        app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.CornerCircle" />

</com.google.android.material.card.MaterialCardView>

with

<style name="ShapeAppearanceOverlay.App.CornerCircle" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>