ShapeableImageView

action_hero.jpeg

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/txvCircularShape"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#eee"
            android:gravity="center"
            android:text="Circular ImageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCircular"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toStartOf="@+id/imvCircularWithStroke"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txvCircularShape"
            app:shapeAppearanceOverlay="@style/Circular"/>

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCircularWithStroke"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:padding="5dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imvCircular"
            app:layout_constraintTop_toBottomOf="@id/txvCircularShape"
            app:shapeAppearanceOverlay="@style/Circular"
            app:strokeColor="#00BCD4"
            app:strokeWidth="5dp" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/textCornerRadiusShare"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#eee"
            android:gravity="center"
            android:text="Corner Radius ImageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imvCircularWithStroke" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerStroke"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textCornerRadiusShare"
            app:shapeAppearanceOverlay="@style/RoundedSquare" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerRadiusWithStroke"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:padding="5dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
            app:layout_constraintTop_toBottomOf="@id/textCornerRadiusShare"

            app:shapeAppearanceOverlay="@style/RoundedSquare"
            app:strokeColor="#00BCD4"
            app:strokeWidth="5dp" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/txvCornerCut"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#eee"
            android:gravity="center"
            android:text="Corner Cut ImageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imvCornerRadiusWithStroke" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerCutOne"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txvCornerCut"
            app:shapeAppearanceOverlay="@style/CornerCut" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerCutTwo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:padding="7dp"
            android:src="@drawable/action_hero"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
            app:layout_constraintTop_toBottomOf="@id/txvCornerCut"
            app:shapeAppearanceOverlay="@style/DiamondCut" />

        <androidx.appcompat.widget.AppCompatTextView
            android:id="@+id/txvCornerShape"
            style="@style/TextAppearance.AppCompat.Title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="7dp"
            android:background="#eee"
            android:gravity="center"
            android:text="Specified Corner Radius ImageView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imvCornerCutTwo" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerShapeOne"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            android:src="@drawable/action_hero"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/imvCornerRadiusWithStroke"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/txvCornerShape"
            app:shapeAppearanceOverlay="@style/SpecificCornerCut" />

        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/imvCornerShapeTwo"
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="16dp"
            android:padding="7dp"
            android:src="@drawable/action_hero"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.5"
            app:layout_constraintStart_toEndOf="@+id/imvCornerStroke"
            app:layout_constraintTop_toBottomOf="@id/txvCornerShape"
            app:shapeAppearanceOverlay="@style/SpecificCornerRounded" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

custom_styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Circular">
        <item name="cornerSize">50%</item>
    </style>

    <style name="RoundedSquare">
        <item name="cornerSize">10%</item>
    </style>

    <style name="CornerCut">
        <item name="cornerSize">15dp</item>
        <item name="cornerFamily">cut</item>
    </style>

    <style name="DiamondCut">
        <item name="cornerSize">75dp</item>
        <item name="cornerFamily">cut</item>
    </style>

    <style name="SpecificCornerCut">
        <item name="cornerSizeTopRight">75dp</item>
        <item name="cornerFamilyTopRight">cut</item>
        <item name="cornerSizeBottomLeft">75dp</item>
        <item name="cornerFamilyBottomLeft">cut</item>
    </style>

    <style name="SpecificCornerRounded">
        <item name="cornerSizeTopRight">75dp</item>
        <item name="cornerFamilyTopRight">rounded</item>
        <item name="cornerSizeBottomLeft">75dp</item>
        <item name="cornerFamilyBottomLeft">rounded</item>
    </style>

</resources>

how to remove the black background from this after applying shappeable

Yes, I have the same problem. It is not just a preview issue I am trying to save the image to external storage and the black background is shown.

Very good article. Thank you so much for sharing this.

Good article.