Search code examples
androidandroid-cardview

Android Cardview foreground rim not visible


I have the following CardView with a custom foreground rim android:foreground="@drawable/cardview_rim":

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_82sdp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="10dp"
    app:cardElevation="0dp"
    app:cardPreventCornerOverlap="true"
    app:cardUseCompatPadding="true"
    app:contentPadding="@dimen/_5sdp"
    android:foreground="@drawable/cardview_rim"
    app:contentPaddingBottom="0dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="@dimen/_1sdp">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="@dimen/_60sdp"
            android:layout_height="@dimen/_60sdp"
            android:padding="2dp" />

        <TextView
            android:id="@+id/tv_Name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/_4sdp"
            android:layout_marginLeft="@dimen/_4sdp"


            android:layout_toEndOf="@+id/imageView"
            android:layout_toRightOf="@+id/imageView"
            android:textColor="@android:color/black"
            android:textSize="@dimen/_15ssp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/tv_Status"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_Name"
            android:layout_marginStart="@dimen/_4sdp"
            android:layout_marginLeft="@dimen/_4sdp"
            android:layout_marginTop="@dimen/_2sdp"
            android:layout_toEndOf="@+id/imageView"
            android:layout_toRightOf="@+id/imageView"
            android:text="@string/Status_Semicolon"
            android:textSize="@dimen/_14ssp" />

        <TextView
            android:id="@+id/tv_StatusProperty"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/tv_Status"
            android:layout_marginStart="@dimen/_3sdp"

            android:layout_marginLeft="@dimen/_3sdp"

            android:layout_toEndOf="@+id/tv_Status"
            android:layout_toRightOf="@+id/tv_Status"
            android:textSize="@dimen/_14ssp" />

        <TextView
            android:id="@+id/tv_Ordered"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tv_Status"
            android:layout_marginStart="@dimen/_4sdp"
            android:layout_marginLeft="@dimen/_4sdp"
            android:layout_marginTop="@dimen/_2sdp"
            android:layout_toEndOf="@+id/imageView"
            android:layout_toRightOf="@+id/imageView"
            android:text="@string/Ordered_Semicolon"
            android:textSize="@dimen/_14ssp" />

        <TextView
            android:id="@+id/tv_Ordered_Date"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/tv_Ordered"
            android:layout_marginStart="@dimen/_3sdp"
            android:layout_marginLeft="@dimen/_3sdp"
            android:layout_toEndOf="@+id/tv_Ordered"
            android:layout_toRightOf="@+id/tv_Ordered"
            android:textSize="@dimen/_14ssp" />

        <ImageView
            android:id="@+id/recyclerViewIcon"
            android:layout_width="@dimen/_52sdp"
            android:layout_height="@dimen/_52sdp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:layout_marginEnd="@dimen/_4sdp"
            android:layout_marginRight="@dimen/_4sdp"
            android:layout_marginBottom="@dimen/_12sdp"
             />


        <TextView
            android:id="@+id/tv_recyclerViewIcon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignStart="@+id/recyclerViewIcon"
            android:layout_alignLeft="@+id/recyclerViewIcon"
            android:layout_alignEnd="@+id/recyclerViewIcon"
            android:layout_alignRight="@+id/recyclerViewIcon"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="-8dp"
            android:layout_marginLeft="-8dp"
            android:layout_marginEnd="-8dp"
            android:layout_marginRight="-8dp"
            android:gravity="center"
            android:textSize="@dimen/_12ssp"
            android:textStyle="italic" />


    </RelativeLayout>


</androidx.cardview.widget.CardView>

Here is the XML code for the @drawable/cardview_rim

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="5dp"
        android:color="#000000" />
    <corners android:radius="10dip"/>
</shape>

Unfortunately the black foreground rim is not visible. Do you know why?

Reminder: Does anybody have a suggestion as to why I am not seeing the rim that I created? I'll appreciate every suggestion.


Solution

  • Try setting

    app:cardForegroundColor="@drawable/cardview_rim"
    

    instead of

    android:foreground="@drawable/cardview_rim"
    

    Update

    You can create the same effect by using the stroke property of the card view. Get rid of the foreground atrribute Then add the following attributes:

    app:strokeColor="#000"
    app:strokeWidth="5dp"
    

    Update 2

    I think I found your issue. The cardUseCompatPadding attribute somehow prevents the drawing of the foreground. So use the same card configuration as in your question but this time just set the cardUseCompatPadding to false or delete it from the xml.

    app:cardUseCompatPadding="false"
    

    Result in xml preview

    Result showing image