Android tablelayout and button resize

Question

here you are my problem: I want to do a layout that look like this grid in android:

enter image description here

In order to do so, I have created this layout:

     <?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/RelativeLayout1"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:gravity="center"
     android:orientation="vertical" >


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

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

        <Button
            android:id="@+id/clientimain"
            android:layout_width="0dip"
            android:layout_weight="1" android:layout_height="fill_parent"/>



        <Button
            android:id="@+id/button1"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Button" />

     </TableRow>

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

        <Button
            android:id="@+id/button2"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Button"/>

        <Button
            android:id="@+id/button6"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Button" />

    </TableRow>

    <TableRow
        android:id="@+id/tableRow3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0.3" >

        <Button
            android:id="@+id/button3"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Button"
             />

        <Button
            android:id="@+id/button7"
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:text="Button"
             />

    </TableRow>

   </TableLayout>

   </RelativeLayout>

So basically it is composed by 6 buttons in a table layout with the weight property setted correctly(or I hope so!). The result looks good until I'll try to set the background property of each button. In that case the button takes the height of the image that a put in (the width is ok). For instance if I set the background image which size is 96px x 96px the result look like this:

enter image description here

Is there a way to prevent this button "stretch" and to correctly center the image? I've tried to change the height property for each table row, to change the button max height property and also to change the button type with an imagebutton (and set the src property with the wanted icon) but i did not accomplished the wanted result.
I've also red the google documentation about supporting multiple screens and about each basic layout but I did not find any solution. Thanks in advance to anyone that would like to help me!

Andrea

try and use android:scaleType="fitXY" on your button. also try and use http://developer.android.com/resources/tutorials/views/hello-gridview.html for this task — Sergey Benner, Feb 09 '12 at 23:15
I tried the attribute android:scaleType="fitXY" but it did not work. I'll try to switch to grid layout if I can't find a solution. Thanks — jiraya85, Feb 09 '12 at 23:29

FabianCook · Accepted Answer · 2012-02-10T01:04:47.217

Set the layout height of the table row as 0dip and set the weight as 1

<TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

This should fix your problem

Change

<Button
            android:id="@+id/clientimain"
            android:layout_width="0dip"
            android:layout_weight="1" android:layout_height="fill_parent"/>

to

<Button
            android:id="@+id/clientimain"
            android:layout_width="0dip"
            android:layout_weight="1" android:layout_height="fill_parent"/>

this could work, worth a try, in eclipse for me it renders right how you had it first, maybe you could try cleaning your project (Project > clean project) because it should be right as it is

You code should be like this:

<?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/RelativeLayout1"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:gravity="center"
     android:orientation="vertical" >


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

        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <Button
                android:id="@+id/clientimain"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1" />

            <Button
                android:id="@+id/button1"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button2"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/button6"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Button" />
        </TableRow>

        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <Button
                android:id="@+id/button3"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/button7"
                android:layout_width="0dip"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:text="Button" />
        </TableRow>
    </TableLayout>

   </RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
     <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:id="@+id/RelativeLayout1"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     android:gravity="center"
     android:orientation="vertical" >


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


        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <ImageButton
                android:id="@+id/imageButton1"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton2"
                android:layout_width="0dp"
                android:layout_height="fill_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />
        </TableRow>


        <TableRow
            android:id="@+id/tableRow2"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <ImageButton
                android:id="@+id/imageButton3"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton4"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />
        </TableRow>


        <TableRow
            android:id="@+id/tableRow3"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_weight="1" >

            <ImageButton
                android:id="@+id/imageButton5"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />

            <ImageButton
                android:id="@+id/imageButton6"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher" />
        </TableRow>

    </TableLayout>

   </RelativeLayout>

still not changing anything, how big is the size of the image?

I've already tried to do that but with no result.Now each row of the table has got that properties (height 0 and weight 1) but I still have that stretch. Thanks — jiraya85, Feb 10 '12 at 00:30
First of all thanks for your support. I've tried to clean the project and also to replace my code with yours but when I select a background image, I still have the same problem. If I do not apply any image to the background of the button everything is ok and the grid looks like I wanted! — jiraya85, Feb 10 '12 at 01:00
Hmm okay, ill try with images then, just wait a few, ill be back — FabianCook, Feb 10 '12 at 01:01
I've tried with images of 256px x 256px in order to have a really high dpi — jiraya85, Feb 10 '12 at 01:20
I have just remade your images, what you will want to do is make a 9 patch which will help give a better effect, ill give you a link soon — FabianCook, Feb 10 '12 at 01:23

score 2 · Answer 2 · answered Feb 10 '12 at 01:32

2

enter image description here

Try using this one:

https://rapidshare.com/files/2741870011/person.9.png

answered Feb 10 '12 at 01:32

FabianCook

20,269
16
67
115

I really appreciate your help but I don't want to bother you! You have done enough! I'll try to do the nine patch by myself. Thank you very much SmartLemon! – jiraya85 Feb 10 '12 at 01:56
2

I would appreciate it if you accepted my answer c: also I really dont mind, as long as its practice for me, just testing my own skills – FabianCook Feb 10 '12 at 02:00
What is your answer FabianCook? I have the same problem – user_vgizy Aug 16 '14 at 13:16
Please refer to above answer – FabianCook Aug 16 '14 at 13:56

score 1 · Answer 3 · edited May 23 '17 at 12:30

I know it's not exactly what you wanted, but I recommend using GridView instead of TableRow layout.

I think GridView should work better because as it is implemented with view recycling and stuff inherited from AbsListView. GridView is more difficult to deploy because you have to use with Adapter but it will work efficiently if you have a lot of heavy views to load, such as images. Reference.

<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/gridView1"
    android:numColumns="auto_fit"
    android:stretchMode="columnWidth"
    android:columnWidth="100dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

</GridView>

Abdul Wahid · Answer 4 · 2015-06-27T09:16:58.337

When I applied the background image as

android:background="@drawable/ic_launcher"

it worked fine.

I thought it was because of the size of the image so i applied other image with size 160X160 and the problem came back. Than i applied the same 160X160 image to all the buttons and they aligned perfectly. here is my code (The image Gender.png is of 160X160 pixels)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:id="@+id/RelativeLayout1"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="center"
 android:orientation="vertical" >

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

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent" 
    android:layout_weight="0.3">

    <Button
        android:id="@+id/clientimain"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:background="@drawable/Gender" />

    <Button
        android:id="@+id/button1"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" 
        android:background="@drawable/Gender"/>

 </TableRow>

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

    <Button
        android:id="@+id/button2"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button"
        android:background="@drawable/Gender"/>

    <Button
        android:id="@+id/button6"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button" 
        android:background="@drawable/Gender"/>

</TableRow>

<TableRow
    android:id="@+id/tableRow3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.3" 
    >

    <Button
        android:id="@+id/button3"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button"
        android:background="@drawable/Gender" />

    <Button
        android:id="@+id/button7"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button"
         android:background="@drawable/Gender"/>

</TableRow>


    <TableRow
    android:id="@+id/tableRow4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_weight="0.3" >

    <Button
        android:id="@+id/button77"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button"
        android:background="@drawable/Gender"
         />

    <Button
        android:id="@+id/button75"
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"
        android:text="Button"
        android:background="@drawable/Gender"
         />

</TableRow>


</TableLayout>

Android tablelayout and button resize

4 Answers4