1

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

enter image description here

    <?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.

enter image description here

Update :

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

enter image description here

55597
  • 2,033
  • 1
  • 21
  • 40
  • 1
    http://stackoverflow.com/questions/9399612/create-a-chat-bubble-in-android use a 9patch as container inside the card – Robert Rowntree Jun 25 '15 at 14:37
  • Thanks for the pointer. can you also look into my question about parse? http://stackoverflow.com/questions/31049413/parse-com-saveallinbackground-doesnt-work-inside-deleteallinbackground – 55597 Jun 25 '15 at 14:45
  • @RobertRowntree The issue i have still persists even when I set a 9 patch background to the card/relative layout/textview. Why do you think setting a 9 patch will be the solution for my issue. Can you explain? – 55597 Jun 25 '15 at 15:48
  • Can you post what < 140 characters look like? Additionally, can you enable `Show Layout Bounds` and post pictures of what that looks like for > and < 140 characters. – Ifrit Jun 25 '15 at 16:01
  • @JaySoyer The first pictures shows what you are asking for. – 55597 Jun 25 '15 at 16:20
  • How is that incorrect from what you want then? – Ifrit Jun 25 '15 at 16:32
  • @JaySoyer Apologies. There was a formatting issue that hid a part of the code. Kindly check now. The first picture shows the layout with a fixed height. When my textview has a longer text, the content is not completely shown. Therefore I tried playing with the layout height parameters and ended up with the result in second picture. – 55597 Jun 25 '15 at 16:36
  • IMO - you needed expanding textArea inside card and in a way, its similar to how a 9 patch works with text in the chat-bubble example. if there is no analog then sorry for that – Robert Rowntree Jun 25 '15 at 16:44
  • @JaySoyer Kindly check the updated images. – 55597 Jun 25 '15 at 17:07
  • @55597 Why can't you simply use scroll view in the text. – Mayank Jun 25 '15 at 17:22
  • @Mayank its a design decision to go against scrollview. – 55597 Jun 25 '15 at 17:23
  • @55597 The card wont expand just because you increased the text from, and its not limited to 140 chars. The thing is your card view's height is set to 280dp. Secondly two mistakes you used 'coname' and 'dename' instead of 'coName' and 'deName' – Mayank Jun 25 '15 at 17:46
  • @Mayank the first bit of code is my working version. The second bit is what I am trying to make work. I have changed the height to wrapcontent. for the card view. Hence I expect it to grow accordingly. – 55597 Jun 25 '15 at 17:49
  • @55597 Tell me if it works. Cheers! – Mayank Jun 25 '15 at 17:51
  • Is this CardView layout embedded with another layout? Or is this literally the entire screen of an Activity? – Ifrit Jun 28 '15 at 19:25

2 Answers2

3

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>

enter image description here

enter image description here

Jitty Aandyan
  • 1,994
  • 1
  • 13
  • 12
  • Will try and let you know in a couple of days. Thanks for taking the effort. – 55597 Jun 29 '15 at 18:09
  • looks like this will work for me. Though, I need to change the linear layout of the cardview to a relative layout and make changes. I am awarding the bounty, please clarify any further queries if I have any about this in the future. – 55597 Jul 01 '15 at 18:20
0

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.

An image of the 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.):

Picture of code on portrait phone.

Rose R.
  • 141
  • 11