Aprenda a usar a ProgressBar (Barra de Progresso) no Android (Kotlin)

ProgressBar

Esse elemento traduzido para o bom português significa barra de progresso.

ProgressBar é bastante utilizada em gráficos, indicativos de downloads e também em telas de carregamento (Loadings).

Uma ProgressBar pode ser tanto representada por uma linha, quanto por um círculo:

Declarando uma ProgressBar

Para declarar uma ProgressBar, a tag utilizada é a <ProgressBar>, independentemente se você deseja representa-la em formato de linha ou de círculo:

<ProgressBar
android:id="@+id/progressBar_1"
style="?android:attr/progressBarStyleHorizontal"
android:progress="50"
android:max="80"
android:min="20"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1" />

O que difere, se a barra de progresso será uma linha ou um círculo será o atributo style.

style="?android:attr/progressBarStyleHorizontal": Este atributo define uma barra de progresso em formato de linha.

style="?android:attr/progressBarStyle": Este atributo define uma barra de progresso em formato circular.

Além desse atributo contamos com outros três:

android:progress: Define o progresso atual da barra.

Já os atributos MAX e MIN definem o valor máximo e mínimo que seu ProgressBar pode suportar.

Se você brincar um pouco com o atributo progress na barra de progresso horizontal você vai notar que não houve muita diferença entre usar 100 ou 0, pois você ainda consegue chegar em ambos os extremos.

Você só vai notar a diferença mesmo quando puxar pelo código o valor da extrema esquerda que estará marcado como 20, e da extrema direita que estará marcado como 80.

É importante ressaltar que o ProgressBar só aceita valores inteiros e positivos, logo 78.9 ou 15,3 não são aceitos, ok?

É importante ressaltar que a barra de progresso circular fica rodando continuamente como se estivesse carregando algo, mas não se assuste, pois este é o comportamento padrão dela.

Trabalhando com a barra de progresso em formato de linha

A partir de agora, nós vamos trabalhar com a barra de progresso em formato de linha, nesse caso, estarei usando a configuração abaixo:

<ProgressBar
android:id="@+id/progressBar_horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

Para interagir com a barra de progresso você pode usar os seguintes comandos:

val progressHorizontal = findViewById<View>(R.id.progressBar_horizontal) as ProgressBar//Seleciona o elemento ProgressBar pelo seu ID

Log.d("PogressHorizontal", "${progressHorizontal.progress}")//Usado para retornar a o progresso atual

progressHorizontal.progress = 87//Usado para alterar o progresso atual

Animação de Carregamento

A barra de progresso do tipo horizontal também atua como uma animação de carregamento, para isso, basta setar o atributo android:indeterminate para true:

<ProgressBar
android:id="@+id/progressBar_horizontal"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="match_parent"
android:indeterminate="true" 
android:layout_height="wrap_content"/>

Para esconder essa barra de tarefa via código (simulando que a tela já terminou de carregar), só usar o atributo visibility da seguinte forma:

progressHorizontal.visibility = View.GONE//Faz com que a visibilidade do elemento suma

Incrementando/Decrementando o progresso

Pelo código, nós podemos incrementar ou decrementar o progresso informando um número inteiro, positivo para incrementar, negativo para decrementar, vejamos:

progressHorizontal.incrementProgressBy(5)//Toda vez que esse comando é chamado, é incrementado mais 5 casas

progressHorizontal.incrementProgressBy(-5)//Toda vez que esse comando é chamado, é decrementado menos 5 casas

Trabalhando com a barra de progresso em formato de círculo

Já se tratando da barra de progresso em formato de círculo, a configuração é esta:

<ProgressBar
android:id="@+id/progressBar_circle"
style="?android:attr/progressBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

Para interagir com ela, usamos a mesma lógica da horizontal:

val progressCircle = findViewById<View>(R.id.progressBar_circle) as ProgressBar//Seleciona o elemento ProgressBar pelo seu ID

progressCircle.visibility = View.GONE//Faz com que a visibilidade do elemento suma

É importante ressaltar que este elemento, ele funciona como se fosse uma animação de carregamento (Loading), e por conta disso, não conseguimos alterar o seu progresso e realizar algumas customizações.

CircularProgressIndicator

Diferente da barra de progresso em formato de círculo que atua mais como um animação de carregamento, nós temos também o <CircularProgressIndicator>, onde podemos customizar o progresso assim como fazemos na horizontal:

<com.google.android.material.progressindicator.CircularProgressIndicator
android:id="@+id/progresso_indicator"
android:progress="50"
app:trackColor="#f1c40f"
app:indicatorColor="#3498db"
app:trackCornerRadius="10dp"
app:indicatorSize="100dp"
app:trackThickness="10dp"
android:max="80"
android:min="20"
android:layout_height="wrap_content"
android:layout_width="wrap_content"/>

Veja como ficou o resultado final:

Também conseguimos controlar esta barra de progresso via código, e isso pode ser feito da seguinte forma:

val progressIndicator = findViewById<View>(R.id.progresso_indicator) as ProgressBar//Seleciona o elemento ProgressBar Indicator pelo seu ID

Log.d("PogressIndicator", "${progressIndicator.progress}")//Usado para retornar a o progresso atual

progressIndicator.progress = 30//Usado para alterar o progresso atual

progressIndicator.incrementProgressBy(5)//Incrementa em 5
progressIndicator.incrementProgressBy(-5)//Decrementa em 5

Conclusão

Neste conteúdo você aprendeu a criar três tipos de barra de progresso usando o Android.

Até o próximo conteúdo.