Skip to content

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.

Indicators

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:

Circular Indeterminate

1
2
3
4
    <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.

Indeterminate

1
2
3
4
5
    <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 ProgressBar

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.

Circular Determinate

1
2
3
4
5
    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 fiori progress bar use FioriProgressbar.Horizontal style and set the indeterminate flag to false.

Determinate

1
2
3
4
5
6
    <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.

Query Indeterminate

1
2
3
4
5
6
    <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 FloatingButton indicator design guidelines, available at Progress and activity, for better user experience.

Progress

1
2
3
4
5
    <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.

Checkout

1
2
3
4
5
    <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 ProgressBar you can set the indicator to the determinate state.
1
2
3
    FioriProgressBar progressBar = findViewById(R.id.checkout_indicator);
                            ...
    progressBar.setIndeterminate(false);