Forum Xamarin Xamarin.Forms

How can we change color of Progressbar?

AlfonsoRodriguezAlfonsoRodriguez USMember ✭✭
edited October 2016 in Xamarin.Forms

This is my code :

< ProgressBar Progress="0.5" WidthRequest="500" HeightRequest="15" HorizontalOptions="StartAndExpand" / >

Try and background, but I want to change the indicator color line progress


  • kishangkishang PHMember ✭✭

    I created a custom progress bar to change the color.
    Below, is my working custom progress bar. I changed the height and the color using renderer.

    For Android:

    using System;
    using YourNameSpace;
    using YourNameSpace.Droid;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.Android;
    [assembly: ExportRenderer(typeof(CustomProgressBar), typeof(CustomProgressBarRenderer))]
    namespace YourNameSpace.Droid
    public class CustomProgressBarRenderer :ProgressBarRenderer
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
        Control.ProgressDrawable.SetColorFilter(Color.FromRgb(182, 231, 233).ToAndroid(), Android.Graphics.PorterDuff.Mode.SrcIn);
        //Control.ProgressTintListColor.FromRgb(182, 231, 233).ToAndroid();
        Control.ProgressTintList = Android.Content.Res.ColorStateList.ValueOf(Color.FromRgb(182, 231, 233).ToAndroid());
        Control.ScaleY = 10;

    For iOS:

    using CoreGraphics;
    using YourNameSpace;
    using YourNameSpace.iOS;
    using UIKit;
    using Xamarin.Forms;
    using Xamarin.Forms.Platform.iOS;
    [assembly: ExportRenderer(typeof(CustomProgressBar), typeof(CustomProgressBarRenderer))]
    namespace YourNameSpace.iOS
    public class CustomProgressBarRenderer : ProgressBarRenderer
       protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)
        Control.ProgressTintColor = Color.FromRgb(182, 231, 233).ToUIColor();// Color..FromHex("#254f5e").ToUIColor();
        Control.TrackTintColor = Color.FromRgb(188, 203, 219).ToUIColor();
    public override void LayoutSubviews()
        var X = 1.0f;
        var Y = 7.0f;
        CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y);
        this.Transform = transform;
        this.ClipsToBounds = true;
        this.Layer.MasksToBounds = true;
        this.Layer.CornerRadius = 5; // This is for rounded corners.

    FYI. To make this work you need a new class:

    public class CustomProgressBar :ProgressBar
      public CustomProgressBar()

    Utilize this in your XAML as:

    <ContentPage xmlns="" 
    <control:CustomProgressBar x:Name="progressBar" Progress=".02"  />
  • AW.0337AW.0337 RUMember ✭✭

    Hi @all,

    I try to change the color of the ProgressBar in UWP for some time now without success.

    What I've done so far was trying different Methods from the Internet (including Win8 ways etc.) and now I am here:
    In the UWP.App.xaml I have:

    <Application x:Class="MEDePORT_FrontEnd.UWP.App" xmlns="" xmlns:x="" xmlns:local="using:MEDePORT_FrontEnd.UWP" RequestedTheme="Light">
                    <ResourceDictionary Source="Resources\Theme.xaml"/>

    The Resources\Theme.xaml (Built as Page) looks like this (pretty small for testing purposes):

    <ResourceDictionary x:Key="Light" xmlns="" xmlns:x="">
        <SolidColorBrush x:Key="ProgressBarIndeterminateForegroundThemeBrush" Color="Yellow" />
        <SolidColorBrush x:Key="ProgressBarForegroundThemeBrush" Color="Green" />

    (I create/instantiate the views (including the ProgressBar) programmatically in my PCL.)

    My questions are:

    • Why the code above do not work? Is there a simple explanation?
    • What I have to do, to reach my Goal of coloring the ProgressBar for UWP?

    I would appreciate any help!
    Thank You in advance

    Alex W.

  • JohnHardmanJohnHardman GBUniversity admin

    @AlfonsoRodriguez @AW.0337

    As @kishang said, the easiest way to do this is to add a custom renderer, and add a simple subclass of Xamarin.Forms.ProgressBar.

    For UWP, the custom renderer just needs to set
    Windows.UI.Xaml.Controls.ProgressBar.Foreground to the desired Brush. Rather than hard-code the Brush, I create one based on the ForegroundColor property that I add to the subclass or ProgressBar.

    public class MyAppProgressBar : ProgressBar
        public static readonly BindableProperty ForegroundColorProperty = BindableProperty.Create(
        public Color ForegroundColor
            get { return (Color)GetValue(ForegroundColorProperty); }
            set { SetValue(ForegroundColorProperty, value); }
    } // public class MyAppProgressBar : ProgressBar

    This can be extended further, by adding support for the border color and thickness as well, although I haven't needed to do that so far.

  • AW.0337AW.0337 RUMember ✭✭
    edited February 2017

    Hello @JohnHardman and @AlessandroCaliaro

    thank You for Your posts. Unfortunatelly I didn't get notified about Your answers (may be I missed to configure my settings here).

    Nevertheless... John, Your answer looks promissing and I'll test it asap.
    And Alessandro, thank You to linking to Johns answer in another thread.

    Thank You for Your advice.
    Best regards!

  • JohnHardmanJohnHardman GBUniversity admin

    @AW.0337 - I'm not sure if this is a new thing, but I think for notifications to work in the forums for users with a "." in their id, it's necessary to wrap the id in quotes.

  • AW.0337AW.0337 RUMember ✭✭


    I've tested it right now in another thread. You're right with the quote-thing.

    Thank You!

  • AW.0337AW.0337 RUMember ✭✭

    Hi everyone,

    @JohnHardman, unfortunately I wasn't able to set things correctly. I've created a new class in my PCL called "MyProgressBar", included the Namespace in my Page (xaml) (in PCL) and set the control like:

    and it didn't work. I think, I have to write some code in the .UWP project too, but don't know where and how. Seems I have to learn how to custom render :smile:

    BUT: I got my colored ProgressBar.

    I got the default Theme for the ProgressBar from:
    (the pretty long code block)

    copied it to my App.xaml and changes one single setter value. It works for me... Pretty simple

    <Application x:Class="MyApp.UWP.App" xmlns="" xmlns:x="" xmlns:local="using:MyApp.UWP" xmlns:platform="using:Xamarin.Forms.Platform" RequestedTheme="Light"> <Application.Resources> <Style TargetType="ProgressBar"> <Setter Property="Foreground" Value="Orange" /> <!-- Here are my changes to orange --> <Setter Property="Background" Value="{ThemeResource SystemControlBackgroundBaseLowBrush}" /> <Setter Property="BorderThickness" Value="{ThemeResource ProgressBarBorderThemeThickness}" /> <Setter Property="Maximum" Value="100" /> ... ... ... </Style> </Application.Resources> </Application>

    Hope, this will help someone who's looking for a simple and straight forward solution.


  • JohnHardmanJohnHardman GBUniversity admin
    edited February 2017

    @AW.0337 - Yes, that's another way of changing the Windows.UI.Xaml.Controls.ProgressBar.Foreground that I mentioned. I'm still dithering about whether to change to using Styles for this sort of thing... :-)

  • AswathiPSAswathiPS USMember ✭✭

    hi @AW.0337 , regarding your Feb 2017 post ,can you please share the code

  • DennyyDennyy Member ✭✭

    I guess not

  • udayuday Member


    If you need an advance multi color progress bar. Please use this nuget plugin MultiColor.ProgressBar.
    You can show multiple status in single line with differ color.

Sign In or Register to comment.