Android: Drawing circle on screen

Question

I'm having trouble drawing a circle to the screen. I do not know if I'm approaching this correctly, or if I have to use a bitmap. Below is a Circle class I created for specifically creating a circle to my specifications.

package com.example.alex.parkinsonsdiseaseapp;

import android.view.View;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;

public class Circle extends View {
    private final float x;
    private final float y;
    private final int r;
    private final Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

    public Circle(Context context, float x, float y, int r) {
        super(context);
        mPaint.setColor(0x000000);
        this.x = x;
        this.y = y;
        this.r = r;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle(x, y, r, mPaint);
    }
}

Below is the Activity in which the above class gets used.

package com.example.alex.parkinsonsdiseaseapp;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.Toast;
import android.widget.LinearLayout.LayoutParams;

public class FingerTappingActivity extends Activity {

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

        LinearLayout circle = (LinearLayout) findViewById(R.id.lt);
        View circleView = new Circle(this, 100, 100, 100);
        circleView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
        circle.addView(circleView);
        Toast.makeText(FingerTappingActivity.this, "Test", Toast.LENGTH_SHORT).show();

    }
}

Answer 1

You should set LayoutParams in your CircleView

View circleView = new Circle(this, 50, 50, 100)
circleView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
circle.addView(circleView);

Answer 2

Use the xml drawable instead if just a circle that you want. Check the answer in How to define a circle shape in an android xml drawable file?.

After having the xml drawable, create an imageView in your layout and include that as your android:src

With this, you'll not need to worried about LayoutParam etc. You could define it in your imageView and place them accordingly in the position you like in your layout.

UPDATED

Hi Alex, as per your need, I have a complete code that generate random circles on the view.

public class RandomCircles extends View {

    public int height;
    Context context;
    private Paint mPaint;

    private static final int MAX_SIZE = 200;
    private List<Data> dataList = new ArrayList<>();

    public RandomCircles(Context c, AttributeSet attrs) {
        super(c, attrs);
        context = c;
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.BLACK);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setStrokeWidth(4f);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        for (int i = 0; i <= 50; i++) {
            int x = (int)(Math.random() * w);
            int y = (int)(Math.random() * h);
            int size = (int)(Math.random() * MAX_SIZE);
            addCircle(x, y, size);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (Data data : dataList) {
            int size = data.size;
            mPaint.setAlpha(255 - size);
            canvas.drawCircle(data.x, data.y, data.size, mPaint);
        }
    }

    private void addCircle(float x, float y, int size) {
        dataList.add(new Data(x, y, size));
    }


    class Data {
        public float x;
        public float y;
        public int size;

        public Data(float x, float y, int size) {
            this.x = x;
            this.y = y;
            this.size = size;
        }
    }
}

Create a class from it and initiate it in the layout.

<com.YOU_PACKAGE_NAME.RandomCircles
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

You'll get something like below. Not exactly the same though, as the circle is random. Edit the code as you like to meet your need. Cheers.