Xamarin - change the background color of the progress bar element

Question

Xamarin - change the background color of the progress bar element

Tupý Šimon 21

How can I properly change the progress bar background color? I can see that using "colorControlNormal" has an effect on it, but the color appears to be a lot brighter than the color I've set it to be. The color also doesn't change in some cases that appear to be related to an insufficient amount of contrast between the progress bar and the background.

note that I'm only looking for a solution that would work on android.

Thanks in advance

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2022-10-04T07:07:50.233+00:00

Hi @Tupý Šimon , you can set BackgroundColor directly for ProgressBar in Xamarin.Forms. You said "on Android", your project is a Xamarin.Android project and you want to add a custom style for ProgressBar on Android, right? Could you describe more about how you use "colorControlNormal"? And would you mind sharing some code snippets? As noted in the Q&A FAQ: How to write a quality question
Tupý Šimon 21 Reputation points

2022-10-04T12:30:27.24+00:00
Hi, thanks for the reply.

I'd love to send an image showing my issue, but the image button doesn't seem to work :D - I'm trying to change the color of the 'empty' part of the progress bar - the BackgroundColor only changes the background color of the whole element.

Below you can see how I'm using the colorControlNormal - this snippet is used in values/style.xml

<item name="colorControlNormal">#FF0000</item>

Below you can see the progress bar xml code:

<ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" HeightRequest="4" x:Name="SearchProgressBar" ProgressColor="#a973ff" IsVisible="true"/>

Answer accepted by question author

0 additional answers

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,456 Reputation points Microsoft External Staff

2022-10-04T07:07:50.233+00:00

Hi @Tupý Šimon , you can set BackgroundColor directly for ProgressBar in Xamarin.Forms. You said "on Android", your project is a Xamarin.Android project and you want to add a custom style for ProgressBar on Android, right? Could you describe more about how you use "colorControlNormal"? And would you mind sharing some code snippets? As noted in the Q&A FAQ: How to write a quality question
Tupý Šimon 21 Reputation points

2022-10-04T12:30:27.24+00:00

Hi, thanks for the reply.

I'd love to send an image showing my issue, but the image button doesn't seem to work :D - I'm trying to change the color of the 'empty' part of the progress bar - the BackgroundColor only changes the background color of the whole element.

Below you can see how I'm using the colorControlNormal - this snippet is used in values/style.xml

<item name="colorControlNormal">#FF0000</item>

Below you can see the progress bar xml code:

<ProgressBar Grid.Column="0" Grid.ColumnSpan="3" Grid.Row="1" HeightRequest="4" x:Name="SearchProgressBar" ProgressColor="#a973ff" IsVisible="true"/>

Answer 1

Hello @Tupý Šimon ,

You can define the the background and progress properties under Resources /drawable folder in the Android project, and set the ProgressDrawable for progressBar via Custom Renderers:
First, you could right-click drawable folder , click Add->New Item->Android->Android Layout to add a new xml file named custom_progressbar(or any other name you prefer to ), then define the color.
custom_progressbar.xml

<?xml version="1.0" encoding="utf-8"?>  
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
      <item android:id="@android:id/background" >  
            <shape>  
            <solid android:color ="#FF0000"></solid>  
            </shape>  
      </item>  
      <item android:id="@android:id/progress">  
            <clip>  
            <shape>  
                  <solid android:color ="#a973ff"></solid>  
            </shape>  
            </clip>  
      </item>  
</layer-list>

After that, you can custom the progressbar via Custom Renderer:

[assembly: ExportRenderer(typeof(Xamarin.Forms.ProgressBar), typeof(CustomProgressbarRender))]  
namespace ProgressBarColorSample.Droid  
{  
    public class CustomProgressbarRender : ProgressBarRenderer  
    {  
        public CustomProgressbarRender(Context context) : base(context)  
        {  
        }  
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.ProgressBar> e)  
        {  
            base.OnElementChanged(e);  
            if (Control != null)  
            {  
                Android.Widget.ProgressBar progressBar = Control as Android.Widget.ProgressBar;  
              Drawable customDrawable = Context.GetDrawable(Resource.Drawable.custom_progressbar);  
              progressBar.ProgressDrawable = customDrawable;  
             
            }  
        }  
    }  
}

Best Regards,
Wenyan Zhang

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Tupý Šimon 21 Reputation points

2022-10-07T07:12:34.847+00:00

thanks, this seems to have worked!

Share via

Xamarin - change the background color of the progress bar element

0 additional answers

Your answer