Bar

Bar bind value with increment buttons

Mutate a bound int subject via subject_increment_event instead of dragging.

The bar listens to subject_value. Each +/- button carries two <subject_increment_event> children — one on clicked and one on long_pressed_repeat — so a tap nudges by step and a hold keeps repeating. min_value/max_value clamp the result and rollover="true" wraps around once the bound is hit; hold past 100 to see it wrap back to 0.

Bar image indicator

Use bitmaps as the bar track and indicator — the bar clips each image to its part.

bg_image_src replaces the solid background fill with pixels sampled from a bitmap. Set it on selector="main" for the background track and on selector="indicator" for the filled portion. As the value rises, the indicator image is revealed left-to-right, showing cyan segments that transition to yellow then red at the high end. Both images are 280×30, matching the bar widget size.

Bar modes

Compare normal, symmetrical, and range modes.

Normal fills from min_value to value. Symmetrical needs a range that crosses zero and fills outward from the middle, so positive and negative values pull the indicator in opposite directions. Range mode draws a band between start_value and value, useful for picking an interval rather than a single number.

Bar orientation and size

Compare horizontal and explicit vertical bars.

The horizontal bar uses the default orientation derived from a wide-and-short size. The vertical one sets orientation="vertical" explicitly and uses a tall, narrow size so the indicator grows upward instead of left-to-right.

Bar styling

Style the MAIN track and the INDICATOR independently, with a gradient fill.

Bar exposes two parts: MAIN (the background track) and INDICATOR (the filled portion). Each is styled separately via selector="main" and selector="indicator". The indicator style adds a horizontal gradient and a darker inner shadow so the fill reads as a glossy progress strip on top of the recessed track.

Bar value and custom range

Drive the indicator with a custom min/max range.

The first bar uses the default 0..100 range with value 30. The second bar shifts the range to -20..80 with value 35 to demonstrate that ranges need not start at zero — the indicator length is computed relative to wherever the range begins.