How to zoom Android TableLayout

I'm making a gomoku game for Android in Java.

I've created a scoreboard in the top of the activity and a new game Button in the bottom.

In the center, I've created 100 ImageViews (10 rows and 10 columns) in a TableLayout. It works fine in tablets, but in phones — especially in smaller phones — the ImageViews are too small, and you can't touch perfectly what you want.

I would like to implement a zoom function. It can be multi-touch zoom, or a ZoomControl Button, the only thing I need is to work. So I would like to zoom in and zoom out in the TableLayout, but the scoreboard and the new game Button don't do anything.

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:gravity="center_vertical" >

<TableRow
    android:id="@+id/tableRowE"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:paddingTop="5dip"
    android:paddingBottom="10dip"
    android:gravity="center" >

    <TextView
        android:id="@+id/twScoreboard"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/result"
        android:textSize="20sp"
        android:layout_span="10"
        android:gravity="center"
    />

</TableRow>

<TableRow
    android:id="@+id/tableRow0"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingRight="5dip"
    android:paddingLeft="5dip"
    android:gravity="center"  >

    <ImageView
        android:id="@+id/ImageView1"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView2"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView3"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView4"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView5"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView6"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView7"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView8"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView9"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageViewx"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView11"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView12"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView13"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView14"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView15"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView16"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView17"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView18"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView19"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView20"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView21"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView22"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView23"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView24"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView25"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView26"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView27"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView28"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView29"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView30"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView31"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView32"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView33"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView34"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView35"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView36"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView37"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView38"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView39"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView40"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView41"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView42"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView43"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView44"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView45"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView46"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView47"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView48"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView49"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView50"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView51"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView52"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView53"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView54"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView55"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView56"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView57"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView58"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView59"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView60"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView61"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView62"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView63"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView64"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView65"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView66"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView67"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView68"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView69"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView70"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView71"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView72"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView73"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView74"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView75"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView76"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView77"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView78"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView79"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView80"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView81"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView82"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView83"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView84"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView85"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView86"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView87"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView88"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView89"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView90"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>

<TableRow
    android:id="@+id/tableRow9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:gravity="center" >

    <ImageView
        android:id="@+id/ImageView91"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView92"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView93"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView94"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView95"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView96"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView97"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView98"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView99"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/ImageView100"
        android:layout_width="32dp"
        android:layout_height="32dp"
        android:src="@drawable/empty"
        android:textSize="20sp" />

</TableRow>


<TableRow 
    android:id="@+id/tableRowU"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="5dip"
    android:paddingRight="5dip"
    android:paddingTop="20dip"
    android:gravity="center" >

    <Button
        android:id="@+id/ImageViewNewGame"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_span="10"
        android:onClick="NewGame"
        android:text="@string/newGame"
        android:textSize="20sp" />

</TableRow>

Answers


I think you may want to change the way you're creating the grid of images altogether, by using a GridView rather than a TableLayout. With a GridView, you can control how large your columns are (by calling gridView.setColumnWidth(int)), and also it'll really clean up your layout/make your code easier to manage in the long run. So, when your user presses your 'zoom' button, just increase the column width, have the ImageViews in each grid item match_parent, and Android should automatically scale the images for you. I think it will also make click events/future changes to your styling easier to handle, and make your layout xml much more manageable (fewer lines of code, more portability, fewer points of failure). For a tutorial on GridViews, just check out Google's guide:

http://developer.android.com/guide/topics/ui/layout/gridview.html

For something with more than a column/row or two of the same type of view, you really shouldn't be using TableLayout anyway.

But if, despite the above, you're really super attached to your TableLayout, you have a few options. The easiest probably involves putting it inside a ScrollView, and using various methods to scale the TableLayout. For instance, you could manually adjust the width and height of the TableLayout, or set a ScaleGestureDetector on it. This way, you could scale up the content, and also scroll around once it's bigger. However, I think GridView is definitely the better option, for a myriad of reasons.


Need Your Help

Getting started with UNO and Java with Open/LibreOffice

java eclipse openoffice.org libreoffice uno

I just started to develop a Java project using LibreOffice's 4.0.1 UNO SDK, aaaand... I'm pretty much stuck right at the beginning. I think the same can be applied if I used OpenOffice.org instead of

Custom Path with ImageResizer SqlReader

asp.net-mvc imageresizer

I am developing an application that will have friendly urls to dealer logo images and I would like to use the SqlReader Plugin for ImageResizer.