Progressbar with Percentage Text in Xamarin forms

Question

I am trying to build an app using Xamarin forms PCL project in which I need to show a progress bar with filled % text next to it like this-

I have tried box view but I am having difficulty in setting its width as per my percentage.

I have tried progress bar as well-

  <StackLayout Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Padding="10,0,10,0">
            <ProgressBar BackgroundColor="Transparent"  Progress="0.08"  HorizontalOptions="FillAndExpand" HeightRequest="20"/>
            <Label Text="25"></Label>
          </StackLayout>

Anyone has any idea how to achieve this?

Answer 1

Put both the ProgressBar and Label in a Grid container. A grid container lays out multiple elements on top of each other. Next set the Margin left of the label relative to the percentage of the progress bar. You may have to fiddle with the exact margin to get it to align properly.

Example:

<Grid Grid.Row="0" Grid.Column="0" Padding="10,0,10,0">
    <ProgressBar BackgroundColor="Transparent"  Progress="0.08"  HorizontalOptions="FillAndExpand" HeightRequest="20"/>
    <Label Text="25" Margin="80,0,0,0"></Label>
</Grid>

Answer 2

You have to use Absolute layout or relative layout in this case with 2 children progressbar & label and based on progress change the text property.