CODEWITHSUNDEEP
androidandroid-layout
Yesha Shah
Yesha Shah

Reputation: 408

How can I set border to my cardview?

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>

Upvotes: 6

Views: 48590

Answers (6)

RvSingh3213
RvSingh3213

Reputation: 189

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>

enter image description here

Upvotes: -1

viraj pawar
viraj pawar

Reputation: 1

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"/>

Upvotes: -1

HubertL
HubertL

Reputation: 109

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.

Upvotes: 10

Ara Hakobyan
Ara Hakobyan

Reputation: 1692

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

Upvotes: 7

Shrini Jaiswal
Shrini Jaiswal

Reputation: 1090

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

Upvotes: 3

Dishonered
Dishonered

Reputation: 8841

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.

Upvotes: 19

Related Questions