I have an progress bar -
<ProgressBar
android:indeterminateOnly="false"
android:progressDrawable="#drawable/progress_anim"
android:minHeight="10dip"
android:layout_width="170dp"
android:layout_height="10dp"
android:maxHeight="10dip"
android:layout_gravity="center_vertical"
android:progress="0"
android:max="100"
android:id="#+id/scoreProgress"/>
and i want to set it's progress color programmatically . I am doing this
scoreProgress.setProgress(unikTopics.getScore());
scoreProgress.getProgressDrawable().getCurrent()
.setColorFilter(getResources().getColor(progressColor[counter])
android.graphics.PorterDuff.Mode.SRC_IN);
and this is progress_anim.xml -
<?xml version="1.0" encoding="utf-8"?>
<item android:id="#android:id/background">
<shape>
<solid android:color="#808080"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#color/white"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#ff0000"/>
</shape>
</clip>
</item>
The problem is that if I am not setting progressdrawble color programmatically , i am getting fine result with progress being shown in red color and rest part in greyish color but if i set it programmatically whole progress bar is getting flled with that color ?
Please help, Thanks in advance.
You are coloring the entire drawable (all layers). You need to grab the #android:id/progress layer from the drawable and color it specifically.
Try this:
scoreProgress.setProgress(unikTopics.getScore());
LayerDrawable layerDrawable = (LayerDrawable)scoreProgress.getProgressDrawable();
layerDrawable.findDrawableByLayerId(android.R.id.progress).setColorFilter(getResources().getColor(progressColor[counter], android.graphics.PorterDuff.Mode.SRC_IN);
Related
I want to change the background colour of a progress bar so that it is set to red if a condition is true and green if the condition is false. Current style is define in the code below:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape android:shape="rectangle" >
<solid android:color="#color/red" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#android:color/black" />
</shape>
</clip>
</item>
</layer-list>
I have tried setting the color programmatically but the whole bar becomes green and I can't see the progress (black) any more
distanceProgress.getIndeterminateDrawable().setColorFilter(getResources().getColor(R.color.green), PorterDuff.Mode.SRC_IN);
distanceProgress.getProgressDrawable().setColorFilter(getResources().getColor(R.color.green), PorterDuff.Mode.SRC_IN);
According to this Android change Horizonal Progress bar color post I can set a secondary progress but how can I switch between the two?
I'm setting the color of the progress bar using the following style code
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<gradient
android:angle="0"
android:endColor="#36A19C"
android:startColor="#36A19C" />
</shape>
</clip>
</item>
My progressbar looks like below image
How can I set the color of the grey part shown in my progress bar???
Try looking at some tutorials here and here.
Create a file custom_progressbar.xml in your drawable
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="backgroundColor"
android:endColor="backgroundColor"
android:angle="0"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="progressColor"
android:endColor="progressColor"
android:angle="0"
/>
</shape>
</clip>
</item>
</layer-list>
Set this to your progressBar in code
// Get the Drawable custom_progressbar
Drawable customDrawable= res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawavle
progressBar.setProgressDrawable(customDrawable);
You can try this way:
<?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/seekbar_background" />
<stroke
android:width="#dimen/seekbar_background_border"
android:color="#android:color/transparent" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#color/seekbar_progress" />
</shape>
</clip>
</item>
</layer-list>
The progress bar uses a layer list that holds several layers. You need background and progress. Hope this helps you :)
Add this line of code to your progress bar XML.
android:progressBackgroundTint="#ReplaceThisWithYourColor"
It works for me.
Hello, I want to create progress bar which should look like above image. Here, I have created one like below image.
Below is the xml file which I created in drawable folder under res,
progress.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 android:shape="rectangle">
<solid android:color="#color/white"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape android:shape="rectangle">
<solid android:color="#color/lightgreen"/>
</shape>
</clip>
</item>
</layer-list>
But I want exactly the same progress bar as image 1 when progress continues, how to implement it?
Customizing a progress bar requires defining the attribute or properties for background and and progress of your progress bar.
create a xml file named customprogressbar.xml in your res-> drawable folder
customprogressbar.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<gradient
android:startColor="#000001"
android:centerColor="#0b131e"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#007A00"
android:centerColor="#007A00"
android:centerY="1.0"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
Now you need to set the to set the progressDrawable property to customprogressbar.xml(drawable)
you can do it in xml file or in Activity(at run time)
In your xml do like following
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
at runtime do the following
// Get the Drawable custom_progressbar
Drawable draw= res.getDrawable(R.drawable.custom_progressbar);
// set the drawable as progress drawavle
progressBar.setProgressDrawable(draw);
For more details check out HERE
Also check How to Customize ProgressBar in Android?
You need to change xml to mention start-color, end-color and center.
Mention color values properly: start-color: left, end-color: right and center.
Any default ProgressBar has a ClipDrawable level, for example a green Drawable is filling the grey background one on my device, the yellow on some others.
My question: is that possible to create a ProgressBar without this (partly) empty background when progress is less than max or should I use an ImageView instead? I need only the ClipDrawable to change its width so it looks like a diagram while the grey background never appears.
Create layer-list drawable like this.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape android:shape="rectangle" >
<solid android:color="#android:color/transparent" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#234"
android:centerColor="#234"
android:centerY="0.75"
android:endColor="#a24"
android:angle="270"
/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:startColor="#144281"
android:centerColor="#0b1f3c"
android:centerY="0.75"
android:endColor="#06101d"
android:angle="270"
/>
</shape>
</clip>
</item>
The main point is to make item with android:id="#android:id/background use #android:color/transparent
And then set it to android:progressDrawable property of ProgressBar
<ProgressBar
android:id="#+id/progressBar"
android:progressDrawable="#drawable/your_layer_list_created_on_previous_step"
android:layout_width="fill_parent"
android:layout_height="8dp"
style="?android:attr/progressBarStyleHorizontal"
android:indeterminateOnly="false"
android:max="100" />
I need to customize a seekbar. To achieve this I'm using a layer-list XML file, and then set it as background to seekbar.
For the #android:id/background I'm using a bitmap, for secondaryProgress and progress, I'm using a shape.
This is the XML background file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<bitmap
android:src="#drawable/progressbar_bg"
android:tileMode="repeat" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#B2B2B2" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#E00072" />
<corners android:radius="5dp" />
</shape>
</clip>
</item>
</layer-list>
And here's how I declare the SeekBar:
<SeekBar
android:id="#+id/seekBar1"
android:thumb="#drawable/progressbar_thumb"
android:progressDrawable="#drawable/custom_seek_bar"
android:background="#drawable/progressbar_bg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toLeftOf="#id/video_total_time"
android:layout_toRightOf="#id/video_time_played" />
The problem is that the SeekBar height does not shrink to new height, which I'm expecting to be equal with height of the background image. Instead, I see a area filled with white space.
Do you know where does the white space come from, and how to git rid of it?
The issue was solved by using a 9-patch instead of a Bitmap, for the #android:id/background item.
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:src="#drawable/progressbar_backg" />
</item>