Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
How to use the ShapeableImageView.

The Material Components Library introduced with the 1.2.0-alpha03 the new ShapeableImageView.

In your layout you can use:

 <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image_view"
      app:srcCompat="@drawable/..." />

Then in your code apply the ShapeAppearanceModel to define your custom corners:

  @ExperimentalImageView
  private void setup() {

    ShapeableImageView imageView = findViewById(R.id.image_view);

    float radius = getResources().getDimension(R.dimen.default_corner_radius);
    imageView.setShapeAppearanceModel(imageView.getShapeAppearanceModel()
        .toBuilder()
        .setTopRightCorner(CornerFamily.ROUNDED,radius)
        .build());

  }

image

Also you can use the shapeAppearanceOverlay attribute in your layout to define the shape with a style.
For example to achieve a circular image:

 <com.google.android.material.imageview.ShapeableImageView
      android:id="@+id/image_view"
      app:shapeAppearanceOverlay="@style/circleImageView"
      app:srcCompat="@drawable/..." />

with:

  <style name="circleImageView" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

image

@MrShiden
Copy link

MrShiden commented Jul 2, 2020

Thanks!

@simple-harmonics-git
Copy link

simple-harmonics-git commented Jul 4, 2020

Hello, can I add a white stroke to the circular image?

@PXNX
Copy link

PXNX commented Jul 28, 2020

and how do I set iamge resource programmatically?

@paulkugaev
Copy link

paulkugaev commented Aug 21, 2020

and how do I set iamge resource programmatically?

imageView.setDrawableResource(R.drawable.your_image)

@mym0404
Copy link

mym0404 commented Aug 23, 2020

Good 👍

@HxBreak
Copy link

HxBreak commented Aug 27, 2020

@ernestkoko
Copy link

ernestkoko commented Aug 30, 2020

Very Nice. It helped me

@iamarjun
Copy link

iamarjun commented Sep 8, 2020

how can we shape it to look like a hexagon?
image
like these

@Lakshay1729
Copy link

Lakshay1729 commented Nov 15, 2020

how can we shape it to look like a hexagon?
image
like these

add cornerFamily="cut" for hexagon like appearance Type A

@Andre-max
Copy link

Andre-max commented Jan 6, 2021

Hello, can I add a white stroke to the circular image?

Use app:strokeWidth for the stroke width and app:strokeColor for the color. They are available in the newer material versions.

@IevgenOsetrov
Copy link

IevgenOsetrov commented Mar 4, 2021

Do we need parent in style? Why it is empty?

@paulkugaev
Copy link

paulkugaev commented Jun 30, 2021

how to set stroke in themes? I tried to set in themes it doesn't work but in the layout xml it can

Can't help you without seeing your style and layout

@paulkugaev
Copy link

paulkugaev commented Jun 30, 2021

Do we need parent in style? Why it is empty?

Because it's basically it's a so called ThemeOverlay

@uc-sja
Copy link

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

@paulkugaev
Copy link

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

@uc-sja
Copy link

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

Screenshot_20210724-002320_Daily Motivation

The black background at the corners started showing when i set the radius in shapeableimageview

@paulkugaev
Copy link

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

Screenshot_20210724-002320_Daily Motivation

The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

@uc-sja
Copy link

uc-sja commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

Screenshot_20210724-002320_Daily Motivation
The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

Sure: Following is the layout of my recyclerview item :

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/category_container"
    android:layout_width="match_parent"
    android:background="@color/cardview_dark_background"
    android:layout_height="@dimen/_130sdp">
      <com.google.android.material.imageview.ShapeableImageView
          android:id="@+id/bg_image"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          app:srcCompat="@drawable/motivation"
          android:scaleType="fitXY"
          />
      <TextView
        android:id="@+id/category_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next"
        android:layout_gravity="center_horizontal|bottom"
        android:textSize="@dimen/_15ssp"
        android:layout_marginBottom="@dimen/_15sdp"
        android:textColor="@color/whiteshadow"/>
</FrameLayout>

And in the viewholder i wrote the following piece of code. for radius to take effect:

    val spacing = itemView.resources.getDimension(R.dimen._20sdp)
    bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

@paulkugaev
Copy link

paulkugaev commented Jul 23, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?

Could you show a screenshot? Maybe I can help you

The black background at the corners started showing when i set the radius in shapeableimageview

Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?

Sure: Following is the layout of my recyclerview item :


<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>

And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

@uc-sja
Copy link

uc-sja commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :

<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>

And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

@paulkugaev
Copy link

paulkugaev commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

@uc-sja
Copy link

uc-sja commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

@Supkym
Copy link

Supkym commented Jul 24, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated="false" from manifest.xml and it should works

@uc-sja
Copy link

uc-sja commented Jul 25, 2021

It leaves out a dark overlay on the cornered borders..How to remove it?
Could you show a screenshot? Maybe I can help you
The black background at the corners started showing when i set the radius in shapeableimageview
Thats weird. I observe such behavior only on the layout preview. Could you show your layout xml as well as styles xml?
Sure: Following is the layout of my recyclerview item :
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/bg_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srcCompat="@drawable/motivation"
android:scaleType="fitXY"
/>
And in the viewholder i wrote the following piece of code. for radius to take effect:

val spacing = itemView.resources.getDimension(R.dimen._20sdp)
bg_image.shapeAppearanceModel = bg_image.shapeAppearanceModel.toBuilder().setAllCornerSizes(spacing).build()

Remove background attribute from category_container and black corners will be gone. Basically your image view is placed inside a frame layout which has it's own background. Frame layout is of a square shape. You make your image view corners rounded. It's pretty obvious that you'll see your frame layout's background

I removed the background attribute but still Iam getting the same result. Also changed the parent layout from framelayout to relative layout but no success. Iam sharing you my Themes.xml file if it could be helpul

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ViewModel" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

    <style name="splashTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/splash_background</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>
</resources>

Everything seems fine. Could you share a zip with the project?

Okay I have committed the project at https://github.com/uc-sja/sampleapp
You can find the zip there

I got same problem ,remove android:hardwareAccelerated="false" from manifest.xml and it should works

Okays after digging around for several days, this seemed to work. Seems much like a hack, but again I guess android dev is full of hacks and workarounds. Could you explain why is this happening? because just to prevent the issue I have to turn on hardware acceleration(default behaviour) which comes at a cost of my app consuming more ram and battery..can we do something better?

@Vivek995378
Copy link

Vivek995378 commented Jul 26, 2021

I am still facing the same problem as faced by @uc-sja
I also remove hardwaeAccelerated attribute from manifest but i still facing the same error

@codefury
Copy link

codefury commented Aug 12, 2021

+1 for the black overlay issue.

@jariassh
Copy link

jariassh commented Nov 15, 2021

+1 for the black overlay issue. I couldn't remove the black background

@tiennv157
Copy link

tiennv157 commented Dec 5, 2021

Has anyone solved this error yet? I also got the same error when trying to take a screenshot

@Heipi
Copy link

Heipi commented Jan 25, 2022

+1 for the black overlay issue. I couldn't remove the black background

@mrzbn
Copy link

mrzbn commented Jun 26, 2022

i found a not very good workaround and that is to set alpha of ImageView to 0.99

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment