How can we make kids timer

Question

I am trying to make a timer application which will visually show how much time left in a different color. Like this -

I made the analog clock with my own view but no idea how can we make this color changing thing. If any body can give any suggestion or sample code that will be really great. I found one code but it's CoreDova I am doing it in native. https://github.com/shaungallagher/timer-for-kids

Answer 1

I ended up making my own view. It's looks like this -

public class TimerView extends View {

private static final String TAG = TimerView.class.getName();

private static final int RADIUS = 600;
private static final int BACKGROUND_COLOR = 0x50ff0000;
private static final int FOREGROUND_COLOR = 0xa0ff0000;

private static final float STARTING_ANGLE = -90f;
private static final float FULL_CIRCLE = 360f;

private ShapeDrawable circle;
private ShapeDrawable arc;

private float lastFraction;

public TimerView(Context context) {
    super(context);
    this.init();
}

public TimerView(Context context, AttributeSet attributeSet) {
    super(context, attributeSet);
    this.init();
}

private void init() {
    this.circle = new ShapeDrawable(new OvalShape());
    this.circle.getPaint().setColor(BACKGROUND_COLOR);
    this.circle.setBounds(0, 0, RADIUS, RADIUS);
    this.lastFraction = 0f;
    this.arc = new ShapeDrawable(new ArcShape(STARTING_ANGLE,
            this.lastFraction));
    this.arc.getPaint().setColor(FOREGROUND_COLOR);
    this.arc.setBounds(0, 0, RADIUS, RADIUS);
}

protected void onDraw(Canvas canvas) {
    this.circle.draw(canvas);
    this.arc.draw(canvas);
}

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.setMeasuredDimension(RADIUS, RADIUS);
}

public void setFraction(float fraction) {
    if (fraction < 0f || fraction > 1.f) {
        throw new IllegalArgumentException("Out of range: " + fraction);
    }
    if (fraction != this.lastFraction) {
        float sweepingAngle = FULL_CIRCLE * fraction;
        this.arc.setShape(new ArcShape(STARTING_ANGLE, sweepingAngle));
        this.postInvalidate();
        this.lastFraction = fraction;
    } else {
        Log.v(TAG, "Error");
    }
 }
}

And calling in the layout -

<com.abc.xyz.TimerView
    android:id="@+id/pieChart"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp" />

To change the value need to call for the activity or fragment -

pieChart.setFraction((float) .99);

Thanks for everyone's so much support

Answer 2

Try drawing a custom view circle (using canvas.drawCircle(...)) and then an arc (using canvas.drawArc(...)) which will be redrawn every time the time (angle) changes, also changing the background color. You need to figure out the rest on your own.