¿Cómo crear una barra de progreso circular determinada en Android?

En este artículo, vamos a demostrar cómo crear una barra de progreso circular en Android Studio que muestre el valor de progreso actual y que inicialmente tenga un color de fondo gris. Aquí se muestra el progreso en el centro de la barra . qué

Create Circular Determinate ProgressBar in Android Sample GIF

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 debe seleccionar Java como lenguaje de programación.

Paso 2: crea un nuevo archivo de recursos dibujables

Cree un nuevo archivo de recursos dibujables con el nombre circle.xml en la carpeta dibujable. Para crear un nuevo archivo de recursos de Drawable, vaya a res > drawable y siga las imágenes 

dada a continuación:

Haga clic en Archivo de recursos dibujable, se abre un nuevo cuadro de diálogo como se muestra en la imagen a continuación. Agregue el nombre del archivo y elija Elemento raíz como lista de capas y haga clic en Aceptar

Paso 3: Trabajar con el archivo circle.xml

Vaya a res > dibujable > circle.xml y agregue el código que se proporciona a continuación a ese archivo. En este archivo, dibujaremos un círculo que muestra el progreso. Se han añadido comentarios al código para una mejor comprensión.

XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!--Adding our first item-->
    <item>
        <!--Here ring shape is created. The important attribute
         used here is, android:useLevel="false". Attribute
         with the useLevel=true makes the ring disabled, so it must
         be false for the ring to appear with color code "#DDD"-->
        <shape
            android:shape="ring"
            android:thicknessRatio="16"
            android:useLevel="false">
            <solid android:color="#DDD" />
        </shape>
    </item>
    <!--Adding our second item-->
    <item>
        <!--Rotation degree of Ring is made from 270 to 270-->
        <rotate
            android:fromDegrees="270"
            android:toDegrees="270">
            <!--The main attribute used here is android:useLevel="true" in
             shape tag. Also gradient is added to set the startColor and
             endColor of the ring.-->
            <shape
                android:shape="ring"
                android:thicknessRatio="16"
                android:useLevel="true">
                <gradient
                    android:endColor="@color/teal_700"
                    android:startColor="@color/black"
                    android:type="sweep" />
 
            </shape>
        </rotate>
    </item>
</layer-list>

Paso 4: agregar estilo a ProgressBar

Vaya a res > diseño > tema.xml y agregue el código que se proporciona a continuación a ese archivo. Hemos agregado un nuevo estilo en este archivo. Los comentarios se han agregado correctamente para una comprensión clara.

XML

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.ProgressBar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
   
   
    <!--Here, android: indeterminateDrawable sets the picture displayed in
        the animation or the xml file of this animation and android: indeterminateOnly
           This property is set to true,the progress bar will be ignored Progress and present
           an infinite loop of animation
    -->
    <style name="CircularDeterminateProgressBar">
              <item name="android:indeterminateOnly">false </item>
        <item name="android:progressDrawable">@drawable/circle</item>
    </style>
 
</resources>

Paso 5: trabajar con el archivo activity_main.xml

Vaya a res > diseño > actividad_principal.xml y agregue el código que se proporciona a continuación a ese archivo. Aquí hemos agregado una barra de progreso que muestra el progreso y se agrega una vista de texto para mostrar el porcentaje de progreso. También se han agregado dos botones para aumentar o disminuir el progreso. Los comentarios requeridos se han agregado al código.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    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">
 
    <!--Add ProgressBar. Main Attribute used here are
        style="@style/CircularDeterminateProgressBar" that
        takes style as created in theme.xml file above and
         android:progressDrawable="@drawable/circle" that has been
        created in circle.xml file above.-->
    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/CircularDeterminateProgressBar"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:indeterminateOnly="false"
        android:progress="60"
        android:progressDrawable="@drawable/circle"
        android:rotation="-90"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:progress="60" />
 
    <TextView
        android:id="@+id/text_view_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        app:layout_constraintBottom_toBottomOf="@+id/progress_bar"
        app:layout_constraintEnd_toEndOf="@+id/progress_bar"
        app:layout_constraintStart_toStartOf="@+id/progress_bar"
        app:layout_constraintTop_toTopOf="@+id/progress_bar"
        tools:text="60%" />
     
    <!--Increment button that will decrement the progress by 10%-->
    <Button
        android:id="@+id/button_decr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="- 10%"
        app:layout_constraintStart_toStartOf="@+id/progress_bar"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />
     
    <!--Increment button that will increment the progress by 10%-->
    <Button
        android:id="@+id/button_incr"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="+ 10%"
        app:layout_constraintEnd_toEndOf="@+id/progress_bar"
        app:layout_constraintTop_toBottomOf="@+id/progress_bar" />
     
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 6: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y agregue el código que se proporciona a continuación a ese archivo. La propiedad ProgressBar se implementa aquí. Se han agregado comentarios al código para una comprensión rápida y clara.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;
 
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity extends AppCompatActivity {
    private int progress = 0;
    Button buttonIncrement;
    Button buttonDecrement;
    ProgressBar progressBar;
    TextView textView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        buttonDecrement = (Button) findViewById(R.id.button_decr);
        buttonIncrement = (Button) findViewById(R.id.button_incr);
        progressBar = (ProgressBar) findViewById(R.id.progress_bar);
        textView = (TextView) findViewById(R.id.text_view_progress);
 
        // when clicked on buttonIncrement progress in increased by 10%
        buttonIncrement.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // if progress is less than or equal
                // to 90% then only it can be increased
                if (progress <= 90) {
                    progress += 10;
                    updateProgressBar();
                }
            }
        });
 
        // when clicked on buttonIncrement progress in decreased by 10%
        buttonDecrement.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // If progress is greater than
                // 10% then only it can be decreased
                if (progress >= 10) {
                    progress -= 10;
                    updateProgressBar();
                }
            }
        });
    }
     
    // updateProgressBar() method sets
    // the progress of ProgressBar in text
    private void updateProgressBar() {
        progressBar.setProgress(progress);
        textView.setText(String.valueOf(progress));
    }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por annulata2402 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *