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.

Albertalberta

Possible duplicate of How to add colored border on cardview? – Acanthopterygian

That is not a cardview it is just a simple view with customize background made in drawable.xml, with border radius and border line – Burlburlap

yes i 've seen but there is no solution of mine – Albertalberta

I believe you are looking for a ShapeDrawable – Marguerite

he added one frame layout for left side border.. i want border around my cardview – Albertalberta

Add app:cardBackgroundColor="@color/md_lime_500" to your cardview. – Glycerin

Answer 1

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

Nonanonage

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? – Cristinacristine

android:background="@drawable/selector" Use this to add the shape – Berkey

Answer 2

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

Furness

This gives error. Use android.support.design.card.MaterialCardView by adding ` implementation 'com.android.support:design:28.0.0'` in gradle – Mayhew

This response should be accepted. stackoverflow.com/users/5895830/sagar-chavada – Thirst

@sagar-chavada This should be accepted answer as it not a workaround but actual implementation that material design library provides for material card view. – Dalmatic

This is now deprecated. For new one follow the instructions on #57620074 – Berkey

Answer 3

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)){
    //.....
}

Lansquenet

Should be the top rated answer, super simple solution without using any xml. – Disproof

Answer 4

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

Belsen

This simply doesn't work. I've applied it to my app and the result is just random – Licorice

Answer 5

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:

Poltergeist

Answer 6

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>

Kunkle

Answer 7

You can easily achieve this by the following

1. 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>
   

2. 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>

3. 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)

Jos

Answer 8

This is my main file

<androidx.cardview.widget.CardView
            android:id="@+id/tv_section"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:foreground="@drawable/bg_2_width"
            tools:foreground="@drawable/bg_2_width"
            app:cardBackgroundColor="@color/pink_FF518A_light"
            app:cardCornerRadius="@dimen/spacing_4"
            app:cardElevation="0dp"> 
</androidx.cardview.widget.CardView>

bg_2_width.xml looks like this

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="1dp"
        android:color="@color/pink_FF518A" />
    <corners android:radius="4dp" />
</shape>

and you can change the width or color programmatically from kotlin file

 val gradientDrawable = binding.tvSection.foreground as GradientDrawable
 gradientDrawable.setStroke(1, Color.Red) // place your desired color or border with

Dao