Градиент в круговой шкале прогресса

Я хочу создать круглую индикаторную строку с внутренним свечением, но я не могу заставить ее работать с прогрессом, который можно нарисовать с помощью градиента начала, центра и конца цвета.

Это то, что я хочу создать

Это то, что я мог бы создать

Я поделюсь своим текущим подходом.

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 ответ

Следуйте этим шагам

1. создайте файл progressbar.xml в папке drawblw

    <?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);
}
Другие вопросы по тегам