ShapeableImageView doesnt round corners

Question

ShapeableImageView takes a ShapeAppearanceOverlay item in style to create desired shapes and sizes. The shape families are cut and rounded, radius can be used as a number or in percentages. Here is my ShapeAppearanceOverlay theme for circularImageView:

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

Here Is the layout where I am using it:

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/grey"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="240dp" />
    <!--Top Header Layout-->
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/topbar"
        android:scrollbars="none">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <!--Top Profile Section -->
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/user_display_image"
                    style="@style/ShapeAppearanceOverlay.App.circleImageView"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_user" />
            </LinearLayout>
            <androidx.fragment.app.FragmentContainerView
            android:id="@+id/fragment_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="@dimen/normal_bottom_margin" />
        </LinearLayout>
    </ScrollView>
</RelativeLayout>

Here is a screenshot of the issue:

Screenshot from IDE:

screenshot from Android Preview layout? – i30mb1 Mar 14 '21 at 13:16 — i30mb1, Mar 14 '21 at 13:16
@i30mb1 check that again. – AmanSharma Mar 14 '21 at 14:00 — AmanSharma, Mar 14 '21 at 14:00

score 11 · Accepted Answer · answered Mar 14 '21 at 19:52

11

Use app:shapeAppearanceOverlay instead of style

<com.google.android.material.imageview.ShapeableImageView
    app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.circleImageView"
    .../>

answered Mar 14 '21 at 19:52

Gabriele Mariotti

320,139
94
887
841

1

This works. But how do I get rid of the black areas left behind where corners were cut off? Setting android:background to transparent did not work. – user3951320 Jul 07 '21 at 08:52
1

Update: The black corners only show in the layout editor at design time. ( https://stackoverflow.com/questions/67994495/black-edges-on-shapeable-imageview-after-corner-round ) – user3951320 Jul 07 '21 at 09:40

score 5 · Answer 2 · answered Mar 15 '21 at 08:38

Or if you want to use it through style attribute :

    <style name="Style.App.circleImageView" parent="">
        <item name="shapeAppearance">@style/ShapeAppearanceOverlay.App.circleImageView</item>
    </style>

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

...
 <com.google.android.material.imageview.ShapeableImageView
                    android:id="@+id/user_display_image"
                    style="@style/Style.App.circleImageView"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:src="@drawable/ic_user" />
...

ShapeableImageView doesnt round corners

2 Answers2