android highlight cardview border

3.2k Views Asked by At

I'm using cards in a recycleview and would like to highlight some of them.

the first thought i have is a different shadow or border with a bright color, but so far i was not able to find any properties that would adjust it

this is my card view:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="@dimen/giveawayCardHeight"
    android:layout_gravity="center"

    card_view:cardCornerRadius="4dp"
    card_view:cardElevation="3dp"
    card_view:cardUseCompatPadding="true"
    >

    <android.support.v7.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="5dp">

        <RelativeLayout
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:background="#FFFFFF">

            <android.support.v7.widget.AppCompatImageView
                android:id="@+id/raffleThumbnail"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                 />

            <com.tomatedigital.giveawaymaster.ui.FontFitTextView
                android:id="@+id/raffleOwner"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"

                android:layout_alignParentBottom="true"
                android:alpha="0.7"
                android:background="@color/colorPrimaryDark"
                android:gravity="center_horizontal|bottom"
                android:text="viajandocomgabi"
                android:textColor="@color/cardview_light_background"
                android:textSize="@dimen/normalFont" />
        </RelativeLayout>

        <android.support.v7.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="@dimen/smallMargin"
            android:orientation="vertical"
            android:background="#FFFFFF">

            <android.support.v7.widget.AppCompatTextView
                android:id="@+id/raffleDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"

                android:text="@string/raf_date_label"
                android:textSize="@dimen/normalFont" />


            <android.support.v7.widget.LinearLayoutCompat
                android:id="@+id/giveawayButtonsLayout"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:orientation="horizontal">
                <Space
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <android.support.v7.widget.AppCompatImageButton
                    android:id="@+id/startButton"
                    android:layout_width="@dimen/cardButtonSize"
                    android:layout_height="@dimen/cardButtonSize"


                    android:background="?android:attr/selectableItemBackground"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_play" />

                <Space
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="2" />

                <android.support.v7.widget.AppCompatImageButton
                    android:id="@+id/deleteButton"
                    android:layout_width="@dimen/cardButtonSize"
                    android:layout_height="@dimen/cardButtonSize"

                    android:background="?android:attr/selectableItemBackground"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_trash" />

                <Space
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />
            </android.support.v7.widget.LinearLayoutCompat>

            <android.support.v7.widget.AppCompatTextView
                android:id="@+id/ticketAmountLabel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"

                android:drawableRight="@drawable/ic_tickets"
                android:text="@string/you_have"
                android:textSize="@dimen/normalFont" />
        </android.support.v7.widget.LinearLayoutCompat>
    </android.support.v7.widget.LinearLayoutCompat>
</android.support.v7.widget.CardView>

and this is how i would like to be:

enter image description here

the best scenario is switch the default shadow color for something brighter, but if that is impossible an inner border would be ok

how can i do that?

2

There are 2 best solutions below

0
On

This is kinda ugly but you could add another field on your model that that you will use as basis for setting a different background on the cardview. Then on the adapter, change the background of the cardview programmatically depending on it's status. You need to notifyDatasetChanged often though if needed.

0
On

for inner border you can create a xml drawable file like this

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

then put it as background of the CardViews first child.

set cardCorner radius and xml background corner radius the same as each other.