How to center the CardView and get the proper color background?

Question

I have an app that renders as follows:

The white rectangle is a CardView. Here is the .xml that renders the activity:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/designerGrid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0099cc"
    android:columnCount="5"
    android:rowCount="6"
    android:visibility="visible"
    tools:context=".visuals.CloudCardActivity">

    <!-- Left Control Panel (r:0 c:0 r-span:2 c-weight:2) -->
    <LinearLayout
        android:id="@+id/leftControlPanel"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_row="0"
        android:layout_rowSpan="6"
        android:background="#0099cc"
        android:gravity="top|center_horizontal"
        android:orientation="vertical">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:inputType="textCapCharacters"
            android:text="New" />

    </LinearLayout>

    <!-- Top Control Panel  (r:0 c:1 r-span:1 c-span:3) -->
    <LinearLayout
        android:id="@+id/topControlPanel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_column="2"
        android:layout_columnSpan="3"
        android:layout_row="0"
        android:background="#0099cc"
        android:gravity="left|center_vertical"
        android:orientation="horizontal">

        <Spinner
            android:id="@+id/cardFields"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawSelectorOnTop="true"
            android:entries="@array/default_card_fields">

        </Spinner>
    </LinearLayout>

    <!-- Card View Panel  (r:1 c:1 r-weight:8 c-weight:8) -->
    <LinearLayout
        android:id="@+id/cardLayout"
        android:layout_column="2"
        android:layout_columnSpan="3"
        android:layout_row="1"
        android:layout_rowSpan="5"
        android:background="#a3a3a3"
        android:elevation="3dp"
        android:gravity="center_vertical|center_horizontal"
        android:visibility="visible">

        <android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="560dp"
            android:layout_height="320dp"
            android:background="@android:color/white"
            android:fadingEdge="horizontal|vertical"
            android:focusable="auto"
            android:gravity="center_horizontal"
            android:layoutMode="clipBounds"
            app:cardElevation="5dp" />
    </LinearLayout>

</GridLayout>

Sidebar: the background color of the LinearLayoutis not rendering either.

Here is what is expected:

Am I using the right controls for the layout?

Deepak kaku · Accepted Answer · 2018-04-24T21:43:49.387

try this

<android.support.v7.widget.CardView
            android:id="@+id/cardView"
            android:layout_width="560dp"
            android:layout_height="320dp"
            android:background="@android:color/white"
            android:fadingEdge="horizontal|vertical"
            android:focusable="auto"
            android:layout_gravity="center_horizontal"
            android:layoutMode="clipBounds"
            app:cardElevation="5dp" />

Also read this --> https://stackoverflow.com/a/3482757/6142219

Alternative Way

CardViews are usually used in List of items to be shown inside a ListView or a RecyclerView. If you only have 1 Rectangle/Card to be shown, i would recommend using a custom View object with rounded rectangle background.

This can be achieved as follows.

Create a XML in your drawable folder "custom_card_bg.xml"

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid
        android:color="#ffffff"/> <!-- you can give your own color here -->
    <corners
        android:radius="10dp" />
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp" />
</shape>

Next, in your custom layout say "custom_rectangle_layout.xml" in /layout folder, use the above custom background

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:background="@drawable/custom_card_bg"
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- your layout -->
</LinearLayout>

So I'm creating 2 .xml files? One in ./drawable and the other in ...??? ./layout??? I'm probably needing a custom `View` down the road anyway. — IAbstract, Apr 24 '18 at 21:40
@IAbstract, yes 2 xml layouts for custom view. 1 in drawable which defines your background, and 1 xml in /layout folder where you will add widgets like TextView into your Card. But notice how I set the background using the 1st xml inside drawable — Deepak kaku, Apr 24 '18 at 21:41

How to center the CardView and get the proper color background?

1 Answers1