Android Layout_Weight not working properly in a TableLayout?

Question

I created this interface such that, the top most row of the table layout has 3 equally distributed buttons using layout_weight. But this is what I end up with:

And this is my code:

      <RelativeLayout
            android:id="@+id/content_rel"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#ECECEC"
            android:orientation="vertical" >

            <LinearLayout
                android:id="@+id/blurImage"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" >

                <TableLayout
                    android:id="@+id/tableLayout1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" >

                    <TableRow
                        android:id="@+id/tableRow1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:padding="5dip" >

                        <ImageButton
                            android:id="@+id/btnHeartLike"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:src="@drawable/selector" />

                        <ImageButton
                            android:id="@+id/btnShare"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:src="@drawable/share39" />

                        <ImageButton
                            android:id="@+id/btnProductComment"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:clickable="true"
                            android:src="@drawable/comment_icon" />
                    </TableRow>

I didn't add the rest of the code since it's long and irrelevant (I think?). Let me know if you need the rest as well but I think the problem is with the layout it is in? What do you think is wrong?

Answer 1

why you are using TableRow . you can create it using linearlayout

use the following code

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

        <Button
            android:id="@+id/button1"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button2"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/button3"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
    </LinearLayout>

the another way

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

        <TableLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <TableRow

                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <Button
                    android:id="@+id/button1"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button" />

                <Button
                    android:id="@+id/button2"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button" />

                <Button
                    android:id="@+id/button3"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="Button" />
            </TableRow>
        </TableLayout>
    </LinearLayout>

Answer 2

Try setting the width to 0 instead of having wrap_content : android:layout_width="0.0dip"

And check the following link for the explanation.