7

I want to make a vertical progress bar in android while performing a particular action. The progress should start from from 1st icon and end in the final icon sh0wing steady progress. I cant seem to find a way to do it.

if any body can help get one foot in the door . I will be highly obliged.

Marvin Pinto
  • 30,138
  • 7
  • 37
  • 54
windwaker
  • 315
  • 3
  • 12
  • 1
    possible duplicate of [Android - set a ProgressBar to be a vertical bar instead of horizontal?](http://stackoverflow.com/questions/3926395/android-set-a-progressbar-to-be-a-vertical-bar-instead-of-horizontal) – Ted Hopp Jan 06 '12 at 20:30
  • 3
    It's actually not a duplicate of that at all. – Steve Blackwell Jan 06 '12 at 21:05

3 Answers3

15

It's a bit hard to tell the transition you are trying to attempt between those two images. So you want to start with the B/W image, but does it transition from B/W to Color by cross-fading, or do you slowly want to apply pieces of the color image from the bottom up over the B/W piece?

If the latter is your choice, then your actual image will comprise of two drawables together inside a <layer-list>. One static, and the other representing a ClipDrawable that will reveal a portion of the color image based on its level value. For example, create an XML file:

res/drawable/progress_background.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
  <item>
    <bitmap android:src="@drawable/ic_launcher_bw"/>
  </item>
  <item>
    <clip
        android:clipOrientation="vertical"
        android:gravity="bottom"
        android:drawable="@drawable/ic_launcher"/>
  </item>
</layer-list>

Then set that Drawable on something like an ImageView to display the progress, and change the value with calls to setLevel(), i.e.

//This is any view subclass that you have chosen to do this
ImageView progress;

progress.setImageResource(R.drawable.progress_background);

//Adjust the progress by adjusting the drawable's level
progress.setImageLevel(500);
// -- OR --
progress.getDrawable().setLevel(500);

Drawable levels are set by default from 0 to 10,000 to represent fully clipped to fully revealed.

HTH

devunwired
  • 62,780
  • 12
  • 127
  • 139
  • you nailed it i want the latter choice (like God of War loading screen in their website). I will definitely try your suggestion thanks a lot – windwaker Jan 11 '12 at 06:37
  • I am facing a problem. In a test activity i am using a single imageview and using the progress_background.xml as you defined above. After setting the setImageResource and setting the setlevel to a static 6000 i am getting a blank screen .No trace of any image.Now if i remove the static "flame_bw" from the progress_background.xml and keep only one item then i am able to see a clipped image. No idea why it is not showing anything when using 2 items :( – windwaker Jan 12 '12 at 18:46
  • I noticed a small bug in my XML that may have tripped you up. The `` tag requires a `src` attribute as opposed to a `drawable` attribute. Also, I made note of the fact that you will want to use the `gravity` attribute as well to make it come from the bottom. By default it reveals from the center. Answer has been edited. – devunwired Jan 12 '12 at 21:18
  • Accepted sorry for the delay didn't exactly know how to accept. Thanks :) – windwaker Feb 08 '12 at 07:30
0

you could use a LevelListDrawable and set the level using setLevel(int)

http://developer.android.com/reference/android/graphics/drawable/LevelListDrawable.html

You can add continous frames of the progressbar in levellistddrawable and keep incrementing the level.

nandeesh
  • 24,740
  • 6
  • 69
  • 79
0

The best way I can think of to do that is to use the original bitmap as a background and then draw parts of the finished image over it from the bottom up. This way you don't need a bunch of different images--just incrementally draw the finished image. I think it can be done with something like this:

// setup
// assuming firstImage is the initial one and secondImage is the final one
int totalHeight = firstImage.getHeight();
Canvas canvas = new Canvas(firstImage);
ImageView imgView = (ImageView)findViewById(R.id.flame_bar_view);
imgView.setImageBitmap(firstBitmap);
Rect src = new Rect (0, totalHeight, 
                     firstImage.getWidth(), totalHeight);

// then on each update
void updateFlameBar(float percentage) {
    int height = (int)(totalHeight * percentage);
    src.top = totalHeight - height;
    canvas.drawBitmap(secondImage, src, src, null);
}
Steve Blackwell
  • 5,904
  • 32
  • 49