Make Android layout buttons into squares

Issue

I am having some issues with Android layouts. On one of my screen I would like to have the four buttons as squares, with two side-by-side and the other two straight underneath. I looked on another thread on how to make that happen, but when I did what was said, it turned into a complete mess and did not work at all.

Here is what my current screen looks like:

Here is my current xml code that makes this screen:

<TableLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".PedometerActivity" >

<TextView
    android:id="@+id/pedometerRecommendationTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="@string/recommendation_pedometer"
    android:textAppearance="?android:attr/textAppearanceLarge" />

<Chronometer
    android:id="@+id/chronometerChronometer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Chronometer" />

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="26dp" >



</TableRow>

  <Button
  android:id="@+id/resetButton"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_marginTop="88dp"
  android:layout_span="4"
  android:gravity="center"
  android:text="@string/reset_steps_button_pedometer" />

<Button
    android:id="@+id/startPedometerButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/start_button_pedometer" />

<Button
    android:id="@+id/pausePedometerButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/pause_button_pedometer" />

<Button
    android:id="@+id/finishPedometerButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/finish_button_pedometer" />



    <TextView
        android:id="@+id/stepsTextView"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_span="4"
        android:gravity="center_vertical|center_horizontal"
        android:text="---"
        android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
        android:id="@+id/seekBarTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/seek_bar_pedometer" />
    <SeekBar
        android:id="@+id/seekBar1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:max="20"
        android:layout_span="4" />


    <TextView
        android:id="@+id/sensitivityTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_span ="4"
        android:gravity="center_vertical|center_horizontal"
        android:text="@string/sensitivity_bar_pedometer" />

 </TableLayout>

Thanks!

Solution

You need to wrap each pair of the buttons with LinearLayout horizontally oriented and then the 2 LinearLayouts should be also wraped with parent LinearLayout vertically oriented:

<!- your TableRow above ->

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

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

<Button
    android:id="@+id/resetButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_span="4"
    android:layout_weight="1"
    android:text="@string/reset_steps_button_pedometer" />

<Button
    android:id="@+id/startPedometerButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/start_button_pedometer" />

</LinearLayout>

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

<Button
    android:id="@+id/pausePedometerButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/pause_button_pedometer" />

<Button
    android:id="@+id/finishPedometerButton"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="@string/finish_button_pedometer" />

</LinearLayout>
</LinearLayout>

<!- your TextViews below ->

Here is the result (for the screenshot I just centered buttons and changed their background color):

Regarding the four buttons as squares you can:

1. Use equal fixed size for button's width and height (in this case you shouldn't use android:layout_weight attribute). For example

<Button
    android:id="@+id/finishPedometerButton"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:text="@string/finish_button_pedometer" />

Note that when the button size is fixed make sure the text of the buttons isn't getting cut off. Also you could use different size value dependent of screen size. To do so define the values for each /res/values-xxx folder and them like

<Button
    android:id="@+id/finishPedometerButton"
    android:layout_width="@dimen/button_width"
    android:layout_height="@dimen/button_height"
    android:text="@string/finish_button_pedometer" />

2. Use a square image as backgroud for the buttons. Create images of equal width and height with different dpi for each /res/drawable-xxx folder of the project.

Answered By - Onik