Data Visualization & Status (Android)
Components for displaying data and status information on Android widgets.
LinearProgressIndicator
Section titled “LinearProgressIndicator”A horizontal progress bar.
Parameters:
progress(number, optional): Current progress value (0.0 to 1.0). If omitted, the indicator will be indeterminate.color(string, optional): Color for the progress indicator.backgroundColor(string, optional): Color for the background track.
CircularProgressIndicator
Section titled “CircularProgressIndicator”A circular progress indicator.
Parameters:
color(string, optional): Color for the progress indicator.
ArcProgressIndicator
Section titled “ArcProgressIndicator”A determinate arc gauge: a partial ring whose stroke fills clockwise, with rounded ends and a gap at the bottom by default. Children are centered on top of the arc, so a label, an icon, or nothing goes in the middle.
Parameters:
progress(number, optional): Fill fraction, clamped to 0.0–1.0. Defaults to0.color(string, optional): Stroke color of the filled arc. Defaults to the widget theme’s progress color.trackColor(string, optional): Stroke color of the unfilled arc. Defaults to the widget theme’s track color; usetransparentto hide the track.strokeWidth(number, optional): Stroke width in dp of both arcs. Defaults to8.startAngle(number, optional): Angle in degrees where the arc begins.0is 3 o’clock and positive is clockwise. Defaults to135.sweepAngle(number, optional): Total angular length of the track in degrees.360makes a closed ring. Defaults to270.lineCap('round' | 'butt', optional): End shape of both arcs. Defaults to'round'.gradientColors(string[], optional): Sweep gradient spread across the track, starting atstartAngle. Overridescolor. Needs at least two colors; a single color is drawn as a solid stroke, and the gradient is ignored if any color fails to parse.
<VoltraAndroid.ArcProgressIndicator progress={0.75} color="#22C55E" trackColor="#1F2937" strokeWidth={14} style={{ width: 140, height: 140 }}> <VoltraAndroid.Text style={{ fontSize: 28, fontWeight: 'bold' }}>75%</VoltraAndroid.Text></VoltraAndroid.ArcProgressIndicator>Unlike the other two indicators, this one works on every supported Android version, because it is drawn as a bitmap rather than composed from a Glance progress primitive.
Give the component a width and a height. When you leave an axis unsized it falls back to 64 dp,
which is rarely what you want, and when you give it a flex weight the parent controls both axes,
so size the arc through the parent instead. Because the arc occupies one of the ten child slots a
Glance Box allows, you can nest at most nine elements inside it.
The indicator does not animate. Changing progress redraws it.