Draw a Circle using Canvas on Top Half of Android Screen

Question

This is main.xml file, which is dividing the screen in two half. In bottom half, it is having Latitude and Longitude label and corresponding to each label, it has textbox that will show the current latitude and longitude value in the textbox.

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="@android:color/black" > 

    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="1" 
        android:orientation="vertical" > 

        <!-- currently empty --> 

    </LinearLayout> 

    <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_weight="1" 
        android:orientation="vertical" > 

        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="horizontal" > 

            <!-- Latitude Label --> 

            <TextView 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:layout_weight="1" 
                android:text="Latitude" 
                android:textColor="#FFFFFF" /> 

            <EditText 
                android:id = "@+id/lat1"
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content" 
                android:layout_marginBottom="20dip" 
                android:layout_marginTop="5dip" 
                android:layout_weight="0.35" 
                android:singleLine="true" 
                android:textColor="#FFFFFF"
                /> 
        </LinearLayout> 

        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_weight="1" 
            android:orientation="horizontal" > 

            <!-- Longitude Label --> 

            <TextView 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                android:layout_weight="1" 
                android:text="Longitude" 
                android:textColor="#FFFFFF" /> 

            <EditText 
                android:layout_width="fill_parent" 
                android:layout_height="wrap_content" 
                android:layout_marginTop="5dip" 
                android:layout_weight="0.35" 
                android:singleLine="true" 
                android:textColor="#FFFFFF"
                android:id = "@+id/lat2" /> 
        </LinearLayout> 
    </LinearLayout> 

</LinearLayout> 

But my question is- how I can draw a circle in the top half. Below is the example that I created in paint. I need to draw a circle using canvas in the top half. And the bottom half part is working for me fine.

I created another class file for drawing circle on the canvas-

public class DrawCanvasCircle extends View{
    public DrawCanvasCircle(Context mContext) {
        super(mContext);
    }
    protected void onDraw(Canvas canvas) { 
        super.onDraw(canvas); 
        Paint p = new Paint(); 
        p.setColor(Color.WHITE); 
        DashPathEffect dashPath = new DashPathEffect(new float[]{5,5}, (float)1.0); 

        p.setPathEffect(dashPath); 
        p.setStyle(Style.STROKE); 


        for (int i = 0; i < 7; i ++) { 
            canvas.drawCircle(100, 100, 50+(i*10), p); 
        } 


        invalidate(); 
    } 


}

And below is the main class, in which I am trying to add above canvas that I created in to the main class.

    @Override
public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ll = (LinearLayout) findViewById(R.id.lc);
        DrawCanvasCircle pcc = new DrawCanvasCircle (this);
        Bitmap result = Bitmap.createBitmap(25, 25, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(result);
        pcc.draw(canvas);
        pcc.setLayoutParams(new LayoutParams(1000, 1000));
        ll.addView(pcc);
}

But it is not getting shown properly. Anything wrong I am doing.

Answer 1

Change your customView class like

public class DrawCanvasCircle extends View
{
    Context context;

    public DrawCanvasCircle(Context mContext)
    {
        super(mContext);
        context = mContext;
    }

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

        Paint paint = new Paint();
        paint.setColor(0xFF0000);
        paint.setAlpha(255);
        paint.setStrokeWidth(2.0f);
        paint.setStyle(Paint.Style.STROKE);
        WindowManager mWinMgr = (WindowManager)context.getSystemService(Context.WINDOW_SERVICE);
        int displayWidth = mWinMgr.getDefaultDisplay().getWidth();
        int displayHeight = mWinMgr.getDefaultDisplay().getHeight();
        int circleRadius = 100;
        canvas.drawCircle(displayWidth/2, displayHeight/4, circleRadius, paint);
        invalidate();
    }

}

and write below line of code into your onCreate method

LinearLayout ll = (LinearLayout) findViewById(R.id.lc);
DrawCanvasCircle pcc = new DrawCanvasCircle (this);
ll.addView(pcc);