Circular Progress Bar¶
The circular progress indicator is a UI component that visually represents the progress of an event or operation. It can also provide success or failure status using an associated text message and distinctive icons. FioriCircularProgressBar has four states: success state, error state, indeterminate state, and default state.
Using the Circular Progress Indicator¶
The circular progress bar can be used in a layout as follows:
<com.sap.cloud.mobile.fiori.indicator.FioriCircularProgressBar
android:id="@+id/circular_progress_id"
android:layout_width="240dp"
android:layout_height="match_parent"
android:focusable="true"
app:messageText="Indeterminate progress bar"
android:layout_gravity="center_horizontal"
app:progressState="INDETERMINATE"/>
```
This displays a visual representation of the circular progress bar UI on the screen. Interaction with the circular progress bar consists of setting or getting its progress value, setting the message text, or changing its state to success, error, or the default state.
Use the `FioriCircularProgressBarState` object to interact with the circular progress indicator, as follows:
```java
FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.circular_id);
mCircularProgressBar.setState(FioriCircularProgressBarState.STATE.SUCCESS)
mCircularProgressBar.setMessage("Testing")
mCircularProgressBar.setProgress(20);
The first line gets a reference to the FioriCircularProgressBar UI component. The next line sets the state to SUCCESS. The following lines set the message to success, and set the progress value for the progress bar to 20%. The allowable states are default, errorState, and successState. There are four different states that use FioriCircularProgressBarState.DEFAULT for the default state, FioriCircularProgressBarState.INDETERMINATE for the indeterminate state, FioriCircularProgressBarState.SUCCESS for the successState, and FioriCircularProgressBarState.ERROR for the errorState.
Updating Progress Indicator Values¶
FioriCircularProgressBar has progress values ranging from a minimum to a maximum. The minimum value represents zero percent and the maximum value represents 100 percent. The minimum and maximum values can be set using the setMin and setMax function calls.
setMin(int value)¶
Sets the minimum value of the progress bar.
mCircularProgressBar.setMin(10)
setMax(int value)¶
Sets the maximum value of the progress bar.
mCircularProgressBar.setMax(10)
Progress Bar States¶
There are four states that FioriProgressBar can be in: success state, error state, indeterminate state, and default state.
success state: In this state, the FioriCircularProgressIndicator will have a success color for the progress bar and a success message. A success icon is also displayed at the left side of the message. You can customize the color and icon for the success state.
To change to success state, assign the state value to FioriCircularProgressBarState:
FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.circular_id);
mCircularProgressBar.setState(FioriCircularProgressBarState.STATE.SUCCESS)
error state In this state, the FioriCircularProgressBar will be displayed with the error color and error icon.
You can customize the error color and icon as follows:
```java FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.circular_id); mCircularProgressBar.setState(FioriCircularProgressBarState.STATE.ERROR)
`indeterminate state:` In this state, the `FioriCircularProgressBar` track will loop around indicating that there is no specific value for progress at this time.
To put a progress indicator into indeterminate state, use the following:
```java
FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.circular_id);
mCircularProgressBar.setState(FioriCircularProgressBarState.STATE.INDETERMINATE)
indeterminate state: If the circular progress indicator is in any of the above states it is in indeterminate state.
Note that the four states are mutually exclusive.
message text: You can modify the message text of the progress bar using the state reference as follows:
FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.CircularProgressBar.setMessage("Testing")
progress value: The progress value (as a percentage), indicating how far the indicator has progressed with respect to the entire track. To set the progress to 15%, for example, use the following:
FioriCircularProgressBar mCircularProgressBar = findViewById(R.id.circular_id);
mCircularProgressBar.setProgress(15);