How to add colored border on cardview?

Question

I am new to Android and this is my first question here.

I am trying to add a colored vertical border at the beginning of the cardview. How can I achieve it on xml ? I tried adding it with empty textview but it is messing up the whole cardview itself. Please check the picture link posted below for example.

activity_main.xml

<android.support.v7.widget.CardView     android:layout_width="fill_parent"     android:layout_height="wrap_content"     card_view:contentPadding="16dp"     card_view:cardElevation="2dp"     card_view:cardCornerRadius="5dp">      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:orientation="vertical">          <TextView             style="@style/Base.TextAppearance.AppCompat.Headline"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="Title" />          <TextView             style="@style/Base.TextAppearance.AppCompat.Body1"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="Content here" />                  </LinearLayout>  </android.support.v7.widget.CardView> 

Many thanks

Answer 1

Start From the material design update, it support app:strokeColor and also app:strokeWidth. see more

to use material design update. add following code to build.gradle(:app)

dependencies {     // ...     implementation 'com.google.android.material:material:1.0.0'     // ...   } 

and Change CardView to MaterialCardView

Answer 2

try doing:

<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="fill_parent"     android:layout_height="wrap_content"     xmlns:card_view="http://schemas.android.com/apk/res-auto"     card_view:cardElevation="2dp"     card_view:cardCornerRadius="5dp">      <FrameLayout         android:background="#FF0000"         android:layout_width="4dp"         android:layout_height="match_parent"/>      <LinearLayout         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:padding="16dp"         android:orientation="vertical">          <TextView             style="@style/Base.TextAppearance.AppCompat.Headline"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="Title" />          <TextView             style="@style/Base.TextAppearance.AppCompat.Body1"             android:layout_width="fill_parent"             android:layout_height="wrap_content"             android:text="Content here" />      </LinearLayout>  </android.support.v7.widget.CardView> 

this removes the padding from the cardview and adds a FrameLayout with a color. You then need to fix the padding in the LinearLayout then for the other fields

Update

If you want to preserve the card corner radius create card_edge.xml in drawable folder:

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" >     <solid android:color="#F00" />     <size android:width="10dp"/>     <padding android:bottom="0dp" android:left="0dp" android:right="0dp" android:top="0dp"/>     <corners android:topLeftRadius="5dp" android:bottomLeftRadius="5dp"         android:topRightRadius="0.1dp" android:bottomRightRadius="0.1dp"/> </shape> 

and in the frame layout use android:background="@drawable/card_edge"