Blog Archive

Android place Button next to EditText on the same line

There is always a need to have an input field and button next to each other in any type of application whether its a mobile app or a web page. Say for example an user wants to create a product inquiry or search. Here is how to do it in both Linear Layout and a Relative Layout.

Android Button next to EditText in Android Linear Layout and Relative Layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <TextView android:textAppearance="?android:attr/textAppearanceMedium"
        android:id="@+id/textView1" android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Linear Layout with EditText and Button"
        android:paddingTop="15dp" />
    <LinearLayout android:layout_width="match_parent"
        android:id="@+id/linearLayout1" android:layout_height="wrap_content">
        <EditText android:layout_weight="1" android:id="@+id/editText1"
            android:layout_height="wrap_content" android:layout_width="fill_parent" 
   android:hint="you can type here ..."/>
        <Button android:id="@+id/button1" android:layout_height="wrap_content"
            android:layout_width="wrap_content" android:text="Button" />
    </LinearLayout>
    <TextView android:textAppearance="?android:attr/textAppearanceMedium"
        android:id="@+id/textView1" android:layout_height="wrap_content"
        android:layout_width="wrap_content" android:text="Relative Layout with EditText and Button"
        android:paddingTop="15dp" />
    <RelativeLayout android:layout_width="match_parent"
        android:id="@+id/relativeLayout1" android:layout_height="wrap_content">
        <Button android:id="@+id/button2" android:layout_width="wrap_content"
            android:layout_height="wrap_content" android:text="Button"
            android:layout_alignParentTop="true" android:layout_alignParentRight="true" />
        <EditText android:id="@+id/editText2" android:layout_height="wrap_content"
            android:layout_alignParentTop="true" android:layout_width="match_parent"
            android:layout_toLeftOf="@+id/button2" android:hint="you can type here ...">
        </EditText>
    </RelativeLayout>
</LinearLayout>

2 comments :

  1. Thanks!!! so much!!! it's what I looking for and what I want to do, but I couldn't do it until I've seen your blog.

    ReplyDelete