Android: How to set EditText and Button to same height?

Question

I want to make the EditText and the OK button same height, but always got the EditText slightly shorter than the Button.

I googled and tried the following way without succeed, nothing changed:

1. set both the EditText and Button to same height in pixel
2. wrap EditText and Button into a RelativeLayout. Set the height of the RelativeLayout and set EditText and Button both to fillparent in height
3. set alignTop and alignBottom on the Button

The theme is: android:theme="@android:style/Theme.NoTitleBar.Fullscreen

Could someone please help me on this? Thanks!

Here is the xml:

<RelativeLayout android:id="@+id/login_layout_ipAddr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#CEE6F0"
        android:visibility="invisible">

        <RelativeLayout android:id="@+id/login_layout_inner_ipAddr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <EditText android:id="@+id/login_text_ipAddr"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:inputType="text"
                android:textSize="5pt"
                android:hint="@string/login_text_ipAddr" />

            <Button android:id="@+id/login_btn_ipAddr"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:background="#00ABDF"
                android:textColor="#FFFFFF"
                android:text="@string/login_btn_ipAddr"
                android:onClick="updateIPaddr"/>

        </RelativeLayout>


    </RelativeLayout>

Answer 1

To create a button with fixed height and width, you can give values in both px or in dp.

giving values in dp is more convenient , because android automatically scale the height and width in ldpi,mdpi and hdpi devices.

<Button
 android:layout_width="100dp"
 android:layout_height="50dp"     
 android:text="Click" />

Answer 2

I have correct your code so try this one...

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:id="@+id/login_layout_ipAddr"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="#CEE6F0"
android:visibility="invisible">

<LinearLayout
    android:id="@+id/login_layout_inner_ipAddr"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:orientation="horizontal"
    android:weightSum="2">

    <EditText
        android:id="@+id/login_text_ipAddr"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1.8"
        android:inputType="text"
        android:textSize="5pt"/>

    <Button
        android:id="@+id/login_btn_ipAddr"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="0.2"
        android:background="#00ABDF"
        android:textColor="#FFFFFF"/>
</LinearLayout>

Answer 3

you can put both the edit text and the button in a TableRow and control their space with weight, it would make this process easier

Answer 4

Try to use LinearLayout instead on RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_centerInParent="true">

        <LinearLayout
            android:id="@+id/login_layout_inner_ipAddr"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="#CEE6F0"
            android:weightSum="6" >

            <EditText
                android:id="@+id/login_text_ipAddr"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="5"
                android:hint="@string/login_text_ipAddr"
                android:inputType="text"
                android:textSize="5pt" />

            <Button
                android:id="@+id/login_btn_ipAddr"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:background="#00ABDF"
                android:onClick="updateIPaddr"
                android:text="@string/login_btn_ipAddr"
                android:textColor="#FFFFFF" />
        </LinearLayout>
   </LinearLayout>

Answer 5

Set padding to the button.

<Button android:id="@+id/login_btn_ipAddr"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:background="#00ABDF"
            android:textColor="#FFFFFF"
            android:text="@string/login_btn_ipAddr"
            android:onClick="updateIPaddr"
            android:paddingLeft="5dp"
            android:paddingRight="5dp"/>

Answer 6

Finally, I solved the problem by adding "android:background="#FFFFFF"" to the EditText element. But I've no idea what is the causes of such a behavior. I'd really appreciate if someone could shed some light on this.

No background:

With background:

Answer 7

Use following code :

<RelativeLayout android:id="@+id/login_layout_ipAddr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#CEE6F0"
        android:visibility="invisible">
        <RelativeLayout android:id="@+id/login_layout_inner_ipAddr"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <EditText android:id="@+id/login_text_ipAddr"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:inputType="text"
                android:textSize="5pt"
                android:drawableRight="@drawable/your_Button_image"
                android:hint="@string/login_text_ipAddr" />
        </RelativeLayout>
    </RelativeLayout>

Answer 8

The default background of EditText has short padding. Buttons have these padding too! If you want to have an exact alignment, you can set your custom drawable background to each one. The most simple way is to set a solid color for the background.