1

When I type into the EditText box, the RelativeLayout containing it does not expand. The problem is I want it to.

Here's a visual display of the problem:

enter image description here

There's about 5 lines of gibberish typed in there and you can see the 2nd to last line cut off. Up to a maximum of 5 lines should be showing, but they're not, most likely because they're inside a layout whose height is set to wrap the contents. How can I make the parent layout expand when the EditText expands?

Here is the problem xml displaying the message box you see in the picture:

<RelativeLayout
    android:id="@+id/group_chat_form"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="5dp"
    android:background="@drawable/transparent_background2" >

         <TextView 
        android:id="@+id/send_msg_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/transparent_background2"
        android:text="Send" />


    <EditText

        android:id="@+id/group_chat_input_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignBottom="@id/send_msg_button"
        android:layout_toLeftOf="@id/send_msg_button"
        android:background="#00000000"
        android:hint="Type a message..."
        android:textColorHint="#EEEEEE"
        android:inputType="textMultiLine"
        android:maxLines="5"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:shadowColor="#000000"
        android:shadowRadius="3"
        android:shadowDx="3"
        android:shadowDy="3"/> 

  </RelativeLayout>
Kacy
  • 3,330
  • 4
  • 29
  • 57
  • 1
    scrollHorizontal="false"... http://stackoverflow.com/questions/3276380/android-word-wrap-edittext-text – zgc7009 Mar 02 '15 at 20:43
  • @zgc7009 Adding that attribute to the EditText didn't do anything. – Kacy Mar 02 '15 at 20:50
  • Read the answer I linked, there is also a multiline attribute to take into account. – zgc7009 Mar 02 '15 at 20:54
  • @zgc7009 Looking at the xml I posted, I already have the multiline attribute. – Kacy Mar 02 '15 at 20:55
  • Try changing from inputType="textMultiline" to singleLine="false". I haven't ever tried doing this with a RelativeLayout, LinearLayouts allow weights which helps avoid the "wrap_content" issue since wrap_content is handled on view measure which I am not sure is remeasured when there is text input. – zgc7009 Mar 02 '15 at 20:57
  • Try to wrap the edit text inside a linearlayout with wrap content and orientation vertical – Manos Mar 02 '15 at 21:00
  • @zgc7009 I'll try it, but I don't think you understand the problem. Putting the EditText outside of this layout allows it to expand normally. It's only when I put it inside the layout above that this layout/container does not expand with it. – Kacy Mar 02 '15 at 21:01
  • I implicitly suggest using a LinearLayout as a wrapper, which @John later explicitly suggests. Just wrap it and it should solve your problem by handling the measuring for wrap_content differently than RelativeLayout does. This solves your `t's only when I put it inside the layout above that this layout/container does not expand with it` issue, or should. – zgc7009 Mar 02 '15 at 21:06
  • @John I'll try it just to see if it solves the immediate issue, but I really don't want to use a LinearLayout because it's a headache to get that same alignment I have above. To be explicit, I don't know how to keep the send button to the right of the input while keeping them both aligned to the bottom of the Layout. I could use a horizontal LinearLayout with the gravity set to bottom, but then the input box and the send button won't respect `layout_gravity="left"` and `layout_gravity="right"` due to being inside a LinearLayout with `orientation="horizontal"`. – Kacy Mar 02 '15 at 21:11
  • What if you change `android:layout_alignBottom="@id/send_msg_button"` to `android:layout_alignTop="@id/send_msg_button"`? I think that is actually where the problem is coming from. Though, you would need to move the whole `ViewGroup` up to accommodate extra lines. I don't believe `wrap_content` is to be blamed here – codeMagic Mar 02 '15 at 21:17
  • @codeMagic I'll try it to see what happens, but the reason I have that is because as the input box expands, the Send button should be at the bottom. Imagine typing 20 lines of text and then having to scroll all the way to the top to hit the send button. – Kacy Mar 02 '15 at 21:21
  • @codeMagic I forgot the EditText can only expand up to 5 lines since that's what I set the max too, but still, I do want the Send button at the bottom rather than at the top. – Kacy Mar 02 '15 at 21:27
  • Yes, that wasn't meant to completely fix everything but to see where the problem was. Yyou should just be able to put the `android:layout_alignBottom="@id/send_msg_button"` in the `TextView` instead of the `EditText`, right? Obviously changing the id there. That might not work. But there are ways around it such as moving the TV or have it disapear when typing then reappear at the bottom – codeMagic Mar 02 '15 at 21:29
  • @codeMagic I tried that a while ago and it causes a circular dependency with `android:layout_toLeftOf="@id/send_msg_button"` in the EditText. If the next thing you're going to say is, "Then move that into the TextView as well," that will cause the Send button to dynamically move from left to right as the more text is typed into the input box. The reason is because the Send button would be anchored onto the EditText which is wrapping its contents. – Kacy Mar 02 '15 at 21:33
  • You wouldn't need it in the TV since you are aligning it to the right of the parent. If that isn't going to work, I can try to look more later when I have time to actually test it before spouting off. But the main point of my initial suggestion was to show you where/why the problem was happening. – codeMagic Mar 02 '15 at 21:37
  • @codeMagic You were right, Changing the attribute to `alignTop` allows it to expand, althought I don't know why. Now to figure out how to get this send button to stay on the bottom >:| `But the main point of my initial suggestion was to show you where/why the problem was happening.`. Yeah that's what I took from it, so thank you very much. Feel free to post an answer. I'll accept it so long as no one else jumps in with an answer that doesn't break the Send button keeping to the bottom (which in that case I'll at least give you an upvote :) – Kacy Mar 02 '15 at 21:37
  • Because it is trying to expand down but there is no room for it to expand down when it is anchored to your TV. Move it below your ET and keep it to the right and move the whole thing up, profit. :) – codeMagic Mar 02 '15 at 21:38
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/72094/discussion-between-codemagic-and-kacy-raye). – codeMagic Mar 02 '15 at 21:47

1 Answers1

5

How can I make the parent layout expand when the EditText expands?

This isn't working because the EditText is anchored to the TextView with

android:layout_alignBottom="@id/send_msg_button"

The EditText is trying to expand down but it can't since it isn't allowed to go below that point.

Removing this and anchoring it to the top of the TextView will solve that issue but creates other problems with the placement of the TextView if the EditText grows too much.

I've tested some of my suggestions from comments and it seems to give what you want. You will find my example below with some changes in bg and colors just to work with my test project.

<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:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/group_chat_form"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="5dp"
    android:background="@drawable/abc_item_background_holo_dark" >

    <TextView
        android:id="@+id/send_msg_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignBottom="@id/group_chat_input_box"
        android:background="@drawable/abc_item_background_holo_light"
        android:text="Send" />


    <EditText

        android:id="@+id/group_chat_input_box"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/send_msg_button"
        android:background="#FFFFFF"
        android:hint="Type a message...Type a message...Type a message...Type a message...Type a message...Type a message...
        Type a message...Type a..."
        android:inputType="textMultiLine"
        android:maxLines="5"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:paddingTop="4dp"
        android:paddingBottom="4dp"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:shadowColor="#000000"
        android:shadowRadius="3"
        android:shadowDx="3"
        android:shadowDy="3"/>

  </RelativeLayout>

</RelativeLayout>
codeMagic
  • 44,549
  • 13
  • 77
  • 93