Custom style for dynamically generated ProgressBars/Widgets - android

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.

Related

How to create two shapes inside an item drawable?

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>

Add an item at current progressBar position - Creating a custom progress bar

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)

Android horizontal progress bar?

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,

Create rectangle progress bar in android

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.

No Marked Color in Seekbar

I want to remove the marked color (yellow in this case) in a seekbar.
Code:
<SeekBar
android:id="#+id/seekBar1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:max="20"
android:progress="10"
android:secondaryProgress="0"/>
Is there an easy way to do that?
See View dev doc. SeekBar derives from View and you should try to modify either the background using android:background with a Shape Drawable (with solid color) in the xml definitions or programmatically change the color using setBackgroundColor.
To remove the color, you should try to set it to a pure transparent color.
I've not tested, so let us know what happen if it fails.
Update
You could try that:
Define a res/drawable/white_bg.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#android:color/white" />
</shape>
Set the SeekBar android:background="#drawable/white_bg"
Give it first a try with a plain white color to see if that's a good start…
Ok, that doesn't work.
Final update
Ok, got it from a project of mine where I have customized a ProgessBar. Since a SeekBar derives from ProgressBar, you'll need to define a res/drawable/seekbar_bg.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="#ff9d9e9d"
android:centerColor="#ff5a5d5a"
android:centerY="0.75"
android:endColor="#ff747674"
android:angle="270"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<solid android:color="#android:color/transparent" />
</shape>
</clip>
</item>
</layer-list>
similarly that the platforms/android-8/data/res/drawable/progress_horizontal.xml file (android-8 is an example) and define theandroid:progressDrawable="#drawable/seekbar_bg" attribute for your SeekBar xml definition.
I assumed there that the #android:id/secondaryProgress item need not to be defined in the Layer List for a SeekBar but it should be verified…
You could as well redefine the thumb symbol selector by declaring a local selector inspired by platforms/android-8/data/res/drawable/seek_thumb.xml.
Interesting, I have learned a lot with this one since I never used a SeekBar, thanks! ;)
My apologies for the trial/error approach and the multiple updates…

Categories

Resources