Imageview not taking corner radius of cardview

Question

Hi i'm developing an app where i'm using imageview inside cardview but my problem is that imageview somehow is not taking the corner radius applied to cardview Please see the image below I tried doing different things but dont understand where the problem is please if anyone can guide me my xml

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:layout_margin="4dp"
    android:id="@+id/cardview2"
    app:cardCornerRadius="25dp"
    card_view:cardPreventCornerOverlap="false"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        >

        <ImageView
            android:layout_width="88dp"
            android:layout_height="88dp"
            android:id="@+id/imageView"
            android:scaleX="1.2"
            android:scaleType="fitXY"
            android:scaleY="1.2"
            android:src="@drawable/club1"
            android:background="@drawable/corner_radius"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="40dp"
            android:id="@+id/nameTextView"
            android:layout_marginLeft="4dp"
            android:layout_marginStart="4dp"
            android:layout_marginTop="16dp"
            android:maxLines="2"
            android:text="Item"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="4dp"
            android:id="@+id/ratingTextView"
            android:layout_marginStart="4dp"
            android:drawableEnd="@color/White"
            android:drawableRight="@color/White"
            android:drawablePadding="2dp"
            android:text="4,5"
            android:gravity="center"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textSize="12sp"/>



    </LinearLayout>

</android.support.v7.widget.CardView>

yes @Meline i tried setting it as background of cardview as well — , Apr 30 '18 at 06:48
Use custom background or use margins. Setting padding to the parent view may helps — Jyoti JK, Apr 30 '18 at 06:51
Use `app:contentPadding="10dp"` for card view. And let `ViewGroup's` as `wrap_content`. — ADM, Apr 30 '18 at 06:53
try this: https://stackoverflow.com/questions/27394300/make-imageview-fit-width-of-cardview — Arvind, Apr 30 '18 at 06:58
remove `android:scaleX="1.2"` and `android:scaleY="1.2"` from your imageview — Rajasekaran M, Apr 30 '18 at 06:59
@Smith use drawable with stroke , corner as what you want . And apply it to imageview. — Jyoti JK, Apr 30 '18 at 07:05
@RajasekaranM i tried center crop as well but corner radius is not getting applied to image — , Apr 30 '18 at 07:05
use `match_parent` for width instead of `88dp` at image view — Rajasekaran M, Apr 30 '18 at 07:06
because your image view width 12 dp lesser than your parent layout ,that's why radius not applied :-) — Rajasekaran M, Apr 30 '18 at 07:07

score 3 · Answer 1 · answered Apr 30 '18 at 07:38

See here is the Image. Remeber Don't make CardView as Main Layout.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="1dp"
    android:orientation="vertical">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    app:cardUseCompatPadding="true"
    android:elevation="0dp"
    app:cardCornerRadius="5dp"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">


        <ImageView
            android:id="@+id/iv_suvichar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/placeholder" />

        <TextView
            android:id="@+id/tv_suvichar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="Title"
            android:padding="5dp"
            android:textColor="@color/black"
            android:textSize="@dimen/normal_text_size" />

    </LinearLayout>

</android.support.v7.widget.CardView>

Hi thanks for you response but i ende up using custom imageview as @Nilesh suggested — , Apr 30 '18 at 07:52

score 2 · Answer 2 · edited Aug 08 '19 at 12:09

2

Try Replace your Linear Layout with Relative Layout. After that set gravity of your last textview (center_horizontal).

edited Aug 08 '19 at 12:09

4b0

21,981
30
95
142

answered Aug 08 '19 at 12:07

Satyam

41
1
5

score 1 · Answer 3 · answered Apr 30 '18 at 07:15

You can use the RoundedImageView :

Put this in the build.gradle

compile 'com.makeramen:roundedimageview:2.3.0'

And to use it:

<com.makeramen.roundedimageview.RoundedImageView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="@android:color/transparent"
    android:scaleType="centerCrop"
    app:riv_corner_radius="5dp"/>

score 0 · Answer 4 · answered Apr 30 '18 at 07:53

Just use this code in xml and see result after RUN the code:

<android.support.v7.widget.CardView
    android:layout_marginTop="100dp"
    android:layout_gravity="center_horizontal"
    app:cardCornerRadius="20dp"
    android:id="@+id/cv"
    android:clipChildren="true"
    android:layout_width="100dp"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <ImageView
        android:scaleType="centerCrop"
        android:src="@drawable/recipe"
        android:layout_width="match_parent"
        android:layout_height="100dp" />

        <TextView
            android:layout_margin="8dp"
            android:text="ITEM"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:layout_marginLeft="8dp"
            android:layout_marginBottom="8dp"
            android:text="34"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>
</android.support.v7.widget.CardView>

hi Deven can you help me with this https://stackoverflow.com/questions/49939514/trying-to-implement-viewpager-with-cardstack-swipe-animation — , Apr 30 '18 at 07:59

score -1 · Answer 5 · answered Apr 30 '18 at 07:08

-1

Try this way :

  <?xml version="1.0" encoding="utf-8"?>
  <android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:cardview="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:padding="@dimen/_5sdp"
  android:layout_marginTop="@dimen/_5sdp"
  android:layout_marginLeft="@dimen/_5sdp"
  android:layout_marginRight="@dimen/_5sdp"
  android:layout_marginBottom="5dp"
  cardview:cardCornerRadius="@dimen/_3sdp"
  cardview:cardElevation="@dimen/_3sdp"
  cardview:cardUseCompatPadding="true">

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

    <ImageView
        android:id="@+id/thumbnail"
        android:layout_width="match_parent"
        android:layout_height="@dimen/_180sdp"
        android:layout_alignParentTop="true"
        android:scaleType="centerCrop"
        android:src="@drawable/placeholder"/>



    <RelativeLayout
        android:padding="@dimen/_5sdp"
        android:id="@+id/rlMiddle"
        android:layout_below="@+id/thumbnail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


        <TextView
            android:id="@+id/txtPrescription"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_10sdp"
            android:maxLines="3"
            android:paddingTop="8dp"
            android:textAppearance="@style/TextAppearance.AppCompat.Headline"
            android:textSize="@dimen/_16sdp"
            android:text="Demo"
            android:textStyle="bold"
           />
      </RelativeLayout>
    </RelativeLayout>
 </android.support.v7.widget.CardView>

answered Apr 30 '18 at 07:08

jeet parmar

868
8
19

Hi @jeet parmar tried your answer but still not getting corner radius for imageview – Apr 30 '18 at 07:19
can you please send your new xml ? – jeet parmar Apr 30 '18 at 07:23
– jeet parmar Apr 30 '18 at 07:33
can you please RecyclerView layout if any problem in that ?. – jeet parmar Apr 30 '18 at 07:34
Hi @jeet parmar can you please help me with this https://stackoverflow.com/questions/49939514/trying-to-implement-viewpager-with-cardstack-swipe-animation – Apr 30 '18 at 07:58
it is gradle file implementation 'com.intuit.sdp:sdp-android:1.0.5' – jeet parmar Apr 30 '18 at 08:29
jeet parmar can you please help me with this https://stackoverflow.com/questions/49939514/trying-to-implement-viewpager-with-cardstack-swipe-animation – Apr 30 '18 at 08:33
jeet parmar can you please help me with this https://stackoverflow.com/questions/49939514/trying-to-implement-viewpager-with-cardstack-swipe-animation – Apr 30 '18 at 08:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/170071/discussion-between-jeet-parmar-and-smith). – jeet parmar Apr 30 '18 at 09:11

Imageview not taking corner radius of cardview

5 Answers5