CODEWITHSUNDEEP
androidandroid-layoutandroid-tablelayout
Newbie
Newbie

Reputation: 129

How to allign buttons in table layout?

I want to allign three button in a table row. I can't seem to allign them properly.

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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=".MainActivity"
android:stretchColumns="*" >

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10" >

        <requestFocus />
    </EditText>
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_weight="0.33"
        android:background="@drawable/bar" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:background="@drawable/pie" />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="0.33"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/bar" />
</TableRow>

I have the above code for the layout. I want to have an edittext on the top and 3 buttons below it. But the button exceeds the edittext, even though the edittext width is det to match_parent. Can anyone tell me why is this the case?

Layout Screenshot

I actually want to do this programatically. Was trying it out first in xml and then will convert it to programatically.

Thanks in advance.

Upvotes: 0

Views: 100

Answers (1)

Jacky Lian
Jacky Lian

Reputation: 149

well, try this one. basically, if you want your control to occupy multi-columns, you have to use layout_span to indicate the number of columns. 

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <EditText
        android:id="@+id/editText1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:layout_weight="1"
        android:layout_span="3">

        <requestFocus />
    </EditText>
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <Button
        android:id="@+id/button1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_weight="1"
        android:background="@drawable/bar"
     />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:background="@drawable/pie"
         />

    <Button
        android:id="@+id/button3"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:background="@drawable/bar"
         />
</TableRow>

Upvotes: 1

Related Questions