CODEWITHSUNDEEP
androideclipsegeometrymarker
Paul9999
Paul9999

Reputation: 981

Circle with marker

I wish I could implement in Android what I show in this screenshot:

enter image description here

The number inside the circle there is no problem for me (simply make some accounts). But I do not know how to put the circle or as putting the marker.

I mean, it's like a speedometer. Then I want depending on the numerical value, the marker is in the position of the circle that matches the numerical value (the value is moved in a range of 0-100, so that the minimum value of the marker in the circle will be 0 or 100, obviously).

I'm a bit stuck with this, any help would be welcome. Thank you.

Upvotes: 1

Views: 242

Answers (1)

fatboy
fatboy

Reputation: 2137

i created a circleView for you..just give a try...

CircleView.java

package com.example.err2;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

public class Circle extends View {

    int radius, number, fontSize = 80;
    Paint myPaint;

    public void setRadius(int radius) {
        this.radius = radius;
    }

    public void setNumber(int number) {
        this.number = number;
    }

    private void init() {
        Log.d("init", "start");
        myPaint = new Paint();
        myPaint.setColor(Color.RED);
    }

    public Circle(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        init();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub
        super.onDraw(canvas);
        canvas.save();
        // Drawing main crcle
        canvas.drawCircle(getWidth() / 2, 
            getHeight() / 2, 
            radius, myPaint);
        myPaint.setColor(Color.WHITE);
        canvas.drawCircle(getWidth() / 2, 
            getHeight() / 2, 
            radius - 10, myPaint);
        // end of main circle

        // drawing text-number
        myPaint.setColor(Color.BLACK);
        myPaint.setTextSize(fontSize);
        myPaint.setTextAlign(Align.CENTER);
        myPaint.setFakeBoldText(true);
        canvas.drawText(number + "", 
            getWidth() / 2, 
            getHeight() / 2 + fontSize / 3, myPaint);
        // end of drwaing text

        // drawing point on circle boundry
        // findPointLocation();
        double deg = number * 3.6f;
        double radians = Math.toRadians(deg);
        int px = (int) Math.abs(radius * Math.sin(radians));
        int py = (int) Math.abs(radius * Math.cos(radians));
        if (number <= 25) {
            px = -px;
        } else if (number <= 50) {
            px = -px;
            py = -py;
        } else if (number <= 75) {
            py = -py;
        }
        // end od find point
        myPaint.setColor(Color.GREEN);
        canvas.drawCircle(getWidth() / 2 + px, getHeight() / 2 + py, 15,
                myPaint);
        // end of drawing point
        canvas.restore();
    }
}

below given the mainactivity code

MainActivity.java

public class MainActivity extends ActionBarActivity {

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

        Circle circle=(Circle)findViewById(R.id.circle1);
        circle.setRadius(100);
        circle.setNumber(90);
    }
}

given below xml code XML

<com.example.err2.Circle
    android:id="@+id/circle1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="73dp"
    android:background="#778888" />

Upvotes: 1

Related Questions