I'd like to implement a progress bar like this
Please help how can I do it or if there is a library
I saw that a lot of people are looking on this post so I thought that I should edit it and share an example:
Note (this example is not complete, it's still in progress but I guess it's a starting point)
GitHub: Github Example
The important part in this example is below:
Create in drawable a xml file custom_progress_bar_horizontal.xml and add the content below.
<?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>
<padding
android:bottom="3dip"
android:top="3dip"
android:left="3dip"
android:right="3dip"/>
<corners
android:radius="5dip" />
<gradient
android:startColor="#2a2b2f"
android:centerColor="#2a2b2f"
android:centerY="0.50"
android:endColor="#2a2b2f"
android:angle="270" />
</shape>
</item>
<item
android:id="#android:id/progress">
<clip>
<shape>
<corners
android:radius="5dip" />
<gradient
android:startColor="#ff0e75af"
android:endColor="#ff1997e1"
android:angle="90" />
</shape>
</clip>
</item>
</layer-list>
Add the following code in styles.xml
<style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/custom_progress_bar_horizontal</item>
<item name="android:minHeight">10dip</item>
<item name="android:maxHeight">20dip</item>
</style>
After you have added the style in your activity layout add:
<ProgressBar
android:id="#+id/customProgress"
style="#style/CustomProgressBar"
android:layout_width="match_parent"/>
The progress dispaly below in a frame it's a little tricky because you need to extend the ProgressBar class and make the changes there.
I will leave here some examples and notify when I will add them in my github project.
Great example if you want to disaply the progress in your way:
NumberProgressBar
Other progress bar examples:
Custom progress bar 1
Custom progress bar 2
Custom progress bar 3
UPDATE:
Also check DiscreteSeekBar this is a great github project.
Gradle: compile 'org.adw.library:discrete-seekbar:1.0.1'
Update #2
Maybe this library will be also useful
https://github.com/ManolescuSebastian/USeekbar
Cheers,
Related
I am using a custom layout for a progressbar which consist of small bars depending on the count of steps. A layout can be seen below:
I want to create an item that shows a black bar and a white bar which looks like space in between progresses.
Now, I know its possible to create this with two separate item. But I the item as progress of a progressbar. For example:
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape 1>
<shape 2>
</clip>
</item>
Now, how can I create a custom item that can consist of two shapes inside it?
progress.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:width="3dp"
android:height="2dp"
android:drawable="#drawable/text_field"
android:start="#dimen/dimen_5dp" />
<item
android:width="3dp"
android:drawable="#drawable/text_field"
android:end="#dimen/dimen_5dp" />
</layer-list>
text_field.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true">
<shape>
<gradient
android:endColor="#color/white"
android:startColor="#color/white"/>
<corners android:radius="5dp"/>
</shape>
</item>
</selector>
I am trying to create a custom progress bar that looks like this:
I manage to create the layout, but I don't know how to put that circle at the current progressBar progress position. Does anybody know how to achieve this?
My xml layout looks like this:
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dip" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#42cbf4"
android:width="40dp"/>
</shape>
</clip>
</item>
I also added a linearLayout for the transparent Background
I tried putting another oval shape in the progress item, or create another shape for secondProgress, but nothing worked.
Right now, it looks like this:
This type of ProgressBar is called "seek bar", and there are many implementations of it online. Maybe you could search for it on The Android Arsenal by typing "seek" in search. By the way, I've found a simple but pretty one on the site; you can find it here.
I found what I was looking for. Instead of the ProgressBar I used the SeekBar, which implements that thumb I needed. For customization I used the same layout, and for the thumb I used this snippet:
thumb.xml:
<?xml version="1.0" encoding="UTF-8"?>
<gradient
android:angle="270"
android:endColor="#026b91"
android:startColor="#026b91" />
<size
android:height="30dp"
android:width="30dp" />
custom_progress_bar.xml:
<!-- Define the background properties like color etc -->
<item android:id="#android:id/background">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="1dip" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#42cbf4"
android:width="40dp"/>
</shape>
</clip>
</item>
For adding those customization to my progressBar, I used this code:
<SeekBar
android:id="#+id/seekBar"
android:thumb="#drawable/thumb"
android:progressDrawable="#drawable/custom_progress_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
For more information, I used this thread
Custom seekbar (thumb size, color and background)
I want to know how I can create a progress bar that is like this:
I already have drawn the progress of the progress bar in image file, how am i going to put it into the progress bar?
my progress bar XML 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">
<shape>
<gradient
android:angle="270"
android:startColor="#ffffffff"
android:endColor="#ffffffff"
android:centerColor="#ffffffff"
/>
</shape>
</item>
<item
android:id="#android:id/progress" >
<shape>
</shape>
</item>
</layer-list>
Thank you!
Please refer this answer :- MultiColorprogressBar
Or try this plugin SmoothProgressBar
How do I create a custom horizontal ProgressBar style using styles.xml and then utilize it when I create a ProgressBar like so:
ProgressBar bar = new ProgressBar(this, null, ???)
All the tutorials I've seen focus on attaching the style when the widget is defined in the XML layout, which is not what I need. I've tried mixing tutorials but I get lost when I try to call up my style via android.R, and the method by which you modify styles seems to be different depending on where in the code you do it.
Basically I want to do this:
http://www.tiemenschut.com/how-to-customize-android-progress-bars/#comment-203
in styles.xml.
Turns out what I wanted was a Drawable.
This helped: http://www.learn-android-easily.com/2013/05/custom-progress-bar-in-android.html
And then later I found this, which also helped: http://www.learn-android-easily.com/2013/05/custom-progress-bar-in-android.html
I customized an XML file in a new folder I created: res/drawable/custombar.xml, then customized it like the site had it:
<?xml version="1.0" encoding="UTF-8"?>
<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>
<corners
android:radius="5dip"
/>
<gradient
android:angle="270"
android:centerColor="#ff5a5d5a"
android:centerY="0.5"
android:endColor="#ff747674"
android:startColor="#ff9d9e9d" />
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip"/>
<gradient
android:angle="0"
android:endColor="#ff009900"
android:startColor="#ff000099" />
</shape>
</clip>
</item>
And then set it to the ProgressBar in my Activity like so:
ProgressBar bar = new ProgressBar(this, null, android.R.style.Widget_ProgressBar_Horizontal);
bar.setProgressDrawable(getResources().getDrawable(R.drawable.custom_progressbar));
Hopefully this helps some people out.
I am creating an app which has a progress bar as one of the components.
I want to customize the color of the progress bar with that of my device theme. I am unable to get through it.
The min level of my app is 11.
Following are the images. But I have given the color to the progress bar explicitly. But I want it that according to different devices theme, the color of the progress should also change.
E.g., in the images attached, the color of the tab selection and the progress bar progress is the same.
Please use below code...
seekbar_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"
android:dither="true"
android:drawable="here set your gray image">// if possible so use 9-patch image
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:angle="270"
android:centerColor="#FFFFFF"
android:centerY="0.75"
android:endColor="#FFFFFF"
android:startColor="#FFFFFF" />
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"/>
</layer-list>
seekbar_progress_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="Here use your blue image"// if possible so use 9-patch images
android:tileMode="repeat"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
/>
</clip>
</item>
</layer-list>
please set background as seek_bar.xml in progressbar..
You can use this site to create a custom theme for you. Just download the folder and copy all of the files into their proper res folder (don't replace because you'll lose all of your already made layouts and style as well as your values) and then set the style of the progress bar as well as any other element to the corresponding style within those files. I like this method over doing everything by hand because it saves time and energy for simple tasks like changing the general app theme as well as specific elements.