Stuck with a Android layout

Question

This is how my layout looks. And the respective code for the same is given below.

    <?xml version="1.0" encoding="utf-8"?>


<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:layout_height="280dp"
    card_view:cardElevation="8dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"


        android:gravity="bottom">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="Small Text"
            android:id="@+id/postTime"
            android:layout_above="@+id/linearLayout"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="15dp"
            android:layout_marginBottom="14dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="0"
            android:id="@+id/score"
            android:layout_marginEnd="20dp"
            android:layout_alignParentTop="true"
            android:layout_alignEnd="@+id/postTime"
            android:layout_marginTop="34dp" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:id="@+id/postText"
            android:layout_marginLeft="20dp"
            android:gravity="center"
            android:layout_alignBottom="@+id/postTime"
            android:layout_alignParentLeft="true"
            android:layout_toStartOf="@+id/likes"

            android:layout_alignTop="@+id/score" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:text="0 likes"
            android:id="@+id/likes"

            android:layout_marginTop="19dp"
            android:layout_below="@+id/score"
            android:layout_alignEnd="@+id/postTime" />

        <LinearLayout android:layout_alignParentBottom="true"
            android:layout_marginBottom="6dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:id="@+id/linearLayout">

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/plusTwoButton"
                android:src="@drawable/fab_shadow_mini"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/button_border"
                />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/plusOneButton"
                android:layout_marginBottom="5dp"
                android:src="@drawable/fab_shadow_mini"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:background="@drawable/button_border"
                />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/minusOneButton"
                android:src="@drawable/fab_shadow_mini"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="8dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/button_border"
                />



            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/minusTwoButton"
                android:src="@drawable/fab_shadow_mini"
                android:layout_marginLeft="8dp"
                android:layout_marginRight="20dp"
                android:layout_marginBottom="5dp"
                android:background="@drawable/button_border"
                />



        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/coName"

            android:layout_marginLeft="15dp"
            android:layout_marginTop="5dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentLeft="true" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:id="@+id/deName"
            android:layout_marginTop="5dp"
            android:layout_alignBottom="@+id/coname"
            android:layout_toEndOf="@+id/coname"
            android:layout_marginStart="29dp" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/deleteButton"
            android:layout_alignBottom="@+id/dename"
            android:layout_alignRight="@+id/likes"
            android:layout_alignEnd="@+id/likes"
            android:background="@android:color/transparent"
            android:src="@drawable/ic_delete_black_18dp" />

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

This layout is fine until the "postText" view's character count is under a certain limit (140). Now I want to accommodate more text to the same layout. Therefore I tried setting the height of the cardview and relative layouts to wrapcontent and setting minHeight on relative layout. As given here .

<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
card_view:cardElevation="8dp"
card_view:cardUseCompatPadding="true">

<RelativeLayout
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="280dp"

     >

Doing this, I get the below result, the postTime and postText views are getting lost. How do I debug this? My goal is to make the cardview grow as the size of the text in postText textview.

Update :

The image showing two cards with texts that exceed the textview and that which is smaller than the textview.

Answer 1

Try this XML layout the CardView will grow with respect to the content Area

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardElevation="8dp"
    card_view:cardUseCompatPadding="true">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    <!-- Layout for text body with right side information-->
    <RelativeLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:text="Body Text"
            android:textSize="25sp"
            android:gravity="center"
            android:id="@+id/textbody"
            android:layout_alignParentLeft="true"
            android:layout_toLeftOf="@+id/cardInfo"
            android:minHeight="150dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <RelativeLayout
            android:id="@+id/cardInfo"
            android:orientation="vertical"
            android:layout_alignParentRight="true"
            android:layout_alignTop="@+id/textbody"
            android:layout_alignBottom="@+id/textbody"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            >
            <LinearLayout
                android:layout_alignRight="@+id/time"
                android:layout_alignLeft="@+id/time"
                android:orientation="vertical"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
                <ImageView
                    android:layout_gravity="right"
                    android:layout_width="20dp"
                    android:layout_height="30dp"
                    android:background="#444"/>
                <TextView
                    android:text="0"
                    android:textSize="30sp"
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
                <TextView
                    android:text="0 likes"
                    android:textSize="20sp"
                    android:gravity="center"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content" />
            </LinearLayout>
            <TextView
                android:id="@+id/time"
                android:layout_alignParentBottom="true"
                android:text="in 7 minutes"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>
    </RelativeLayout>

    <!-- Layout for bottom imageVies -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageButton
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:id="@+id/plusTwoButton"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="5dp"
            android:background="#444"
            />

        <ImageButton
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:id="@+id/plusOneButton"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:background="#444"
            />

        <ImageButton
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:id="@+id/minusOneButton"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="5dp"
            android:background="#444"
            />



        <ImageButton
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:id="@+id/minusTwoButton"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="5dp"
            android:background="#444"
            />
    </LinearLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 2

Alright, so. I think I've cured your layout. Unfortunately, this makes an overly-complex, nested layout structure, but it should work for what you want to do.

Basically, you will want a vertical, linear layout to nest an outer, relative layout container and the bottom boxes. Then you will create a Linear layout within that and the post text. This is complicated to explain, so I'll just show you the structure. Note, I do not have CardLayouts, but this should work with minor tweaks.

I decided on this sort of nesting as you will want your post text area to grow with size of your left-hand things as well. Either your post text or this side container may be the one defining the size of the card, thus you want to account for this and let the bottom layer be "pushed down". This is best done by thinking about the areas in sections.

So we can see that the purple and blue sections should be contained in one area, probably a linear layout. The purple area itself has multiple containers that need to be accounted for, so we can divy it up into two sections, the main content are and the left side. So on and so forth.

I hope this helps!

<LinearLayout
    android:orientation="vertical"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_gravity="center"
    android:layout_width="match_parent"
    android:elevation="8dp"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/relative"
        android:orientation="horizontal"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RelativeLayout
            android:id="@+id/postText_container"
            android:layout_alignParentLeft="true"
            android:layout_toStartOf="@+id/text_container"
            android:layout_width="wrap_content"
            android:gravity="center"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:id="@+id/postText"
                android:layout_marginLeft="20dp"
                android:text="bluh lbuh"/>
        </RelativeLayout>


        <LinearLayout
            android:orientation="vertical"
            android:id="@+id/text_container"
            android:layout_alignParentTop="true"
            android:layout_alignParentEnd="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="0 likes"
                android:id="@+id/likes"
                android:layout_marginTop="19dp"
                android:layout_below="@+id/score"
                android:layout_alignEnd="@+id/postTime" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/coName"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="5dp"
                android:layout_alignParentTop="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:id="@+id/deName"
                android:layout_marginTop="5dp"
                android:layout_alignBottom="@+id/coName"
                android:layout_toEndOf="@+id/coName"
                android:layout_marginStart="29dp" />

            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/deleteButton"
                android:layout_alignBottom="@+id/deName"
                android:layout_alignRight="@+id/likes"
                android:layout_alignEnd="@+id/likes"
                android:background="@android:color/transparent" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Small Text"
                android:id="@+id/postTime"
                android:layout_alignParentBottom="true"
                android:layout_alignParentEnd="true"
                android:layout_marginEnd="15dp"
                android:layout_marginBottom="14dp" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="0"
                android:id="@+id/score"
                android:layout_marginEnd="20dp"
                android:layout_alignParentTop="true"
                android:layout_alignEnd="@+id/postTime"
                android:layout_marginTop="34dp" />
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_marginBottom="6dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/linearLayout">

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/plusTwoButton"
            android:layout_marginLeft="20dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="5dp"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/plusOneButton"
            android:layout_marginBottom="5dp"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/minusOneButton"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="8dp"
            android:layout_marginBottom="5dp"
            />



        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/minusTwoButton"
            android:layout_marginLeft="8dp"
            android:layout_marginRight="20dp"
            android:layout_marginBottom="5dp"
            />



    </LinearLayout>
</LinearLayout>

This is what the layout renders (Again keeping in mind I do not have all the support libraries right now, thus do not have the CardLayout. May have also messed up overall how things should be positioned when I moved everything into a LinearLayout container. So you'll have to reposition those.):