How to make a Radial/Circular ProgressBar Not Spin - android

I have a horizontal ProgressBar that works great.
<ProgressBar
android:id="#+id/progressBar1"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_height="15dp"
android:layout_marginBottom="5dp"
android:background="#drawable/progress_radial_background"
android:progressDrawable="#drawable/custom_progress_bar" />
I do this:
pb.setMax(100);
pb.set(point);
And it shows the status of a user's level. When it fills all the way, they reach a new level and it starts over. It will only move/increase when the user do some action to increase points.
However, I'd like to make this circular instead of horizontal. But when I do, it wont stop the spinning animation (like a loading animation). Can I make the circular ProgressBar the same way?
Custom Progress Bar code in my Drawable folder:
<?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/list_press">
<corners android:radius="6dp" />
</item>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progress_bar_green" />
</item>
</layer-list>

There is no standard Android widget that does what you want.
However you could use this library that does it: https://github.com/Todd-Davies/ProgressWheel.

This poster seems to have found an answer.
It seems like they took the android drawables for the circular progress bar and filling, specified in xml layout that it was a horizontal progress bar and made it determinate.

Please take a look to this GitHub library called RefreshActionItem, I think it is exactly what you are looking for:
https://github.com/ManuelPeinado/RefreshActionItem?source=cc
You have as well this one for another idea or just check it out:
https://github.com/f2prateek/progressbutton?source=c

Related

Equally distributed icons in an Android Progressbar

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.

ProgressBar.setProgressDrawable not working for Android 2.3

I am currently working with a dynamically updating ProgressBar. Through certain percentages, the progessbar sets a drawable of a different color. We currently have various colored clip drawable defined in a drawable xml. The one entitled progressbar_blue_states is detailed as follows:
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="#android:id/background"
android:drawable="#drawable/progressbar_grey">
</item>
<item android:id="#android:id/progress">
<clip android:drawable="#drawable/progressbar_blue" />
</item>
</layer-list>
Whenever we need to update the dialog, we call the following code:
progressBar.setProgressDrawable(getResources().getDrawable(R.drawable.progressbar_blue_states));
However, not only does this not update the ProgressBar, but also it takes out the progress bar altogether where whitespace is left in it's place. However, if I set android:progressDrawable="#drawable/progressbar_blue_states" in the xml and take out this setProgressDrawable() call, it loads correctly. We need the setProgressDrawable to update the colors as needed.
This call works fine in Android 4.0+ however in Android 2.3 we're running into some trouble. Any ideas?
Edit
This is how we set up the ProgressBar in the xml:
<ProgressBar android:id="#+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_marginBottom="2dp"
android:indeterminate="false"
android:indeterminateOnly="false"
android:progress="24"
android:max="100"
android:progressDrawable="#drawable/progressbar_red_states" />
I have got the same bug, but it is solved by using this answer
This means there is a new drawable set to the seekbar, but the size of the drawable is 0, you won't see anything.
Rect bounds = mySeekBar.getProgressDrawable().getBounds();
mySeekBar.setProgressDrawable(newSeekBarBackground);
mySeekBar.getProgressDrawable().setBounds(bounds);
According to this post https://stackoverflow.com/a/6953534/3223742
a good solution is to set progress to 1; re-set max progress, and then set the real progress :
progressBar.setProgressDrawable(...);
progressBar.setProgress(1);
progressBar.setMax(maxProgress);
progressBar.setProgress(progress);

Retain Default selectableItemBackground in ActionBarSherlock with MenuItem.setActionView

I am using a split ActionBar to display some simple media controls. See Below:
I used MenuItem.setActionView to override the default view for the Fast Forward and Rewind buttons because I need to detect when the user initially touches the control (to start rewinding) and subsequently releases the control (to finish rewinding). See code below:
ImageView rewindButton = new ImageView(getBaseContext());
rewindButton.setId(rewindViewID);
rewindButton.setClickable(true);
rewindButton.setImageResource(R.drawable.ic_action_rewind);
rewindButton.setOnTouchListener(forwardBackwardListener);
MenuItem rewindMenu = menu.findItem(R.id.menu_rewind);
rewindMenu.setActionView(rewindButton);
return true;
This is all working well for me but has had an unintended side effect. When I touch the fast forward or rewind button I do not get the default blue background (as shown on the skip backward control above). It displays no background at all. I tried setting the background in the onTouch handler but the background does not fill the height of the ActionBar in the same way as the default one (see example image below), it seems like there is some padding or margin in place, but I don't know how to remove it.
I have tried the following with no luck:
Setting the height of the ImageView Manually to try to fill the ActionBar
Returning True or False from the onTouch Handler
Does anyone know how I might resolve this?
I came up with a workaround which was to set the background of all the items to a small radial gradient when the item is selected. The gradient is still cut off a little but it is hardly noticeable. It makes the custom and regular buttons look almost the same.
First I created the radial gradient in a file called res/drawable/radialbackground.xml . Notice the end color is transparent, this is important to fade the gradient into nothing so it doesn't fill the whole rectangle.
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<gradient
android:centerX="0.5"
android:centerY="0.5"
android:endColor="#00FFFFFF"
android:gradientRadius="35"
android:startColor="#color/Gray"
android:type="radial"
/>
</shape>
Then I created a StateListDrawable called res/drawable/actionitembackground.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:exitFadeDuration="#android:integer/config_mediumAnimTime" >
<item android:state_pressed="true" android:drawable="#drawable/radialbackground" />
<item android:drawable="#android:color/transparent" />
</selector>
Then I assigned that statelistdrawable to the backgrounds of my custom ActionViews :
rewindButton.setBackgroundResource(R.drawable.actionitembackground);
Then I altered the style for the actionbar to include this new radial fill for the regular action bar items.
So, in values/styles.xml I added:
<style name="Theme.MyTheme" parent="Theme.Sherlock.Light">
<item name="android:selectableItemBackground">#drawable/actionitembackground</item>
<item name="selectableItemBackground">#drawable/actionitembackground</item>
</style>
In my case, the base style was Theme.Sherlock.Light but you would replace that with whatever style you wanted to amend.
Then I set that style as the style for my application in AndroidManifest.xml
<application
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/Theme.MyTheme"
android:uiOptions="splitActionBarWhenNarrow" >
This seemed easier than digging through trying to debug why the background is cut off. Perhaps I will spend more time on it another day.
I had exactly the same problem, but with a spinner on action bar,
you need to set de minHeight of yout view to actionBar height:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/drop_down"
android:minHeight="?android:attr/actionBarSize"
>
<Spinner
android:id="#+id/category_spinner"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/default_selector"
android:minHeight="?android:attr/actionBarSize"
android:gravity="center_vertical|right"
android:paddingRight="5dp"
/>

Android fly-in menu shadow

I have been toying with a few different libraries and code snippets for the past few days. I am trying to create a menu like the one seen in the facebook app.
Now there are many libraries and resources on building something of that kind, but I'm having major difficulties in drawing a shadow between the 'top' and 'bottom' page as to create the illusion that the 'top' page is actually on top.
Now the exact effect Im trying to create is displayed in this article:
http://android.cyrilmottier.com/?p=717
The author of the article I got this from is not very thorough in his explanation. This could be due to my programming-skills-under-development, or maybe I'm not the only one.
I'm using the following library and example app to test and develop with:
https://github.com/jfeinstein10/SlidingMenu
I would be very happy if anyone could help me get this to work.
PS: I'm very sorry, but since I'm a newbie here I am not allowed to post any pictures.
What I did is I'm putting a shadow at the right of my menu view (ie behindView) with a margin on the right of your above view :
<!-- Show shadow on the right of the menu -->
<RelativeLayout
android:id="#+id/menuShadow"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:focusable="false"
android:clickable="false"
android:background="#00000000"
android:layout_marginRight="40dp">
<ImageView
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_width="6dp"
android:layout_height="fill_parent"
android:background="#layout/border_menu_progressive_shadow"/>
</RelativeLayout>
With my shadow layout:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<gradient
android:startColor="#00101010"
android:endColor="#252525"
android:angle="0" />
</shape>
</item>
</selector>

ListView With Nine-Patch Item Background Issues

WARNING: The XML in this question is wrong, read the answer before you confuse yourself!
I have been banging my head on the wall for a while now. The following posts have shed light on the subject, but failed to solve my issue: Android ListView State List not showing default item background and ListView item background via custom selector
The proper nine-patch background shows perfectly when I select the list item, but I can not get the default nine-patch background to show initially. It seems to me that I need to set the default item background somehow, but I can't figure out how to do so.
List View:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/shopListHeader"
/>
<ListView
android:id="#+id/shopList"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:dividerHeight="0px"
android:divider="#FFFFFFFF"
android:listSelector="#drawable/shop_list_selector"
/>
</LinearLayout>
Selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:visible="true">
<!-- the list items are enabled and being pressed -->
<item
android:state_pressed="true"
android:drawable="#drawable/shop_list_item_pressed" />
<item
android:state_selected="true"
android:textColor="#FFFFFFFF" />
</selector>
Background:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
android:visible="true">
<item
android:state_selected="true"
android:drawable="#android:color/transparent" />
<item
android:drawable="#drawable/shop_list_item" />
</selector>
As you can see, I have dumbed down the examples from the references.
You may also notice that the Background selector isn't being referenced anywhere. I started tossing it in random places (if the app compiled the addition either had no effect or cause a forced close)
I have also made an attempt to stop the color of the text from changing to black and grey when an item is selected but not pressed (can be done by scrolling through the list). Since my background will be black in the center, the text becomes partially invisible when selected. That addition (the last item node in the Selector) does nothing, as far as I can tell.
Does anyone have any thoughts on getting this ridiculously time consuming functionality working?
I was gonna delete this thread, but I can't so I'll see if I can't use this as an example of what not to do :)
First, in the ListView XML: android:listSelector="#drawable/shop_list_selector"
Don't do that!
What I was trying to do here was set the background of the list items and the android:background property didn't work. You may have noticed that the item XML is missing, and that is because it was missing from my head! (I never touched it over the countless hours I was hammering away at this 'issue') So the line android:background="#drawable/shop_list_selector" goes in the item's properties and everything is groovy. (Remember the XML above is very wrong so don't use it!)
...Well except that it doesn't look as good in real life as it did in my head :(
Back to the drawing board!!!
You havent defined a "normal" state, see this example
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/blue"
android:state_pressed="true" />
<item android:color="#color/red"
android:state_selected="true" />
<item android:color="#color/white" />
</selector>
in here white is the "normal" state, in here you can find some documentation about it.
I hope this helps

Categories

Resources