Android SeekBar [ProgressBar] style - how to set custom background drawable - android

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

Related

Material Design suggestions for edit button for each item

I wanted to add an edit button to each button in a list of items. Android action buttons should only be used once per view so those don't make sense. Is there any other way of doing it by following material guidelines? This button should be something that flies off and flies on depending on whether the overall edit button is pressed or not.
You should use flat buttons because buttons pop from backgrounds, easily grab attention, and guide the user’s eye. Here is a nice post about this
UPDATED:
To design a flat button effect you have to do the following
define your button and set background to a drawable which contains definitions for status pressed and status default
for status pressed write a drawable resource with solid color
for status default write a drawable with a item pointing to status pressed drawable as a background. And draw a lighter shape as another item with a android:bottom="2dp"
flat_button.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/rect_pressed"/>
<item android:drawable="#drawable/rect_normal"/>
</selector>
rect_normal.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/rect_pressed" />
<item android:bottom="#dimen/layer_padding">
<shape android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<solid android:color="#color/blue_normal" />
</shape>
</item>
</layer-list>
rect_pressed.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="#dimen/corner_radius" />
<solid android:color="#color/blue_pressed" />
</shape>
if you need to read the full tutorial go here.
You should probably use flat or raised button (depending on how important your edit function is).

Special background for a custom seekbar in Android

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

Android ProgressBar set progress rounded corners

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.

Changing Android SeekBar to draw secondary progress on top of primary progress?

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>

android - seekbar progress does not get painted all the way

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.

Categories

Resources