Android tablelayout and button resize

Asked 9/2, 2012 at 23:12 Answered 15/3, 2016 at 11:23

Solved android layout button tablelayout

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

Ibbetson answered 9/2, 2012 at 23:12 Comment(2)

try and use android:scaleType="fitXY" on your button. also try and use developer.android.com/resources/tutorials/views/… for this task – Dinnerware 9/2, 2012 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 – Ibbetson 9/2, 2012 at 23:29

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"/>

<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?

Seclude answered 10/2, 2012 at 0:4 Comment(5)

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 – Ibbetson 10/2, 2012 at 0: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! – Ibbetson 10/2, 2012 at 1:0

Hmm okay, ill try with images then, just wait a few, ill be back – Seclude 10/2, 2012 at 1:1

I've tried with images of 256px x 256px in order to have a really high dpi – Ibbetson 10/2, 2012 at 1: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 – Seclude 10/2, 2012 at 1:23

enter image description here

Try using this one:

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

Seclude answered 10/2, 2012 at 1:32 Comment(4)

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! – Ibbetson 10/2, 2012 at 1:56

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 – Seclude 10/2, 2012 at 2:0

What is your answer FabianCook? I have the same problem – Inspire 16/8, 2014 at 13:16

Please refer to above answer – Seclude 16/8, 2014 at 13:56

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>

Pintsize answered 15/3, 2016 at 11:23 Comment(0)

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>

Bucci answered 27/6, 2015 at 9:4 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++

Recommended topics

Hot tags