How can I set border to my cardview?

Question

This is the below cardview code.

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cv"
    android:background="@drawable/cardborder"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="4dp"
    card_view:cardCornerRadius="5dp">

below is cardborder.xml which I am using as background of cardview

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <solid android:color="#ffffff" />
    <stroke android:width="1dip"
        android:color="#f1efec"/>
    <corners android:radius="20dip"/>
</shape>

Check this [answer](https://stackoverflow.com/a/46467680/1594998) — Kostadin Georgiev, Sep 28 '17 at 11:11
Does this answer your question? [How to add colored border on cardview?](https://stackoverflow.com/questions/35369691/how-to-add-colored-border-on-cardview) — Kaibo, Nov 05 '19 at 08:59

score 19 · Accepted Answer · answered Apr 25 '17 at 13:05

19

You need to add another layout inside a card view and then set the background for that layout.
For card_view you can only set background color.

answered Apr 25 '17 at 13:05

Dishonered

8,449
9
37
50

1

But I dont want that inner layout and cardview look seperated. – Yesha Shah Apr 25 '17 at 13:14

score 10 · Answer 2 · answered May 14 '19 at 07:42

I suggest another solution.

My cardviewItem:

<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/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:layout_marginBottom="3dp"
card_view:cardCornerRadius="7dp"
card_view:cardElevation="1dp">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/cardview_body">

        <TextView *** />

        <CheckBox *** />

        <ImageView *** />

    </android.support.constraint.ConstraintLayout>

And cardview_body.xml from drawable:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <layer-list>
        <item>
            <shape>
                <solid android:color="@color/DarkGrey"/>
                <corners android:radius="6dp" />
                <stroke android:width="1dp" android:color="@android:color/black" />
            </shape>
        </item>
    </layer-list>
</item>

Important is the fact that the radius in cardview_body.xml is smaller than the radius in cardviewItem. Thanks to this, there is no spare white space at the corners.

score 7 · Answer 3 · edited Feb 14 '19 at 11:09

here is the solution for your problem

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <solid android:color="#808080"/>
  <stroke android:width="3dip" android:color="#B1BCBE" />
  <corners android:radius="20dip"/>
  <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

hope it'll help you

score 3 · Answer 4 · answered Nov 26 '18 at 14:53

None of the Above answers worked for me . My solution is Use a card inside a card with outer card with the border color . Keep the cornerRadius param same for both the cards:

<android.support.v7.widget.CardView
card_view:cardBackgroundColor="*Your Color*"
android:id="@+id/card_view"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardElevation="4dp"
card_view:contentPadding="1dp"
card_view:cardCornerRadius="6dp"
card_view:cardUseCompatPadding="true"
>

<android.support.v7.widget.CardView
    card_view:cardCornerRadius="6dp"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<---- Here goes your Layout---------->

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

This creates a card with black border

This is not a good solution, this adds a redundant object to memory which will be a performance penalty. — humble_wolf, Jan 12 '19 at 05:25

score -1 · Answer 5 · edited Sep 12 '19 at 07:22

Or you can just use View to draw a border as below which is a long method but would create a exact border as it should look

<android.support.v7.widget.CardView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardMaxElevation="0.1dp"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/border_background"
    card_view:cardElevation="5dp"
    android:foreground="? 
    android:attr/selectableItemBackground"
   xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_marginLeft="@dimen/dp_2"
    android:layout_marginRight="@dimen/dp_2"
    android:layout_marginTop="@dimen/dp_2"
    android:layout_marginBottom="@dimen/dp_5">

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_1"
        android:background="@color/Parrot_Color"
        android:id="@+id/view_topBorder"/>

    <View
        android:layout_width="@dimen/dp_1"
        android:layout_height="match_parent"
        android:background="@color/Parrot_Color"
        android:id="@+id/Parrot_Color"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_1"
        android:background="@color/Parrot_Color"
        android:layout_gravity="bottom"/>

    <View
        android:layout_width="@dimen/dp_1"
        android:layout_height="match_parent"
        android:background="@color/Parrot_Color"
        android:layout_gravity="right"/>

score -1 · Answer 6 · answered Sep 09 '20 at 00:25

I have created border around CardView

hope it will solve your problem and help you

see the code and this card can be included into any Layout and then again we can set Its layout_width and layout_height

<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="60dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardBackgroundColor="@color/euro"
    android:layout_height="20dp">

    <androidx.cardview.widget.CardView
        android:layout_width="58dp"
        android:layout_height="18dp"
        android:layout_marginLeft="1dp"
        android:layout_marginRight="1dp"
        android:layout_marginTop="1dp"
        android:layout_marginBottom="1dp">



    </androidx.cardview.widget.CardView>

</androidx.cardview.widget.CardView>

How can I set border to my cardview?

6 Answers6