How to get a button's height to match another element's height?

Question

I want to put a button next to a EditText and I want their heights to match.

For example, from the built in Android browser:

The Go button is the same height as the EditText field. I know I could wrap both these views in a parent layout view, and set both of their heights to fill_parent, and that would make them match. However, I would like to do this without having to give the layout a static size. I would rather have the EditText take whatever height it needs based on the font size and then have the button next to it match whatever height that might be.

Is this possible with an xml layout?

Whisenant

This question needs to be updated to include the new ConstraintLayout. – Darcee

Answer 1

You will need to make the EditText wrap_content on its height and have the Button just fill_parent. You will need to have them both wrapped in a Layout parent. That way they are associated with the same Layout parent.

Try that and see how that works, if it helps let me know. If it doesn't maybe i can give you some code that will help you out.

Deterge

Thanks for the offer of help but Falmarri's answer worked perfectly so I'm all set. Thanks again. – Whisenant

Actually, after trying to do this without a wrapper view, I was unable to get the button to line up on the right side of the text properly because of the issue I described in response to Falmarri's answer. Using your method I was able to get the button sized and placed correctly, so I'll mark yours as the answer. – Whisenant

Answer 2

Presumably the EditText and the Button are inside a RelativeLayout. Set the button's layout attributes to alignTop and alignBottom of the EditText.

Hate

This worked beautifully and doesn't require a wrapper, thank you so much. – Whisenant

How would I get the EditText laid out to the left of the button? I tried using layout_toLeftOf="the id of the button" on the EditText but since the Button is declared after the EditText in the xml file, I get an error that the id of the button doesn't exist. I can't reverse them because I have the same problem, the Button is referring to the id of the EditText for the alignment as you described. Any suggestions on how to deal with this? Thanks – Whisenant

Answer 3

What you want is a relative layout. An example with some comments is as follows

We start with this RelativeLayout as a parent. That can wrap all content. In that parent we put 2 elements, the button and the editText from your example.

<?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" >

We start by placing the Button element on the top right corner. That is what the the layout_alignParentRight and layout_alignParentTop are all about. Again this is the biggest element so we will let it wrap all content using wrap_content for both height and width.

<Button
    android:id="@+id/Button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:text="some_text" />

Now the second element, the editText we want to align to the left side of our previous element, use the id reference with the layout_toLeftOf parameter to accomplish just that.

<EditText
    android:id="@+id/EditText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/Button1"
    android:hint="some_hint"
    android:inputType="textCapWords" />

Close the RelativeLayout and now render this to see what you probably got at yourself already.

</RelativeLayout>

Since the editText is smaller in height it won't match the Button it's placed next to. Solution for that is to add some more layout parameters. The magic ones you're looking for are layout_alignBottom and layout_alignParentTop.

   android:layout_alignBottom="@+id/Button1"
    android:layout_alignParentTop="true"

Add these 2 and you get your layout right.

Clinician

@farhan patel that's why I start the explanation with saying you need a relative layout ;-) – Clinician

Answer 4

With ConstraintLayout's introduction, this task has become far more simple using the match-constraint attribute

Bergama