I have a custom Seekbar that I have made using 9 patch images so I can have different aspects for the main progress, the secondary progress and the background.
As of now, this is the result I have:
And the code to generate it is:
<item
android:id="#android:id/secondaryProgress">
<clip>
<nine-patch android:src="#drawable/dw_sec_prog" android:dither="true"/>
</clip>
</item>
<item
android:id="#android:id/progress">
<clip>
<nine-patch android:src="#drawable/dw_prog" android:dither="true"/>
</clip>
</item>
<item
android:id="#android:id/background">
<nine-patch android:src="#drawable/dw_bg" android:dither="true"/>
</item>
The problem is that for the secondary progress (dw_sec_prog) I have a transparent background and the background (dw_bg) is being shown below it.
The desired result shall be something like this:
This result shall keep the background of the secondary progress transparent. I know that in the layer-list there is an option to write a layer mask (mentioned here) but that is not useful for me since I'm restricted to api 16 and this solution only works on 21.
Is there then a way to make that happen ?
EDIT: Small clarification
Related
First of, I have read the multiple topics about this subject here on SO. Methods like PorterDuff colorfilter and changing setBackgroundResource. They all work but with strange hiccups that happen at complete random.
I have a button with following style (unpressed state = white, pressed = gray):
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<shape>
<solid android:color="#ffafafaf" />
<corners android:radius="30dip"/>
</shape>
</item>
</layer-list>
</item>
<item>
<layer-list>
<!-- SHADOW LAYER -->
<item>
<shape>
<solid android:color="#66000000" />
<corners android:radius="30dp"/>
</shape>
</item>
<!-- CONTENT LAYER -->
<item android:left="1dp" android:top="1dp" android:bottom="2dp" android:right="2dp">
<shape>
<solid android:color="#ffffff" />
<corners android:radius="30dp"/>
</shape>
</item>
</layer-list>
</item>
</selector
>
So to make this button green instead of white when clicked I have tried two different approaches. First one
button.getBackground().setColorFilter(Color.GREEN, PorterDuff.Mode.SRC_ATOP);
Than to make it go back to normal (white) I do:
Drawable d = button.getBackground();
button.invalidateDrawable(d);
d.clearColorFilter();
This make the button go back to normal (white), but when I press it isn't gray (as it was before setColorFilter) but green. Somehow the colorfilter got transferred to the buttons pressed state.
Second approach. I created an additional drawable button style identical to my normal one except for item color being green (instead of white)
So with this approach I can change the button color like this:
b6.setBackgroundResource(R.drawable.green_button);
And I change it back to normal:
b6.setBackgroundResource(R.drawable.normal_button);
This works as expected except for a strange behavior that happens 1/10 when I try to reset the button back to normal. The button becomes gray and it seems like it didn't read the setBackgroundResource. This happens all random and nothing in the logcat revile anything.
Please somebody help me figure out what is causing this or proposing your method for doing this. I would rather not use an imagebutton with a textfield overlapping the button with relative layout, than change color by changing imagebutton rsc. But please there has to be another way?
Invalidate your button to force a refresh.
b6.invalidate();
That way your button should be redrawn every time.
I have created the following progressbar style and set the corner radius to both shapes (background, and pogress). But it seems that when I animate / set progress below 90 my progressbar current progress shows rectangle shaped borders, without any radius. I would like to know if it is possible to have the corner radius all the time, even if the progress is 30 or less than 90,95. Can anyone explain why this is not working?
Also I need this to work with the API LEVEL 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="25dp" />
<solid android:color="#00000000"></solid>
</shape>
</item>
<!-- Define the progress properties like start color, end color etc -->
<item android:id="#android:id/progress">
<clip>
<shape>
<corners android:radius="25dp" />
<gradient
android:startColor="#fff"
android:centerColor="#fff"
android:centerY="1.0"
android:endColor="#0d1522"
android:angle="270"
/>
</shape>
</clip>
</item>
</layer-list>
Update: I've added the right code that explains my problem
Ok. After researching and doing some more tries to accomplish this I only got to the solution of using a 9patched PNG file to make this work.
It is definately possible to have corner radius all the time. I did it by adding this line before setcontentview method of your custom progress bar.
customProgressDialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
This will make your whole view transparent. So fill the boundary inside your corners with some color.
I would like to change the behavior of an android seekbar so that the secondary android seekbar is actually drawn on top of the primary android seekbar. From the ProgressBar documentation listed here:
http://developer.android.com/reference/android/widget/ProgressBar.html#attr_android:secondaryProgress
This progress is drawn between the primary progress and the
background.
Current look of secondary Progress bar:
Desired look of secondary progress bar:
Ideally I'd like to override a method in ProgressBar.java in Android to change the order of drawing so that the secondary progress bar is drawn on top of the primary progress bar, but I've had difficulty finding the proper area in the source code to override. Any ideas where to look?
I have had success attempting to draw two progress bars one on top of another using a relative layout, but this approach requires creating two controls.
This is a late answer, but just I found out how to do this. Not that difficult :)
First of all look at how the progress drawable is defined in the android project [here].(https://github.com/android/platform_frameworks_base/blob/master/core/res/res/drawable/progress_horizontal_holo_dark.xml)
All you have to do is switch the order of secondaryProgress and progress so that progress comes before (lies below) secondaryProgress like this:
<item android:id="#android:id/background"
android:drawable="#android:drawable/progress_bg_holo_dark" />
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#android:drawable/progress_primary_holo_dark" />
</item>
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#android:drawable/progress_secondary_holo_dark" />
</item>
Now sadly those resources are not public. So you will have to copy progress_bg_holo_dark.9.png, progress_primary_holo_dark.9.png and progress_secondary_holo_dark.9.png to your projects drawable-xhdpi folder (and maybe to the same with other dpi images as well).
Then adjust the xml file like the following (just remove "android:"):
<item android:id="#android:id/background"
android:drawable="#drawable/progress_bg_holo_dark" />
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/progress_primary_holo_dark" />
</item>
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/progress_secondary_holo_dark" />
</item>
does anybody know why I am getting this (see photo)?
Here is how I set it:
this._seekBar.setProgressDrawable(_context.getResources().getDrawable(R.drawable.common_controls_player_progressbar_bg_expanded));
this._seekBar.setThumb(_context.getResources().getDrawable(R.drawable.ringtone_scrub));
this._seekBar.setThumbOffset(0);
this._seekBar.setMax(1000);
this._seekBar.setMinimumHeight(6);
Seekbar itself:
<SeekBar android:id="#+id/seekbar_ctrl" android:layout_width="wrap_content" android:layout_height="wrap_content" android:maxHeight="6dp"/>
Expanded view xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<solid android:color="#color/player_progressbar_gray"/>
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#color/player_progressbar_gray"/>
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#color/player_progressbar_green"/>
</shape>
</clip>
</item>
</layer-list>
It does happen in both expanded and collapsed view. What am I missing?
Thank you in advance
this was due to the launch of two controls that I was toggling. 1. expanded mode 2. collapsed. State of the progress was lost between toggles since I was only setting one control at a time. So what I did to fix this was: I placed 2 progress bar controls on the control holder and was setting them both at the same time. One remained hidden the other one was shown. During toggle event I switched the visability. That solved the issue. The second issue we had with same control was the progress on tap would flicker back and forth before being set. It turned out to be the issue with the OS of the phone and related to the player itself. We got a new OS build release and that fixed the issue.
I want to make seekbar like this: http://img687.imageshack.us/img687/2371/volumec.png
The thing is, that Ive already found customizing seekbars over here http://groups.google.com/group/android-developers/browse_thread/thread/be3fed0b4f766cc?pli=1
but the problem is, that I need **those gaps** between in my drawable and I dont know how to manage that.
Would you be so kind some of you, I`ll appreciate it very much.
Thanks in advance, wishing all the best!
this is my resources style.xml file that is applied to seekbar:
<item name="android:indeterminateOnly">false</item>
<item name="android:progressDrawable">#drawable/seekbarcolors</item>
<item name="android:indeterminateDrawable">#drawable/seekbarcolors</item>
<item name="android:minHeight">20dip</item>
<item name="android:maxHeight">20dip</item>
<item name="android:thumbOffset">8px</item>
<item name="android:focusable">true</item>
and here is my #drawable/seekbarcolors:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<shape>
<solid android:color="#ff0000" />
</shape>
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<solid android:color="#00ff00" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<clip>
<shape>
<solid android:color="#0000ff" />
</shape>
</clip>
</item>
A Seekbar is a pretty powerful widget. Ddo you want the user to be able to "seek" the volume here? It's not made to show progress with gaps.
What you need here (if you don't need to grab and seek the volume) is lots simpler. Create a single ImageView to the right of "Volume" in your sample pic. In your progress-watching AsyncTask, put code in onProgressUpdate() to change the shown image across 10 images - each the same as the last but with one more bar - as progress breaks each 10%. You can write code to put a single image times properly positioned across a space, but that is harder and buys you little.
The thing is that i need to seek volume..as you can see, i' ve styled seekbar with my custom shape where colors are set
Last thing i need to do is create repeatable shape with block of opacity 1 and block with opacity 0. How this can be done? I am new to android developmemt therefore not very smart with shapes :) thanks
To change Volume bar colour in android In framework/core/res/res/layout change colour in volume_adjust.xml