วิธีการเปลี่ยนสีในแถบความคืบหน้าแบบวงกลม?


147

ฉันใช้แถบความคืบหน้าแบบวงกลมบน Android ฉันต้องการเปลี่ยนสีของสิ่งนี้ ฉันใช้

"?android:attr/progressBarStyleLargeInverse" 

สไตล์ ดังนั้นวิธีการเปลี่ยนสีของแถบความคืบหน้า

วิธีกำหนดสไตล์เอง นอกจากนี้นิยามของสไตล์คืออะไร?

คำตอบ:


163

ในโฟลเดอร์ res / drawable ใส่สิ่งนี้:

progress.xml

<?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="360">

    <shape 
        android:shape="ring" 
        android:innerRadiusRatio="3"
        android:thicknessRatio="8" 
        android:useLevel="false">

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

    <gradient 
        android:type="sweep" 
        android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#00ffffff"
        android:angle="0"/>

    </shape>

</rotate> 

ตั้งค่าstartColorและendColorตามที่คุณเลือก

ตอนนี้ตั้งที่progress.xmlในProgressBarพื้นหลังของ

แบบนี้

<ProgressBar
  android:id="@+id/ProgressBar01" 
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:indeterminateDrawable="@drawable/progress"
 />

1
มันไม่ทำงานเมื่อฉันใช้กล่องโต้ตอบที่กำหนดเองเป็นส่วนหัวของมุมมองรายการ จำเป็นต้องมีวิธีอื่นหรือไม่?
Pankaj Kumar

22
สิ่งนี้สร้างรูปวงแหวนสีเขียว แต่สปินเนอร์ของ ProgressBar ที่แท้จริงยังคงปรากฏ
mdupls

มีวิธีทำให้สีที่หมุนอยู่ในทิศทางเดียวหรือไม่?
thepoosh

48
แทนการตั้งค่าพื้นหลังด้วย "android: พื้นหลัง" ให้ใช้ "android: indeterminateDrawable =" @ drawable / progress "แทนตามที่ไฮไลต์โดยคำตอบอื่น
baekacaek

1
ใช้ android: startColor = "# 447a29" android: endColor = "# 227a29" ค่าแตกต่างกันเพื่อที่จะไม่ก่อให้เกิดวงกลมคงที่
Abhishek Sengupta

137

สำหรับ API 21 และสูงกว่า เพียงตั้งค่าคุณสมบัติกำหนดเวลา ชอบ:

android:indeterminateTint="@android:color/holo_orange_dark"

วิธีสนับสนุนอุปกรณ์ pre-API 21:

mProgressSpin.getIndeterminateDrawable()
                .setColorFilter(ContextCompat.getColor(this, R.color.colorPrimary), PorterDuff.Mode.SRC_IN );

2
ด้วยstyle="?android:attr/progressBarStyle"ไม่ทำงาน
user25

หากฉันมีชุดสีมากมายและฉันต้องการตั้งค่าสีให้เป็นชุดสีบนแถบความคืบหน้าแต่ละอัน
Prince

นี้ใช้งานได้ดีสำหรับฉันเพียงเพื่อเปลี่ยนความคืบหน้าสีแหวนบาร์ :)
27499

ขอบคุณที่เน้นความสำคัญของ APIs
JamisonMan111

ถ้าฉันใส่สีนี้มันจะเป็นสีวงแหวนที่หมุนได้ แต่มันทั้งหมดดังนั้นมันจึงกลายเป็นวงแหวนเต็มรูปแบบดังนั้นคุณจึงไม่เห็นมันเคลื่อนที่
ลูคัสซาเนลล่า

135

1. ขั้นแรกสร้างไฟล์ xml ในโฟลเดอร์ drawable ภายใต้ทรัพยากร

ชื่อ "progress.xml"

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

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false" >

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

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

    </shape>

</rotate>

2. จากนั้นสร้างแถบแสดงความคืบหน้าโดยใช้ข้อมูลโค้ดต่อไปนี้

<ProgressBar
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/relativeLayout1"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="20dp"
    android:indeterminate="true"
    android:indeterminateDrawable="@drawable/progress" />

สวัสดี Muhamed ฉันใช้วงล้อความคืบหน้าที่กำหนดเองฉันพยายามที่จะเปลี่ยนสีในวงล้อความก้าวหน้าที่รันไทม์ ฉันพยายามแล้วเมื่อฉันคลิกที่ปุ่มความคืบหน้าจะเริ่มขึ้น ฉันได้ตั้งค่าสีเขียว หลังจากความคืบหน้าถึง 100% ฉันต้องการให้มันเริ่มใหม่อีกครั้งคราวนี้สีของมันควรจะเป็นสีแดง แต่ฉันไม่สามารถทำเช่นนั้นได้ถ้าเป็นไปได้โปรดช่วยฉันด้วย
harikrishnan

1
ขอบคุณ มันใช้งานได้ 100% ตั้งค่า progress.xml เป็น Android: indeterminateDrawable
Leo Nguyen

เมื่อฉันลองทำมันจะสร้างเส้นขอบหนาขึ้น ความคิดใด ๆ วิธีการลดชายแดน?
Tejas

สวัสดี Tejas ลองเปลี่ยน android บรรทัดนี้: thicknessRatio = "8" ข้างใน progress.xml คุณสามารถลองใช้ค่าที่แตกต่างกัน หวังว่ามันจะทำงาน
Muhamed Riyas M

มันใช้งานได้ แต่แทนที่จะเป็นสองวงหมุนต่อกันฉันได้แค่วงเดียว การแก้ไขใด ๆ สำหรับเรื่องนี้?
ขวาน

66

คุณสามารถเปลี่ยนสีโดยใช้โปรแกรมโดยใช้รหัสนี้:

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                        android.graphics.PorterDuff.Mode.MULTIPLY);

หากคุณต้องการเปลี่ยนสีแถบความคืบหน้าของ ProgressDialog คุณสามารถใช้สิ่งนี้:

mDilog.setOnShowListener(new OnShowListener() {
        @Override
        public void onShow(DialogInterface dialog) {
            ProgressBar v = (ProgressBar)mDilog.findViewById(android.R.id.progress);
            v.getIndeterminateDrawable().setColorFilter(0xFFcc0000,
                    android.graphics.PorterDuff.Mode.MULTIPLY);

        }
    });

เฮ้ฉันจะเชื่อมต่อ Progress Bar ของ ProgressDialog กับ Progress.xml ได้อย่างไร?
Meghal Agrawal

หากฉันมีชุดสีมากมายและฉันต้องการตั้งค่าสีให้เป็นชุดสีบนแถบความคืบหน้าแต่ละอัน
Prince

36

เพื่อเพิ่มคำตอบของ Dato ฉันพบว่า SRC_ATOP เป็นตัวกรองที่ดีกว่าเพื่อทวีคูณเพราะจะรองรับช่องอัลฟาได้ดียิ่งขึ้น

ProgressBar v = (ProgressBar) findViewById(R.id.progress);
v.getIndeterminateDrawable().setColorFilter(0xFFcc0000, android.graphics.PorterDuff.Mode.SRC_ATOP);

1
ใน 2.3.x นี้จะช่วยให้คุณวงกลมที่เต็มไปด้วยของแข็งที่ MULTIPLY รักษาความโปร่งใส
azdev

หากฉันมีชุดสีมากมายและฉันต้องการตั้งค่าสีให้เป็นชุดสีบนแถบความคืบหน้าแต่ละอัน
Prince

28

หุ่นยนต์: indeterminateTint = "@ สี / ProgressBar"


เพียงใช้คุณลักษณะข้างต้นในแถบความคืบหน้า: indeterminateTint = สีของคุณ
Bhupinder Singh

คำตอบที่ดีที่สุดและจะรองรับทุกรุ่นด้วย
Pankaj Kumar

นี่คือทั้งหมดที่คุณต้องการไม่ใช่คำตอบที่บ้าเหล่านี้ แม้ว่าคนอื่นจะได้รับประโยชน์จากการบล็อกรหัสเต็ม
StarWind0

7
indeterminateTint พร้อมใช้งานสำหรับ API 21 หรือสูงกว่า ถ้ามันเหมาะกับคุณยอดเยี่ยม!
Andy Weinstein


14
android:indeterminateTint="@color/yellow"

สิ่งนี้ใช้ได้ผลสำหรับฉันเพียงเพิ่มบรรทัดนี้ในรหัส ProgressBar ของคุณ


12

นั่นเป็นงานสำหรับฉัน

<ProgressBar
android:id="@+id/ProgressBar01" 
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:indeterminateTint="@color/black"/>

4
พร้อมใช้งานจาก API ระดับ 21
viplezer

11

ในการปรับแต่ง ProgressBar แบบวงกลมเราจำเป็นต้องสร้างindrawminDrawableเพื่อแสดงแถบความคืบหน้าที่กำหนดเอง

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

    <shape
        android:innerRadiusRatio="3"
        android:shape="ring"
        android:thicknessRatio="8"
        android:useLevel="false">

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

        <gradient
            android:centerColor="#f96047"
            android:centerY="0.50"
            android:endColor="#fb9c8d"
            android:startColor="#f72d0c"
            android:type="sweep"
            android:useLevel="false" />

    </shape>

</rotate>

เราจำเป็นต้องรวม drawable ใน progressbar ดังต่อไปนี้:

<ProgressBar
    android:layout_width="wrap_content"
    android:layout_centerInParent="true"
    style="?android:attr/progressBarStyleLarge"
    android:visibility="visible"
    android:progressDrawable="@drawable/widget_progressbar"
    android:indeterminateDrawable="@drawable/widget_progressbar"
    android:layout_height="wrap_content" />

rotateshapeแท็กจะหายไปก่อน ถ้าไม่มีมันแถบความคืบหน้าจะเป็นแบบคงที่
Renan Bandeira

@RananBandeira คุณสามารถปรับปรุงคำตอบหากถูกต้อง
Akshay Mukadam

9

สำหรับฉันธีมไม่ทำงานกับ accentColor แต่มันใช้งานได้กับ colorControlActivated

    <style name="Progressbar.White" parent="AppTheme">
        <item name="colorControlActivated">@color/white</item>
    </style>

  <ProgressBar
        android:layout_width="@dimen/d_40"
        android:layout_height="@dimen/d_40"
        android:indeterminate="true"
        android:theme="@style/Progressbar.White"/>

4

เพื่อเสริมคำตอบที่ได้รับการโหวตสูงสุดของ Muhamed Riyas M :

หมุนเร็วขึ้น

android:toDegrees="1080"

แหวนทินเนอร์

android:thicknessRatio="16"

แสงสีขาว

android:endColor="#80ffffff"


4

ลองใช้สไตล์และตั้งค่า colorControlAct ที่ต้องการสี ProgressBar มากเกินไป

<style name="progressColor" parent="Widget.AppCompat.ProgressBar">
    <item name="colorControlActivated">@color/COLOR</item>
</style>

จากนั้นตั้งค่ารูปแบบของ ProgressBar เป็นรูปแบบใหม่

<ProgressBar
    android:id="@+id/progress_bar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/progressColor"
 />

3

เพิ่มในธีมกิจกรรมของคุณไอเท็มcolorControlActivatedตัวอย่างเช่น:

    <style name="AppTheme.NoActionBar" parent="Theme.AppCompat.Light.NoActionBar">
            ...
            <item name="colorControlActivated">@color/rocket_black</item>
            ...
    </style>

ใช้สไตล์นี้กับกิจกรรมของคุณในไฟล์ Manifest:

<activity
    android:name=".packege.YourActivity"
    android:theme="@style/AppTheme.NoActionBar"/>

2

คุณสามารถทำได้ด้วยกล่องโต้ตอบที่กำหนดเองได้อย่างง่ายดายโดยการนำ xml กลับมาใช้ใหม่จากคำตอบอื่น ๆ :

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

<shape
    android:innerRadiusRatio="3"
    android:shape="ring"
    android:thicknessRatio="8"
    android:useLevel="false" >

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

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

</shape>

แค่ทำสิ่งนี้:

public static class ModifiedProgressDialog extends ProgressDialog {
    public ModifiedProgressDialog(Context context) {
        super(context);
    }

    @Override
    public void show() {
        super.show();
        setIndeterminateDrawable(getContext().getResources().getDrawable(R.drawable.blue_progress));
    }
}

2

คุณสามารถใช้สไตล์ในการเปลี่ยนสีของความคืบหน้าเช่นด้านล่าง

 <style name="AppTheme.anyName">
        <item name="colorAccent">YOUR_COLOR</item>
    </style>

และใช้ใน ProgressBar เหมือนด้านล่าง

<ProgressBar
            style="?android:attr/progressBarStyle"
            android:theme="@style/AppTheme.WhiteAccent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/dimen_30"
        />

หวังว่ามันจะช่วย


1

สำหรับทุกคนที่สงสัยว่าจะเพิ่มความเร็วของความก้าวหน้าที่กำหนดเองได้อย่างไร

  <?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"><!--HERE YOU COULD INCREASE SPEED BY SETTING TODEGRESS(1080 is 3 loops instead of 1 in same amt of time)-->
<shape android:shape="ring" android:innerRadiusRatio="3"
    android:thicknessRatio="8" android:useLevel="false">
    <size android:width="76dip" android:height="76dip" />
    <gradient android:type="sweep" android:useLevel="false"
        android:startColor="#447a29" 
        android:endColor="#447a29"
        android:angle="0"
         />
</shape>


0

มันต้องใช้ค่าสีจาก Res / Values ​​/ Colors.xml ของคุณ -> colorAccent หากคุณเปลี่ยนสี ProgressBar ของคุณก็เปลี่ยนไปเช่นกัน


0

ชุด android:indeterminateDrawable="@drawable/progress_custom_rotate"

ใช้รหัสด้านล่างสำหรับแถบความคืบหน้าวงแหวนแบบกำหนดเอง

คัดลอกโค้ดด้านล่างและสร้าง "progress_custom_rotate.xml" ในโฟลเดอร์ Drawable

<?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="48dip" android:height="48dip" />

        <gradient android:type="sweep" android:useLevel="false"
            android:startColor="#4c737373" android:centerColor="#4c737373"
            android:centerY="0.50" android:endColor="#ffffd300" />

    </shape>

</rotate>


-1

คุณสามารถเปลี่ยนสีแถบความคืบหน้าของคุณโดยใช้รหัสด้านล่าง:

progressBar.getProgressDrawable().setColorFilter(
    getResources().getColor(R.color.your_color), PorterDuff.Mode.SRC_IN);

ถ้าฉันมีสีมากมาย?
เจ้าชาย
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.