Android Code Snippet Simple Progress Bar

This is a sample of progress bar I use in my project. It only use B4A Core library and native view. Yes, what you need is only 2 panels to create the progress bar. The reason I create this view is because I don't like the square corner of default progress bar and I want to customize the colour.

1. Create a panel "pnlBar" with height = 10 and corner radius = 5. Set the colour to Gray (#808080)
2. Create another panel "pnlValue" with same height and corner radius as pnlBar (you can copy and paste from pnlBar). The width doesn't matter, it can be value smaller than pnlBar. Make sure the Left value is same as pnlBar. Set the colour to any colour you like. Example: SpringGreen (#00FF7F)
3. Then set the width of the progress bar value in code.

B4X:
pnlValue.Width = (Value / 100) * pnlBar.Width

That's it!

A demo source code is attached.
 

Attachments

  • 000.png
    000.png
    15.4 KB · Views: 1,540
  • 060.png
    060.png
    16.7 KB · Views: 1,638
  • 100.png
    100.png
    21 KB · Views: 1,510
  • Simple Progress Bar.zip
    9.2 KB · Views: 1,097

aeric

Expert
Licensed User
Longtime User
Target SDK version 19 vs 26.
Notice that second progress bar is native progress bar which has no gray background in version 19 but in version 26 it shows a light gray background.
Screenshot_2018-07-21-00-40-18-223_my.computerise.ui.test.png Screenshot_2018-07-21-00-45-04-431_my.computerise.ui.test.png
 

aeric

Expert
Licensed User
Longtime User
jap, this problem i have too :mad::mad::D
Ya, my boss asked why not make it like download progress or a circle ? I told him I purposely custom made it so if the line is not animated then user won't know what it means. Somemore currently my page is still empty. It just look like a normal line and can't show is it the progress is half way or full.
 
Top