CODEWITHSUNDEEP
androidandroid-recyclerviewrounded-corners
MattCodes
MattCodes

Reputation: 519

Can't get rounded corners of row in recyclerview

I'm developing an android app and I'm using recyclerview. I've managed to display rows with data and apply design to them, except I can not get rounded corners for rows. Bellow are my xml files.

File with name rounded_corners_cards.xml for rounded corners:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>

    <stroke android:width="3dp"
        android:color="@color/grayLight"/>

    <padding android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="1dp"/>

    <corners android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp"/>
</shape>

File for rows:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/StandardListRow"
    android:layout_height="60dp"
    android:orientation="vertical"
    android:background="@drawable/rounded_corners_cards">

    <ImageView
        android:id="@+id/offer_picture"
        style="@style/StyleRowIcon"
        android:contentDescription="@string/card_offer_image"
        android:scaleType="centerInside" />
</RelativeLayout>

I've tried to change rounded_corners_cards.xml file but without luck.

The result is on the image bellow: enter image description here

Thanks for your suggestions.

Upvotes: 2

Views: 5044

Answers (2)

Ben P.
Ben P.

Reputation: 54214

By far the simplest way to get rounded corners on a layout is to wrap it with a CardView. Normally, this will also display a shadow, but you can turn that off by using the cardElevation attribute.

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/StandardListRow"
    android:layout_height="60dp"
    app:cardCornerRadius="7dp"
    app:cardElevation="0dp">

    <ImageView
        android:id="@+id/offer_picture"
        style="@style/StyleRowIcon"
        android:contentDescription="@string/card_offer_image"
        android:scaleType="centerInside" />
</android.support.v7.widget.CardView>

Note: this will only work on Lollipop+

Due to expensive nature of rounded corner clipping, on platforms before Lollipop, CardView does not clip its children that intersect with rounded corners.

Upvotes: 6

Behl
Behl

Reputation: 129

The most simple approach as mentioned is use of cardView https://developer.android.com/reference/android/support/v7/widget/CardView.html

just use this as your RecyclerView item XML file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:contentPadding="10dp"
    app:cardElevation="6dp"
    app:cardCornerRadius="10dp"
    android:layout_marginTop="5dp"
    android:layout_marginLeft="5dp"
    android:layout_marginRight="5dp"
    android:layout_marginBottom="10dp"
    android:background="@color/cardview_light_background">

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

        <ImageView
         android:id="@+id/offer_picture"
         style="@style/StyleRowIcon"
         android:contentDescription="@string/card_offer_image"
         android:scaleType="centerInside" />


    </LinearLayout>

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


</LinearLayout>

NOTE:- cardCornerRadius is the element which defines roundness in the card the higher the dp, the more rounded it is.

Upvotes: 0

Related Questions