I am creating a custom SeekBar using 9 patch images.
The problem here is that on the first launch, the progress section is not aligned with the background.
Here's what it looks like on first launch:
And here's what it should look like, and actually looks like on later launches of the application:
The first behavior only appears after compilation or the application is killed in the app manager.
Here's the code for the progress bar:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background"
android:drawable="#drawable/bar_whole"/>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/bar_selected" />
</item>
</layer-list>
One thing that might be of interest as well, I set the thumb and progress drawables when constructing the object:
protected void init()
{
this.setProgressDrawable(getResources().getDrawable(R.drawable.volume_progress));
this.setThumb(getResources().getDrawable(R.drawable.volume_thumb));
}
Thanks.
Related
I am trying to add a border to an alert dialog. I am hoping to make it look like this:
The best solution I have found thus far is to use a nine patch drawable as the background for the dialog.
The problem with this is that I have not found a way to make a nine patch background that actually gives the dialog a consistent white line around it. This has been my best attempt thus far (sorry it is a little hard to see...) :
The problem is that this produces a dialog like this:
The problems here are twofold; the lines at the sides are way too thick, and the lines at the top are kind of faded by the shadow.
My only ideas are to either find a working nine patch that gives a consistently thick border, or to find a way to get the 'main layout' of the alert dialog, so I can add a padding to that directly.
What is the best way to go about setting up a border on an Alert Dialog like this?
The answer by questioner was very close to what I wanted, but it still left a big black line around the dialog that I was not interested in.
I deleted one of the layers from the layer list, and customised the padding on the white border. I also did not set the background to transparent as suggested would be a good idea in the comments.
The shape the is inside the item is to give the background the same curved edges on a dialog (if you look really closely on 3.0+, you can see a few pixels of round corners).
In a dialog_border.xml file in the drawable folder, I had this:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:top="6dp"
android:left="13dp"
android:right="13dp"
android:bottom="6dp">
<shape android:shape="rectangle" >
<solid android:color="#color/offWhite" />
<corners
android:radius="3dp"/>
</shape>
</item>
</layer-list>
And in my style I had this:
<style name="DialogTheme" parent="android:Theme.Holo.Dialog">
<item name="android:windowBackground">#drawable/dialog_border</item>
</style>
Although it could probably be set programatically rather than in the style if necessary.
In your dialog's xml set following background for top level view:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/white"/>
<item
android:bottom="1dp"
android:drawable="#color/black"
android:left="1dp"
android:right="2dp"
android:top="2dp">
</item>
</layer-list>
You can customise border width on each side.
I would like to create a ProgressBar with no background. I've been able to turn the background transparent, but there is still padding in the space where the background normally shows. Setting padding to 0 does not change this. Is it possible to achieve what I want without creating a custom drawable?
The issue is that the default 9Patch images used for ProgressBar have space around them. For example below is the standard holo_dark image used for the primary progress, secondary progress and background . As you can see, they each have areas of transparent space in their images.
progress_primary_holo_dark.9.png
progress_secondary_holo_dark.9.png
progress_bg_holo_dark.9.png
To achieve what you are after, you'll need to supply your own 9Patch images which do not have this extra space. Use setProgressDrawable() in your code or android:progressDrawable in xml, to set the Drawable for your ProgressBar.
You can combine all the necessary images in a single LayerList Drawable like the Android OS does. For example:
<?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/my_progress_bg" />
<item android:id="#android:id/secondaryProgress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_secondary" />
</item>
<item android:id="#android:id/progress">
<scale android:scaleWidth="100%"
android:drawable="#drawable/my_progress_primary" />
</item>
</layer-list>
You can find all the default graphic resources used by Android in the sdk/platforms/android-xx/data/res/ folder on the computer you're developing on.
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>
I'm trying something that would sound fairly easy to implement. However, it doesn't respond as expected. I'm using a Progressbar to draw a 5 state bar, where the user can click on any of the states to change the behavior of the application. My progressbar uses this drawable (just pay attention to the background element).
<?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/statusbar_thin" />
</item>
<item android:id="#android:id/secondaryProgress">
<clip>
<shape>
<gradient
android:endColor="#ffeeeeee"
android:startColor="#ffeeeeee" />
</shape>
</clip>
</item>
<item android:id="#android:id/progress">
<nine-patch
xmlns:android="http://schemas.android.com/apk/res/android"
android:src="#drawable/statusbar_thin" />
</item>
</layer-list>
This is the #drawable/statusbar_thin.
You may see they just don't look like vertically centered spots, but it doesn't matter. The problem is that, when the image is stretched (it's a 9 patch, as you may expect), the "superior black mark that expands the pixels below it" (I don't know how it's called. Anyone?) expands them randomly (By that I mean some parts expand twice more than others).
I'm not sure if there's a trick I didn't use, or it's just Android that uses indistinctly any block, instead of all of them evenly. Any ideas on that?
EDIT:
As #sandkasten suggested, I used the draw9patch application. However, as you see, it looks perfectly distributed, but on Nexus 7, it just doesn't work.
EDIT 2:
The status bar in black background. As you see, there's a big distance between the first and the second icon, while the selector is inbetween.
EDIT 3: Such an amazing world. I started playing with the top black marks, and, despite they weren't equally distributed at last, it worked.
If I understand you right, this should be the solution. Take a look at draw9patch.bat, which shows you a preview of your image and how android strech it. It's deliverd with the android sdk.
Using progress_horizontal.xml as a base drawable for my seekbar i was able to customize it pretty well. But unfortunately i stuck with the following problem. I need my progress to be made from two horizontal lines with different color something like this http://picasaweb.google.com/manigoad/Other#5442553107070487330 . In this case a blue line and transparent line below it.
So how can i make my progress to be made from two different colors.
Tnaks
I've had a look into creating the "stack" of shapes that you are looking for using "drawable" XML, but the padding/height values seem to be ignored.
There are two possible workarounds that I can think of:
Create a class that implements Drawable for the background and the progress and draw the custom colours/gradients yourself.
-OR-
Create a PNG of the background (on the right) and progress (on the left) from your mockups. About 30px wide should be fine (if you make them 1px wide, it will be put more pressure on the layout because it has to be repeated more times). Throw those in res/drawable/ and then load them into your styles using <bitmap>:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#android:id/background">
<bitmap android:src="#drawable/scroll_bg" />
</item>
<item android:id="#android:id/progress">
<clip>
<bitmap android:src="#drawable/scroll_progress" />
</clip>
</item>
</layer-list>