¿Cómo implementar la barra de progreso circular en Android?

ProgressBar se usa cuando estamos obteniendo algunos datos de otra fuente y lleva tiempo, por lo que para satisfacción del usuario, generalmente les mostramos el progreso de la tarea. En este artículo, vamos a aprender cómo implementar la barra de progreso circular en una aplicación de Android usando Java . Entonces, este artículo le dará una idea completa de cómo implementar una barra de progreso circular en una aplicación integrada en Android Studio . Entonces, sin perder más tiempo, vayamos al artículo y leamos cómo podemos lograr esta tarea.

¿Qué vamos a desarrollar en este artículo?  

Construiremos una aplicación simple en la que implementaremos una barra de progreso circular con una pantalla de texto. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java .  

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: Crear circular_progress_bar.xml

Vaya a la aplicación > res > dibujable > haga clic con el botón derecho y seleccione nuevo > archivo de recursos dibujable y nombre el nuevo archivo XML como circular_progress_bar . xml y consulte el siguiente código. Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<rotate 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="270"
    android:toDegrees="270">
      
    <!--styling the progress bar-->
    <shape
        android:innerRadiusRatio="2.5"
        android:shape="ring"
        android:thickness="8dp"
        android:useLevel="true">
        <gradient
            android:angle="0"
            android:endColor="@color/colorPrimary"
            android:startColor="#000000"
            android:type="sweep"
            android:useLevel="false" />
    </shape>
  
</rotate>

Paso 3: Crear circular_shape.xml

Del mismo modo, cree un nuevo archivo de recursos dibujables y asígnele el nombre circular_shape.xml y consulte el siguiente código.

<?xml version="1.0" encoding="utf-8"?>
<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadiusRatio="2.5"
    android:shape="ring"
    android:thickness="3dp"
    android:useLevel="false">
    <solid android:color="@color/colorPrimary" />
</shape>

Paso 4: trabajar con el archivo activity_main.xml

Ahora es el momento de diseñar el diseño de la aplicación. Entonces, para eso, navegue a la aplicación> res> diseño> actividad_principal.xml y consulte el código escrito a continuación. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <RelativeLayout
        android:id="@+id/progress_layout"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_margin="100dp">
          
        <!--progress bar implementation-->
        <ProgressBar
            android:id="@+id/progress_bar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/circular_shape"
            android:indeterminate="false"
            android:progressDrawable="@drawable/circular_progress_bar"
            android:textAlignment="center" />
          
        <!--Text implementation in center of the progress bar-->
        <TextView
            android:id="@+id/progress_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:gravity="center"
            android:text="---"
            android:textColor="@color/colorPrimary"
            android:textSize="28sp"
            android:textStyle="bold" />
    </RelativeLayout>
      
</LinearLayout>

Paso 5: trabajar con el archivo MainActivity.java

Vaya a la aplicación > java > nombre del paquete > archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java. Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.os.Handler;
import android.widget.ProgressBar;
import android.widget.TextView;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    private ProgressBar progressBar;
    private TextView progressText;
    int i = 0;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // set the id for the progressbar and progress text
        progressBar = findViewById(R.id.progress_bar);
        progressText = findViewById(R.id.progress_text);
  
        final Handler handler = new Handler();
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                // set the limitations for the numeric
                // text under the progress bar
                if (i <= 100) {
                    progressText.setText("" + i);
                    progressBar.setProgress(i);
                    i++;
                    handler.postDelayed(this, 200);
                } else {
                    handler.removeCallbacks(this);
                }
            }
        }, 200);
    }
}

Eso es todo, ahora la aplicación está lista para instalarse en el dispositivo. Así es como se ve la salida de la aplicación.

Producción:

Enlace GitHub:

El proyecto está disponible en GitHub, puede acceder a él siguiendo el siguiente enlace: Barra de progreso circular en la aplicación de Android