Android: Custom horizontal progress bar - android

Im trying tu customize horizontal progress bar in my application. I want it to have sharp corners (no radius) and blue color (not default yellow or a mix of colors, so I also dont want to be using gradient). The reason Im mentioning these two things is that in every example code I found, the progress bar color was being changed into a color mixture using gradient instead of a simple color. For example in this post:
How to change progress bar's progress color in Android
I was trying to modify this code but with no luck. My question is what is the meaning of the three sections of the code in the answer to the question I linked above? I mean the
#android:id/background
#android:id/secondaryProgress
#android:id/progress
Also when I was trying to get some help from the Eclipse using ctrl+space, it couldnt give me any because the content assist wasnt available at that location. I only want my progress bar to change to a simple color and not to have rounded corners.
Thanks!

I stole the answer from your link. Something like that should work for you:
<!-- this is the Background Shape of the ProgressBar -->
<item android:id="#android:id/background">
<shape>
<!-- you don't want round edges, so I removed it here.
We dont even need a gradient, replace it with solid -->
<solid
android:color="Your bg color" />
</shape>
</item>
You can edit the other accordingly, where progress is usually a yellow overlay and secondary a grey shadow over the yellow overlay.
Read this documentation for further reference

You should also include tags above shape for progress. Otherwise, progressbar will always show full.
Discovered here after a big headache: http://www.tiemenschut.com/how-to-customize-android-progress-bars/
Hope this helps somebody.

Related

Image "inside" button while keeping standard animations

I would like to define a button in Android, through XML, which, below the standard Button graphics (change color when clicked, slightly rounded edges,...), shows an image of my choice. I would like the final product to be somewhat like this:
I have tried change the src and background of an ImageButton, but it does not provide the intended effect. Could you please point me some way of achieving this?
Maybe that's not exactly what you mean by standard, but when you set a background, you end up having to recreate the behavior when the button is clicked. The best way to do it in Android is by using a selector as your button's background. Create a XML drawable with the selector in it.
Example:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/button_bg_pressed" />
<item android:drawable="#drawable/button_bg_default" />
</selector>
That way, when your button is clicked, it will change the background to other image that does what you want.
EDIT:
There are other modifiers such as focused, if you need.
If you want Lollipop's ripple effects, I think you can create a Layout and put your button inside it. Change the Layout background and set the button background to transparent. If that doesn't work, try adding android:background="?android:attr/selectableItemBackground" to your button.
As Paulo said, you can achieve the click effect with a selector.
See this answer (https://stackoverflow.com/a/30192562) it gives the code for a very nice and customizable ripple effect.

Progress bar using Drawables

I need to create a simple progress bar using two drawable images.
One is the background of course.
The other I need to scale according to a percentage float.
Is it possible using Java code only? I tried the setBounds() method with no avail... :(
thanks
You can perfectly and easily do that using only XML code.
First, in the layout of your activity specify the XML in where you declare the style of the progressbar, in this case #drawable/custom_progressbar:
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"
android:progressDrawable="#drawable/custom_progressbar"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:background="#drawable/progress_bar_background" >
</ProgressBar>
Then, in #drawable/custom_progressbar declare that the progress will be expressed with a bitmap that clips according to the progress. The id is important as it is used by Android's ProgressBar widget.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/progress">
<clip>
<bitmap android:src="#drawable/progress_bar_foreground" />
</clip>
</item>
</layer-list>
Then, in the declaration of the progress bat in the layout specify the background of the progressbar.
The background should be specified in theory in the progressbar layer list with the id android:id="#android:id/background, but it didn't work for me in this case. I think Android designers thought of that to be used as a stretchable 9patch or a tiled bitmap. I wanted to do the same as you and I only got it by declaring the background as usually in the view in the layout.
Hope that helps.
As I am sure you are aware, custom elements in Android take a significant amount of effort compared to the pre-compiled api's. If I were to do something like this, I'd create a custom class that extends View, and scale my progress image bitmap or canvas inside onDraw() method. And call PostInvalidate() for each time I need to update it. However, generally custom progress bars are done a bit differently in Android. Instead of scaling the progress drawable it simply reveals a portion of it depending on the percentage.
To get an idea on how to do a custom progressbar take a look at this.

How to change the shape of an onClick highlight?

I currently have icons in a GridView on my app. When they are clicked, an orange square appears around them briefly as a highlight. The only problem is that I think this looks amateurish and would like to change the shape so that it clips the icon in the GridView instead of a large square. If you are unsure as to what I mean, it is carried out successfully in the Catch Notes app, on their dashboard/home screen. I was just wondering whether anybody knew a way to tackle this or if it is simply a small layout attribute.
https://play.google.com/store/apps/details?id=com.threebanana.notes&hl=en
Thanks in advance, all help would be appreciated!
It looks effectively like this EditText in the image below. The way that it borders the EditText in orange is exactly how it borders the icons in the home screen when clicked.
First, in your layout file, specify a drawable background:
android:background="#drawable/bg_your_view"
Then edit the bg_your_view file which is in drawable:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/bg_your_view_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/bg_your_view_normal" android:state_focused="false"></item>
</selector>
At last, create corresponding drawable files for pressed and normal states:
bg_your_view_pressed.xml contains the shape, the color you want for highlight.
bg_your_view_normal.xml is similar, just without highlight effect.
I've decided that the easiest way to solve this problem is to simply reference another image when the image on the GridView has been clicked. This means that the second image can just be edited in Photoshop in order to have a glow around it.

ImageButton background swiching on it's own? Drawables gone wild?

I having an issue where the ImageButton background is being drawn with a different drawable from one of my resources. I'm setting the background to be transparent but on some cases it's picking up one of my drawables called bottom_shadow.9.png. Why why!? It's freaking weird...
I've seen this issue before... Some of my app users have complained seeing this issue and now I'm determined to figure this out! Take a look below what I currently have. Any tips or ideas would help.
The color value I created under values/colors.xml:
<color name="transparent">#00000000</color>
My ImageButton under my one xml layout under layout/:
<ImageButton
android:id="#+id/ibHelp"
android:layout_width="wrap_content"
android:layout_height="#dimen/settings_list_item_height"
android:background="#color/transparent"
android:contentDescription="#string/content_desc_more_information"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:scaleType="centerInside"
android:src="#drawable/btn_help" />
This is what I'm seeing on the generated R.java file:
public static final class drawable {
public static final int bottom_shadow=0x7f020000;
}
public static final class color {
public static final int transparent=0x7f080009;
}
This is what it should look like:
This is what I'm seeing:
Could it be related to this issue?
http://code.google.com/p/android/issues/detail?id=20283
I think you are facing the same issue as I on another project : When using the transparent color #00000000 on a background, Android will not actually make it transparent but instead use the background drawable of the element directly under it.
Not sure what I've just said is clear but to check if this is it, I found a quick and easy solutions : Don't use #00000000 as your background transparent but any other completely transparent color : #00FF0000 or even #00F00000 should do it.
See the issue I raised in Google tracker : http://code.google.com/p/android/issues/detail?id=24653
Why are you creating your own color when it's built into Android.R.color? I would try using:
android:background="#android:color/transparent"
Whether or not it fixes your problem, it's simpler and cleaner.
I think you wanna your button's background to be some kind of color, but you have assigned both a src and a color of the button(in the layout xml), which means that the button may use the src picture as the background, not a pure color. I don't know if I made the point.
Just to add to this, I was seeing really strange periodic display corruption in my transparent ImageButton background because I was specifying the items in my background selector as follows:
<item android:drawable="#android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
This might seem to work occasionally, but I definitely had cases where the ImageButtons would render with a ghastly all-white background instead of the nice transparent background.
Note that I was mixing up the android:drawable syntax with a color resource. The correct way to specify a color resource seems to be either an android:color="#FF00FF" attribute or as a child element of item using a element. I searched long and hard, and eventually found this post.

Set color of a shape drawable used as a TextView background in Android

I am using a shape defined as a drawable as background for a TextView. This allows me to add rounded corners and other other effects.
The shape is defined like this:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<corners android:topLeftRadius="8dp" />
</shape>
and I am using it like this:
<TextView
android:id="#+id/project"
style="#style/textView"
android:background="#drawable/project_textview_background"
/>
Now, I need to change the color of that TextView programmatically depending on some conditions. I have not been able to do that.
I tried to do setBackgroundColor but that seems to overwrite the background I previously defined so it doesn't show the rounded corners anymore.
I looked at a bunch of other API methods but got nowhere
Any help would be very much appreciated. Thank you
Any ideas?
the solution was actually to set the shape and color in code instead of using a drawable resource.
I used PaintDrawable(int color) which allows me to define whatever background color I want. Then I used the setCornerRadoii(float[]) to define the rounded corners and finally I assigned the PaintDrawable object to my textView background. Worked like a charme.
You could make other shapes that still has that corner attribute you already defined.
The way to fill the cell with bgcolor is written in next web page.(solid)
http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape
And if the conditions you mentioned depend on focus or press, you'd better to make selector instead of shape. Search with keyword "ColorStateList" in android reference. I want to leave the address, but I can't due to my reputation;;;

Categories

Resources