Skip to content

Linear Progress Bar

The linear 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. There are four states that FioriLinearProgressBar can be in. Success state, error state, indeterminate state, and default state.

Using the Linear Progress Indicator

The linear progress bar can be used in a layout as follows:

 <com.sap.cloud.mobile.fiori.indicator.FioriLinearProgressBar
            android:id="@+id/linear_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 slider UI on the screen. Interaction with the linear 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 `FioriLinearProgressBarState` object to interact with the linear progress indicator, as follows:

```java
FioriLinearProgressBar mLinearProgressBar =  findViewById(R.id.linear_id);
mLinearProgressBar.setState(FioriLinearProgressBarState.STATE.SUCCESS)
mLinearProgressBar.setMessage("Testing")
mLinearProgressBar.setProgress(20);

The first line gets a reference to the FioriLinearProgressBar 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 FioriLinearProgressBarState.DEFAULT for the default state, FioriLinearProgressBarState.INDETERMINATE for the indeterminate state, FioriLinearProgressBarState.SUCCESS for the successState, and FioriLinearProgressBarState.ERROR for the errorState.

The possible state values are shown below. Note that only one state can be true at any given time. Setting any of the states to true automatically sets the previous state to false.

State Setting Indeterminate Default Success Error
Indeterminate state is set true false false false
Default state is set false true false false
successState = true false false true false
errorState = true false false false true

Defining FioriLinearProgressIndicator

Updating Progress Indicator Values

FioriLinearProgressBar 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.

  mLinearProgressBar.setMin(10)

setMax(int value)

Sets the maximum value of the progress bar.

  mLinearProgressBar.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 FioriLinearProgressIndicator 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.

Success State

You can customize the success color and icon as shown below.

To change to success state, assign the state value to FioriLinearProgressBarState:

FioriLinearProgressBar mLinearProgressBar =  findViewById(R.id.linear_id);
mLinearProgressBar.setState(FioriLinearProgressBarState.STATE.SUCCESS)

error state In this state, the FioriLinearProgressBar will be displayed with the error color and error icon.

Error State

You can customize the error color and icon as follows:

```java FioriLinearProgressBar mLinearProgressBar = findViewById(R.id.linear_id); mLinearProgressBar.setState(FioriLinearProgressBarState.STATE.ERROR)

`indeterminate state:` In this state, the `FioriLinearProgressBar` track will loop around indicating that there is no specific value for progress at this time.

![Indeterminate State](images/linear-progress-indeterminate.png)

To put a progress indicator into indeterminate state, use the following:

```java
FioriLinearProgressBar mLinearProgressBar =  findViewById(R.id.linear_id);
mLinearProgressBar.setState(FioriLinearProgressBarState.STATE.INDETERMINATE)

indeterminate state: If the linear 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:

 FioriLinearProgressBar mLinearProgressBar =  findViewById(R.id.linear_id);
mLinearProgressBar.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:

FioriLinearProgressBar mLinearProgressBar =  findViewById(R.id.linear_id);
mLinearProgressBar.setProgress(15);

Last update: June 15, 2023