Search code examples
androidlayoutandroid-cardviewedges

Set background color to android card edges too

I have an issue concerning filling a part of an android card with an background color.

As you can see, the blue filled area is not filling the edges of the card. I do not know exactly how to set that, maybe my layout file will help you: That's the way the card is looking now:

enter image description here

<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:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/card_view"
    android:layout_margin="5dp"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp"
    card_view:contentPadding="4dp"
    android:foreground="?selectableItemBackground"
    android:clickable="true" >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="6dp">

            <ImageView
                android:id="@+id/item_image"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="8dp"

                card_view:srcCompat="@drawable/ic_face" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/item_title"
                android:layout_toRightOf="@+id/item_image"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                android:text="Temp Content"
                />

            <TextView
                android:id="@+id/item_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/item_title"
                android:layout_toRightOf="@+id/item_image"
                android:text="3 Teilnehmer" />

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="6dp"
            android:background="@color/colorPrimary">

            <LinearLayout android:layout_width="0dp" android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        card_view:srcCompat="@android:drawable/ic_media_next" />

                    <TextView
                        android:id="@+id/item_next_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="Test Name" />
                </LinearLayout>
            </LinearLayout>

            <LinearLayout android:layout_width="0dp" android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical"
                android:gravity="right">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <TextView
                        android:id="@+id/item_next_date"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="20.03.2017" />

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        card_view:srcCompat="@android:drawable/ic_media_next" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>

How do I have to set the background color to be filling also the edges of the card? Thank you!

Solution

  • I had problems with solution, suggested in this answer, particularly the accepted answer suggest applying this, but it doesn't help me:

    card_view:cardPreventCornerOverlap="false"

    What I ended up with, was removing card_view:contentPadding from CardView and applying necessary padding to child views.

    In your case this would be the result:

    enter image description here

    <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/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:clickable="true"
    android:foreground="?selectableItemBackground"
    card_view:cardCornerRadius="12dp"
    card_view:cardElevation="3dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp">

            <ImageView
                android:id="@+id/item_image"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="8dp"

                card_view:srcCompat="@android:drawable/alert_dark_frame"/>

            <TextView
                android:id="@+id/item_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:layout_toRightOf="@+id/item_image"
                android:text="Temp Content"
                android:textSize="30sp"
            />

            <TextView
                android:id="@+id/item_subtitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/item_title"
                android:layout_toRightOf="@+id/item_image"
                android:text="3 Teilnehmer"/>

        </RelativeLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:orientation="horizontal"
            android:padding="6dp">

            <LinearLayout android:layout_width="0dp" android:layout_height="match_parent"
                          android:layout_weight="1"
                          android:orientation="vertical">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        card_view:srcCompat="@android:drawable/ic_media_next"/>

                    <TextView
                        android:id="@+id/item_next_name"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="Test Name"/>
                </LinearLayout>
            </LinearLayout>

            <LinearLayout android:layout_width="0dp" android:layout_height="match_parent"
                          android:layout_weight="1"
                          android:gravity="right"
                          android:orientation="vertical">
                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">
                    <TextView
                        android:id="@+id/item_next_date"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:text="20.03.2017"/>

                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignParentStart="true"
                        android:layout_alignParentTop="true"
                        card_view:srcCompat="@android:drawable/ic_media_next"/>
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.CardView>