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.
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)
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'm trying to customize an indeterminate progress bar in xml but I can't find a way to square the edges. I've found the default xml drawables from the SDK resources but they just reference PNGs with no mention of shape.
This is the default xml from the SDK resources:
<?xml version="1.0" encoding="utf-8"?>
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/progressbar_indeterminate1" android:duration="200" />
<item android:drawable="#drawable/progressbar_indeterminate2" android:duration="200" />
<item android:drawable="#drawable/progressbar_indeterminate3" android:duration="200" />
</animation-list>
progressbar_indeterminate1, 2 and 3 are just square PNGs but it always displays the progress bar with rounded edges.
I've tried creating a shape and using the PNGs as a background with this:
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item
android:drawable="#drawable/progressbar_indeterminate1"
android:duration="200">
<shape>
<corners android:radius="0dp" />
</shape>
</item>
</animation-list>
But it doesn't change the shape. I'd post images but I don't have enough reputation yet.
What am I missing? Thanks for any help.
I just had the same problem and it seems that indeterminate drawable that is set using XML has rounded corners. In case you need square (or probably any other) edges then you need to set indeterminate drawable with the code:
// line below is needed to have sharp corners in the indeterminate drawable,
// ProgressBar when parsing indeterminate drawable from XML sets rounded corners.
progressBar.setIndeterminateDrawable(context.getResources().getDrawable(R.drawable.progressbar_indeterminate));
And then example of progressbar_indeterminate that I used:
<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
<item android:drawable="#drawable/progress_2b" android:duration="100" />
<item android:drawable="#drawable/progress_1b" android:duration="100" />
</animation-list>
I needed to have images repeated so I created progress_1b (and 2b) as follows:
<?xml version="1.0" encoding="utf-8"?>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/progress_1"
android:tileMode="repeat" >
</bitmap>`
Where drawable/progress_1 are real images that I want to be repeated as background of indeterminate progressbar.
This solution worked for me.
This worked for me. No PNGs. Just colors.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="0dip" />
<stroke android:width="2px" android:color="#80c4c4c4"/>
<solid android:color="#08000000"/>
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="0dip" />
<solid android:color="#11416a"/>
</shape>
</clip>
</item>
</layer-list>
I was looking to create a horizontal indeterminate ProgressBar without rounded corners that simply swept from left to right over and over again. To that end I created the following drawable:
<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/app_orange"/>
</shape>
</clip>
</item>
</layer-list>
This works just fine for a normal ProgressBar but when I set it as the indeterminateDrawable in the ProgressBar's layout file I got the correct animated behavior but the size of the ProgressBar became tiny and refused to stretch across the entire page as I had set in the layout.
After despairing of making this work I decided to create a custom view and animate it myself. To that end I used ObjectAnimator which was introduced in API 11. To use it in API 10 (and lower) I included the jar from the NineYearOldAndroid project. Worked like a charm.
The final step was to create my custom view:
public class ProgressLoad extends ProgressBar
{
public ProgressLoad(Context context, AttributeSet attrs)
{
super(context, attrs);
ObjectAnimator animator = ObjectAnimator.ofInt(this, "progress", 0, 101); // Need the 101 for the progress bar to show to the end.
animator.setDuration(2000);
animator.setRepeatCount(ObjectAnimator.INFINITE);
animator.setRepeatMode(ObjectAnimator.RESTART);
animator.start();
}
}
Then I simply included this custom view in my layout:
<com.example.views.ProgressLoad
android:id="#+id/pb_load"
style="#android:style/Widget.ProgressBar.Horizontal"
android:layout_width="match_parent"
android:layout_height="5dp"
android:layout_gravity="top"
android:progressDrawable="#drawable/content_progress_bar_determinate"/>
And voila, I had a horizontal rectangular progress bar (without rounded corners) whose progress bar swept across repeatedly. When I was done with it I simply removed the custom view from its parent.
The advantage of this technique is that one can set the speed at which the animation sweeps across by simply changing the value passed to animator.setDuration(int value).
Is there a way I can change yellow color in the SeekBar android widget?
Any soln?
Step 1: Create Your Image Drawables (9-Patch)
Before creating any XML drawables, make sure you create the image drawables (including one 9-patch drawable) needed for the seekbar background, handle, and progress sections. The 9-patch drawables will be put to use by the XML drawables in the steps below.
Create the following drawables and place them in your /res/drawable/ folder:
Step 2: SeekBar Progress Drawable
Now create an XML drawable for the Android seekbar progress (the blue-striped section in the example), call it seekbar_progress_bg.xml, and place it in your /res/drawable/ folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<clip>
<shape>
<gradient
android:startColor="#FF5e8ea3"
android:centerColor="#FF32a0d2"
android:centerY="0.1"
android:endColor="#FF13729e"
android:angle="270"
/>
</shape>
</clip>
</item>
<item>
<clip>
<bitmap xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/stripe_bg"
android:tileMode="repeat"
android:antialias="true"
android:dither="false"
android:filter="false"
android:gravity="left"
/>
</clip>
</item>
</layer-list>
The above XML first draws a semi-transparent, blue gradient, then layers the semi-transparent stripe image on top of the gradient. The highlighted line of code (line 20) refers to the stripe (semi-transparent) image inside your drawable folder, created in Step 1.
For more information on creating custom shapes via XML, check out the Android drawable resources docs, specifically the bitmap and shape sections.
Step 3: SeekBar Background Drawable
Next create the main seekbar progress drawable; it’ll assign a drawable to the seekbar progress and secondaryProgress actions inside your seekbar. Name your drawable something like seekbar_progress.xml, place it inside your /res/drawable/ folder:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/seekbar_background"
android:dither="true"
/>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:startColor="#80028ac8"
android:centerColor="#80127fb1"
android:centerY="0.75"
android:endColor="#a004638f"
android:angle="270"
/>
</shape>
</clip>
</item>
<item
android:id="#android:id/progress"
android:drawable="#drawable/seekbar_progress_bg"
/>
</layer-list>
The first bit of highlighted code above (line 8) is referring to the seekbar background image (9-patch drawable) created in Step 1 and (line 29) is referring to the drawable you created above in Step 2.
Step 4: Bringing it all together…
At this point, all you need to do is call your seekbar_progress drawable when declaring your seekbar:
<SeekBar
android:id="#+id/frequency_slider"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:max="20"
android:progress="0"
android:secondaryProgress="0"
android:progressDrawable="#drawable/seekbar_progress"
android:thumb="#drawable/seek_thumb"
/>
The two lines of highlighted code are setting the progress and thumb drawables for the SeekBar item. The #drawable/seekbar_progress refers to the XML drawable created in the previous step.