android rpg game isometric view
<p><img src="http://i.stack.imgur.com/iriD6.png" alt=" 9"> represented by 9</p>

<p><img src="http://i.stack.imgur.com/WK6Jv.png" alt="7"> represented by 7</p>

<p><img src="http://i.stack.imgur.com/IFf6r.png" alt="8">represented by 8</p>

<p><img src="http://i.stack.imgur.com/RjswY.png" alt="6">represented by 6</p>

<p><img src="http://i.stack.imgur.com/xgZqd.png" alt=""> 2d array the -1 is empty region and 0 is grass full</p>

<p>this is the code i am using to render the view</p>

<pre><code>//map class
        private int[][] terrain = new int[20][20];
        }


        //constructor
        protected Drawable[] tiles = new Drawable[10];

        tiles[GameMap.GRASS]  = getResources().getDrawable(R.drawable.grass);
        tiles[GameMap.GRASS_WU]  = getResources().getDrawable(R.drawable.grass_wu);
        tiles[GameMap.GRASS_WD]  = getResources().getDrawable(R.drawable.grass_wd);
        tiles[GameMap.GRASS_EU]  = getResources().getDrawable(R.drawable.grass_eu);
        tiles[GameMap.GRASS_ED]  = getResources().getDrawable(R.drawable.grass_ed);

            protected void onDraw(Canvas canvas) {
        //move_Unit();

        for (int x=0;x&lt;map.getWidthInTiles();x++) {
            for (int y=0;y&lt;map.getHeightInTiles();y++) {

                if(map.getTerrain(x,y) != -1){

                tiles[map.getTerrain(x,y)].setBounds(x*16,y*16,(x*16) + 16,(y*16) + 16);


                if (map.getUnit(x,y) != 0) {
                    tiles[map.getUnit(x,y)].setBounds(x*16,y*16,(x*16) + 16,(y*16) + 16);
                } 
                tiles[map.getTerrain(x, y)].draw(canvas);
                tiles[map.getUnit(x, y)].draw(canvas);
                }
            }
        }

        }

    } 
</code></pre>

<p>why does my view appear like this and how do i fix it?<img src="http://i.stack.imgur.com/bTM8T.png" alt="enter image description here"></p>
