Android Layout: Comments activity similar to the Facebook app

Question

I have been looking at Facebook comment activity:

I keep wondering how do they manage to make their edittext increase in size from one single line to a maximum of 4 lines, and at the same time, the recyclerview that contains the posts also adjust upwards and reduces in size. This happens automatically when you type in the text.

I'm trying to duplicate their layout myself by doing the following but I can not display more then 2 lines. It keeps on limiting itself to the size of the "Send" arrow, but the edittext never goes over the recyclerview in my example below.

The following is my xml layout code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/like_box"
        android:text="Number of Likes goes here"
        android:maxLines="1"
        android:minLines="1"
        android:layout_margin="16dp"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider"
        android:layout_below="@+id/like_box"
        android:background="@color/half_black"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_below="@+id/divider"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/commenttext" />

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider2"
        android:layout_below="@+id/my_recycler_view"
        android:background="@color/half_black"/>


        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/commenttext"
            android:layout_toLeftOf="@+id/send"
            android:background="@null"
            android:paddingLeft="16dp"
            android:textSize="16sp"
            android:hint="Add a comment here"
            android:layout_alignTop="@+id/send"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/send"
            android:src="@drawable/ic_action_send_now"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
</RelativeLayout>

Does anyone know what the correct xml layout code is to ensure that both the edittext and recyclerview adjust upwards when text is entered? I thought it would just be something simple like setting "wrap_content" to my edittext which I have already done but it still does not adjust properly.

Anoop M's answer seems to be the closest to what I want to do but the recyclerview does not adjust properly - see image below. Imagine if the blue portion of the screen was filled with text, the edittext will end up hiding the text in the blue section when you enter more than 4 lines. The edittext just seems to go over the recyclerview. This does not happen on the facebook app, comments are fully shown as the recyclerview adjust upwards when the edittext size increases.

Answer 1

when you are defining your activity in manifest add code given below,

 <activity
android:name="com.companyname.applicationname"
android:windowSoftInputMode="adjustResize|adjustPan">

And also you can use you edit text as given below.

<EditText
    android:inputType="textMultiLine" <!-- Multiline input -->
    android:lines="8" <!-- Total Lines prior display -->
    android:minLines="6" <!-- Minimum lines -->
    android:gravity="top|left" <!-- Cursor Position -->
    android:maxLines="10" <!-- Maximum Lines -->
    android:layout_height="wrap_content" <!-- Height determined by content -->
/>

Answer 2

I suggest using a LinearLayout as the parent container. You can then achieve the desired result by applying layout_weights on all child views:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/like_box"
        android:text="Number of Likes goes here"
        android:maxLines="1"
        android:minLines="1"
        android:layout_margin="16dp"
        android:layout_weight="0"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider"
        android:background="@color/half_black"
        android:layout_weight="0"/>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="0.2dp"
        android:id="@+id/divider2"
        android:background="@color/half_black"
        android:layout_weight="0"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:orientation="horizontal">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:id="@+id/commenttext"
            android:background="@null"
            android:paddingLeft="16dp"
            android:textSize="16sp"
            android:maxLines="4"
            android:inputType="textMultiLine"
            android:hint="Add a comment here" />

        <ImageView
            android:layout_width="40dp"
            android:layout_height="40dp"
            android:id="@+id/send"
            android:src="="@drawable/ic_action_send_now"
            android:layout_weight="0" />

    </LinearLayout>

</LinearLayout>

Notable changes:

• parent container is now LinearLayout
• all child views have layout_weights assigned
• the EditText and the send button have been housed inside a horizontal LinearLayout.
• maxLines attribute of the EditText has been set to 4 as per your requirements. this way, the EditText will keep growing in height until its 4 lines tall, after which it will start to scroll. The send button will remain aligned to the first line.
• inputType="textMultiLine" has been added to the EditText to indicate that the content of this EditText can span multiple lines.
• the RecyclerView will shrink when the EditText's line-count increases and vice-versa.

Answer 3

For set the max and min lines in XML use.

android:maxlines="your choice" // in integer android:minlines="your choice" // in integer

or if you want to show text in one line use:

android:ellipsize

Answer 4

Try this out.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center">


    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="65dp"
        android:fadeScrollbars="true">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp">

            <LinearLayout
                android:id="@+id/topedittext_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="vertical">

                <!--Your Contents Goes Here-->

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Your Contents Goes Here" />

            </LinearLayout>
        </RelativeLayout>

    </ScrollView>

    <RelativeLayout
        android:id="@+id/tos_text_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp">


        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@null"
            android:gravity="center"
            android:hint="Type message"
            android:maxLines="4"
            android:minHeight="60dp"
            android:padding="7dp"
            android:singleLine="false"
            android:textColor="#88000000"
            android:textColorHint="#bdbdbd"
            android:textSize="15sp" />


    </RelativeLayout>

</RelativeLayout>

Answer 5

You need to have singleLine = false attribute set for Edit Text

<EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/commenttext"
            android:layout_toLeftOf="@+id/send"
            android:background="@null"
            android:paddingLeft="16dp"
            android:textSize="16sp"
            android:singleLine="false"
            android:hint="Add a comment here"
            android:layout_alignTop="@+id/send"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true" />