ImageView expanding from corners with rounded cardview

Question

I am trying to display an imageview inside an cardview with rounded corners by using Glide but the image is expanding the corners of cardview to a square shape while the same code is working fine for cardview v7 support library but not in androidx .I know that this question has already many answers but none of them is working for me.

I am using a recycler view to display all the items coming from server and Here's the hosting fragment code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dashboard_background"
    android:id="@+id/mparent"
    android:orientation="vertical">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/category_choose"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="190dp"
            android:layout_height="48dp"
            android:background="@drawable/search_backround"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            >

        <ImageView
            android:id="@+id/imageView16"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="9dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/buy_medicine" />

        <ImageView
            android:id="@+id/category_spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            app:srcCompat="@drawable/bg_spinner"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/category_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="2dp"
            android:layout_marginEnd="2dp"
            android:text="@string/category"
            android:maxLines="1"
            android:textColor="@color/Nero"
            android:fontFamily="@font/montserrat_black"
            android:textSize="@dimen/_text_size_12sp"
            android:ellipsize="end"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/category_spinner"
            app:layout_constraintStart_toEndOf="@+id/imageView16"
            app:layout_constraintTop_toTopOf="parent" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.facebook.shimmer.ShimmerFrameLayout
        android:id="@+id/shimmer_Effect_category"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:visibility="visible"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/category_choose">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <LinearLayout
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <include
                    layout="@layout/category_list_layout"/>
                <include
                    layout="@layout/category_list_layout"/>
                <include
                    layout="@layout/category_list_layout"/>
            </LinearLayout>

            <LinearLayout
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal">
                <include
                    layout="@layout/category_list_layout"/>
                <include
                    layout="@layout/category_list_layout"/>
                <include
                    layout="@layout/category_list_layout"/>
            </LinearLayout>



        </LinearLayout>


    </com.facebook.shimmer.ShimmerFrameLayout>


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_category_lists"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:visibility="visible"

        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/shimmer_Effect_category"
        app:layout_constraintVertical_bias="0.0" />


</androidx.constraintlayout.widget.ConstraintLayout>

and this is the code for CardView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_margin="@dimen/_5sdp"
    android:id="@+id/category_list"
    >

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:scaleType="fitXY"
        app:cardCornerRadius="@dimen/_15sdp"
        app:cardPreventCornerOverlap="true">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/categoryImage"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:gravity="center"
                android:scaleType="fitXY"
                />

            <TextView
                android:id="@+id/categoryName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@color/white"
                android:gravity="center"
                android:text="Foods"
                android:textColor="@color/black"
                android:textSize="@dimen/_text_size_12sp" />
        </RelativeLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

So what i am doing wrong here? Please suggest!

You can try the new ShapeableImageView in the MaterialComponents library.Check this answer. — Gabriele Mariotti
@GabrieleMariotti Sure Gabriele i will try this too, thanks for this info. — Cosmic Dev

Bryan J. Diaz Bryan J. Diaz · Accepted Answer · 2020-01-14T18:10:16

UPDATED

Also in modern versions of Andorid you can set a ImageView inside of a CardView, then set the elevation of the CardView to 0dp and set the cardCornerRadius. Here an example:

<androidx.cardview.widget.CardView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    app:cardCornerRadius="8dp"
                    app:cardElevation="0dp">

                    <ImageView
                        android:id="@+id/iamge"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:adjustViewBounds="true"
                        android:maxWidth="85dp"
                        android:maxHeight="85dp"/>

                </androidx.cardview.widget.CardView>

ANOTHER WAY

Also to do it simple.. use a library for ImageView that display rounded corners

I'm using this one below:

 implementation 'com.joooonho:selectableroundedimageview:1.0.1'

Here's the link to know how to use it:

https://github.com/pungrue26/SelectableRoundedImageView

If you still want to put it on a CardView so just give the same width and height and the same CornerRadius for both.

Hope it helps.

ImageView expanding from corners with rounded cardview

1 Answers