Fiori Indicator¶
A Fiori UI element that indicates the progress of an operation. Like traditional Android Progress bar,
FioriProgressBar also supports two modes to represent progress: determinate and indeterminate.
Fiori indicators display progress to a user in a non-interruptive way. As shown in the graphic below, FioriProgressBar offers a wide variety of material indicators to choose from.
Indeterminate ProgressBar¶
Use indeterminate mode for the progress bar when you do not know how long an operation will take. Indeterminate mode is the default mode for progress bar and shows a cyclic animation without a specific amount of progress indicated. The following example shows how to setup an indeterminate progress bar:
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
android:id="@+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
By simply applying a style you can switch to indeterminate horizontal progress bar, which offers an animating visual of indefinite progress on horizontal bar.
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
style="@style/FioriProgressbar.Horizontal"
android:id="@+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Determinate Progress Bar¶
Use determinate mode for the progress bar when you want to show that a specific quantity of progress has occurred. For example, the percent remaining of a file
being retrieved, the number of records in a batch being written to a database, or the percent remaining of an audio file that is playing.
You can create either a circular determinate or horizontal determinate progress bar to demonstrate the progress made so far.
You can set the progress bar to determinate state by using the setIndeterminate(boolean) method or indeterminate flag to false in the XML file.
Below configuration provides a circular determinate progress bar.
com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
android:id="@+id/determinateBar"
android:indeterminate="false"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
To use a horizontal determinate FioriProgressBar use FioriProgressbar.Horizontal style and set the indeterminate flag to false.
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
style="@style/FioriProgressbar.Horizontal"
android:indeterminate="false"
android:id="@+id/indeterminateBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
QueryIndeterminateDeterminate Progress Bar¶
Use QueryIndeterminateDeterminate progress bar when you do not know how long the operation will take but the information about progress will be available after the
process has started. For example downloading a file will require calculating the size first, which has to be requested from server. Until we receive the size we cannot
show the user any indication of the time remaining. In this case, the progress bar remains in indeterminate state until the information(size in our example) about the progress is provided.
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
style="@style/FioriProgressbar.Horizontal"
android:id="@+id/queryIndeterminateDeterminateBar"
app:type="queryIndeterminateDeterminate"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Notice that the style of the query-indeterminate-determinate indicator is FioriProgressBar. Horizontal while there is a type parameter set to queryIndeterminateDeterminate.
Progress Indicator¶
Use Progress Indicator when you want to demonstrate the progress around some Drawable.
Please follow the indicator design guidelines, available at Progress indicators,
for better user experience.
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
android:id="@+id/progressIndicator"
app:type="progress"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Checkout Indicator¶
Use Checkout Indicator when you want to demonstrate the progress on an operation where the required time is unknown, but once the job starts it finishes immediately and there is no progress to demonstrate. This indicator starts in an indeterminate state, showing a circular indeterminate animation. Once the indicator switches to a determinate state, the indicator animates a tick mark, marking completion of the operation.
<com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
android:id="@+id/checkout"
style="@style/FioriProgressbar.Checkout"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
using the setIndeterminate API of the progress bar you can set the indicator to the determinate state.
FioriProgressBar progressBar = findViewById(R.id.checkout_indicator);
...
progressBar.setIndeterminate(false);