user1871869 user1871869 - 2 months ago 10
Android Question

Creating a View within a CardView?

I want to create a

View
within a
CardView
. All it would be is a grey view that covers part of the
CardView
. If you see inside the card view on this image, you can see this grey view that is right in between the person's photo and right under his or her name here shown here:

enter image description here

I have tried to mimic this as shown below but I am a little confused. I have tried to add a
View
that is grey but for one thing,
View
will not extend to the entire
CardView
due to the fact that I have a
android:layout_margin="16dp"
declared for the nested
RelativeLayout
within the
CardView
. Secondly, I would prefer not to hard code the height of the
CardView
, but when try to put something like
android:layout_height="match_parent"
, the
View
doesn't even show. If anyone could point me in the right direction on how I can accomplish the grey
View
right under neath the person's name within the
CardView
that'd be great. Thanks!

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/material_color_grey_200"
xmlns:fresco="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
>

<android.support.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/cv_news_feed"
android:minHeight="100dp"
card_view:cardElevation="2dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="5dp"
>

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
>

<TextView
android:textColor="@color/black"
android:layout_alignParentTop="true"
android:id="@+id/txt_post_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:ellipsize="end"
android:paddingRight="80dp"
android:maxLines="2"
android:fontFamily="sans-serif-medium" />


<TextView
android:layout_alignParentTop="true"
android:layout_alignParentRight="true"
android:id="@+id/txt_timestamp"
android:layout_marginTop="4dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:textColor="@color/material_color_grey_400"
android:layout_marginLeft="8dp"
android:textSize="14sp" />


<TextView
android:layout_below="@id/txt_post_title"
android:id="@+id/txt_statusMsg"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif"
android:ellipsize="end"
android:maxLines="3"
android:textSize="16sp" />


<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/poster_profile_photo"
android:layout_width="50dp"
android:layout_height="50dp"
fresco:placeholderImageScaleType="centerCrop"
fresco:placeholderImage="@mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="false"
fresco:roundingBorderWidth="1dp"
android:layout_alignParentLeft="true"
android:layout_marginRight="8dp"
android:layout_marginTop="16dp"
android:layout_below="@id/txt_statusMsg"
/>

<TextView
android:layout_below="@id/txt_statusMsg"
android:layout_toRightOf="@id/poster_profile_photo"
android:id="@+id/txt_name"
android:ellipsize="end"
android:maxLines="1"
android:textSize="16sp"
android:layout_marginTop="16dp"
android:textColor="@color/colorPrimary"
android:layout_width="wrap_content"
android:maxWidth="125dp"
android:layout_height="wrap_content" />

<View
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="@color/material_color_grey_200"
android:layout_below="@id/txt_name"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/privacy_status"
android:paddingTop="8dp"
android:paddingLeft="8dp"
android:fontFamily="sans-serif"
android:layout_toRightOf="@id/txt_name"
/>

<TextView
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:fontFamily="sans-serif"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:id="@+id/num_comments" />

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/commenter_photo_one"
android:layout_width="30dp"
android:layout_height="30dp"
fresco:placeholderImageScaleType="centerCrop"
fresco:placeholderImage="@mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="false"
fresco:roundingBorderWidth="1dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@id/num_comments"
/>

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/commenter_photo_two"
android:layout_width="30dp"
android:layout_height="30dp"
fresco:placeholderImageScaleType="centerCrop"
fresco:placeholderImage="@mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="false"
fresco:roundingBorderWidth="1dp"
android:layout_alignParentBottom="true"
android:layout_marginRight="20dp"
android:layout_toLeftOf="@id/num_comments"
/>

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/commenter_photo_three"
android:layout_width="30dp"
android:layout_height="30dp"
fresco:placeholderImageScaleType="centerCrop"
fresco:placeholderImage="@mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="false"
fresco:roundingBorderWidth="1dp"
android:layout_marginRight="40dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@id/num_comments"
/>

<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/commenter_photo_four"
android:layout_width="30dp"
android:layout_height="30dp"
fresco:placeholderImageScaleType="centerCrop"
fresco:placeholderImage="@mipmap/blank_prof_pic"
fresco:roundedCornerRadius="5dp"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="false"
fresco:roundingBorderWidth="1dp"
android:layout_marginRight="60dp"
android:layout_alignParentBottom="true"
android:layout_toLeftOf="@id/num_comments"
/>

</RelativeLayout>

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

</LinearLayout>

Answer

There you go. Change the colors back i replaced them. The parent is wrap_content, but the footer height must be hard coded, or either the elements size in it, with margins top for the images. Also i used the images in the bottom that you already defined. The text is on the right not the left of the images

<?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"
    xmlns:fresco="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="5dp"
    card_view:cardElevation="2dp">

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

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


            <TextView
                android:id="@+id/txt_post_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:ellipsize="end"
                android:fontFamily="sans-serif-medium"
                android:maxLines="2"
                android:paddingRight="80dp"
                android:textColor="#000"
                android:textSize="20sp"/>

            <TextView
                android:id="@+id/txt_timestamp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentTop="true"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:layout_marginTop="4dp"
                android:fontFamily="sans-serif"
                android:textColor="#99000000"
                android:textSize="14sp"/>


            <TextView
                android:id="@+id/txt_statusMsg"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/txt_post_title"
                android:layout_marginTop="8dp"
                android:ellipsize="end"
                android:fontFamily="sans-serif"
                android:maxLines="3"
                android:textSize="16sp"/>

        </RelativeLayout>

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="88dp">

            <TextView
                android:id="@+id/txt_name"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:layout_toRightOf="@+id/poster_profile_photo"
                android:layout_toEndOf="@+id/poster_profile_photo"
                android:ellipsize="end"
                android:maxLines="1"
                android:maxWidth="125dp"
                android:textColor="@color/colorPrimary"
                android:textSize="16sp"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@id/txt_name"
                android:background="#33000000"/>

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@id/poster_profile_photo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginRight="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginTop="16dp"
                android:layout_marginLeft="16dp"
                android:layout_marginStart="16dp"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                />


            <TextView
                android:id="@+id/privacy_status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/txt_name"
                android:layout_toEndOf="@id/txt_name"
                android:fontFamily="sans-serif"
                android:paddingLeft="8dp"
                android:paddingTop="8dp"
                />

            <TextView
                android:id="@+id/num_comments"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="8dp"
                android:layout_marginStart="8dp"
                android:fontFamily="sans-serif"
                fresco:text="asdasd"
                android:layout_marginBottom="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginEnd="8dp"/>

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_one"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_two"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="20dp"
                android:layout_marginEnd="20dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_three"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="40dp"
                android:layout_marginEnd="40dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

            <com.facebook.drawee.view.SimpleDraweeView
                android:id="@+id/commenter_photo_four"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentBottom="true"
                android:layout_marginRight="60dp"
                android:layout_marginEnd="60dp"
                android:layout_toLeftOf="@id/num_comments"
                android:layout_toStartOf="@id/num_comments"
                fresco:placeholderImage="@mipmap/blank_prof_pic"
                fresco:placeholderImageScaleType="centerCrop"
                fresco:roundBottomLeft="false"
                fresco:roundBottomRight="false"
                fresco:roundedCornerRadius="5dp"
                fresco:roundingBorderWidth="1dp"
                android:layout_marginBottom="8dp"
                />

        </RelativeLayout>

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