I am creating progress bar using imageview with layer list of clip drawable and it is working like a charm. Here is the code:
The xml of background drawable:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background">
<bitmap android:src="#drawable/energy_backing" >
</bitmap>
</item>
<item android:id="#android:id/progress">
<clip
android:clipOrientation="horizontal"
android:drawable="#drawable/energy_full"
android:gravity="left" />
</item>
</layer-list>
The xml of progress bar:
<ImageView
android:id="#+id/pbEnergyBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_centerHorizontal="true"
android:src="#drawable/progress_bar_energy2" />
And offcourse I can set the progress by calling imageview.setImageLevel(progress).
My question is , how can I add a secondary progress bar like the one in default ProgressBar ?
I thought of adding another clip drawable but then how can I call setLevel twice on two different clips? any guidance!
Thank you
You could just add another ImageView with the secondary layer list and lay it out exactly on top of the first ImageView...
EDIT: Actually, you might be able to use ProgressBar with your drawable.
add another layer to your list with <item android:id="#android:id/secondaryProgress">
in ProgressBar set android:progressDrawable="#drawable/progress_bar_energy2"
See if that works.
Related
I have created custom seekbar to make it work according to my need. There are two questions related to it.
Before it let me show you my code for seekbar
In android xml
<com.abc.projectname.customlayout.CustomHorizontalSeekBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="80dp"
android:layout_centerVertical="true"
android:max="7650"
android:paddingLeft="30dp" // Padding given to show thumbnail properly
android:paddingRight="30dp"
android:clickable="false"
android:paddingTop="20dp"
android:tag="drawable/seek_bar_layout_two"
android:thumb="#drawable/dial" />
CustomHorizontalSeekBar Is a class which I have created to get the tag from seekbar and set progress drawable value as whatever tag have supplied to support multiple theme
seek_bar_layout_two 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"
android:drawable="#drawable/deselect">
</item>
<item
android:id="#+android:id/progress"
android:top="20dp"
android:bottom="20dp"
android:drawable="#drawable/lt_grey_seek_bar">
</item>
<!-- android:drawable="#drawable/loadingbar"> -->
</layer-list>
Here deselect is and highlighted image which I want to show as background of seekbar permanently.
lt_grey_seek_bar xml
<?xml version="1.0" encoding="utf-8"?>
<clip xmlns:android="http://schemas.android.com/apk/res/android"
android:clipOrientation="horizontal"
android:gravity="left" >
<shape android:shape="rectangle" >
<corners android:radius="5dp" />
<stroke
android:width="1dp"
android:color="#color/lt_grey_border" />
<gradient
android:endColor="#color/lt_grey_end"
android:startColor="#color/lt_grey_start" />
</shape>
</clip>
Questions
1) Can I give same background image for custom seekbar for enable and disable state? If yes than how? It is a special need from my client and it is not necessary to show disable state.
What I have tried:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/seek_bar_layout_two xml" android:state_enabled="false"/>
<item android:drawable="#drawable/seek_bar_layout_two xml" android:state_pressed="true"/>
<item android:drawable="#drawable/seek_bar_layout_two xml" android:state_selected="true"/>
<item android:drawable="#drawable/seek_bar_layout_two xml"/>
</selector>
But Still no success.
2) As you can see in my seekbar implementation I have given padding to show proper thumbnail. But when I click outside the drawn state of seekbar where this padding is available seekbar automatically turns into non highlighted form. How should I stop it?
Seekbar and its touch area by which it gets non highlight
Non highlight seekbar look
I have been trying lots of ways to make it work successfully but unable to do so. Can anyone provide me a solution.
This is what I have done in my custom seekbar class
Rect bounds = getProgressDrawable().getBounds();
setProgressDrawable(getResources().getDrawable(idByTag));
getProgressDrawable().setBounds(bounds);
Styling determinate progress bar is easy, there are many tutorials to achieve that. This is on I'm using:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#drawable/progress_background"
android:progressDrawable="#drawable/progress"
android:id="#+id/progressBar" />
Drawable progress_background.xml:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#color/colorAccent" />
<corners android:radius="4dp" />
</shape>
</clip>
</item>
</layer-list>
It looks like this:
But when progress is not available yet, I'd like to use indeterminate one. So I tried:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="8dp"
android:background="#drawable/progress_background"
android:progressDrawable="#drawable/progress"
android:indeterminateTint="#color/colorAccent"
android:indeterminateTintMode="src_in"
android:indeterminate="true"
android:id="#+id/progressBar" />
But indeterminate progress is not stretched to bar height:
I tried to style it using drawable file as well but it looked like broken determinate progress bar (filling from 0 to 100 all over again).
Desired indeterminate progress bar should look like regular one but with 8dp height and rounded corners.
Default indeterminate progress bar animation use a non 9-patch pngs. So it can't be stretched over your 8dp height progress bar. You should add android:indeterminateDrawable with custom animation:
<animation-list
xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="#drawable/progressbar_indeterminate1" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate2" android:duration="50" />
<item android:drawable="#drawable/progressbar_indeterminate3" android:duration="50" />
...
<item android:drawable="#drawable/progressbar_indeterminateX" android:duration="50" />
</animation-list>
Then make drawables to animate it like this (it can be xml or image or 9-patch):
Animation frame 1
Animation frame 2
Never versions of android (api21+) use AnimatedVectorDrawable for indeterminate ProgressBar.
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
For more detail visit here. Android horizontal progress bar?
You know, android has a View named: LinearProgressIndicator
you can have indeterminate animation in the horizontal progress bar with that.
<com.google.android.material.progressindicator.LinearProgressIndicator
android:layout_width="280dp"
android:layout_height="12dp"
android:indeterminate="true"
app:indicatorColor="#color/app_brand_primary"
app:trackColor="#color/color_divider"
app:trackCornerRadius="6dp"
app:trackThickness="12dp" />
p.s - it has a weird behaviour for toggling the indeterminate value programmatically. to do that you should
set visibility to invisible,
set indeterminate boolean,
then show the view again.
example :
progress.isVisible = false
progress.isIndeterminate = true
progress.isVisible = true
Issue :
https://github.com/material-components/material-components-android/issues/1921
i have a trouble with custom seekBar .I used http://android-holo-colors.com/ to give images of seekBar .The problem is a vague beginning of seekBar . How can i solve this problem?!
ScreenShot:
this code (i check , images are the same as the default except for colors.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/scrubber_track_red" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_secondary_red" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/scrubber_primary_red" />
</item>
</layer-list>
and SeekBar
<SeekBar
android:id="#+id/seekTrack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:progressDrawable="#drawable/scrubber_progress_red"
android:thumb="#drawable/scrubber_control_red"
android:indeterminate="false"
android:layout_weight="1"
style="?android:attr/progressBarStyleHorizontal"/>
Images i got from aforementioned service (android holo colors)
Check your drawables, there's probably a gradient in there somewhere as opposed to a solid color. I'd guess that the problem is in #drawable/scrubber_progress_red. Replace it temporarily with something like #android:color/holo_green_light. If the gradient goes away, we'll know that the scrubber_progress_red drawable is the problem.
Also, what is the name of the file that the layer-list is in?
I want to create a bar like this initially when progress is zero it will be a fade in color but and as progress goes on it will become bright on that part(This is best I can explain) main thing is i want bar to show all colors at the same time.
Clip your "on" drawable:
over your "off" drawable:
by using res/drawable/custom_progress_drawable.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- Background -->
<item
android:id="#android:id/background"
android:drawable="#drawable/custom_progress_bar_off"/>
<!-- Secondary progress - this is optional -->
<item android:id="#android:id/secondaryProgress">
<clip android:drawable="#drawable/custom_progress_bar_secondary" />
</item>
<!-- Progress -->
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/custom_progress_bar_on" />
</item>
</layer-list>
From an Activity, use
Drawable progressDrawable = ResourcesCompat.getDrawable(getResources(), R.drawable.custom_progress_drawable, getTheme());
myProgressBar.setProgressDrawable(progressDrawable);
or in xml, use
android:progressDrawable="#drawable/custom_progress_drawable"
And here's the result when using android:max="10" in xml:
It's a little bit off, but you could use setMax() with something more like 10000 and do some offsetting calculations when calling setProgress() to make it cleaner.
Finally! I went on a mission to figure this out for you, so if this suffices, feel free to give me that bounty, haha.
Try using this in your layout:
<View android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight=".20"/>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:orientation="horizontal"
android:gravity="center"
android:layout_weight="0.62">
<View android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight=".03"/>
<ProgressBar style="?android:attr/progressBarStyleHorizontal"
android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight="0.94"
android:progressDrawable="#drawable/progressmask"
android:progress="0"
android:max="10"
android:rotation="180"/>
<View android:layout_width="0dip"
android:layout_height="fill_parent"
android:layout_weight=".03"/>
</LinearLayout>
<View
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight=".18"/>
</LinearLayout>
which references this drawable (progressmask.xml):
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<corners android:radius="50dip" />
<gradient android:startColor="#00000000" android:endColor="#00000000" android:angle="270" />
<stroke android:width="1dp" android:color="#00000000" />
</shape>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="50dip" />
<gradient android:startColor="#aa000000" android:endColor="#aa000000"
android:angle="270" />
<stroke android:width="1dp" android:color="#00000000" />
</shape>
</clip>
</item>
</layer-list>
and this image (colorprogress.png)
What it does is set the image as the background of a linearlayout, which contains a progressbar. The progressbar adds a semi-transparent black mask to the image to make it appear that the lights are off.
NOTE: In order to get this affect, I had to monkey with the progress bar (i.e. flip it, and set it to only 10 intervals. You will have to do some math to get the progress to line up with the image. i.e. setprogress((100-trueprogress)/10). Sorry I did not do this part for you.
This is what it will look like at progress 50% (the small x's and triangles will disappear on the device)
I hope this answers your question!
Like already suggested i think you should go for an layer-list and set multiple drawables then.
Main problem on this is that i need to be resizeable. An fixed size solution would be quite easy to implement.
You can't actually set the progress bars to different colors. You can however use only the on drawable and get the effect that you want. You could just apply a layer mask. What I mean is add a Relative layout which is initially say dark grey throughout i.e the gradient has only ONE color which is dark gray. Now, use code to set the gradient color on the left programmatically. Obviously the color on the left is going to be transparent. Learn more about Linear Gradients. That's about it. You just need to calculate the position from where the right gradient starts, rather where the left gradient(transparent)ends.
This method is slightly flawed and may not work on ALL devices.
The flawless method would be to create multiple .9png images and set the drawable of the progress dialog programmatically every time.
I have an Android activity which has three buttons. I have set a color for the main activity LinearLayout's background via:
android:background="#color/homeBgColor"
I want to put up a translucent background image behind the buttons on the activity. I tried using an ImageView, but it pushes the buttons down.
Is there any way to set the background color as well as image for the activity, like we do in CSS?
#mydiv{ backround: #262626 url("link-to-my-img.png");}
Thanks
You should be able to achieve this with a <layer-list /> drawable. Within it, place an <item /> which contains a <bitmap /> (example stolen from the developer docs):
<item>
<bitmap android:src="#drawable/image"
android:gravity="center" />
</item>
Then, your other item can just be a solid color. Make a drawable resource that just has that solid color in it, then combine them:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/your_color" />
<item>
<bitmap android:src="#drawable/image"
android:gravity="center" />
</item>
</layer-list>
(You may have to flip the order of the <item /> tags, I forget which is on top.)