Skip to content

Instantly share code, notes, and snippets.

@gabrielemariotti

gabrielemariotti/README.MD

Last active September 24, 2024 09:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gabrielemariotti/446c63ea2aed81aafc0bdec1488e27c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gabrielemariotti/446c63ea2aed81aafc0bdec1488e27c9 to your computer and use it in GitHub Desktop.
Download ZIP
How to use the ShapeableImageView.
Raw
README.MD

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

@paulkugaev

paulkugaev commented Aug 21, 2020

Copy link
Copy Markdown

and how do I set iamge resource programmatically?

imageView.setDrawableResource(R.drawable.your_image)

@mym0404

mym0404 commented Aug 23, 2020

Copy link
Copy Markdown

Good 👍

@HxBreak

HxBreak commented Aug 27, 2020

Copy link
Copy Markdown

@ernestkoko

ernestkoko commented Aug 30, 2020

Copy link
Copy Markdown

Very Nice. It helped me

@iamarjun

iamarjun commented Sep 8, 2020

Copy link
Copy Markdown

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

@Lakshay1729

Lakshay1729 commented Nov 15, 2020

Copy link
Copy Markdown

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

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

@DaChelimo

DaChelimo commented Jan 6, 2021

Copy link
Copy Markdown

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

IevgenOsetrov commented Mar 4, 2021

Copy link
Copy Markdown

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

@paulkugaev

paulkugaev commented Jun 30, 2021

Copy link
Copy Markdown

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

paulkugaev commented Jun 30, 2021

Copy link
Copy Markdown

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

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

@uc-sja

uc-sja commented Jul 23, 2021

Copy link
Copy Markdown

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

@paulkugaev

paulkugaev commented Jul 23, 2021

Copy link
Copy Markdown

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

uc-sja commented Jul 23, 2021

Copy link
Copy Markdown

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

paulkugaev commented Jul 23, 2021

Copy link
Copy Markdown

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

uc-sja commented Jul 23, 2021

Copy link
Copy Markdown

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

paulkugaev commented Jul 23, 2021

Copy link
Copy Markdown

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

uc-sja commented Jul 24, 2021

Copy link
Copy Markdown

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

paulkugaev commented Jul 24, 2021

Copy link
Copy Markdown

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

uc-sja commented Jul 24, 2021

Copy link
Copy Markdown

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

Supkym commented Jul 24, 2021

Copy link
Copy Markdown

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

uc-sja commented Jul 25, 2021

Copy link
Copy Markdown

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

Vivek995378 commented Jul 26, 2021

Copy link
Copy Markdown

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

codefury commented Aug 12, 2021

Copy link
Copy Markdown

+1 for the black overlay issue.

@jariassh

jariassh commented Nov 15, 2021

Copy link
Copy Markdown

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

@tiennv157

tiennv157 commented Dec 5, 2021

Copy link
Copy Markdown

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

@Heipi

Heipi commented Jan 25, 2022

Copy link
Copy Markdown

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

@mrzbn

mrzbn commented Jun 26, 2022

Copy link
Copy Markdown

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

@alansatsha

alansatsha commented Jul 14, 2022

Copy link
Copy Markdown

How can i set an image from the internet?

@shalva97

shalva97 commented Oct 19, 2022

Copy link
Copy Markdown

How can i set an image from the internet?

Use Glide, it also allows handling corners

@GOmoraes

GOmoraes commented Mar 24, 2023 •
edited
Loading

Copy link
Copy Markdown

Got the same problem, removing android:hardwareAccelerated="false" from manifest solves the problem

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