How to enlarge the picture of Android TableLayout

Question

I am making gomoku for Android in Java.

I created a scoreboard at the top of the action and a new Button game at the bottom.

In the center, I created 100 ImageView (10 rows and 10 columns) in a TableLayout . It works great on tablets, but on phones - especially on small phones - ImageView too small , and you can't completely reach what you want.

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

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

Answer 1

I think you can change the way you create an image grid as a whole using a GridView , not a TableLayout. With GridView you can control how large your columns are (by calling gridView.setColumnWidth(int) ), and it will really clear your layout / make your code more convenient to manage in the long run. That way, when your user clicks the zoom in button, just increase the column width, create ImageViews in each match_parent grid match_parent , and Android should automatically scale the images for you. I think this will also make it easier to manage click events / future changes in your style and make your xml layout more manageable (fewer lines of code, more portability, fewer errors). For a guide to GridViews, just check out the Google Guide:

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

For something larger than a column / row or two views of the same type, you really shouldn't use TableLayout anyway.

But if, despite the above, you are really super attached to TableLayout, you have several options. The easiest way is probably related to introducing it to ScrollView and using various methods to scale TableLayout. For example, you can manually adjust the width and height of the TableLayout or set the ScaleGestureDetector on it. This way you can scale content as well as scroll it when it is larger. However, I think GridView is definitely the best option, for many reasons.