Android에서 ProgressBar의 진행률 표시기 색상을 변경하는 방법


178

Horizontal을 설정했습니다 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 % 이상, 녹색 이상이라는 것입니다. 자바로 프로그래밍 방식으로 할 수 있습니다. 다른 해결책이 있으면 답변을 공유하십시오.
Mubashar

답변:


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>

필요에 따라 색상을 변경할 수 있으며 녹색 진행률 표시 줄이 나타납니다.


또한이 안드로이드를 제거합니다 : indeterminate = "false"
Nishant Shah

2
도와주세요. 코드를 복사하여 greenprogress.xml을 만들려고하지만 Android Studio 0.4.6 마크 <layer-list>를 "요소 목록을 선언해야합니다"라는 오류와 함께 어떻게해야합니까?
UmAnusorn

1
색상을 동적으로 변경할 수 있습니까?
async

실제 막대에 정의 된 현재 진행률 값에 따라 색상을 변경할 수 있습니까?
Jonathan

무엇을 설명하기 위해 도움이 될 것 @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

2
또는 <solid android : color = "@ android : color / black"/> 또는 심지어 <solid android : color = "# ff33b5e5"/>
superarts.org

2
API 레버 21 이상인 경우 Android : indeterminateTint = "@ color / white"로
충분합니다

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

진행률 막대 색상 만 변경하려면 Activity의 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);. 그러면 둥근 엄지의 색상이 변경됩니다.
Sufian

1
setColorFilter()드로어 블을 직접 호출 하면 어디서나 색상이 적용됩니다. 이것이 내가 필요하지 않은 mutate()DrawableseekBar.getThumb().mutate().setColorFilter(color, PorterDuff.Mode.SRC_IN);
것이기

3
이 솔루션을 다른 곳에서 보았지만 (Gingerbread 장치에서 테스트하는) 모든 진행률 표시 줄을 한 가지 색으로 돌리면 실제 진행 상황을 볼 수 없습니다
.

@ NeilC.Obremski 네 맞아요. ROM 또는 버전에 따라 다를 수 있습니다. 나는 그것을 완전히 제거해야했습니다. 바라건대 우리는 곧 지원 lib를 통해 이전 버전의 Android로 다시 포팅 할 것입니다.
수피

25

API 레벨 21 이상의 경우

android:progressBackgroundTint="@color/yourBackgroundColor"
android:progressTint="@color/yourColor"

6

이 질문을 해결하는 세 가지 방법이 있습니다.

  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_horizontal입니다)

<?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 개의 Drawables로 구성됩니다.

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

건배.

-창


viewUtils.convertDpToPixel (5)의 viewUtils;
Nikos Hidalgo

1
- 안녕 @NikosHidalgo 현재 거의 동일한 방법 볼 수 있습니다 stackoverflow.com/questions/12849366/...을 . 유일한 차이점은 내을 구성한다는 것입니다 ViewUtils에 대한 참조 Context나는 통과 할 필요가 없습니다 그래서, Context호출convertDpToPixel()
lance.dolan

특히 오래 전에 게시 된 답변에 대해 신속하게 답변 해 주셔서 감사합니다.
Nikos Hidalgo

하하, 기억하기 위해 뇌를
늘려야했다

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을 통해 레이어 목록 당김을 한 후, (첫 번째 레이어, 두 번째 레이어로 보조 진행 상황을 나타내는 당김, 마지막 층으로 주요 진행 상황을 나타내는 또 다른 당김 등의 배경을 의미)의 변화 다음을 수행하여 코드의 색상

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을 통해 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" />

뷰 모델 :

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

머티리얼 컴포넌트 라이브러리를 사용하면 ProgressIndicatorwith 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));
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.