ImageView inside CardView inside CardView

Question

Here's the code snippet :

<androidx.cardview.widget.CardView
    android:id="@+id/new_main_store_image_CV"
    android:layout_width="@dimen/_250sdp"
    android:layout_height="@dimen/_250sdp"
    app:cardElevation="@dimen/_5sdp"
    app:cardCornerRadius="@dimen/_15sdp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/new_main_store_label_TV"
    app:layout_constraintVertical_bias="0.15">

    <androidx.cardview.widget.CardView
        android:id="@+id/new_main_store_image_CVCV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="@dimen/_15sdp"
        app:cardElevation="@dimen/_5sdp"
        android:padding="@dimen/_5sdp">

        <ImageView
            android:id="@+id/new_main_store_image_IV"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/_5sdp"
            android:scaleType="fitXY"/>

    </androidx.cardview.widget.CardView>

</androidx.cardview.widget.CardView>

Here's the end result :

What I want is the appearance of the nested corner radius which would also affect the ImageView. I have provided cornerRadius properties to both card views but it's only visible for the parent card view and not for nested card view.

CardView inside CardView is a bad design choice. Read material design guidelines. What do you want to achieve by nesting cards? Also, remove padding if you want image to have corners of CardView. — Vedprakash Wagh, Sep 02 '19 at 06:16
I want corner rounded image inside corner rounded white border — Ssubrat Rrudra, Sep 02 '19 at 06:24
Using a second `CardView` for that is kinda overkill. Instead, use a `RoundedBitmapDrawable` for the image in the `ImageView`. — Mike M., Sep 02 '19 at 06:25
@Mike M Can you post this comment as an answer with the example of `RoundedBitmapDrawable`? — Ssubrat Rrudra, Sep 02 '19 at 06:34
I don't know that it justifies a whole answer. :-) There are examples on how to use it here: [How to use RoundedBitmapDrawable](https://stackoverflow.com/q/24878740). — Mike M., Sep 02 '19 at 06:40

score 1 · Answer 1 · answered Sep 02 '19 at 06:21

You must add this line to your CardViews

app:cardPreventCornerOverlap="false"

Your CardView code

<androidx.cardview.widget.CardView
    android:id="@+id/new_main_store_image_CVCV"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardPreventCornerOverlap="false"
    app:cardCornerRadius="@dimen/_15sdp"
    app:cardElevation="@dimen/_5sdp">

    <ImageView
        android:id="@+id/new_main_store_image_IV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/_5sdp"
        android:scaleType="fitXY"/>

</androidx.cardview.widget.CardView>

score 1 · Accepted Answer · answered Sep 02 '19 at 06:33

Instead of using card view follow this.

Add these lines in app build.gradle file.

implementation 'com.makeramen:roundedimageview:2.3.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

Then create your custom image view class.

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;

import androidx.annotation.NonNull;

import com.makeramen.roundedimageview.RoundedImageView;
import com.testapp.application.instance.GlideApp;

import java.io.File;

public class GlideRoundedImageView extends RoundedImageView {
public GlideRoundedImageView(Context context) {
    this(context, null);
}

public GlideRoundedImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public GlideRoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public void setImageUrl(String imageUrl) {
    if (imageUrl == null)
        return;
    GlideApp.with(getContext())
            .load(imageUrl)
//                .placeholder(R.drawable.profile_default)
            .into(this);
}

public void setImageUrl(String imageUrl, @NonNull Drawable drawable) {
    if (imageUrl == null)
        return;
    GlideApp.with(getContext())
            .load(imageUrl)
            .placeholder(drawable)
            .error(drawable)
            .fallback(drawable)
            .into(this);
}

public void setImageFile(File file) {
    GlideApp.with(getContext())
            .load(file)
//                .placeholder(R.drawable.profile_default)
            .into(this);
}
}

Then in your XML add this.

<com.testapp.GlideRoundedImageView
                        android:id="@+id/ivRounded"
                        android:layout_width="match_parent"
                        android:layout_height="70dp"
                        android:layout_gravity="end"
                        android:scaleType="fitXY"
                        android:src="@drawable/placeholder_image"
                        app:riv_corner_radius="@dimen/five_dp" />

Then in your activity or fragment add this.

        binding.ivRounded.setImageUrl("imageUrl", getResources().getDrawable(R.drawable.placeholder_image));

ImageView inside CardView inside CardView

2 Answers2