ActivityIndicator
An ActivityIndicator informs the user to wait for some work to complete. The Widget shows a loading animation that should end when the job is done.
The ActivityIndicator is one of the simpler widgets in the Tabris collection. It extends the Widget class, the base class for all widgets, so it provides methods such as onResize() and has event listeners such as onTap() that are defined on the Widget class. You can read up on the Widget class here.
The ActivityIndicator displays differently on iOS and Android.
An iOS ActivityIndicator – the iOS spinner always has this dash style:
The default Android ActivityIndicator:
The ActivityIndicator has a property tintColor that takes a color value. Setting this value changes the color of the spinner.
The following snippet initializes our green spinner in JSX:
|
1 |
<ActivityIndicator tintColor='green' /> |
The ActivityIndicator also has an event listener onTintColorChanged. This fires whenever the spinner’s color changes. The event handler takes the new tintColor as a parameter.
This allows you to consolidate the code related to the status of your activity in one place. For example, you might receive numerous updates from the server. You might want to inform the user of the status update by both changing the color of the spinner and displaying a message. You could do this in the onTintColorChanged handler function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ActivityIndicator tintColor='green' onTintColorChanged={showStatusUpdateMessage} /> showStatusUpdateMessage(color) { $msg = ‘’; switch(color) { case ‘red’: $msg = ‘profile information uploaded’ break; case ‘blue’: $msg = ‘profile created’; break; //ecetera } |
Here is the ActivityIndicator documentation.
Scan the QR code below in your Tabris App for an example, or scan from the Tabris playground and tinker with the code!
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
