WhatsApp-like layout for multi-line EditText and buttons next to it

Question

I am new to this and completely new to Android programming.

I am trying to make a layout like in WhatsApp chat action. Therefore, I want to achieve the same layout and behavior as for EditText and the buttons next to it. This means the left button for emoticons and the EditText in the middle and the button to the right of it to send text.

In WhatsApp, when EditText expands its size (multi-line), the buttons remain at the bottom. But it seems that this is not what is at the bottom of the parent view, because the buttons used to be EditText oriented.

I tried very hard to put the three views in the TableLayout row. Or just using RelativeLayout. But none of this works properly.

Can someone show me how to achieve this? I can provide my XML, but ... well ... this is clearly not 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 new to android, you should try using Linear Layout for the 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> 

Answer 2

This is great, but the multi-line edit text box disappears to the very top. Do you have any tips for this? If I use a relative arrangement instead of a linear one, it works, but there is a problem that it only shows 4 lines.

Answer 3

You can use this library. These libraries can provide you with WhatApp type Edittext.