1

I am working on an app which requires a vertical progress bar with more width .Is that possible in android. If so please give me a way to start with?

Navdroid
  • 4,453
  • 7
  • 29
  • 47

2 Answers2

4

There is a simpler was of doing this. I had the same problem as you, and spent a good while looking around the forums for how to create a vertical progress bar.

For my application, I was required to create a custom progress bar, so what I did was take the image I was given and then use the scale function to scale it up. Now the only difficult part of this is, that part of the scale class requires you to scale around a pivot of the image, and you can't just use a set floating point, as it will change depending on screen size.

Below I will explain the code for one of my vertical progress bars. I used my vertical progress bar to show how much data was used for a phone tariff, i.e. 150 out of 500.

First have an image you want to scale

ImageView orangeBar;

Then declare a scale variable.

ScaleAnimation scaleO;

Find it of course

orangeBar = (ImageView) findViewById(R.id.orange);

Then apply the scale animation like this

scaleO = new ScaleAnimation(1.0f, 1.0f, 1.0f, 2.0f, 1f,
            pivotPercent);
    scaleO.setDuration(3000);
    scaleO.setFillAfter(true);
    orangeBar.setAnimation(scaleO);

The third and fourth variable are the ones you change to make it grow vertically. 1.0f is the default size of the image. And the fourth variable is the one you play with to make it grow as much as you want.

The final variable sets the pivot, which is where abouts in the image, it will animate from. I used a variable called pivotPercent and used a method to calculate the pivot. The reason I did this, is that the pivot variable needs to be different depending on the screen size. I noticed when I was animating mine, when I put mine on emulator and on my phone, it was causing issues. So I created a method which would calculate the pivot based on screen size.

So I would first get the height of the screen like so

Display display = getWindowManager().getDefaultDisplay();
    final int height_c = display.getWidth();

I would then do this

double getPercent = (double) height_c / 100 * 3.7;
    int pivotPercent = (int) getPercent;

Took a bit of playing around with to get this working just right.

I hope this helps, if you have any questions about the code, just ask and I will try to clarify

UPDATE:

Here is the progress bar as the application loads

enter image description here

and after animation affect

enter image description here

In this case, the bar has shrunk. As I said I used my vertical bar to mark progress. So the the bar always starts off at default position as shown in image one, I just chose an arbitrary position to begin with. The tariff is out of 500, so in the example I have given, they had used 150 out of 500. I have a method which calculates the percent of the tariff they used and updates the bar to reflect that.

Took me a day or so to perfect, but good fun playing around with it.

AdamM
  • 4,400
  • 5
  • 49
  • 95
  • Could you add a screenshot of the bar? I'd be interested to see how it looked. Thanks. – Ricky Jan 20 '12 at 11:23
  • Updated, hope it helps. Just realized, second image is smaller, that was unintentional, took bad screenshot and edited it badly. But you get the idea, the bar has shrunk and that's the main thing you are after. I can grow the bar by however much I want just by editing the values in the scale animation method – AdamM Jan 20 '12 at 11:41
  • If you have any problems with the code, just ask and will try and assist – AdamM Jan 20 '12 at 11:44
  • I'm not OP, but was just interested, so thanks for the screenshot, fair play. I'm +1'ing you, as you've clearly put a lot of effort into this answer. – Ricky Jan 20 '12 at 12:30
1

I would start with overriding the paint or repaint component. Forgot the function name maybe OnDraw()? -you can paint what you want.

Someting custom when onfocust Override onDraw to change how the drawing occurs (Android)

Community
  • 1
  • 1