I need to design this “red” percentage circle dyna

How do i create this design in Android App. Please help me..I need to design this "red" percentage circle dynamically.

回答1:

You need to have two progress bars one above the other, one with background color and one with red. Get them from xml in drawable and give them to the android:progressDrawable

circle_progress_background.xml in drawable folder is as follows

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
        <shape
            android:innerRadius="@dimen/sixty_dp"
            android:shape="ring"
            android:thickness="@dimen/seven_dp">

            <gradient
                android:startColor="@color/light_gray"
                android:endColor="@color/light_gray"
                android:type="sweep" />   
        </shape>
    </item>
</layer-list>

circle_progress_foreground.xml in drawable folder is as follows

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/progress">
            <shape
                android:innerRadius="@dimen/sixty_dp"
                android:shape="ring"
                android:thickness="@dimen/seven_dp">

                <gradient
                    android:startColor="@android:color/holo_blue_bright"
                    android:endColor="@android:color/holo_blue_light"
                    android:type="sweep" />   
            </shape>
    </item>
</layer-list>

and your layout_main.xml in layout folder is as follows

<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <ProgressBar
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progress="100"
            android:progressDrawable="@drawable/circle_progress_background"
            android:rotation="-90" />

        <ProgressBar
            android:id="@+id/circle_progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:indeterminate="false"
            android:max="100"
            android:progressDrawable="@drawable/circle_progress_foreground"
            android:rotation="-90" />
    </FrameLayout>

Now use the layout in activity as follows

package com.example.usingcircletimer;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ProgressBar;

public class MainActivity extends Activity {

    private ProgressBar mProgressBar;
    private Handler handler = new Handler();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_main);
        mProgressBar = (ProgressBar) findViewById(R.id.circle_progress_bar);
        Button btn = (Button) findViewById(R.id.btn);

        btn.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                new Thread(new Runnable() {
                    int i = 0;
                    int progressStatus = 0;

                    public void run() {
                        while (progressStatus < 100) {
                            progressStatus += 5;
                            try {
                                Thread.sleep(200);
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }

                            // Update the progress bar
                            handler.post(new Runnable() {
                                public void run() {
                                        mProgressBar
                                                .setProgress(progressStatus);
                                    i++;
                                }
                            });
                        }
                    }
                }).start();
            }
        });
    }
}

回答2:

To achieve this, you'll need to create a custom View and override the onDraw method.

Here's an outline that should help you get started:

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

    // define mOvalRect to be the rectangle which will contain the circle.
    // define mPaint to the paint with which the circle will be drawn, setting the proper colour

    // define mAnimationPhase to be between 0 & 1, depending on the completion of the circle. 0 means empty circle, 1 means full circle.

    // define START_ANGLE to be the angle at which the circle will start.

    canvas.drawArc(mOvalRect, START_ANGLE, 360f * mAnimationPhase, false, mPaint);
}