Progress bar in cross platforms

AswathiPSAswathiPS USMember ✭✭
edited October 2017 in Xamarin.Forms

I want to add progress bar with border, border width, border color , need to adjust height and fore ground color

Best Answer


  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭

    @AswathiPS - What have you tried, what are you having problems with, and what platforms are you targeting?

  • NamyslawSzymaniukNamyslawSzymaniuk USMember ✭✭✭

    I'd recommend this plugin -
    it's NOT native ProgressBar, it's just Grid, which is splitted between multiple columns, which are differently "coloured" - like "occupied progress color" + "non occupied progress color".
    Of course you can set height, or even customize it -

  • AswathiPSAswathiPS USMember ✭✭

    @JohnHardman, am using Xamarin cross platforms 1.outer border, 2.inner fill color, 3. progress

  • JohnHardmanJohnHardman GBUniversity ✭✭✭✭✭
    edited October 2017

    @AswathiPS - Build it up step-by-step.

    Assuming that you want this appearance on all target platforms...

    First, forgetting about the border and border radius, use one of the Layout types (AbsoluteLayout, RelativeLayout, Grid) to draw a red BoxView and a blue BoxView side-by-side, using a variable from 0-100 to change the width of each.

    Second, use the same Layout class to position a Label that displays the value of the variable, with a percentage sign. This Label will want its BackgroundColor to be Color.Transparent. You may need to fudge the positioning slightly to avoid the Label being cropped when near 0 or near 100. For example, for near 0, you might position the Label to the right of the red/blue join, for near 100, you might position the Label to the left of the red/blue join, for middling values, you might center the Label on the red/blue join.

    For how to do the border, it depends on whether you want this progress bar to accept the focus (e.g. by hitting the Tab key, by touching, or by mouse-click) on platforms where this is appropriate (e.g. UWP). Possibilities include using a Frame, a Button, a combination of BoxViews and images, or one of a variety of possibilities using a custom renderer. Whichever you choose, it's likely that you will use Color.Transparent (or use Opacity) for the central part, so that when positioned over the bits done above, they will still be visible, whereas the outer parts will not be transparent. If you Google for circular button or circular image implementations on Xamarin.Forms, those will likely give you the basis of doing that. Whichever option you go for, you will use the Layout chosen above to overlay the red/blue bar with this last bit.

    I haven't looked at the link provided by @NamyslawSzymaniuk - take a look at that to see if that provides what you want, or whether it provides you some of the code for doing what is described above.

Sign In or Register to comment.