How does one create Buttons with Equal Widths?

Question

I want to display three buttons in the middle of a screen, and have the three buttons all be the same width, though they will have text labels of different lengths.

Answer 1

Reading this thread, then doing some trial-and-error and noticed that android:layout_width="180px" is an accepted parameter. Now as said, I just stumbled on this, didn't try to use this to solve your three button scenario.

It could well be that things changed since you originally posted. Although I tried this while building for version 1.5. That's old enough... :-)

Here is the complete main.xml:

<?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:id="@+id/dateText"
        android:text="\n\nClick for Date\n\n"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/button"
        android:layout_width="180px"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Get the Time"
        android:onClick="showNewDate" />

</LinearLayout>

Answer 2

Perhaps the final solution will be to simply have different layout files for different screens, but I'd rather not go down this path.

Many programmers will use res/layout/ and res/layout-large/ for handling situations like this. In the limited case of the three buttons, you might have alternatives, but usually user interfaces aren't quite that simplistic.

So, how does one create buttons with equal widths, preferrably where they are only as wide as necessary to fit the contents of the button with the longest label?

To accomplish your "preferrably" [sic] requirement, you would need to create a custom layout class for that. Here is one related to it, for the dashboard pattern, that you might use as a starting point.

Answer 3

If you know in advance what your widest button text will be you can use the android:ems attribute to set your buttons to that width.

<Button
    android:id="@+id/my_button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:minEms="5"
    android:text="@string/my_button" />

It's not perfect but it's the easiest way that I've found to achieve this look without endlessly fiddling around with layouts.

Answer 4

Use this proper code this will help you.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:weightSum="3">

<Button
    android:id="@+id/button1"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />
<Button
    android:id="@+id/button2"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />
<Button
    android:id="@+id/button3"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="wrap_content"
    android:text="Get the Time"
    android:onClick="showNewDate" />

Answer 5

use Dashboard Fragment class

http://code.google.com/p/iosched/source/browse/android/src/com/google/android/apps/iosched/ui/DashboardFragment.java

Answer 6

Keep the individual buttons under its own RelativeLayout.

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

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:text="Button1"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:text="Button2"/>
    </RelativeLayout>
</LinearLayout>