Android में ProgressBar के प्रगति सूचक रंग को कैसे बदलें


178

मैंने हॉरिजॉन्टल सेट किया है ProgressBar

मैं प्रगति के रंग को पीले रंग में बदलना चाहूंगा।

<ProgressBar 
    android:id="@+id/progressbar" 
    android:layout_width="80dip" 
    android:layout_height="20dip"  
    android:focusable="false" 
    style="?android:attr/progressBarStyleHorizontal" />

समस्या यह है, विभिन्न उपकरणों में प्रगति का रंग अलग है। इसलिए, मैं चाहता हूं कि यह प्रगति का रंग तय करे।


उपरोक्त उत्तर पूरे पृष्ठभूमि के रंग को बदलते हैं और यह अस्पष्ट है कि यह प्रगति की ऊंचाई को अधिकतम में बदल देता है। जो कि xml में बदलने में असमर्थ है। केवल प्रगति की स्थिति को बदलने का बेहतर तरीका है कि कितना पूरा हो गया है 20% लाल रंग, 50% पीला रंग 70% और हरे रंग के ऊपर। आप इसे जावा में प्रोग्रामेटिक रूप से कर सकते हैं। यदि आपके पास कोई अन्य उपाय है तो अपना उत्तर साझा करें।
मुबशर

जवाबों:


365

मैंने इसे अपने एक ऐप से कॉपी किया है, इसलिए इसमें कुछ अतिरिक्त विशेषताएँ हैं, लेकिन आपको यह विचार देना चाहिए। यह उस लेआउट से है जिसमें प्रगति पट्टी है:

<ProgressBar
    android:id="@+id/ProgressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:indeterminate="false"
    android:maxHeight="10dip"
    android:minHeight="10dip"
    android:progress="50"
    android:progressDrawable="@drawable/greenprogress" />

फिर निम्नलिखित के समान कुछ के साथ एक नया योग्‍य बनाएं (इस मामले में greenprogress.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>
            <corners android:radius="5dip" />
            <gradient
                android:angle="270"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:startColor="#ff9d9e9d" />
        </shape>
    </item>

    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:startColor="#80ffd300" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dip" />
                <gradient
                    android:angle="270"
                    android:endColor="#008000"
                    android:startColor="#33FF33" />
            </shape>
        </clip>
    </item>

</layer-list>

आप आवश्यकतानुसार रंग बदल सकते हैं, इससे आपको हरे रंग की प्रगति पट्टी मिलेगी।


और मैं भी इस एंड्रॉइड को हटा देता हूं: अनिश्चित = "झूठा"
निशांत शाह

2
क्रिप्या मेरि सहायता करे। मैं आपके कोड की प्रतिलिपि बनाकर Greenprogress.xml बनाने की कोशिश करता हूं लेकिन Android Studio 0.4.6 चिह्न <परत-सूची> के रूप में और त्रुटि "तत्व-सूची घोषित होनी चाहिए" मुझे क्या करना चाहिए?
उमैनसॉर्न

1
क्या गतिशील रूप से रंग बदलना संभव है?
async

क्या वास्तविक बार में परिभाषित वर्तमान प्रगति मूल्य के आधार पर रंग बदला जा सकता है?
जोनाथन

@ रेयान यह समझाने में मददगार होगा कि क्या है android:id="@android:id/progress", android:id="@android:id/background"और किसके android:id="@android:id/secondaryProgress"लिए खड़ा है।
रुस्तमजी

103

एक सरल उपाय:

progess_drawable_blue

<?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>
        <solid
                android:color="@color/disabled" />
    </shape>
</item>

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

</layer-list>

1
यहाँ @ रंग / विकलांग एक कस्टम रंग है
नितिन सक्सेना

2
या <ठोस एंड्रॉइड: रंग = "@ एंड्रॉइड: रंग / काला" />, या यहां तक ​​कि <ठोस एंड्रॉइड: रंग = "# ff33b5e5" />
superarts.org

2
यह पर्याप्त है android: indeterminateTint = "@ रंग / सफ़ेद" एपीआई लीवर के लिए 21 और उससे अधिक
घनश्याम नयमा

53

बस में एक शैली बनाएँ values/styles.xml

<style name="ProgressBarStyle">
    <item name="colorAccent">@color/greenLight</item>
</style>

फिर इस शैली को अपनी ProgressBarथीम के रूप में सेट करें ।

<ProgressBar
    android:theme="@style/ProgressBarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"/>

और कोई फर्क नहीं पड़ता कि आपकी प्रगति पट्टी क्षैतिज या परिपत्र है। बस इतना ही।


1
वाह, सबसे सरल समाधान, मेरे लिए काम करता है। मुझे आश्चर्य हुआ कि इस जवाब में इतने वोट क्यों हैं।
पावेल शोरोखोव 16

38

यदि आप केवल प्रगति बार का रंग बदलना चाहते हैं, तो आप बस अपनी गतिविधि के ऑनक्रिएट () विधि में एक रंग फिल्टर का उपयोग कर सकते हैं:

ProgressBar progressbar = (ProgressBar) findViewById(R.id.progressbar);
int color = 0xFF00FF00;
progressbar.getIndeterminateDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
progressbar.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);

से आइडिया यहाँ

आपको केवल प्री-लॉलीपॉप संस्करणों के लिए ऐसा करने की आवश्यकता है। लॉलीपॉप पर आप colorAccent स्टाइल विशेषता का उपयोग कर सकते हैं।


इसके SeekBarलिए समान है, बस एपीआई 16 के लिए जोड़ें seekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);:। इससे उस गोल अंगूठे का रंग बदल जाएगा।
सूफियान

1
setColorFilter()सीधे एक ड्रॉबल पर कॉल करने से हर जगह रंग लागू होगा। चूंकि यह वही है mutate()जिसकी मुझे आवश्यकता नहीं थी, मैंने बस Drawable(जैसेseekBar.getThumb().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);
सूफियान

3
मैंने इस समाधान को कहीं और देखा है, लेकिन यह सब करता है (जिंजरब्रेड डिवाइस पर परीक्षण) पूरी प्रगति पट्टी को एक रंग में बदल देता है, जिससे वास्तविक प्रगति को देखना असंभव हो जाता है
नील सी। ओब्राम्स्की

@ NeilC.Obremski हाँ तुम सही हो। यह ROM विशिष्ट, या शायद संस्करण विशिष्ट हो सकता है। मुझे इसे पूरी तरह से हटाना पड़ा। उम्मीद है कि हम इसे जल्द ही एंड्रॉइड के पुराने संस्करणों में वापस भेज देंगे (समर्थन परिवाद के माध्यम से)।
सूफियान


6

इस प्रश्न को हल करने के 3 तरीके हैं:

  1. उत्तरोत्तर रंग को क्रमिक रूप से कैसे समायोजित किया जाए
  2. क्रमिक रूप से क्रमिक रंग को कैसे समायोजित करें, लेकिन संकलन-समय से पहले घोषित विभिन्न पूर्वनिर्धारित रंगों से रंग चुनें
  3. क्रमिक रूप से क्रमिक रंग को कैसे समायोजित करें, और प्रोग्राम को रंग भी बनाएं।

विशेष रूप से # 2 और # 3 के आसपास बहुत भ्रम है, जैसा कि टिप्पणी में amfcosta के उत्तर में देखा गया है। यह उत्तर आपको अप्रत्याशित रंग परिणाम देगा, जब भी आप प्राथमिक रंगों को छोड़कर किसी भी प्रगति पट्टी को सेट करना चाहेंगे, क्योंकि यह केवल पृष्ठभूमि रंग को संशोधित करता है, और वास्तविक प्रगति बार "क्लिप" क्षेत्र अभी भी कम अपारदर्शिता के साथ एक पीला ओवरले होगा। उदाहरण के लिए, पृष्ठभूमि को गहरे बैंगनी में सेट करने के लिए उस पद्धति का उपयोग करने से कुछ बैंगनी गुलाबी रंग का एक प्रगति बार "क्लिप" रंग हो जाएगा, जिसके परिणामस्वरूप कम बैंगनी के माध्यम से गहरे बैंगनी और पीले रंग का मिश्रण होता है।

तो किसी भी तरह, # 1 का जवाब पूरी तरह से रयान द्वारा दिया जाता है और answerstarke # 3 के अधिकांश उत्तर देता है, लेकिन # 2 और # 3 के लिए एक पूर्ण समाधान की तलाश करने वालों के लिए:


क्रमिक रूप से क्रमिक रंग को कैसे समायोजित करें, लेकिन XML में घोषित पूर्व निर्धारित रंग से रंग चुनें

res / drawable / my_progressbar.xml :

यह फ़ाइल बनाएं लेकिन my_progress और my_secondsProgress में रंग बदलें:

(नोट: यह केवल डिफ़ॉल्ट XML एसडीके प्रोग्रेसबेर को परिभाषित करने वाली वास्तविक XML फ़ाइल की एक प्रति है, लेकिन मैंने आईडी और रंग बदल दिए हैं। मूल का नाम प्रगति_होर्सेज़ है)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item android:id="@+id/my_progress_background">
    <shape>
        <corners android:radius="5dip" />
        <gradient
            android:startColor="#ff9d9e9d"
            android:centerColor="#ff5a5d5a"
            android:centerY="0.75"
            android:endColor="#ff747674"
            android:angle="270"
            />
    </shape>
</item>

<item android:id="@+id/my_secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#80ff171d"
                android:centerColor="#80ff1315"
                android:centerY="0.75"
                android:endColor="#a0ff0208"
                android:angle="270"
                />
        </shape>
    </clip>
</item>

<item android:id="@+id/my_progress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="#7d2afdff"
                android:centerColor="#ff2afdff"
                android:centerY="0.75"
                android:endColor="#ff22b9ba"
                android:angle="270"
                />
        </shape>
    </clip>
</item>

आपके जावा में :

final Drawable drawable;
int sdk = android.os.Build.VERSION.SDK_INT;
    if(sdk < 16) {
        drawable =  ctx.getResources().getDrawable(R.drawable.my_progressbar);
    } else {
        drawable = ContextCompat.getDrawable(ctx, R.drawable.my_progressbar);
    }
progressBar.setProgressDrawable(drawable)

क्रमिक रूप से क्रमिक रंग को कैसे समायोजित करें, और प्रोग्राम को रंग भी बनाएं

संपादित करें: मुझे इसे ठीक से हल करने का समय मिला। मेरे पूर्व उत्तर ने इसे थोड़ा अस्पष्ट बना दिया।

एक ProgressBar एक LayerDrawable में 3 ड्राबल्स के रूप में बना है।

  1. परत 1 पृष्ठभूमि है
  2. परत 2 माध्यमिक प्रगति रंग है
  3. परत 3 मुख्य प्रगति पट्टी का रंग है

नीचे दिए गए उदाहरण में मैं मुख्य प्रगति बार का रंग बदलकर सियान रखूंगा।

//Create new ClipDrawable to replace the old one
float pxCornerRadius = viewUtils.convertDpToPixel(5);
final float[] roundedCorners = new float[] { pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius, pxCornerRadius };
ShapeDrawable shpDrawable = new ShapeDrawable(new RoundRectShape(roundedCorners, null, null));
shpDrawable.getPaint().setColor(Color.CYAN);
final ClipDrawable newProgressClip = new ClipDrawable(shpDrawable, Gravity.LEFT, ClipDrawable.HORIZONTAL);

//Replace the existing ClipDrawable with this new one
final LayerDrawable layers = (LayerDrawable) progressBar.getProgressDrawable();
layers.setDrawableByLayerId(R.id.my_progress, newProgressClip);

उस उदाहरण ने इसे एक ठोस रंग में बदल दिया। आप इसे बदलकर एक ढाल रंग में सेट कर सकते हैं

shpDrawable.getPaint().setColor(Color.CYAN);

साथ में

Shader shader = new LinearGradient(0, 0, 0, progressBar.getHeight(), Color.WHITE, Color.BLACK, Shader.TileMode.CLAMP);
shpDrawable.getPaint().setShader(shader);

चीयर्स।

-Lance


क्या है viewUtils में viewUtils.convertDpToPixel (5);
निकोस हिडाल्गो

1
Hi @NikosHidalgo - आप यहाँ लगभग एक समान विधि देख सकते हैं: stackoverflow.com/questions/12849366/… । एकमात्र अंतर यह है कि मैं अपने ViewUtilsसंदर्भ के साथ निर्माण करता हूं Context, ताकि मुझे Contextकॉल करते समय पास करने की आवश्यकता न होconvertDpToPixel()
lance.dolan

आपके शीघ्र उत्तर के लिए धन्यवाद, विशेष रूप से उस उत्तर पर जो बहुत पहले पोस्ट किया गया था!
निकोस हिडाल्गो

हाहा, मुझे वास्तव में याद करने के लिए अपने मस्तिष्क को फैलाना पड़ा: p
lance.dolan

4

यदि आप API स्तर 21 या उससे ऊपर हैं, तो आप इन XML विशेषताओं का उपयोग कर सकते हैं:

<!-- For indeterminate progress bar -->
android:indeterminateTint="@color/white"
<!-- For normal progress bar -->
android:progressTint="@color/white"

3

सबसे सरल उपाय जो मुझे पता चला वह कुछ इस प्रकार है:

<item name="colorAccent">@color/white_or_any_color</item>

फ़ोल्डर के styles.xmlनीचे फ़ाइल में ऊपर रखें res > values

नोट: यदि आप किसी अन्य उच्चारण रंग का उपयोग करते हैं, तो पिछले समाधानों के साथ जाना अच्छा होना चाहिए।

एपीआई 21 या HIGHER


यह सबसे अच्छा उपाय है। पूछे गए प्रश्न से संबंधित 100%। बहुत ही सरल
पीर फहीम शाह

3
final LayerDrawable layers = (LayerDrawable) progressBar.getProgressDrawable();
layers.getDrawable(2).setColorFilter(color,PorterDuff.Mode.SRC_IN);

1
अपने उत्तर में थोड़ा स्पष्टीकरण जोड़ने की कोशिश करें। कोड केवल उत्तर हतोत्साहित करते हैं।
अलेक्सई

मैं getDrawable में इंडेक्स 2 के पीछे स्पष्टीकरण प्राप्त करना पसंद करूंगा, लेकिन कम से कम यह एकमात्र समाधान था जो मेरे लिए काम करता था, इसलिए धन्यवाद!
निकोस हिडाल्गो

2

किसी के लिए भी यह कैसे प्रोग्रामेटिकली करना है:

    Drawable bckgrndDr = new ColorDrawable(Color.RED);
    Drawable secProgressDr = new ColorDrawable(Color.GRAY);
    Drawable progressDr = new ScaleDrawable(new ColorDrawable(Color.BLUE), Gravity.LEFT, 1, -1);
    LayerDrawable resultDr = new LayerDrawable(new Drawable[] { bckgrndDr, secProgressDr, progressDr });
    //setting ids is important
    resultDr.setId(0, android.R.id.background);
    resultDr.setId(1, android.R.id.secondaryProgress);
    resultDr.setId(2, android.R.id.progress);

आईडी को ड्रॉबल्स पर सेट करना महत्वपूर्ण है, और सीमा और प्रगति पट्टी की वास्तविक स्थिति के संरक्षण का ध्यान रखता है


1

आप लोग वास्तव में मुझे सिरदर्द दे रहे हैं। आप जो कर सकते हैं, वह आपकी लेयर-लिस्ट को xml के माध्यम से ड्रा करने योग्य बनाता है (मतलब पहली लेयर के रूप में एक बैकग्राउंड, एक ड्रॉबल जो सेकेंडरी प्रोग्रेस को सेकेंड लेयर की तरह पेश करता है, और दूसरा ड्रॉबल जो आखिरी लेयर के रूप में प्राइमरी प्रोग्रेस को दर्शाता है), फिर चेंज करें निम्नलिखित को करके कोड पर रंग:

public void setPrimaryProgressColor(int colorInstance) {
      if (progressBar.getProgressDrawable() instanceof LayerDrawable) {
        Log.d(mLogTag, "Drawable is a layer drawable");
        LayerDrawable layered = (LayerDrawable) progressBar.getProgressDrawable();
        Drawable circleDrawableExample = layered.getDrawable(<whichever is your index of android.R.id.progress>);
        circleDrawableExample.setColorFilter(colorInstance, PorterDuff.Mode.SRC_IN);
        progressBar.setProgressDrawable(layered);
    } else {
        Log.d(mLogTag, "Fallback in case it's not a LayerDrawable");
        progressBar.getProgressDrawable().setColorFilter(color, PorterDuff.Mode.SRC_IN);
    }
}

यह विधि आपको xml पर घोषित अपने मूल ड्रॉबल का माप होने का सबसे अच्छा लचीलापन देती है, इसके साथ ही ITS STRUCTURE AFTERWARDS पर कोई संशोधन नहीं है, खासकर यदि आपको xml फ़ाइल स्क्रीन फ़ोल्डर विशिष्ट होने की आवश्यकता है, तो केवल इसके माध्यम से रंग को संशोधित करें कोड। कोई भी फिर से एक नया ShapeDrawable खरोंच से जो भी हो।


1

प्रगतिशील रंग को निम्नानुसार बदला जा सकता है:

/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorAccent">#FF4081</color>
</resources>

/res/values/styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorAccent">@color/colorAccent</item>
</style> 

onCreate:

progressBar = (ProgressBar) findViewById(R.id.progressBar);
if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
    Drawable drawable = progressBar.getIndeterminateDrawable().mutate();
    drawable.setColorFilter(ContextCompat.getColor(this, R.color.colorAccent), PorterDuff.Mode.SRC_IN);
    progressBar.setIndeterminateDrawable(drawable);
}

1

एक ड्रा करने योग्य संसाधन बनाएं जो आपको पृष्ठभूमि की आवश्यकता है, मेरे मामले में मैंने इसे bg_custom_progressbar.xml नाम दिया है

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

<item>
    <shape android:shape="rectangle" >
        <corners android:radius="5dp"/>

        <gradient
            android:angle="180"
            android:endColor="#DADFD6"
            android:startColor="#AEB9A3" />
    </shape>
</item>
<item>
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="180"
                android:endColor="#44CF4A"
                android:startColor="#2BB930" />
        </shape>
    </clip>
</item>
<item>
    <clip>
        <shape android:shape="rectangle" >
            <corners android:radius="5dp" />

            <gradient
                android:angle="180"
                android:endColor="#44CF4A"
                android:startColor="#2BB930" />
        </shape>
    </clip>
</item>

फिर इस कस्टम बैकग्राउंड का उपयोग करें

 <ProgressBar
                android:id="@+id/progressBarBarMenuHome"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="match_parent"
                android:layout_height="20dp"
                android:layout_marginStart="10dp"
                android:layout_marginEnd="10dp"
                android:layout_marginBottom="6dp"
                android:indeterminate="false"
                android:max="100"
                android:minWidth="200dp"
                android:minHeight="50dp"
                android:progress="10"
                android:progressDrawable="@drawable/bg_custom_progressbar" />

इसका काम मेरे लिए ठीक है


0

Xml में:

<ProgressBar
                    android:id="@+id/progressBar"
                    style="?android:attr/progressBarStyleInverse"
                    android:layout_width="60dp"
                    android:layout_height="60dp"
                    android:layout_margin="@dimen/dimen_10dp"


                 android:indeterminateTint="@{viewModel.getComplainStatusUpdate(position)}"
                    android:indeterminate="true"
                    android:indeterminateOnly="false"
                    android:max="100"
                    android:clickable="false"
                    android:indeterminateDrawable="@drawable/round_progress"
                    app:layout_constraintBottom_toBottomOf="parent"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

ViewModel:

fun getComplainStatusUpdate(position: Int):Int{

                val list = myAllComplainList!!.getValue()
                if (list!!.get(position).complainStatus.equals("P")) {
                  //  progressBar.setProgressTintList(ColorStateList.valueOf(Color.RED));
                   // progressBar.setBackgroundResource(R.drawable.circle_shape)
                    return Color.RED
                } else if (list!!.get(position).complainStatus.equals("I")) {

                    return Color.GREEN
                } else {

                    return Color.GREEN
                }


return Color.CYAN
    }

0

सामग्री घटक लाइब्रेरी के ProgressIndicatorसाथ आप app:indicatorColorरंग बदलने की विशेषता के साथ उपयोग कर सकते हैं :

  <com.google.android.material.progressindicator.ProgressIndicator
      style="@style/Widget.MaterialComponents.ProgressIndicator.Linear.Determinate"
      app:indicatorColor="@color/..."
      app:indicatorWidth="..."
      app:trackColor="@color/..."
      />

यहां छवि विवरण दर्ज करें

नोट : इसे कम से कम संस्करण की आवश्यकता है 1.3.0-alpha01

साथ ProgressBarआप उपयोग कर रंग ओवरराइड कर सकते हैं:

<ProgressBar
    android:theme="@style/CustomProgressBarTheme"
    ..>

साथ में:

<style name="CustomProgressBarTheme">
    <item name="colorAccent">@color/primaryDarkColor</item>
</style>

यहां छवि विवरण दर्ज करें


0

यदि आप प्राथमिक और माध्यमिक प्रगति रंग को क्षैतिज रूप से एंड्रॉइड में प्रोग्रामेटिक रूप से प्रगति बार में सेट करना चाहते हैं तो नीचे स्निपेट का उपयोग करें

int[][] states = new int[][] {
                        new int[] {-android.R.attr.state_checked},
                        new int[] {android.R.attr.state_checked},
                };

                int[] secondaryColor = new int[] {
                        context.getResources().getColor(R.color.graph_line_one),
                        Color.RED,
                };

                int[] primaryColor = new int[] {
                        context.getResources().getColor(R.color.middle_progress),
                        Color.BLUE,
                };
                progressbar.setProgressTintList(new ColorStateList(states, primaryColor));
                progressbar.setSecondaryProgressTintList(new ColorStateList(states, secondaryColor));
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.