Changing Color of Progress Bar using UI Toolkit

UI UI Toolkit
,
1

Hi, I’m trying to change the color of the progress bar using the built-in “progress bar” control in UI Toolkit. I’m attaching a screenshot of what it looks like in UI Builder.

8907693--1219368--upload_2023-3-27_19-13-55.png
8907693--1219368--upload_2023-3-27_19-13-55.png1919×923 84.6 KB

The progress bar itself (called “ChargeMeter” above) only lets you edit the color of text and borders, not the color of the bar itself. All of the children of ChargeMeter are greyed out and I can’t edit them at all in UI Builder.

I created a UI Document in my scene, attached this uxml as the source, and added a script to control the progress of the bar (this part works fine), but I don’t know how to properly change the color in my script.

I was looking at this post: How to change progress bar color? but I couldn’t quite follow what they were saying, I’m still new to Unity and C#. Changing the color of this seems like it should be trivial, but I’m stuck. Any help would be greatly appreciated!

2

Unfortunately UI Toolkit isn’t very newbie friendly. It has a reasonably high floor, but a super high ceiling with what you can do with it.

You might want to start with Unity’s uGUI/TMPro system instead, as they work within the game object/component architecture that you’ll be learning as you start your journey with Unity anyway.

I could try to answer your question, but… it probably also won’t make a lot of sense without a lot of underlying C#/Unity knowledge. Might be worth reading the docs on the USS selectors, along with how to find and manipulate visual elements via code. But it all assumes an intermediate or above knowledge level.

Ultimately this visual element is the one that is the bar itself:
8908506--1219575--upload_2023-3-28_20-9-36.png

You should be able to query it with the method suggested here and from there alter it’s background color style property.

3

Ahhh, thanks so much for the help, I was able to figure it out! I suspected that the Visual Element you underlined was the one I needed to edit, but I had no idea what its class name was or how to reference it in a query. Turns out that in the UI Builder, if you click the 3 dots beside “Hierarchy”, you can display the list of class names. See here:

8909337--1219776--upload_2023-3-28_10-50-18.png
8909337--1219776--upload_2023-3-28_10-50-18.png1919×923 62.7 KB

So now that I see that the relevant class name is “unity-progress-bar__progress”, the other forum post I referenced makes more sense. Here’s the code in the C# script I attached to the UI Document in my scene that turns the progress bar green:

using UnityEngine;
using UnityEngine.UIElements;

public class ChargeMeter : MonoBehaviour
{
    // The game object I'm getting info about charge % from
    public SpearController spear;

    private VisualElement root;

    private void Start()
    {
        root = GetComponent<UIDocument>().rootVisualElement;

        //Sets the progress bar color to be green
        var actualBar = root.Q(className: "unity-progress-bar__progress");
        actualBar.style.backgroundColor = Color.green;
    }
    private void Update()
    {
        //Updates the progress bar value to be equal to the charge %
        ProgressBar chargeBar = root.Q<ProgressBar>("ChargeMeter");
        chargeBar.value = spear.spearCharge;

    }

}
4

Glad you got it working. I’ll note that it probably makes more sense to cache a reference to the progress bar, rather than querying it every frame:

public class ChargeMeter : MonoBehaviour
{
    public SpearController spear;
   
    [SerializeField]
    private UIDocument _uiDocument; // lets assign this via the inspector

    private ProgressBar chargeBar;

    private void Start()
    {
        chargeBar = _uiDocument.rootVisualElement.Q<ProgressBar>();
       
        var innerBar = chargeBar.Q(className: "unity-progress-bar__progress");
        actualBar.style.backgroundColor = Color.green;
    }
   
    private void Update()
    {
        chargeBar.value = spear.spearCharge;
    }
}

Just some good practice to get into.

5

this is good and everything. but

how do we customize it in build . instead of doing it run time.

6

You’d use a style selector: https://docs.unity3d.com/Manual/UIE-USS-Selectors.html

Most likely a descendant selector.

7

Actually, instead of modifying the color in C#, you can create an USS file attached to your view which contains the classname of what you want to modify. In your case, it should be .unity-progress-bar__progress. It will look like that in USS :

.unity-progress-bar__progress {
    background-color: rgb(0, 255, 0);
}

And it will look like this in your UI Builder

9074809--1255729--upload_2023-6-12_16-27-41.png

But, if you want to modify that color dynamically at runtime/build, you have to do :

  • A C# script which will contains every possible colors and applying it directly to you visual element (like you already done before) ; or
  • A custom control that will inherit from ProgressBar and apply the color to the child directly ; or
  • Multiple classes that you will place on the root of the progress bar and you only have to remove/add classes to apply the color, like :
ProgressBar myBar;

void OnEnable()
{
    myBar = _uiDocument.rootVisualElement.Q<ProgressBar>();
}

void LateUpdate()
{
    if(myBar.value < 50)
    {
        myBar.RemoveFromClassList("green-progress");
        myBar.AddToClassList("red-progress");
    }
    else
    {
        myBar.RemoveFromClassList("red-progress");
        myBar.AddToClassList("green-progress");
    }
}

with the associated USS :

.green-progress .unity-progress-bar__progress {
    background-color: rgb(0, 255, 0);
}

.red-progress .unity-progress-bar__progress {
    background-color: rgb(255, 0, 0);
}
8

I had no idea that you could search for an element based on the class. This makes life a lot easier. Thanks for posting your code!