How to properly put a layout into a CardView?

Question

Background

For a long time, I had a fake CardView, with a basic layout inside of it.

The problem

Now I want to use the official CardView, but I've found some issues in putting the layout into it.

Basically, what the layout includes is:

++++2
+444+ 
1444+
+444+
++++3

1. an imageView centered vertically on the left.
2. a top-right (corner) imageView
3. a bottom-right (corner) imageView, below #2. might have a GONE visibility sometimes.
4. Two TextViews in between #1 and #2 & #3 , centered vertically together using a LinearLayout, and take as much width as possible

The layout should take full width, but only as much height as it needs, with a minimal height being specified.

Thing is, putting the layout as it used to be doesn't work, and it keeps getting more space than it needs, or even not center views.

What I've tried

Here's the original layout, that I want to put into a CardView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:minHeight="?attr/listPreferredItemHeightSmall"
    tools:context=".activities.app_list_activity.AppListActivity" >

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="@dimen/app_icon_size"
        android:layout_height="@dimen/app_icon_size"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/detailsContainer"
        android:layout_width="0px"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/iconImageView"
        android:layout_toLeftOf="@+id/overflowView"
        android:layout_toRightOf="@+id/iconImageView"
        android:layout_toStartOf="@+id/overflowView"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/labelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute" />

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description\ndescription\ndescription"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute" />
    </LinearLayout>

    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:padding="10dp"
        android:src="@drawable/selector_card_overflow_button"
        tools:ignore="ContentDescription"/>

    <ImageView
        android:id="@+id/indicatorImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignEnd="@+id/overflowView"
        android:layout_alignLeft="@+id/overflowView"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/overflowView"
        android:layout_alignStart="@+id/overflowView"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@android:drawable/ic_dialog_alert"
        tools:ignore="ContentDescription"/>

</RelativeLayout>

When I put it into a CardView, I get this:

What's wrong in the screenshot is that the left icon and the the texts aren't vertically centered, and the "!" icon isn't at the bottom

And this is just what I've put:

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="200dp"
    app:cardCornerRadius="@dimen/card_radius"
    app:cardElevation="4dp"
    app:cardUseCompatPadding="true"
    app:contentPadding="10dp">

    <include layout="@layout/..."/>

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

I've tried changing the layout to be a GridLayout, but it didn't help either:

<android.support.v7.widget.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:layout_width="match_parent"
    android:layout_height="match_parent"
    app:columnCount="3"
    app:rowCount="3">

    <ImageView
        android:id="@+id/iconImageView"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="4dp"
        android:layout_marginLeft="2dp"
        android:layout_marginRight="4dp"
        android:layout_marginStart="2dp"
        android:adjustViewBounds="true"
        android:src="@android:drawable/sym_def_app_icon"
        app:layout_column="0"
        app:layout_gravity="center_vertical"
        app:layout_rowSpan="3"
        app:layout_rowWeight="1"
        tools:ignore="ContentDescription"/>

    <LinearLayout
        android:id="@+id/detailsContainer"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_column="1"
        app:layout_columnWeight="1"
        app:layout_gravity="center_vertical"
        app:layout_rowSpan="3">

        <TextView
            android:id="@+id/labelTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:text="label"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>

        <TextView
            android:id="@+id/descriptionTextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ellipsize="marquee"
            android:minLines="3"
            android:text="description\ndescription\ndescription"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textDirection="locale"
            tools:ignore="HardcodedText,UnusedAttribute"/>
    </LinearLayout>


    <ImageView
        android:id="@+id/overflowView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:clickable="true"
        android:padding="10dp"
        android:src="@drawable/selector_card_overflow_button"
        app:layout_column="2"
        app:layout_row="0"
        tools:ignore="ContentDescription"/>

    <android.support.v7.widget.Space
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_column="2"
        app:layout_row="1"
        app:layout_rowWeight="1"/>

    <ImageView
        android:id="@+id/indicatorImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        android:src="@android:drawable/ic_dialog_alert"
        app:layout_column="2"
        app:layout_gravity="bottom"
        app:layout_row="2"
        tools:ignore="ContentDescription"/>

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

The question

What's going on? How come when I put the layout into the CardView, it behaves differently? How can I retain the layout inside the CardView ?

Answer 1

You can solve your problem using Linearlayouts:

<LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView #2
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:grivity="right"/>
        <Linearlayout android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravitiy="center_vertical">
            <ImageView #1 />
            <LinearLayout android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:layout_margin_right="20dp">
                            <Texview/>
                            <Texview/>
                            </LinearLayout>
        </LinearLayout>
        <ImageView #3
            android:grivity="right"
            android:layout_width="20dp"
            android:layout_height="20dp"/>
</Linearlayout>

Don't use this xml 1:1 as I haven't tested it. Basically you create 3 vertical rows: The top and bottom one containing a Image: #2 & #3. The center row contains a Linearlayout (this time horizontal) with image view #1 and a vertical aligned Linearlayout for your TextViews (with right margin 20dp).