tableLayout For Multiple Screens

Question

I am developing chess game, i design one screen using tablelayout but when i test on some screens my some icon are go outside of the screen or Show a small. how to make table layout suitable for all screens. Please give me a suggestion. Thanks very much,

<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent" android:stretchColumns="*"  tools:context=".Chess">
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_rook"   android:tag="black_rook"/>
    <ImageView android:id="@+id/b8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_knight" android:tag="black_knight"/>
    <ImageView android:id="@+id/c8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_bishop" android:tag="black_bishop"/>
    <ImageView android:id="@+id/d8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_queen"  android:tag="black_queen"/>
    <ImageView android:id="@+id/e8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_king"   android:tag="black_king"/>
    <ImageView android:id="@+id/f8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_bishop" android:tag="black_bishop"/>
    <ImageView android:id="@+id/g8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_knight" android:tag="black_knight"/>
    <ImageView android:id="@+id/h8" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_rook"   android:tag="black_rook"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/b7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/c7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/d7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/e7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/f7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/g7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
    <ImageView android:id="@+id/h7" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/black_pawn" android:tag="black_pawn"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/b6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/c6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/d6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/e6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/f6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/g6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/h6" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/b5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/c5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/d5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/e5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/f5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/g5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/h5" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/b4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/c4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/d4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/e4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/f4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/g4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/h4" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/b3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/c3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/d3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/e3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/f3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
    <ImageView android:id="@+id/g3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:tag="empty_square"/>
    <ImageView android:id="@+id/h3" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:tag="empty_square"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/b2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/c2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/d2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/e2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/f2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/g2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
    <ImageView android:id="@+id/h2" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_pawn" android:tag="white_pawn"/>
</TableRow>
<TableRow android:layout_weight="1" android:gravity="center">
    <ImageView android:id="@+id/a1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_rook"   android:tag="white_rook"/>
    <ImageView android:id="@+id/b1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_knight" android:tag="white_knight"/>
    <ImageView android:id="@+id/c1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_bishop" android:tag="white_bishop"/>
    <ImageView android:id="@+id/d1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_queen"  android:tag="white_queen"/>
    <ImageView android:id="@+id/e1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_king"   android:tag="white_king"/>
    <ImageView android:id="@+id/f1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_bishop" android:tag="white_bishop"/>
    <ImageView android:id="@+id/g1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/black" android:src="@mipmap/white_knight" android:tag="white_knight"/>
    <ImageView android:id="@+id/h1" android:layout_width="40dp" android:layout_height="50dp" android:background="@color/white" android:src="@mipmap/white_rook"   android:tag="white_rook"/>
</TableRow>

Answer 1

Try giving a weightSum attribute for the TableLayout and make sure the overall sum of the given TableRows is equal to it.

<TableLayout android:weightSum="5">
    <TableRow android:layout_weight="1"/>
    <TableRow android:layout_weight="1"/>
    <TableRow android:layout_weight="1"/>
    <TableRow android:layout_weight="1"/>
    <TableRow android:layout_weight="1"/>
</TableLayout>

See five TableRows are inside a TableLayout with a weightSum of 5.