Search code examples
androidxmltablelayoutgravity

Android TableLayout gravity and padding issue

All right, so I'm working currently on the layout for an activity using a TableLayout and getting the damn table where I want it isn't really working out all that well.

Here's a screenshot of what it looks like right now: enter image description here

I have three goals at the moment:

  1. Have the LinearLayout containing the EditText and ToggleButton centered horizontally in the screen (haven't been able to do that yet either)

  2. Have the table layout (the 6 buttons with trig ftns on them) centered horizontally underneath the LL without breaking it into 3 LinearLayouts

  3. Getting the buttons to all be the same size without using absolute values aside from margins and padding.

Any insight into how I'd do any or all of those above goals would be appreciated as I've basically exhausted my own xml layout knowledge and would prefer to avoid doing it programatically, what I usually do in this kind of situation.

For reference, here's the xml for the current layout seen above(the xml version line is there, but it just doesn't want to copy right in this post):

<com.hinodesoftworks.lordkat.widgets.TitleBar
    android:id="@+id/calc_titlebar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/calc_input_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal" >

    <EditText
        android:id="@+id/calc_input"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/txt_trig_hint" />

    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@drawable/button_selector"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp"
        android:textOff="@string/txt_trig_toggle_radians"
        android:textOn="@string/txt_trig_toggle_degrees" />
</LinearLayout>

<TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:weightSum="3" >

    <TableRow
        android:layout_gravity="center_horizontal"
        android:layout_weight="1" >

        <Button
            android:id="@+id/trig_sine_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_sine_button" />

        <Button
            android:id="@+id/trig_secant_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_secant_button" />
    </TableRow>

    <TableRow
        android:layout_gravity="center_horizontal"
        android:layout_weight="1" >

        <Button
            android:id="@+id/trig_cosine_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_cosine_button" />

        <Button
            android:id="@+id/trig_cosecant_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_cosecant_button" />
    </TableRow>

    <TableRow
        android:layout_gravity="center_horizontal"
        android:layout_weight="1" >

        <Button
            android:id="@+id/trig_tangent_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_tangent_button" />

        <Button
            android:id="@+id/trig_cotangent_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginBottom="2dp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="1dp"
            android:layout_marginTop="2dp"
            android:background="@drawable/button_selector"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:paddingTop="10dp"
            android:text="@string/txt_trig_cotangent_button" />
    </TableRow>
</TableLayout>

<TextView
    android:id="@+id/calc_results_label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/txt_trig_results_label" />

<TextView
    android:id="@+id/calc_results"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="123.456" />

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

Solution

  • 1-) To have the EditText and ToggleButton centered horizontally in the screen, use android:gravity="center_horizontal"
    instead of "android:layout_gravity="center_horizontal"

    2-) As in answer(1), in oder to have the table centered horizontally, use "android:gravity="center_horizontal"

    3-) To have the buttons to all be the same size without using absolute values aside from margins and padding, use "android:stretchColumns="0,1"" to strech colums 0 and 1. When you use this attribute, you do not have to used absolute values. So the resulting code becomes as follows:

    <TableLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:stretchColumns="0,1"
   >

<TableRow>
    <Button
        android:id="@+id/trig_sine_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:text="txt_trig_sine_button" />
    <Button
        android:id="@+id/trig_secant_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher"
        android:text="txt_trig_secant_button" />
</TableRow>

    ....