CODEWITHSUNDEEP
androidandroid-layoutviewandroid-cardview
user1871869
user1871869

Reputation: 3367

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>

Upvotes: 0

Views: 328

Answers (1)

Drilon Blakqori
Drilon Blakqori

Reputation: 2826

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>

Upvotes: 1

Related Questions