how can i create EditText like instagram with send button inside EditText

Question

how can I create EditText like Instagram's chat activity? EditText with send button inside in it. i tried to create that using ImageButton but it doesn't work quite well as the Text goes under image whenever i type. and if set limit of words per line it doesn't work quite well too. so any help please, it's kind of stuck in it. I'm kind of new to android development so please help out the fresher and thanks a lot in advance.

editText

<android.support.v7.widget.AppCompatEditText
            android:id="@+id/itemEditText_id"
            android:layout_width="match_parent"
            android:layout_height="70dp"
            android:layout_marginTop="8dp"
            android:layout_marginStart="2dp"
            android:layout_marginEnd="4dp"
            android:lines="2"
            android:scrollHorizontally="false"
            android:maxLength="69"
            android:scrollbars="vertical"
            android:background="@drawable/round_border_edit_text"
            android:hint="Go ahead \nSend messge"
            android:inputType="textMultiLine|textLongMessage"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2"
            android:maxLines="2"
            android:minLines="1"
            >

ImageButoon

 <android.support.v7.widget.AppCompatImageButton
            android:id="@+id/itemSendButton_id"
            android:layout_width="25dp"
            android:layout_height="20dp"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="11dp"
            android:background="@color/colorFacebookBtnText"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_send" />

use relative layout , give background style and insert both edittext and button. — Hemant Parmar, May 16 '18 at 11:23

score 0 · Answer 1 · edited May 23 '18 at 13:09

Try this and your problem is solved:

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

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/itemEditText_id"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="8dp"
        android:layout_weight="1"
        android:background="@drawable/round_border_edit_text"
        android:hint="Go ahead \nSend messge"
        android:inputType="textMultiLine|textLongMessage"
        android:lines="2"
        android:maxLength="69"
        android:maxLines="2"
        android:minLines="1"
        android:scrollHorizontally="false"
        android:scrollbars="vertical"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2" />


    <android.support.v7.widget.AppCompatImageButton
        android:id="@+id/itemSendButton_id"
        android:layout_width="25dp"
        android:layout_height="20dp"
        android:layout_gravity="center_vertical"
        android:background="@color/colorFacebookBtnText"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_send" />
</LinearLayout>

Just put both EditText and ImageView inside Linear Layout with horizontal orientation.

score 0 · Answer 2 · answered May 16 '18 at 11:27

Try this :

  <?xml version="1.0" encoding="utf-8"?>
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
  android:layout_height="wrap_content" >

<android.support.v7.widget.AppCompatEditText
        android:id="@+id/itemEditText_id"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_marginTop="8dp"
        android:layout_marginStart="2dp"
        android:layout_marginEnd="4dp"
        android:lines="2"
        android:scrollHorizontally="false"
        android:maxLength="69"
        android:scrollbars="vertical"
        android:background="@drawable/round_border_edit_text"
        android:hint="Go ahead \nSend messge"
        android:inputType="textMultiLine|textLongMessage"
        android:textAppearance="@style/TextAppearance.AppCompat.Body2"
        android:maxLines="2"
        android:minLines="1"
        >

<android.support.v7.widget.AppCompatImageButton
        android:id="@+id/itemSendButton_id"
        android:layout_width="25dp"
        android:layout_height="20dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="11dp"
        android:background="@color/colorFacebookBtnText"
        android:clickable="true"
        android:focusable="true"
        android:scaleType="fitCenter"
        android:src="@drawable/ic_send" />

  </RelativeLayout>

Result :

score 0 · Answer 3 · answered May 16 '18 at 11:34

I Hope this will work for you

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

   <android.support.v7.widget.AppCompatEditText
    android:id="@+id/itemEditText_id"
    android:layout_width="match_parent"
    android:layout_height="70dp"
    android:lines="2"
    android:paddingLeft="10dp"
    android:scrollHorizontally="false"
    android:maxLength="69"
    android:gravity="left|center_vertical"
    android:scrollbars="vertical"
    android:background="@drawable/round_border_edit_text"
    android:hint="Go ahead \nSend messge"
    android:inputType="textMultiLine|textLongMessage"
    android:textAppearance="@style/TextAppearance.AppCompat.Body2"
    android:maxLines="2"
    android:minLines="1"/>


   <android.support.v7.widget.AppCompatImageButton
    android:id="@+id/itemSendButton_id"
    android:layout_width="25dp"
    android:layout_height="20dp"
    android:layout_gravity="center_vertical|right"
    android:background="@color/colorFacebookBtnText"
    android:clickable="true"
    android:layout_marginRight="10dp"
    android:focusable="true"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher" />


  </FrameLayout>

score 0 · Answer 4 · answered May 18 '18 at 10:50

****hey thanks all alot for your answers but i found a better solution i just needed to disappear my editText downbar which i did by giving it background as transparentColor(#00000000) and give round shape to my relative layout container instead of my editText and put image button along side of my editText. Now i don't even have to set word limit everything works fine.****

 <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/round_border_edit_text">

        <android.support.v7.widget.AppCompatEditText
            android:id="@+id/itemEditText_id"
            android:layout_width="261dp"
            android:layout_height="70dp"
            android:layout_marginEnd="4dp"
            android:layout_marginStart="2dp"
            android:layout_marginTop="8dp"
            android:background="@color/colorTransparent"
            android:hint="Go ahead \nSend messge"
            android:inputType="textMultiLine|textLongMessage"
            android:lines="2"
            android:maxLines="2"
            android:minLines="1"
            android:scrollHorizontally="false"
            android:scrollbars="vertical"
            android:textAppearance="@style/TextAppearance.AppCompat.Body2" />


        <android.support.v7.widget.AppCompatImageButton
            android:id="@+id/itemSendButton_id"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginStart="-4dp"
            android:layout_toEndOf="@+id/itemEditText_id"
            android:background="@color/colorTransparent"
            android:clickable="true"
            android:focusable="true"
            android:scaleType="centerCrop"
            android:src="@drawable/send" />

    </RelativeLayout>

****Round shape for RelativeLayout****

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <padding
        android:left="8dp"
        android:top="8dp"
        android:right="8dp"
        android:bottom="8dp"
        />

            <solid android:color="#EEEEEE"/>

            <corners android:radius="40dp" />

            <stroke
                android:width="1dp"
                android:color="@color/colorEditTextBorder"
                />


</shape>

how can i create EditText like instagram with send button inside EditText

4 Answers4