Cargador rellenable circular en Android con Seekbar

Circular Fillable Loader es una excelente manera de mostrar ProgressBar en cualquier aplicación de Android mientras se carga. Mostrar ProgressBar en otra forma es una de las mejores formas de aumentar la experiencia del usuario. Puede ver estos cargadores personalizados en la mayoría de las aplicaciones. En este artículo vamos a ver cómo implementar Circular Fillable Loader en Android. qué

Aplicaciones del cargador circular rellenable

• Una forma única de representar una barra de progreso en Android.
• El uso de un cargador rellenable circular aumenta la experiencia del usuario.
• Da un aspecto animado a nuestra barra de progreso.

Atributos del cargador circular rellenable

Método 1

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: Agregar dependencia en el archivo build.gradle(Module:app)

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.mikhaellopez:circularfillableloaders:1.3.2’

Paso 3: cree una nueva barra de progreso de estado en su archivo activity_main.xml

Navegue a la aplicación > res > diseño para abrir el archivo activity_main.xml. A continuación se muestra el código para el archivo 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"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">
  
    <!--Circular Fallible Loader-->
    <com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
        android:id="@+id/circularFillableLoaders"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:src="@drawable/ic_baseline_android_24"
        app:cfl_border="true"
        app:cfl_border_width="12dp"
        app:cfl_progress="80"
        app:cfl_wave_amplitude="0.06"
        app:cfl_wave_color="@color/purple_200" />
  
    <!--Seek bar to increase fallible part-->
    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/circularFillableLoaders"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp" />
  
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al 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.widget.SeekBar;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.mikhaellopez.circularfillableloaders.CircularFillableLoaders;
  
public class MainActivity extends AppCompatActivity {
  
    // Variables Declared
    CircularFillableLoaders circularFillableLoaders;
    SeekBar seekBar;
  
    int progress = 80;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Code for implementing Circular Fallible Loader
        circularFillableLoaders = (CircularFillableLoaders) findViewById(R.id.circularFillableLoaders);
          
        // Set Progress
        circularFillableLoaders.setProgress(progress);
  
        seekBar = findViewById(R.id.seekBar);
        seekBar.setProgress(progress);
        seekBar.setMax(100);
          
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean b) {
                // Set Progress
                circularFillableLoaders.setProgress(progress);
            }
  
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
  
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
  
            }
        });
    }
}

Ahora haga clic en la opción de ejecución , tomará algún tiempo construir Gradle . Después de eso, obtendrá la salida en su dispositivo como se indica a continuación.

Producción:

Método 2

Aquí vamos a implementar la vista de carga de onda. Aquí estamos aumentando manualmente el valor del progreso y la altura de la ola está aumentando. Pero también se puede utilizar como temporizador para configurar.

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: Agregar dependencia

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘me.itangqi.waveloadingview:library:0.3.5’

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_marginTop="20dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">
  
    <me.itangqi.waveloadingview.WaveLoadingView
        android:id="@+id/waveLoadingView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:wlv_borderColor="@color/colorAccent"
        app:wlv_borderWidth="3dp"
        app:wlv_progressValue="40"
        app:wlv_round_rectangle="true"
        app:wlv_shapeType="circle"
        app:wlv_titleCenter="Center Title"
        app:wlv_titleCenterColor="@android:color/white"
        app:wlv_titleCenterSize="24sp"
        app:wlv_titleCenterStrokeColor="@android:color/holo_blue_dark"
        app:wlv_titleCenterStrokeWidth="3dp"
        app:wlv_triangle_direction="north"
        app:wlv_waveAmplitude="70"
        app:wlv_waveColor="@color/colorAccent" />
  
    <SeekBar
        android:id="@+id/seekbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100" />
      
</LinearLayout>

Paso 4: trabajar con el archivo MainActivity.java

Vaya al 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.widget.SeekBar;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
  
    me.itangqi.waveloadingview.WaveLoadingView loadingView;
    SeekBar seekBar;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing the layout
        seekBar = findViewById(R.id.seekbar);
        loadingView = findViewById(R.id.waveLoadingView);
          
        // changing the progress value according the value changed in seekbar
        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                loadingView.setProgressValue(progress);
                String title = String.valueOf(progress);
                loadingView.setBottomTitle("");
                loadingView.setCenterTitle("");
                loadingView.setTopTitle("");
                if (progress < 50) {
                    // if progress is 50 then set bottom
                    // title as progress value
                    loadingView.setBottomTitle(title);
                } else if (progress == 50) {
                    // if progress is 50 then set center 
                    // title as progress value
                    loadingView.setCenterTitle(title);
                } else {
                    // if progress is 50 then set top 
                    // title as progress value
                    loadingView.setTopTitle(title);
                }
            }
  
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
  
            }
  
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
  
            }
        });
    }
}

Producción: