AndroidでProgressBarの進行状況インジケーターの色を変更する方法


178

Horizo​​ntalに設定しました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%以上の緑色です。あなたはJavaでプログラム的にそれを行うことができます。他の解決策がある場合は、答えを共有してください。
Mubashar

回答:


365

私は自分のアプリの1つからこれをコピーしたので、追加の属性がいくつかある可能性がありますが、あなたにそのアイデアがわかるはずです。これは、進行状況バーがあるレイアウトからのものです。

<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>

必要に応じて色を変更できます。これにより、緑色の進行状況バーが表示されます。


また、このandroid:indeterminate = "false"を削除します
ニシャンシャー

2
私を助けてください。コードをコピーしてgreenprogress.xmlを作成しようとしましたが、Android Studio 0.4.6は<layer-list>に「layer-listを宣言する必要がある」とマークし、どうすればよいですか?
UmAnusorn 2014

1
色を動的に変更することは可能ですか?
非同期

実際のバーで定義されている現在の進行状況の値に応じて色を変更できますか?
ジョナサン

何を説明するのに役立つだろう@Ryan android:id="@android:id/progress"android:id="@android:id/background"android:id="@android:id/secondaryProgress"のために立っています。
RustamG

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
ここ@ color / disabledはカスタムカラーです
Nitin Saxena '31

2
または<solid android:color = "@ android:color / black" />または<solid android:color = "#ff33b5e5" />
superarts.org 14年

2
これは、APIレバー21以上に十分なandroid:indeterminateTint = "@ color / white"です
Ghanshyam Nayma '13

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
うわー、最も簡単な解決策は私にとってはうまくいきます。なぜこの回答は非常に多くの票を持っているのかと思いました。
Pavel Shorokhov

38

進行状況バーの色のみを変更したい場合は、アクティビティのonCreate()メソッドでカラーフィルターを使用するだけです。

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);

ここからのアイデア。

これを行う必要があるのは、ロリポップ前のバージョンのみです。Lollipopでは、colorAccentスタイル属性を使用できます。


以下のためにSeekBar、それは同じで、ただAPI 16のために追加しますseekBar.getThumb().setColorFilter(color, PorterDuff.Mode.SRC_IN);。これにより、その親指の色が変わります。
スーフィアン

1
setColorFilter()ドローアブルを直接呼び出すと、どこにでも色が適用されます。これは私が必要としなかったものなので、私mutate()Drawable(つまりseekBar.getThumb().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);
Sufian

3
他の場所でこの解決策を見たことがありますが、それは(ジンジャーブレッドデバイスでのテストで)プログレスバー全体を1つの色に変えるだけなので、実際の進捗状況を確認できません
Neil C. Obremski

@ NeilC.Obremskiはい、そうです。ROM固有の場合もあれば、バージョン固有の場合もあります。私はそれを完全に削除しなければなりませんでした。うまくいけば、これをすぐに古いバージョンのAndroidに(support libを介して)移植できるようになるでしょう。
スーフィアン2016年


6

この質問を解決するには3つの方法があります。

  1. プログレスバーの色を宣言的に調整する方法
  2. プログレスバーの色をプログラムで調整する方法ですが、コンパイル前に宣言されたさまざまな所定の色から色を選択する方法
  3. プログラムでプログレスバーの色を調整し、プログラムで色を作成する方法。

特に、amfcostaの回答へのコメントに見られるように、#2と#3については多くの混乱があります。その答えは、プログレスバーを基本色以外に設定したいときはいつでも予測できない色の結果をもたらします。これは、背景色を変更するだけであり、実際のプログレスバーの「クリップ」領域は、不透明度が低下した黄色のオーバーレイのままです。たとえば、その方法を使用して背景を濃い紫に設定すると、アルファの減少による濃い紫と黄色の混合から生じる、クレイジーなピンクがかった色のプログレスバーの「クリップ」色になります。

とにかく、#1はRyanによって完全に答えられ、Štarkeは#3のほとんどに答えますが、#2と#3の完全なソリューションを探している人のために:


プログレスバーの色をプログラムで調整する方法ですが、XMLで宣言されている事前定義された色から色を選択する

res / drawable / my_progressbar.xml

このファイルを作成しますが、my_progressとmy_secondsProgressの色を変更します。

(注:これは、デフォルトのAndroid SDK ProgressBarを定義する実際のXMLファイルのコピーですが、IDと色を変更しました。元の名前はprogress_horizo​​ntalです)

<?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>

あなたのJavaで

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つのDrawableとして構成されています。

  1. レイヤー1は背景です
  2. レイヤー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);

乾杯。

-ランス


viewUtils.convertDpToPixel(5);のviewUtilsとは
Nikos Hidalgo

1
こんにちは@NikosHidalgo-ほぼ同じメソッドがここにあります:stackoverflow.com/questions/12849366/…。唯一の違いは、をViewUtils参照してmy を作成するContextため、Context呼び出すときにを渡す必要がないconvertDpToPixel()
lance.dolan

特にずっと前に投稿された回答について、迅速な返信をありがとうございます!
Nikos Hidalgo

はは、私は本当に頭を伸ばさなければならなかった: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ます。

注:他のアクセントカラーを使用する場合は、以前の解決策が適切です。

API 21以上


これが最良の解決策です。100%質問に関連しています。非常にシンプル
Pir Fahim Shah

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

1
答えに少し説明を加えてみてください。コードのみの回答はお勧めしません。
Alexei

getDrawableのインデックス2の背後にある説明を入手したいのですが、少なくともこれが私にとって有効な唯一のソリューションでした。
Nikos Hidalgo

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);

ドローアブルにIDを設定することは重要であり、境界とプログレスバーの実際の状態を保持します


1

あなたたちは本当に私に頭痛を与えています。あなたができることは、最初にレイヤーリストをxmlでドローアブルにして(背景を最初のレイヤー、2番目のレイヤーとして2番目の進行を表すドローアブル、最後のレイヤーとして1番目の進行を表すもう1つのドローアブル)、次に変更します次のようにしてコードの色:

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で宣言するという最高の柔軟性を提供します。特に、xmlファイルスクリーンフォルダー固有にする必要がある場合は、コード。新しいShapeDrawableをゼロから再インスタンス化することは一切ありません。


1

ProgressBarの色は次のように変更できます。

/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

Androidでプログラム的にプライマリとセカンダリの進行色を水平プログレスバーに設定したい場合は、以下のスニペットを使用してください

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));
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.