Android - How to align editText and submit button bottom?

android android-layout android-xml

10,378

Solution 1

Try this one

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

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
    </WebView>

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

        <EditText
            android:id="@+id/edit_text"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="Type your message" >
        </EditText>

        <Button
            android:id="@+id/button"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Send" >
        </Button>
    </LinearLayout>

</RelativeLayout>

Solution 2

There are many ways to make it work:

Linear Layout

Display the elements in the order you added them

  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout_gravity="center"
      android:gravity="center"
      android:orientation="vertical">

  <WebView
      android:id="@+id/webview"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight=".5"></WebView>

 <LinearLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content">

 <EditText
      android:id="@+id/edit_text"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:hint="Type your message"></EditText>

  <Button
     android:id="@+id/button"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Send"></Button>

  </LinearLayout>


</LinearLayout>

enter image description here

Relative Layout

Display elements in relative to other components

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

 <WebView
     android:layout_width="match_parent"
     android:layout_height="400dip"
     android:id="@+id/webview" ></WebView>

<EditText
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:layout_below="@+id/webview"
     android:id="@+id/edit_text"
     android:layout_centerInParent="true"
     android:hint="Type your message" ></EditText>

<Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:id="@+id/button"
     android:layout_centerInParent="true"
     android:layout_toRightOf="@+id/edit_text"
     android:layout_below="@+id/webview"
     android:text="Send"></Button>


</RelativeLayout>

enter image description here

Solution 3

Use this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:orientation="vertical" >

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight=".9" >
</WebView>

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

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:hint="Type your message" >
    </EditText>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Send" >
    </Button>
</LinearLayout>

</LinearLayout>

Solution 4

You can try nesting a linear layout in a relative layout as shown below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/edit_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:hint="Type your message" >
        </EditText>

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Send" >
        </Button>
    </LinearLayout>

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/container"  >
    </WebView>

</RelativeLayout>

If you need the EditText and Button in one line, you would have to use orientation: horizontal for LinearLayout.

Solution 5

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

    <WebView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/webview" />

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

        <EditText
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/edit_text"
            android:hint="Type your message" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button"
            android:text="Send"/>
    </LinearLayout>
</LinearLayout>

View more solutions

10,378

Author by

Lara

Full Stack Developer.

Updated on July 11, 2022

Comments

Lara almost 2 years

I read some articles and some tutorials about layout but I didn't get yet how it works... I have the following code:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:layout_gravity="center"
android:orientation="vertical">

<EditText
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/edit_text"
    android:hint="Type your message" ></EditText>

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/button"
    android:text="Send"></Button>

<WebView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight=".5"
    android:id="@+id/webview" ></WebView>
</LinearLayout>

I would like to align my editText and send button on bottom and my webview above.. any ideas how can I do it?

Aman Singh over 9 years

wrong answer please correct before you get downvoted.
Dan Snow over 9 years

Where is the problem ?
Aman Singh over 9 years

relative layout does not contain orientation.
Simon Marquis over 9 years

This could also be achieved with a RelativeLayout as root and without the second LinearLayout
Lara over 9 years

+1 and correct answer because that was the only that really works perfectly. Thank you!
Lara over 9 years

By the way, just one question, the editText and the button have 50% of width, there is a possibility to change it? set the button as 10% of width? Thank you!
MSA over 9 years

Sorry, I wasn't careful when I read you requirement, I modified the code and images for other users :) Glad you could found your answer.
MSA over 9 years

Add to EditText android:layout_weight="0.9" and to Button android:layout_weight="0.1" in the linear layout
Aniruddha over 9 years

@Lara Glad it helped you. Yeah, you can make button as 10% of width, you just need to play with weight attribute. The answer given by Sebastian works perfect. Happy coding :)
Aniruddha over 9 years

@DanSnow weight attribute is only for LinearLayout. So better change it soon.
MysticMagicϡ over 9 years

@Aniruddha I have mentioned: > "If you need the EditText and Button in one line, you would have to use orientation: horizontal for LinearLayout." in answer. Plus OP didn't mention that he wants the EditText and Button in same line.