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   Colored Border on Cardview  activity main xml   lt 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  gt        lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android orientation  vertical  gt            lt TextView             style   style Base TextAppearance AppCompat Headline              android layout width  fill parent              android layout height  wrap content              android text  Title    gt            lt TextView             style   style Base TextAppearance AppCompat Body1              android layout width  fill parent              android layout height  wrap content              android text  Content here    gt        lt  LinearLayout gt    lt  android support v7 widget CardView gt    Many thanks

User · Answer

I think this solution may not be efficient but it serves the purpose and adds flexibility with the border width     lt android support v7 widget CardView     android layout width  match parent      android layout height  match parent      android layout margin  40dp      android layout gravity  center      card view cardBackgroundColor   color some color      card view cardCornerRadius  20dp      card view contentPadding  5dp  gt   lt  -- Change it to customize the border width -- gt        lt android support v7 widget CardView         android layout width  match parent          android layout height  match parent          android layout gravity  center          card view cardCornerRadius  20dp          card view contentPadding  5dp  gt            lt RelativeLayout             android layout width  match parent              android layout height  match parent  gt             lt  -- Add your UI elements -- gt            lt  RelativeLayout gt       lt  android support v7 widget CardView gt   lt  android support v7 widget CardView gt

User · Answer

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

User · Answer

I solved this by putting two CardViews in a RelativeLayout  One with background of the border color and the other one with the image   or whatever you wish to use   Note the margin added to top and start for the second CardView  In my case I decided to use a 2dp thick border                lt android support v7 widget CardView             android id    id user thumb rounded background              android layout width  36dp              android layout height  36dp              app cardCornerRadius  18dp              android layout marginEnd  6dp  gt                lt ImageView                 android id    id user thumb background                  android background   color colorPrimaryDark                  android layout width  36dp                  android layout height  36dp    gt            lt  android support v7 widget CardView gt            lt android support v7 widget CardView             android id    id user thumb rounded              android layout width  32dp              android layout height  32dp              app cardCornerRadius  16dp              android layout marginTop  2dp              android layout marginStart  2dp              android layout marginEnd  6dp  gt            lt ImageView             android id    id user thumb              android src   drawable default profile              android layout width  32dp              android layout height  32dp    gt            lt  android support v7 widget CardView gt

User · Answer

As the accepted answer requires you to add a Frame Layout  here how you can do it with material design  Add this if you haven t already implementation  com google android material material 1 0 0   Now change to Cardview to MaterialCardView  lt com google android material card MaterialCardView android layout width  quot match parent quot  android layout height  quot wrap content quot  android layout marginTop  quot 16dp quot  app cardCornerRadius  quot 8dp quot  app cardElevation  quot 2dp quot   app strokeWidth  quot 1dp quot  app strokeColor  quot  color black quot  gt   Now you need to change the activity theme to Theme Material  If you are using Theme Appcompact I will suggest you to move to Theme Material for future projects for having better material design in you app       lt style name  quot AppTheme quot  parent  quot Theme MaterialComponents DayNight quot  gt

User · Answer

my solution  create a file card view border xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt shape xmlns android  quot http   schemas android com apk res android quot  gt   lt solid android color  quot  color white background quot   gt   lt stroke android width  quot 2dp quot       android color  quot  color red quot    gt   lt corners android radius  quot 20dip quot   gt   lt  shape gt   and set programmatically cardView setBackgroundResource R drawable card view border

User · Answer

I would like to improve the solution proposed by Amit  I m utilizing the given resources without adding additional shapes or Views  I m giving CardView a background color and then nested layout  white color to overprint yet with some leftMargin      lt  xml version  1 0  encoding  utf-8   gt   lt 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 cardBackgroundColor   color some color      card view cardCornerRadius  5dp  gt         lt  -- The left margin decides the width of the border -- gt        lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android padding  16dp          android layout marginLeft  5dp          android background   fff          android orientation  vertical  gt            lt TextView             style   style Base TextAppearance AppCompat Headline              android layout width  fill parent              android layout height  wrap content              android text  Title    gt            lt TextView             style   style Base TextAppearance AppCompat Body1              android layout width  fill parent              android layout height  wrap content              android text  Content here    gt        lt  LinearLayout gt    lt  android support v7 widget CardView gt

User · Answer

try doing    lt  xml version  1 0  encoding  utf-8   gt   lt 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  gt        lt FrameLayout         android background   FF0000          android layout width  4dp          android layout height  match parent   gt        lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android padding  16dp          android orientation  vertical  gt            lt TextView             style   style Base TextAppearance AppCompat Headline              android layout width  fill parent              android layout height  wrap content              android text  Title    gt            lt TextView             style   style Base TextAppearance AppCompat Body1              android layout width  fill parent              android layout height  wrap content              android text  Content here    gt        lt  LinearLayout gt    lt  android support v7 widget CardView gt    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    lt  xml version  1 0  encoding  utf-8   gt   lt shape xmlns android  http   schemas android com apk res android   gt       lt solid android color   F00    gt       lt size android width  10dp   gt       lt padding android bottom  0dp  android left  0dp  android right  0dp  android top  0dp   gt       lt corners android topLeftRadius  5dp  android bottomLeftRadius  5dp          android topRightRadius  0 1dp  android bottomRightRadius  0 1dp   gt   lt  shape gt    and in the frame layout use  android background   drawable card edge

User · Answer

CardView extends FrameLayout  so it support foreground attribute  Using foreground attribute can also add border easily  layout as follows   lt androidx cardview widget CardView xmlns android  quot http   schemas android com apk res android quot      xmlns app  quot http   schemas android com apk res-auto quot      android id  quot   id link card quot      android layout width  quot match parent quot      android layout height  quot wrap content quot      android foreground  quot  drawable bg roundrect ripple light border quot      app cardCornerRadius  quot 23dp quot      app cardElevation  quot 0dp quot  gt   lt  androidx cardview widget CardView gt    bg roundrect ripple light border xml  lt  xml version  quot 1 0 quot  encoding  quot utf-8 quot   gt   lt ripple xmlns android  quot http   schemas android com apk res android quot      android color  quot  color ripple color light quot  gt        lt item gt           lt shape android shape  quot rectangle quot  gt               lt stroke                 android width  quot 0 5dp quot                  android color  quot  DDDDDD quot    gt               lt corners android radius  quot 23dp quot    gt           lt  shape gt       lt  item gt        lt item android id  quot  android id mask quot  gt           lt shape android shape  quot rectangle quot  gt               lt corners android radius  quot 23dp quot    gt               lt solid android color  quot  color background quot    gt           lt  shape gt       lt  item gt    lt  ripple gt

[android] How to add colored border on cardview?

Examples related to android

Examples related to xml

Examples related to android-cardview