WhatsApp-like layout for multiline EditText and Buttons next to it

Question

am new to this and quite new to Android programming.

I am trying to make a layout like in the WhatsApp chat activity. So what I want to achieve is to get the same layout and behavior as for the EditText and the Buttons next to it. This means a left Button for smileys and EditText in the middle and a Button to the right of it for sending the text.

In WhatsApp when the EditText expands its size (multiline) the buttons stay at the bottom. But it seems not to be the bottom of the parent view cause the Buttons have been centered to the EditText before.

I tried a lot like putting the three views in a TableLayout's row. Or just using a RelativeLayout. But nothing of it works properly.

Can anyone show me how to achieve this? I can provide my XML but....well...it's obviously pretty bad :D

Thanks in advance!

<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">

<ListView
    android:id="@+id/messages"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:layout_above="@+id/footer_section">
</ListView>

<LinearLayout
    android:id="@+id/footer_section"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:minHeight="48dp">

        <ImageView
            android:id="@+id/emoticons_button"
            android:layout_height="match_parent"
            android:layout_width="48dp"
            />

        <EditText
            android:id="@+id/message_text"
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:layout_weight="1"
            android:inputType="textMultiLine"
            android:minLines="1"
            android:maxLines="4"/>

        <ImageView
            android:id="@+id/send_button"
            android:layout_height="match_parent"
            android:layout_width="48dp"
            android:layout_gravity="center_vertical"/>

</LinearLayout>

Answer 1

Edit

<ListView
    android:id="@+id/messages"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/footer_section"
    android:layout_alignParentTop="true" >
</ListView>

<LinearLayout
    android:id="@+id/footer_section"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" 
    android:background="#eeeeee">

    <ImageView
        android:id="@+id/emoticons_button"
        android:layout_width="48dp"
        android:layout_height="match_parent" />

    <EditText
        android:id="@+id/message_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="vertical"
        android:fadeScrollbars="false"
        android:layout_weight="1"
        android:inputType="textMultiLine" 
        android:maxLines="4"
        android:minLines="1"
        android:textColor="@android:color/black" />

    <ImageView
        android:id="@+id/send_button"
        android:layout_width="48dp"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical" />
</LinearLayout>

As you said you are newbie in android, you should try using Linear Layout for layout you want to achieve.

Try below xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:weightSum="1" >

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="1dip"
    android:gravity="center_vertical"
    android:orientation="horizontal" >

    <ImageButton
        android:id="@+id/btn_emoticon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_emoticon" />

    <EditText
        android:id="@+id/chat_text"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1.0"
        android:paddingLeft="8dp"
        android:paddingRight="6dp" />

    <ImageButton
        android:id="@+id/btn_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_send_grey" />
</LinearLayout>
</LinearLayout>