Skip to content

Instantly share code, notes, and snippets.

@quanmltya
Forked from gabrielemariotti/README.MD
Created October 28, 2020 07:47
Show Gist options
  • Save quanmltya/b09755def0d29d408edf4fa36376174f to your computer and use it in GitHub Desktop.
Save quanmltya/b09755def0d29d408edf4fa36376174f to your computer and use it in GitHub Desktop.
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

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