A barra de progresso de estado é um dos principais recursos que vemos em muitos aplicativos. Podemos ver esse recurso em aplicativos de reserva de ingressos, aplicativos educacionais. Esta barra de progresso ajuda a informar ao usuário as etapas a serem realizadas para realizar uma tarefa. Neste artigo, veremos como implementar a barra de progresso de estado no Android. Um exemplo de GIF é fornecido abaixo para se ter uma ideia sobre o que faremos neste artigo. Observe que vamos implementar este projeto usando a   linguagem Java . 

Aplicação da barra de progresso do estado

• Usado na maioria dos aplicativos de fornecimento de serviços, como reserva de passagens, preenchimento de formulários de exames e muito mais.
• Esta Barra de Progresso de Estado auxilia na execução das etapas do usuário para a execução da tarefa.
• Use em vários aplicativos de preenchimento de formulários de exame.

Atributos da barra de progresso do estado

Implementação passo a passo

Etapa 1: Criar um novo projeto

Para criar um novo projeto no Android Studio, consulte Como criar / iniciar um novo projeto no Android Studio . Observe que selecione Java como a linguagem de programação.

Etapa 2: adicionar dependência da biblioteca State Progress Bar no arquivo build.gradle

Em seguida, navegue até os scripts do gradle e, em seguida, para o nível build.gradle (módulo) . Adicione a linha abaixo no arquivo build.gradle na seção de dependências.

implementação 'com.kofigyan.stateprogressbar: stateprogressbar: 1.0.0'

Agora clique em Sincronizar para sincronizar todos os seus arquivos em build.gradle().

Etapa 3: Crie uma nova barra de progresso de estado em seu arquivo activity_main.xml

Navegue até app> res> layout para abrir o arquivo activity_main.xml . Abaixo está o código para o arquivo activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Progress Bar created-->
    <com.kofigyan.stateprogressbar.StateProgressBar
        android:id="@+id/your_state_progress_bar_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        app:spb_animateToCurrentProgressState="true"
        app:spb_checkStateCompleted="true"
        app:spb_currentStateDescriptionColor="#0F9D58"
        app:spb_currentStateNumber="one"
        app:spb_maxStateNumber="four"
        app:spb_stateBackgroundColor="#BDBDBD"
        app:spb_stateDescriptionColor="#808080"
        app:spb_stateForegroundColor="#0F9D58"
        app:spb_stateNumberBackgroundColor="#808080"
        app:spb_stateNumberForegroundColor="#eeeeee" />
      
    <!--Button to go on next step-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="NEXT" />
      
</RelativeLayout>

Etapa 4: Trabalhando com o arquivo MainActivity.java

Vá para o arquivo MainActivity.java e consulte o código a seguir. Abaixo está o código para o arquivo MainActivity.java. Os comentários são adicionados dentro do código para entender o código em mais detalhes.

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.kofigyan.stateprogressbar.StateProgressBar;
  
public class MainActivity extends AppCompatActivity {
  
    // steps on state progress bar
    String[] descriptionData = {"Step One", "Step Two", "Step Three", "Step Four"};
  
    Button button;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        StateProgressBar stateProgressBar = (StateProgressBar) findViewById(R.id.your_state_progress_bar_id);
        stateProgressBar.setStateDescriptionData(descriptionData);
  
        // button given along with id
        button = (Button) findViewById(R.id.button);
  
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                switch (stateProgressBar.getCurrentStateNumber()) {
                    case 1:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.TWO);
                        break;
                    case 2:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.THREE);
                        break;
                    case 3:
                        stateProgressBar.setCurrentStateNumber(StateProgressBar.StateNumber.FOUR);
                        break;
                    case 4:
                        stateProgressBar.setAllStatesCompleted(true);
                        break;
                }
            }
        });
    }
}

Agora clique na opção executar - levará algum tempo para construir o Gradle. Depois disso, você obterá a saída em seu dispositivo conforme mostrado abaixo.

Saída: