I need to create some progress bar without dialog like this:
I could not find how to create custom progress bar and use it in main activity (not in dialog). This red bar consists of 2 small images and I need to add them continuously while my thread is working.
Now What is the way to do it ?
Maybe it is better to use animations ?
Any idea ?
Thanks
There is actually a ProgressBar widget.
<ProgressBar
android:id="#+id/pb"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="10dp"
android:max="100"
android:progressDrawable="#drawable/progressbar" />
and as progressbar drawable e.g.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<shape>
<gradient
android:angle="270"
android:centerColor="#AA444444"
android:centerY="0.5"
android:endColor="#88000000"
android:startColor="#88000000" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="#FFFFFF44"
android:centerY="0.5"
android:endColor="#FFAAAA00"
android:startColor="#FFAAAA00" />
</shape>
</clip>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="#FF88FF88"
android:centerY="0.5"
android:endColor="#FF44AA44"
android:startColor="#FF44AA44" />
</shape>
</clip>
</item>
</layer-list>
and for updates from your thread, post a runnable with progressbar.setProgress() or progressBar.setSecondaryProgress(), or even better, use an AsyncTask and call publishProgress and receive the calls in onProgressUpdate()
Related
I want to create horizontal indeterminate progress drawable with round corners for progress bar in android. How to create that using xml?
Edit 1: I am using following drawable:
<?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="?attr/dividerAndProgressColor" />
<corners android:radius="20dp" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<solid android:color="?attr/secondaryText" />
<corners android:radius="20dp" />
</shape>
</clip>
</item>
</layer-list>
android:indeterminateDrawable="#drawable/progress_drawable_start_end_indeterminate"
But there is one problem, animation starts from 0 reaches 100 and then restarts. This is not desired in case of indeterminate progressbar.
round corner
lookout this, https://stackoverflow.com/a/42646939/12709358
<ProgressBar
android:id="#+id/progressbar_horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:indeterminateOnly="true"
android:indeterminateDrawable="#drawable/progressbar_indeterminate_horizontal"
android:progressDrawable="#drawable/progressbar_horizontal"
android:minHeight="24dip"
android:maxHeight="24dip"
/>
also see this, https://stackoverflow.com/a/63463786/12709358
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.
Please help to create horizontal progress bar like this
Set style for horizontal progress bar
style="?android:attr/progressBarStyleHorizontal"
Create custom progress drawable: green_progress_drawable.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:startColor="#779d9e9d"
android:centerColor="#995a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
>
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#33FF33"
android:endColor="#008000"
android:angle="270" />
</shape>
</clip>
</item>
</layer-list>
My progressbar code:
<ProgressBar
android:progressDrawable="#drawable/green_progress_drawable"
style="?android:attr/progressBarStyleHorizontal"
android:id="#+id/mf_progress_bar"
app:layout_widthPercent="80%"
app:layout_heightPercent="8%"
app:layout_marginTopPercent="5%"
android:layout_gravity="center_horizontal"
/>
Code credit to #Ryan https://stackoverflow.com/a/5745923/3879847
My output:
I hope this post maybe helpful for someone..
You do not need a custom progress bar. Use style="#android:style/Widget.ProgressBar.Horizontal" in your layout xml file. You will also need to use
ProgressBar.incrementProgressBy(int progress);
See Android Developers|ProgressBar
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" />
After searching the site I've found the below code to change the color of my progressbar. This works fine the first time I call the code (progressbar changes to green), however each time after I call the code I get a blank progressbar. Has anyone faced this issue before? If so, what was the solution to be able to change the progressbar color each time 'setProgressDrawable' is called?
<?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:startColor="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"
/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#80ffd300"
android:centerColor="#80ffb600"
android:centerY="0.75"
android:endColor="#a0ffcb00"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress">
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#color/greenStart"
android:centerColor="#color/greenMid"
android:centerY="0.75"
android:endColor="#color/greenEnd"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Define colors in strings.xml file
<color name="greenStart">#ff33dd44</color>
<color name="greenMid">#ff0A8815</color>
<color name="greenEnd">#ff1da130</color>
Code to change color
Rect bounds = bar.getProgressDrawable().getBounds();
bar.setProgressDrawable(getResources().getDrawable(R.drawable.green_progress));
bar.getProgressDrawable().setBounds(bounds);
I finally found a solution to my problem. The progressbar would become blank if the color I was changing to was the same color that was already set. So with my code above the first time the progressbar would change from the default yellow to green. However, the next time the code was called the progressbar (which was already set to green) was agin set to green and as a result the entire progressbar would become blank.
To get around this I've recorded the currently displayed color of the progressbar and when I get around to setting the color again I only set it if it is different then the one currently displayed.
Hope this helps others who find themselves in the same situation.