drawCircle method not working properly (Android)

Question

I am trying to design board for game which will have 5*6 grid of circles. I will use these circles to show bitmap image(.png) in them. The problem I am facing is that. When I draw grid of circles it does not spread properly on screen. I am using android device which have this (480 x 854 pixels, 5.0 inches (~196 ppi pixel density)) Screen Size. I tried different combinations to draw circles but I failed.

Here is the code.

          package com.example.rectangle;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.Menu;
import android.view.View;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new board(this));
    }
    public class board extends View
    {
        Paint p = new Paint();
        Paint blue=new Paint();
        // Paint green=new Paint();
        int rows=5;
        int cols=6;
        Bitmap [][] dot=new Bitmap[rows][cols];
        Canvas g=new Canvas();
        public board(Context context) {
            super(context);
            p.setARGB(255, 255, 102,0);
            blue.setARGB(255, 255, 255, 255);
            // green.setARGB(0, 0, 06, 0);

        }
        @SuppressLint("DrawAllocation")
        protected void onDraw(Canvas canvas)
        {
            super.onDraw(canvas);
            canvas.drawPaint(p);
            for(int y=0; y<cols; y++)
            {
                for(int x=0; x<rows; x++)
                {
                    Bitmap grid= Bitmap.createBitmap(100,100, Config.RGB_565 );

                    dot[x][y]=grid;
                    g.setBitmap(dot[x][y]);
                    //canvas.drawCircle(50, 50, 20, blue);
                    //g.drawCircle(50, 50, 20, blue);


                }
            }
            for(int y=0; y<cols; y++)
            {
                for(int x=0; x<rows; x++)
                {
                    //canvas.drawCircle(50, 50, 20, blue);
                    //canvas.drawCircle(50, (x + 1) * 2 * 50, (y + 1) * 2 * 50, blue);
                    canvas.drawCircle(85*x, 110*y, 20, blue);
                    canvas.drawBitmap(dot[x][y], x*100, y*100,null);
                }
            }

        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }


}

• The problem is in this line: canvas.drawCircle(90*x, 110*y, 20, blue);
• And Screen Size is: (480 x 854 pixels, 5.0 inches (~196 ppi pixel density)

Answer 1

The main problem with your code is that you're getting the x/y (horizontal/vertical) and rows/cols mixed up. x (horizontal) should be determined by cols, and y (vertical) by rows. The code below is a very minimal example, as, I'm sure, you will need to make adjustments to the graphical layout as your project progresses. Please note that the grid's vertical centering might be a little off, depending on whether your app has a title bar, and whether it is full-screen.

public class board extends View
{
    Paint pBack = new Paint();
    Paint pDot = new Paint();

    int cols = 5;
    int rows = 6;

    public board(Context context)
    {
        super(context);
        pBack.setARGB(255, 255, 102, 0);
        pDot.setARGB(255, 255, 255, 255);
    }

    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        canvas.drawPaint(pBack);

        float xStep = canvas.getWidth() / (cols + 1);
        float yStep = canvas.getHeight() / (rows + 1);

        for (int y = 0; y < rows; y++)
        {
            for (int x = 0; x < cols; x++)
            {
                canvas.drawCircle((x + 1) * xStep, (y + 1) * yStep, 20, pDot);
            }
        }
    }
}

Answer 2

im using this code to draw a piechart and its working with me: hope it will help:

public class AChartEnginePieChartActivity extends Activity { 

private static int[] COLORS = new int[] { Color.GREEN, Color.BLUE,Color.MAGENTA, Color.CYAN };

private static double[] VALUES = new double[] { 10, 11, 12, 13 };

private static String[] NAME_LIST = new String[] { "A", "B", "C", "D" };

private CategorySeries mSeries = new CategorySeries("");

private DefaultRenderer mRenderer = new DefaultRenderer();

private GraphicalView mChartView;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

mRenderer.setApplyBackgroundColor(true);
mRenderer.setBackgroundColor(Color.argb(100, 50, 50, 50));
mRenderer.setChartTitleTextSize(20);
mRenderer.setLabelsTextSize(15);
mRenderer.setLegendTextSize(15);
mRenderer.setMargins(new int[] { 20, 30, 15, 0 });
mRenderer.setZoomButtonsVisible(true);
mRenderer.setStartAngle(90);

for (int i = 0; i < VALUES.length; i++) {
mSeries.add(NAME_LIST[i] + " " + VALUES[i], VALUES[i]);
SimpleSeriesRenderer renderer = new SimpleSeriesRenderer();
renderer.setColor(COLORS[(mSeries.getItemCount() - 1) % COLORS.length]);
mRenderer.addSeriesRenderer(renderer);
}

if (mChartView != null) {
mChartView.repaint();
}

}

@Override
protected void onResume() {
super.onResume();
if (mChartView == null) {
LinearLayout layout = (LinearLayout) findViewById(R.id.chart);
mChartView = ChartFactory.getPieChartView(this, mSeries, mRenderer);
mRenderer.setClickEnabled(true);
mRenderer.setSelectableBuffer(10);

mChartView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();

if (seriesSelection == null) {
Toast.makeText(AChartEnginePieChartActivity.this,"No chart element was clicked",Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(AChartEnginePieChartActivity.this,"Chart element data point index "+ (seriesSelection.getPointIndex()+1) + " was clicked" + " point value="+ seriesSelection.getValue(), Toast.LENGTH_SHORT).show();
}
}
});

mChartView.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
SeriesSelection seriesSelection = mChartView.getCurrentSeriesAndPoint();
if (seriesSelection == null) {
Toast.makeText(AChartEnginePieChartActivity.this,"No chart element was long pressed", Toast.LENGTH_SHORT);
return false; 
} else {
Toast.makeText(AChartEnginePieChartActivity.this,"Chart element data point index "+ seriesSelection.getPointIndex()+ " was long pressed",Toast.LENGTH_SHORT);
return true;       
}
}
});
layout.addView(mChartView, new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
}
else {
mChartView.repaint();
}
}
}

you may replace the name list with background img resourse.