How do I ensure the buttons align horizontally in this Android login dialog?

Question

I'm creating a login dialog on Android where I want two buttons to align horizontally both on the top and bottom edge, irregardless of the screen size. Sometimes "Forgot password" will break over two lines, sometimes not. I do not want to impose a minHeight on the buttons, and would prefer a solution based on XML design only (not code).

Landscape is fine:

Horizontal - ok

Portrait, default implementation leaves the login button shorter than "forgot password"

Vertical - break

One solution I tried was setting match_parent for the layout_height param of the first button. Didn't quite work:

enter image description here

XML:

<LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:id="@+id/terms_layout"
    android:layout_marginTop="10dp"
    >

    <Button
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/login"
        android:textSize="18sp"
        android:id="@+id/dialog_login_button_login"
        />

    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/forgotPassword"
        android:textSize="18sp"
        android:id="@+id/dialog_login_button_forgot_password"
        />

</LinearLayout>

score 1 · Answer 1 · answered Jul 21 '15 at 12:49

1

Use RelativeLayout and make "Login" button to align to the top and bottom of "Forgot Password" Button

answered Jul 21 '15 at 12:49

manjusg

2,275
1
22
31

Good suggestion. It forced me to throw around a bit on the layout parameters - final XML here, would be nice if you copy-pasted to your answer: http://pastebin.com/xmHFu1iM (used this trick to force 50-50 horizontal layout in the RelativeLayout: http://stackoverflow.com/questions/4961355/percentage-width-in-a-relativelayout) – Nilzor Jul 21 '15 at 13:00
Actually I couldn't get this to work either... the text is cropped when trying it out in the application. Looks good in Android Studio though! – Nilzor Jul 22 '15 at 05:49
Check the padding/margin you have given to the buttons and check the previews for different resolutions before testing on actual device. – manjusg Jul 22 '15 at 08:20

score 1 · Answer 2 · answered Jul 21 '15 at 13:01

As @manjusg answered, make the Login button align the bottom and top to the other button.

Here is how I did it:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Email" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password" />
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:id="@+id/terms_layout"
        android:layout_marginTop="10dp">
        <View
            android:id="@+id/center_strut"
            android:layout_height="0dp"
            android:layout_width="0dp"
            android:layout_centerInParent="true" />
        <Button
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:text="Login"
            android:textSize="18sp"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/center_strut"
            android:layout_alignBottom="@+id/dialog_login_button_forgot_password"
            android:layout_alignTop="@+id/dialog_login_button_forgot_password"
            android:id="@+id/dialog_login_button_login" />
        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignLeft="@+id/center_strut"
            android:text="Forgot Password"
            android:textSize="18sp"
            android:id="@+id/dialog_login_button_forgot_password" />
    </RelativeLayout>
</LinearLayout>

This is one of those solution which work in the designer but fails runtime (text cropped) — Nilzor, Jul 22 '15 at 05:48

score 0 · Answer 3 · answered Jul 21 '15 at 12:51

replace your xml with this xml

 <LinearLayout
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:id="@+id/terms_layout"
    android:layout_marginTop="10dp"
    android:weightSum="2"
    >
    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/login"
        android:textSize="18sp"
        android:id="@+id/dialog_login_button_login"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        />
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        >
    <Button
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/forgotPassword"
        android:textSize="18sp"
        android:id="@+id/dialog_login_button_forgot_password"
        android:layout_alignParentTop="true"
        android:layout_alignParentBottom="true"
        />
    </RelativeLayout>

</LinearLayout>

This also made my buttons consume the remaining space of the screen (i.e. they got very tall) — Nilzor, Jul 21 '15 at 13:01

score 0 · Answer 4 · answered Jul 21 '15 at 13:05

check this

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin">
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout">
        <Button
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Login"
            android:id="@+id/button"/>
        <Button
            android:layout_weight="1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="FORGOT PASSWORD"
            android:id="@+id/button2"/>
    </LinearLayout>
    <LinearLayout
        android:layout_alignBottom="@+id/linearLayout"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:paddingTop="6dp" 
        android:paddingBottom="6dp"
        android:layout_height="wrap_content">
        <View
            android:layout_width="0.5dp"
            android:layout_height="wrap_content"
            android:background="#000000"/>
    </LinearLayout>


</RelativeLayout>

How do I ensure the buttons align horizontally in this Android login dialog?

4 Answers4