วิธีการสร้างแถบความคืบหน้าแบบวงกลมใน Android ที่หมุนบนมันได้อย่างไร

ฉันกำลังพยายามสร้างแถบความคืบหน้าแบบกลม นี่คือสิ่งที่ฉันต้องการบรรลุ

มีวงแหวนพื้นหลังสีเทา ด้านบนของมันแถบความคืบหน้าสีฟ้าจะปรากฏขึ้นซึ่งเคลื่อนที่ในเส้นทางวงกลมจาก 0 ถึง 360 ใน 60 หรือไม่กี่วินาที

นี่คือตัวอย่างรหัสของฉัน

<ProgressBar
            android:id="@+id/ProgressBar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            style="?android:attr/progressBarStyleLarge"
            android:indeterminateDrawable="@drawable/progressBarBG"
            android:progress="50"
            />

ในการทำเช่นนี้ใน "progressBarBG" ที่สามารถดึงได้ฉันกำลังสร้าง layerlist และในรายการเลเยอร์นั้นฉันจะให้สองรายการตามที่แสดง

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
    <shape
            android:shape="ring"
            android:innerRadius="64dp"
            android:thickness="8dp"
            android:useLevel="false">

        <solid android:color="@color/grey" />
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape
                android:shape="ring"
                android:innerRadius="64dp"
                android:thickness="8dp"
                android:useLevel="false">

            <solid android:color="@color/blue" />
        </shape>
    </clip>
</item>

ตอนนี้วงแหวนสีเทาอันแรกสร้างขึ้นแล้ว อย่างไรก็ตามวงแหวนสีน้ำเงินจะเริ่มจากด้านซ้ายของ drawable และไปทางขวาเหมือนกับการทำงานของแถบความคืบหน้าเชิงเส้น นี่คือวิธีที่มันแสดงให้เห็นถึงความคืบหน้า 50% โดยมีลูกศรสีแดงแสดงทิศทาง

ฉันต้องการย้ายแถบความคืบหน้าสีน้ำเงินในเส้นทางวงกลมตามที่คาดไว้

นี่คือโซลูชั่นทั้งสองของฉัน

คำตอบสั้น ๆ :

แทนที่จะสร้าง a layer-listฉันแยกมันเป็นสองไฟล์ หนึ่งสำหรับProgressBarหนึ่งสำหรับพื้นหลังของมัน

นี่คือProgressDrawableไฟล์ (โฟลเดอร์ @drawable): circular_progress_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<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="1dp"
        android:useLevel="true"><!-- this line fixes the issue for lollipop api 21 -->

        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

และนี่คือสำหรับbackground(@ โฟลเดอร์ที่ถอดออกได้): circle_shape.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:innerRadiusRatio="2.5"
    android:thickness="1dp"
    android:useLevel="false">

    <solid android:color="#CCC" />

</shape>

และท้ายที่สุดภายในเค้าโครงที่คุณใช้งานอยู่:

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

นี่คือผลลัพธ์:

คำตอบยาว:

ใช้มุมมองที่กำหนดเองซึ่งสืบทอด android.view.View

นี่คือโครงการเต็มรูปแบบใน GitHub

ฉันได้ทำด้วยวิธีง่ายๆ:

โปรดตรวจสอบภาพหน้าจอสำหรับสิ่งเดียวกัน

CustomProgressBarActivity.java :

public class CustomProgressBarActivity extends AppCompatActivity {

    private TextView txtProgress;
    private ProgressBar progressBar;
    private int pStatus = 0;
    private Handler handler = new Handler();

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

        txtProgress = (TextView) findViewById(R.id.txtProgress);
        progressBar = (ProgressBar) findViewById(R.id.progressBar);

        new Thread(new Runnable() {
            @Override
            public void run() {
                while (pStatus <= 100) {
                    handler.post(new Runnable() {
                        @Override
                        public void run() {
                            progressBar.setProgress(pStatus);
                            txtProgress.setText(pStatus + " %");
                        }
                    });
                    try {
                        Thread.sleep(100);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                    pStatus++;
                }
            }
        }).start();

    }
}

activity_custom_progressbar.xml :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.skholingua.android.custom_progressbar_circular.MainActivity" >


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        android:layout_height="wrap_content">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="250dp"
            android:layout_height="250dp"
            android:layout_centerInParent="true"
            android:indeterminate="false"
            android:max="100"
            android:progress="0"
            android:progressDrawable="@drawable/custom_progressbar_drawable"
            android:secondaryProgress="0" />


        <TextView
            android:id="@+id/txtProgress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/progressBar"
            android:layout_centerInParent="true"
            android:textAppearance="?android:attr/textAppearanceSmall" />
    </RelativeLayout>



</RelativeLayout>

custom_progressbar_drawable.xml :

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="-90"
    android:pivotX="50%"
    android:pivotY="50%"
    android:toDegrees="270" >

    <shape
        android:shape="ring"
        android:useLevel="false" >
        <gradient
            android:centerY="0.5"
            android:endColor="#FA5858"
            android:startColor="#0099CC"
            android:type="sweep"
            android:useLevel="false" />
    </shape>

</rotate>

หวังว่านี่จะช่วยคุณได้

ฉันได้เขียนตัวอย่างรายละเอียดเกี่ยวกับแถบความคืบหน้าเป็นวงกลมในหุ่นยนต์ที่นี่บนบล็อกของฉันdemonuts.com คุณยังสามารถเพลิดเพลินกับซอร์สโค้ดและคำอธิบายที่สมบูรณ์ได้ที่นี่

นี่คือวิธีที่ฉันทำ ProgressBar แบบวงกลมที่มีเปอร์เซ็นต์การวงกลมในโค้ดบริสุทธิ์โดยไม่ต้องมีไลบรารีใด ๆ

ก่อนสร้างไฟล์ drawable เรียกว่า circular.xml

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

ตอนนี้ในการactivity_main.xml เพิ่มของคุณต่อไปนี้:

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular"
        android:secondaryProgress="100"
        />

    <ImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

ในactivity_main.xmlฉันใช้ภาพวงกลมหนึ่งวงที่มีพื้นหลังสีขาวเพื่อแสดงพื้นหลังสีขาวประมาณเปอร์เซ็นต์ นี่คือภาพ:

คุณสามารถเปลี่ยนสีของภาพนี้เพื่อตั้งค่าสีที่กำหนดเองรอบข้อความร้อยละ

ในที่สุดก็เพิ่มรหัสต่อไปนี้เพื่อMainActivity.java:

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.DecelerateInterpolator;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (pStatus < 100) {
                    pStatus += 1;

                    handler.post(new Runnable() {

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

หากคุณต้องการสร้างแถบความคืบหน้าในแนวนอนให้ไปที่ลิงก์นี้มันมีตัวอย่างที่มีค่ามากมายพร้อมด้วยรหัสที่มา:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

ฉันรับรู้ไลบรารีโอเพ่นซอร์สบน GitHub CircularProgressBarที่ทำสิ่งที่คุณต้องการในวิธีที่ง่ายที่สุดเท่าที่จะทำได้:

การใช้งาน

ในการสร้าง ProgressBar แบบวงกลมเพิ่มCircularProgressBarใน XML รูปแบบของคุณและเพิ่มห้องสมุด CircularProgressBarในโปรเจ็กเตอร์ของคุณหรือคุณสามารถคว้ามันผ่านทาง Gradle:

compile 'com.mikhaellopez:circularprogressbar:1.0.0'

XML

<com.mikhaellopez.circularprogressbar.CircularProgressBar
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:background_progressbar_color="#FFCDD2"
    app:background_progressbar_width="5dp"
    app:progressbar_color="#F44336"
    app:progressbar_width="10dp" />

คุณต้องใช้คุณสมบัติต่อไปนี้ใน XML ของคุณเพื่อเปลี่ยน CircularProgressBar ของคุณ

คุณสมบัติ:

• app:progress (จำนวนเต็ม) >> ค่าเริ่มต้น 0
• app:progressbar_color (สี) >> ค่าเริ่มต้นเป็นสีดำ
• app:background_progressbar_color (สี) >> ค่าเริ่มต้นเป็นสีเทา
• app:progressbar_width (ส่วนข้อมูล) >> ค่าเริ่มต้น 7dp
• app:background_progressbar_width (ส่วนข้อมูล) >> ค่าเริ่มต้น 3dp

JAVA

CircularProgressBar circularProgressBar = (CircularProgressBar)findViewById(R.id.yourCircularProgressbar);
circularProgressBar.setColor(ContextCompat.getColor(this, R.color.progressBarColor));
circularProgressBar.setBackgroundColor(ContextCompat.getColor(this, R.color.backgroundProgressBarColor));
circularProgressBar.setProgressBarWidth(getResources().getDimension(R.dimen.progressBarWidth));
circularProgressBar.setBackgroundProgressBarWidth(getResources().getDimension(R.dimen.backgroundProgressBarWidth));
int animationDuration = 2500; // 2500ms = 2,5s
circularProgressBar.setProgressWithAnimation(65, animationDuration); // Default duration = 1500ms

แยกหรือดาวน์โหลดไลบรารีนี้ที่นี่ >> https://github.com/lopspower/CircularProgressBar

นี่คือมุมมองที่กำหนดเองง่าย ๆ สำหรับความคืบหน้าของวงกลมแสดง คุณสามารถปรับเปลี่ยนและเพิ่มประสิทธิภาพมากขึ้นเพื่อให้เหมาะกับโครงการของคุณ

class CircleProgressBar @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private val backgroundWidth = 10f
    private val progressWidth = 20f

    private val backgroundPaint = Paint().apply {
        color = Color.LTGRAY
        style = Paint.Style.STROKE
        strokeWidth = backgroundWidth
        isAntiAlias = true
    }

    private val progressPaint = Paint().apply {
        color = Color.RED
        style = Paint.Style.STROKE
        strokeWidth = progressWidth
        isAntiAlias = true
    }

    var progress: Float = 0f
        set(value) {
            field = value
            invalidate()
        }

    private val oval = RectF()
    private var centerX: Float = 0f
    private var centerY: Float = 0f
    private var radius: Float = 0f

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        centerX = w.toFloat() / 2
        centerY = h.toFloat() / 2
        radius = w.toFloat() / 2 - progressWidth
        oval.set(centerX - radius,
                centerY - radius,
                centerX + radius,
                centerY + radius)
        super.onSizeChanged(w, h, oldw, oldh)
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        canvas?.drawCircle(centerX, centerY, radius, backgroundPaint)
        canvas?.drawArc(oval, 270f, 360f * progress, false, progressPaint)
    }
}

ตัวอย่างการใช้

XML

<com.example.androidcircleprogressbar.CircleProgressBar
    android:id="@+id/circle_progress"
    android:layout_width="200dp"
    android:layout_height="200dp" />

Kotlin

class MainActivity : AppCompatActivity() {
    val TOTAL_TIME = 10 * 1000L

    override fun onCreate(savedInstanceState: Bundle?) {
        ...

        timeOutRemoveTimer.start()
    }

    private var timeOutRemoveTimer = object : CountDownTimer(TOTAL_TIME, 10) {
        override fun onFinish() {
            circle_progress.progress = 1f
        }

        override fun onTick(millisUntilFinished: Long) {
            circle_progress.progress = (TOTAL_TIME - millisUntilFinished).toFloat() / TOTAL_TIME
        }
    }
}

ผลลัพธ์

ฉันใหม่ฉันจึงไม่สามารถแสดงความคิดเห็น แต่คิดว่าจะแบ่งปันการแก้ไขที่ขี้เกียจ ฉันใช้วิธีดั้งเดิมของ Pedram เช่นกันและเพิ่งพบปัญหาอมยิ้มเดียวกัน แต่alanvในโพสต์อื่นมีการแก้ไขหนึ่งบรรทัด มันเป็นข้อผิดพลาดหรือการกำกับดูแลใน API21 แท้จริงเพียงเพิ่มandroid:useLevel="true"ความคืบหน้าของแวดวง xml วิธีการใหม่ของ Pedram ยังคงเป็นวิธีการแก้ไขที่เหมาะสม แต่ฉันแค่คิดว่าฉันแบ่งปันการแก้ไขขี้เกียจเช่นกัน

ลองใช้วิธีนี้เพื่อสร้างบิตแมปและตั้งเป็นมุมมองภาพ

private void circularImageBar(ImageView iv2, int i) {


    Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(b); 
    Paint paint = new Paint();

        paint.setColor(Color.parseColor("#c4c4c4"));
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        canvas.drawCircle(150, 150, 140, paint);

        paint.setColor(Color.parseColor("#FFDB4C"));
        paint.setStrokeWidth(10);   
        paint.setStyle(Paint.Style.FILL);
        final RectF oval = new RectF();
        paint.setStyle(Paint.Style.STROKE);
        oval.set(10,10,290,290);

        canvas.drawArc(oval, 270, ((i*360)/100), false, paint);
        paint.setStrokeWidth(0);    
        paint.setTextAlign(Align.CENTER);
        paint.setColor(Color.parseColor("#8E8E93")); 
        paint.setTextSize(140);

        canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); 

        iv2.setImageBitmap(b);
}

https://github.com/passsy/android-HoloCircularProgressBarเป็นตัวอย่างหนึ่งของห้องสมุดที่ทำสิ่งนี้ ดังที่ Tenfour04 ระบุไว้มันจะต้องค่อนข้างเป็นธรรมในการที่ไม่ได้รับการสนับสนุนโดยตรงจากกล่อง หากไลบรารี่นี้ไม่ทำงานตามที่คุณต้องการคุณสามารถแยกและแก้ไขรายละเอียดเพื่อให้มันเป็นไปตามที่คุณต้องการ หากคุณใช้บางสิ่งที่คนอื่นสามารถนำมาใช้ซ้ำได้คุณสามารถส่งคำขอดึงเพื่อให้ได้สิ่งนั้นมารวมกัน!

@Pedram โซลูชันเก่าของคุณใช้งานได้จริงใน lollipop ด้วย (และดีกว่าใหม่เนื่องจากใช้งานได้ทุกที่รวมถึงในมุมมองระยะไกล) เพียงแค่เปลี่ยนcircular_progress_bar.xmlรหัสของคุณเป็น:

<?xml version="1.0" encoding="utf-8"?>
<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="1dp"
        android:useLevel="true"> <!-- Just add this line -->
        <gradient
            android:angle="0"
            android:endColor="#007DD6"
            android:startColor="#007DD6"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
</rotate>

package com.example.ankitrajpoot.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;


public class MainActivity extends Activity {

    private ProgressBar spinner;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner=(ProgressBar)findViewById(R.id.progressBar);
        spinner.setVisibility(View.VISIBLE);
    }
}

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">

<ProgressBar
    android:id="@+id/progressBar"

    android:layout_width="48dp"
    style="?android:attr/progressBarStyleLarge"
    android:layout_height="48dp"
    android:indeterminateDrawable="@drawable/circular_progress_bar"
    android:indeterminate="true" />
</RelativeLayout>





<?xml version="1.0" encoding="utf-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="0"
    android:toDegrees="1080">
    <shape
        android:shape="ring"
        android:innerRadiusRatio="3"
        android:thicknessRatio="8"
        android:useLevel="false">

        <size
            android:width="56dip"
            android:height="56dip" />

        <gradient
            android:type="sweep"
            android:useLevel="false"
            android:startColor="@android:color/transparent"
            android:endColor="#1e9dff"
            android:angle="0"
            />

    </shape>
</rotate>

กับห้องสมุดส่วนประกอบวัสดุคุณสามารถใช้ProgressIndicatorกับWidget.MaterialComponents.ProgressIndicator.Circular.Determinateสไตล์

สิ่งที่ต้องการ:

<com.google.android.material.progressindicator.ProgressIndicator
    style="@style/Widget.MaterialComponents.ProgressIndicator.Circular.Determinate"
    app:indicatorColor="@color/...."
    app:trackColor="@color/...."
    app:circularRadius="64dp"/>

คุณสามารถใช้คุณสมบัติเหล่านี้:

• circularRadius: กำหนดรัศมีของตัวบ่งชี้ความคืบหน้าแบบวงกลม
• trackColor: สีที่ใช้สำหรับการติดตามความคืบหน้า หากไม่ได้กำหนดไว้จะถูกตั้งค่าเป็นindicatorColorและใช้android:disabledAlphaจากธีม
• indicatorColor: สีเดียวที่ใช้สำหรับตัวบ่งชี้ในโหมดกำหนด / ไม่แน่นอน โดยค่าเริ่มต้นจะใช้สีหลักของชุดรูปแบบ

ใช้progressIndicator.setProgressCompat((int) value, true);เพื่ออัปเดตค่าในตัวบ่งชี้

หมายเหตุ:1.3.0-alpha01มันต้องมีอย่างน้อยรุ่น

เปลี่ยนแปลง

android:useLevel="false"

ถึง

android:useLevel="true"

สำหรับ sahpe ที่สองด้วย id="@android:id/progress

หวังว่ามันจะใช้งานได้