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é
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