how to set colored border on cardview

Question

I am implementing card view but I can't find any border option to set a border on it.

here is my card.xml:

<android.support.v7.widget.CardView android:layout_marginTop="10dp"
  android:id="@+id/cardView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  xmlns:android="http://schemas.android.com/apk/res/android"
  card_view:cardPreventCornerOverlap="false"
  app:cardPreventCornerOverlap="false"
  xmlns:card_view="http://schemas.android.com/tools"
  xmlns:app="http://schemas.android.com/apk/res-auto">

  <RelativeLayout
     android:background="@drawable/tab_bg"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:padding="16dp">

     <TextView
         android:id="@+id/title"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:text="Title"
         android:textSize="20sp" />

  </RelativeLayout>

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

here is my image that I want to implement that green border on card view?

Help me. How can I implement this thing? I have no clue.

Thank you.

Possible duplicate of [How to add colored border on cardview?](http://stackoverflow.com/questions/35369691/how-to-add-colored-border-on-cardview) — Niels Masdorp, Apr 12 '16 at 13:41
That is not a cardview it is just a simple view with customize background made in drawable.xml, with border radius and border line — Rod_Algonquin, Apr 12 '16 at 13:43
he added one frame layout for left side border.. i want border around my cardview — Sagar Chavada, Apr 12 '16 at 13:47
Add app:cardBackgroundColor="@color/md_lime_500" to your cardview. — Burak Cakir, Apr 12 '16 at 13:54

Levon Petrosyan · Answer 1 · 2020-11-02T17:00:57.080

68

Started from v28 design support library we can use Material Card View, which provides us with a material styled cardview implementation out of the box.

<android.support.design.card.MaterialCardView
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="10dp">
    ... child views ...
</android.support.design.card.MaterialCardView>

You can further style the cardview by using two of the attributes that come with it:

app:strokeColor - The colour to be used for the given stroke, this must be set in order to display a stroke
app:strokeWidth - The width to be applied to the stroke of the view

edited Nov 02 '20 at 17:00

answered Sep 01 '18 at 14:17

Levon Petrosyan

8,815
8
54
65

1

This gives error. Use `android.support.design.card.MaterialCardView` by adding ` implementation 'com.android.support:design:28.0.0'` in gradle – Morse Dec 31 '18 at 19:41
2

This response should be accepted. https://stackoverflow.com/users/5895830/sagar-chavada – Emmanuelguther Mar 05 '19 at 19:37
@sagar-chavada This should be accepted answer as it not a workaround but actual implementation that material design library provides for material card view. – Jeel Vankhede Jul 10 '20 at 12:14
This is now deprecated. For new one follow the instructions on https://stackoverflow.com/questions/57619574/android-x-design-dependency – Achintha Isuru May 14 '21 at 19:41

score 43 · Accepted Answer · edited Mar 03 '19 at 16:21

43

Create drawable selector.xml

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

then give set this as a background, change color according your choice

edited Mar 03 '19 at 16:21

Dr.jacky

3,341
6
53
91

answered Apr 12 '16 at 13:46

Jhaman Das

1,094
13
28

3

I did this but it doesn't apply to the card view and the background is still white color. any idea why is that happening? – Arash Afsharpour Jul 05 '20 at 14:33
android:background="@drawable/selector" Use this to add the shape – Achintha Isuru May 14 '21 at 19:16

Gabriele Mariotti · Answer 3 · 2022-11-22T14:50:35.897

With the material components library just use the MaterialCardView with the app:strokeColor and app:strokeWidth attributes.

Note that without an app:strokeColor, the card will not render a stroked border, regardless of the app:strokeWidth value (the default values are app:strokeColor=@null and app:strokeWidth=0dp).

Something like:

<com.google.android.material.card.MaterialCardView
    ...
    app:strokeWidth="1dp"
    app:strokeColor="@color/stroke_color"
    app:cardElevation="xxdp">

    ...

</com.google.android.material.card.MaterialCardView>

With Jetpack Compose you can use the border attribute in the Card composable:

Card( border= BorderStroke(1.dp, Red)){
    //.....
}

Should be the top rated answer, super simple solution without using any xml. — Amir Dora., Mar 03 '21 at 14:37

Chingiz · Answer 4 · 2018-01-08T19:40:30.050

10

here is the solution for your problem:

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

use it as background drawable of your layout

edited Jan 08 '18 at 19:40

answered Apr 12 '16 at 13:48

Chingiz

332
5
17

1

This simply doesn't work. I've applied it to my app and the result is just random – tiagocarvalho92 Sep 09 '18 at 19:45

score 4 · Answer 5 · answered Mar 15 '19 at 02:42

I did this a little simpler by making the cardBackgroundColor green and contentPadding 1dp and inside the card having a ConstraintLayout (or other layout) with a white background, like this:

<android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        app:cardBackgroundColor="@color/colorAccent"
        app:contentPadding="1dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:padding="8dp">

    ...

This way no extra xml or other superfluous code is needed.

Result:

score 2 · Answer 6 · answered Apr 24 '20 at 06:39

Though the question is very old, it may help others who face this problem. Just add the new MDC library in build.gradle

implementation 'com.google.android.material:material:1.2.0-alpha05'

then in your layout add MaterialCardView

<com.google.android.material.card.MaterialCardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    style="@style/CardViewStyle"
    app:strokeColor="@color/your_color"
    app:strokeWidth="@dimen/_1sdp">

</com.google.android.material.card.MaterialCardView>

in style.xml

<style name="CardViewStyle" parent="Widget.MaterialComponents.CardView">
    <item name="cardBackgroundColor">@color/white</item>
    <item name="cardForegroundColor">@color/transparent</item>
    <item name="cardElevation">0dp</item>
    <item name="rippleColor">@color/colorRipple</item>
</style>

score 0 · Answer 7 · answered Dec 09 '21 at 21:25

You can easily achieve this by the following

CardItem for RecyclerView.

<androidx.cardview.widget.CardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tool="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/space"
    android:elevation="@dimen/space"
    app:cardCornerRadius="@dimen/space">


    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/csl_language"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/card_language_neutral"
        android:padding="@dimen/space">
       
        ..............        

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>

Note the @drawable/card_language_neutral as background in the child constraint layout

card_language_neutral.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke
        android:width="1dp"
        android:color="@color/black" />

    <corners android:radius="@dimen/space" />

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

</shape>

Make sure that the android:radius attribute is set equal to the cardCornerRadius of CardView. You can change the color, width of the border on the cardView using the background of child constraint layout, or relative layout in your case

NOTE: To programmatically change the background drawable to some other drawable (or some other color one) use the following

_csl.setBackgroundResource(R.drawable.card_language_glow)

how to set colored border on cardview

7 Answers7

Linked

Related