Scaling RelativeLayout according to size of child TextView's content

Question

I have a messaging activity in which I want the user to be able to type into the messageField and have it dynamically grow as the text flows into the next line. I also need a limit on how far it should grow as the user should still see the last few messages that were sent. I don't know where to start. Any direction would be appreciated.

Relevant content of my chat_activity.xml: (This all presides in a RelativeLayout)

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_above="@+id/interactionHolder"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:paddingBottom="10dp"
    android:paddingTop="10dp"
    android:layout_below="@+id/headerContainer"
    android:id="@+id/contentFrameLayout">

    <ListView
        android:id="@+id/messageListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal"

        android:transcriptMode="disabled"
        android:smoothScrollbar="false"
        android:dividerHeight="5dp"
        android:divider="@null"
        android:drawSelectorOnTop="false"
        android:listSelector="@android:color/transparent"
        android:cacheColorHint="#00000000" />

</FrameLayout>

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:id="@+id/interactionHolder"
    android:layout_alignParentBottom="true"
    android:visibility="visible">

    <RelativeLayout
        android:id="@+id/textfieldcontainer"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentRight="false"
        android:layout_gravity="bottom"
        android:alignmentMode="alignMargins"
        android:background="#ff9d9d9d"
        >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/photoButton"
            android:scaleType="centerCrop"
            android:src="@android:drawable/ic_menu_camera"
            android:layout_alignParentLeft="true"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:contentDescription="@string/upload" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/voiceButton"
            android:layout_toRightOf="@+id/photoButton"
            android:focusable="false"
            android:src="@android:drawable/ic_btn_speak_now"
            android:scaleType="centerCrop"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:contentDescription="@string/voicenote" />

        <EditText
            android:id="@+id/messageField"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:ems="10"
            android:gravity="left|center"
            android:inputType="textMultiLine"
            android:background="@android:drawable/editbox_background_normal"
            android:textColor="#ff000000"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/voiceButton"
            android:layout_toEndOf="@+id/voiceButton"
            android:layout_toLeftOf="@+id/sendButton"
            android:layout_toStartOf="@+id/sendButton" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sendButton"
            android:src="@android:drawable/ic_menu_send"
            android:layout_alignParentRight="true"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:contentDescription="@string/sendbutton"
            android:clickable="true" />

    </RelativeLayout>
</RelativeLayout>

Answer 1

You can limit the user input in your EditText using following two xml properties of the it:

android:maxLines="[int]" // No. of lines
android:maxLength="[int]" // No. of characters

The scaling of this widget will also be adjusted accordingly as user input comes.

[EDIT]

To make the RelativeLayout expand along with the EdditText (limited to some extent), you can try changing your layout params as follows:

<!-- This was orininally RelativeLayout, changing this to FrameLayout for performance reasons -->
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" <!-- change here -->
    android:id="@+id/interactionHolder"
    android:layout_alignParentBottom="true"
    android:visibility="visible">

    <RelativeLayout
        android:id="@+id/textfieldcontainer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" <!-- change here -->
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="false"
        android:layout_alignParentRight="false"
        android:layout_gravity="bottom"
        android:alignmentMode="alignMargins"
        android:background="#ff9d9d9d"
        >

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/photoButton"
            android:scaleType="centerCrop"
            android:src="@android:drawable/ic_menu_camera"
            android:layout_alignParentLeft="true"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:layout_marginLeft="5dp"
            android:contentDescription="@string/upload" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/voiceButton"
            android:layout_toRightOf="@+id/photoButton"
            android:focusable="false"
            android:src="@android:drawable/ic_btn_speak_now"
            android:scaleType="centerCrop"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:contentDescription="@string/voicenote" />

        <EditText
            android:id="@+id/messageField"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" <!-- change here -->
            android:maxLines="4"                 <!-- change here -->
            android:ems="10"
            android:gravity="left|center"
            android:inputType="textMultiLine"
            android:background="@android:drawable/editbox_background_normal"
            android:textColor="#ff000000"
            android:layout_centerVertical="true"
            android:layout_toRightOf="@+id/voiceButton"
            android:layout_toEndOf="@+id/voiceButton"
            android:layout_toLeftOf="@+id/sendButton"
            android:layout_toStartOf="@+id/sendButton" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/sendButton"
            android:src="@android:drawable/ic_menu_send"
            android:layout_alignParentRight="true"
            android:background="#ff9d9d9d"
            android:layout_centerVertical="true"
            android:layout_marginRight="5dp"
            android:contentDescription="@string/sendbutton"
            android:clickable="true" />

    </RelativeLayout>
</FrameLayout>