Quick answer
A progress bar needs a track, a visible fill and a number with a clear meaning. You can design its appearance without coding, but it will only update automatically when the fill is tied to a supported source.
Set up the structure
Start with a small rectangular canvas. Add a background or track bar in a neutral color, then add a progress fill above it. Keep both bars the same height. Use rounded ends only if the fill and track align; a thick fill inside a thin track looks uneven.
Choose a sample value such as 60%. It is design data, not a reading from your phone. A basic example could show “Reading goal” on one line, “60%” in larger type, and the bar beneath. Leave enough space for “100%” so the layout does not jump when the number gains a digit.
Try it on your home screen
- Create a horizontal track that fits the home-screen slot without touching its edges.
- Add a fill layer on top and set an example percentage such as 30%, keeping the shapes aligned.
- Place a readable numeric label nearby so the bar is understandable without color.
- Connect a real source only when the editor supports it and verify the result changes with test data.
Set color and spacing before connecting data
Move the label and bar so they form one visual unit. The percentage should be readable against the background. Try a single accent color for the fill and use a softer tint for the track. Test the widget at the size you plan to use on the home screen.
WidgetCraft offers position, size, slider and color-wheel controls in its editor. Its beginner tutorial covers a progress-bar example. Ordinary layout editing does not require formulas or code.
Decide what the percentage means
For a habit or task, the source may be your own locally entered progress. For battery, it may be a device reading. A static illustration can be useful too, as long as you don't mistake it for live data.
After attaching a data-connected component, check what updates it and when. Some sources need permissions or a background refresh, while fixed text does not. Read why widgets stop updating if your number becomes stale.
Check the result
At zero progress the bar should remain identifiable, and at full progress the label should not overlap the end. A habit count such as '3 of 5 sessions' differs from a battery percentage; label it accurately. If the preview changes but the installed widget does not, inspect the source and refresh behavior.
Common question: Can I use a manually drawn bar to track live battery?
Only after connecting it to a real battery value if supported. A manually set fill length has no knowledge of the phone's charge.