圆形进度条中的渐变

时间:2017-06-13 06:17:55

标签: android gradient android-progressbar

我想创建一个带有内部发光的圆形进度条,我似乎无法使用渐变开始,中心和结束颜色绘制进度。

This is what i want to create

This is what i could create

我将分享我目前的做法。

background.xml

<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="ring"
android:innerRadiusRatio="2.5"
android:thickness="10dp"
android:useLevel="false">

<gradient

    android:startColor="#b6b6b6"
    android:centerColor="#eeeeee"
    android:endColor="#b6b6b6"
/>
</shape>

progress.xml

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270">
<shape
    android:innerRadiusRatio="2.5"
    android:shape="ring"
    android:thickness="10dp"
    android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

    <gradient
        android:angle="0"
        android:startColor="#082a55"
        android:centerColor="#0a3973"
        android:endColor="#082a55"

        android:useLevel="false" />
</shape>
</rotate>

mainactivity.xml

<ProgressBar
    android:id="@+id/progressBar"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:indeterminate="false"
    android:layout_centerInParent="true"
    android:progressDrawable="@drawable/circular_progress_bar"
    android:background="@drawable/cicle_shape"
    style="?android:attr/progressBarStyleHorizontal"
    android:max="100"
    android:progress="20" />

1 个答案:

答案 0 :(得分:0)

按照以下步骤操作

<强> 1。在drawblw文件夹中创建progressbar.xml

    <?xml version="1.0" encoding="utf-8"?>

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="10.0"
        android:useLevel="false">
        <solid android:color="@color/colorWhite" />
        <stroke android:color="@color/colorPrimary" />
    </shape>
</item>
<item android:id="@android:id/progress">
    <rotate
        android:fromDegrees="270"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="270">
        <shape
            android:innerRadiusRatio="3"
            android:shape="ring"
            android:thicknessRatio="10.0"
            android:useLevel="true">
            <solid android:color="@color/colorAccent" />
        </shape>
    </rotate>
</item>

</layer-list>

<强> 2。将此添加到您的布局文件中

 <ProgressBar
            android:id="@+id/circularProgressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="40dip"
            android:layout_height="40dip"
            android:layout_centerInParent="true"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/txt_continue"
            android:indeterminate="false"
            android:padding="2dp"
            android:progressDrawable="@drawable/progressbar" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/circularProgressBar"
            android:layout_alignLeft="@id/circularProgressBar"
            android:layout_alignRight="@id/circularProgressBar"
            android:layout_alignTop="@id/circularProgressBar"
            android:gravity="center"
            android:text="30"
            android:textSize="16sp" />

<强> 2。现在在您的活动文件中

 _progressBar = (ProgressBar) findViewById(R.id.circularProgressBar);
    _progressBar.setProgress(0);
    _progressBar.setMax(K);
    txtTime = (TextView) findViewById(R.id.textView1);
     final Calendar calendar = Calendar.getInstance();

    long cur = calendar.getTimeInMillis();
    long goal = (cur + (30 * 1000));

    doSomethingRepeatedly(goal);

<强> 4。像这样的一种方法

    private void doSomethingRepeatedly(final long goal) {

    timer = new Timer();
    timer.scheduleAtFixedRate(new TimerTask() {
        public void run() {

            try {
                final Calendar calendar = Calendar.getInstance();

                if (goal > calendar.getTimeInMillis()) {
                    Log.e("CHK", "CAlled");
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {

                            Log.d("Time Plus", "Time Plus" + K--);
                            _progressBar.setProgress(K);
                            txtTime.setText(String.valueOf(K));
                        }
                    });
                } else {
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {

                            //Log.d("Time Plus", "Time Plus" + K--);
                            _progressBar.setProgress(K);
                            txtTime.setText(String.valueOf(K));
                            btnNotnow.setVisibility(View.VISIBLE);
                            txtContinue.setVisibility(View.GONE);
                            _progressBar.setVisibility(View.GONE);
                            txtTime.setVisibility(View.GONE);
                        }
                    });
                    Log.e("CHK", "Reached Limit");
                    cancel();
                }

                //Your code

            } catch (Exception e) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        // Do some stuff
                        //ivGIF.setVisibility(View.INVISIBLE);
                        //Log.d("Time Plus", "Time Plus" + K++);
                    }
                });

                Log.e("CHK", "Exception");
                // TODO: handle exception
            }
        }
    }, 0, 1000);
}