CODEWITHSUNDEEP
androidandroid-layout
Ssubrat Rrudra
Ssubrat Rrudra

Reputation: 960

ImageView inside CardView inside CardView

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 :

enter image description here

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.

Upvotes: 1

Views: 693

Answers (2)

Koushik Mondal
Koushik Mondal

Reputation: 875

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));

Upvotes: 1

Radesh
Radesh

Reputation: 13565

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>

Upvotes: 1

Related Questions