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)
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>
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.
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.
currently I'm doing some enhancements for my audio recorder and now I added the amplitude to get the mic input levels and display it for the user to see if the audio is being recorded or not. It's working properly with the dialog.setProgress(); but since I badly wanted it to be displayed nicely in front of the user I plan to make it change in color and hide the background of the progress showing only the progress part where it changes depending on the progress level. let's say 20 below is green 40 below is yellow 60 below is orange and red for 60 up like the typical audio levels we see in media players. But I don't know why I can't even set the background of my progress bar into transparent as well as changing my progressDrawable changes the whole progressbar in my case. Need some help for this. Anyway here's the screenshot and XML:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/mic_level"
android:indeterminate="false"
android:layout_below="#+id/chk_Record"
android:layout_alignParentLeft="true"
android:layout_marginTop="31dp"
android:layout_alignParentRight="true"
android:progress="50"
android:clickable="false"
android:progressDrawable="#color/holo_bright_blue"
android:background="#color/transparent"/>
You could create a drawable for your progress bars, like below. This is a very rough guide I have taken from one of my projects, so you probably (almost certainly) do not need gradients, but it should give you a rough idea at least.
Below makes the background transparent for a progress bar and changes the fore-colour to green.
Place this in the drawable folder, name is progress_styles.xml and now in the progressbar set:
android:progressDrawable="#drawable/progress_styles"
<item android:id="#android:id/background">
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#android:color/transparent" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#00ff00" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="5dip" />
<gradient
android:startColor="#00ff00" />
</shape>
</clip>
</item>
I hope this helps you.
Gradient angle can help to vary color on change of progress bar state.
You have to create custom xml for that with layer and add item to it like...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"> //---this is progress background
</item>
...
<item android:id="#android:id/progress"> //----this is progress status
</item>
</layer-list>
Check my this answer for detail, if it could help
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…