indeterminate - Android Circular Determinate ProgressBar

progressbar android

Question

Quiero crear una Barra de progreso determinada de Circluar, el tipo que muestra el progreso en el centro de la barra. ¿Hay alguna forma predeterminada para crear esto o tendré que crear mi propia personalizada?

Answer 1

He escrito un ejemplo detallado en la barra de progreso circular de Android aquí en mi blog demonuts.com También puede encontrar un código fuente completo y una explicación allí.

Así es como hice una barra de progreso circular con un porcentaje dentro del círculo en código puro sin ninguna biblioteca.

primero crea un archivo dibujable llamado circular.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/secondaryProgress">
        <shape
            android:innerRadiusRatio="6"
            android:shape="ring"
            android:thicknessRatio="20.0"
            android:useLevel="true">


            <gradient
                android:centerColor="#999999"
                android:endColor="#999999"
                android:startColor="#999999"
                android:type="sweep" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <rotate
            android:fromDegrees="270"
            android:pivotX="50%"
            android:pivotY="50%"
            android:toDegrees="270">

            <shape
                android:innerRadiusRatio="6"
                android:shape="ring"
                android:thicknessRatio="20.0"
                android:useLevel="true">


                <rotate
                    android:fromDegrees="0"
                    android:pivotX="50%"
                    android:pivotY="50%"
                    android:toDegrees="360" />

                <gradient
                    android:centerColor="#00FF00"
                    android:endColor="#00FF00"
                    android:startColor="#00FF00"
                    android:type="sweep" />

            </shape>
        </rotate>
    </item>
</layer-list>

Ahora en su activity_main.xml agregue lo siguiente:

  <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@color/dialog"
    tools:context="com.example.parsaniahardik.progressanimation.MainActivity">

    <ProgressBar

        android:id="@+id/circularProgressbar"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:indeterminate="false"
        android:max="100"
        android:progress="50"
        android:layout_centerInParent="true"
        android:progressDrawable="@drawable/circular"
        android:secondaryProgress="100"
        />

    <ImageView
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/whitecircle"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/tv"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="25%"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimaryDark"
        android:textSize="20sp" />

</RelativeLayout>

En activity_main.xml , he usado una imagen circular con fondo blanco para mostrar el fondo blanco alrededor del porcentaje. Aquí está la imagen:

Puede cambiar el color de esta imagen para establecer un color personalizado alrededor del porcentaje de texto.

Ahora finalmente agregue el siguiente código a MainActivity.java :

import android.content.res.Resources;
import android.graphics.drawable.Drawable;
import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.animation.DecelerateInterpolator;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    int pStatus = 0;
    private Handler handler = new Handler();
    TextView tv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Resources res = getResources();
        Drawable drawable = res.getDrawable(R.drawable.circular);
        final ProgressBar mProgress = (ProgressBar) findViewById(R.id.circularProgressbar);
        mProgress.setProgress(0);   // Main Progress
        mProgress.setSecondaryProgress(100); // Secondary Progress
        mProgress.setMax(100); // Maximum Progress
        mProgress.setProgressDrawable(drawable);

      /*  ObjectAnimator animation = ObjectAnimator.ofInt(mProgress, "progress", 0, 100);
        animation.setDuration(50000);
        animation.setInterpolator(new DecelerateInterpolator());
        animation.start();*/

        tv = (TextView) findViewById(R.id.tv);
        new Thread(new Runnable() {

            @Override
            public void run() {
                // TODO Auto-generated method stub
                while (pStatus < 100) {
                    pStatus += 1;

                    handler.post(new Runnable() {

                        @Override
                        public void run() {
                            // TODO Auto-generated method stub
                            mProgress.setProgress(pStatus);
                            tv.setText(pStatus + "%");

                        }
                    });
                    try {
                        // Sleep for 200 milliseconds.
                        // Just to display the progress slowly
                        Thread.sleep(8); //thread will take approx 1.5 seconds to finish
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
                }
            }
        }).start();
    }
}

Si desea hacer una barra de progreso horizontal, siga este enlace, tiene muchos ejemplos valiosos con código fuente:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

Answer 2

Primero agregue un progress_circle.xml a su directorio res / drawable como este:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:drawable="@drawable/progress_circular_background"/>
<item>
    <shape
        android:innerRadiusRatio="3.4"
        android:shape="ring"
        android:thicknessRatio="6.0" >
        <gradient
            android:endColor="#ffffffff"
            android:startColor="#ffffff"
            android:type="sweep"
            android:useLevel="true" />
    </shape>
</item>
<item>
    <rotate
        android:drawable="@drawable/progress_particle"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />
</item>

</layer-list>

Busqué en Google la imagen que busqué "progress_particle.png" y "progress_circular_background.png" (con comillas) ya que faltaban los elementos dibujables predeterminados de Android. Probablemente querrá personalizarlos, pero lo harán para que comience.

Luego en su diseño xml:

<ProgressBar
    android:id="@+id/timer_progress"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:indeterminate="false"
    android:max="60"
    android:progressDrawable="@drawable/progress_circle" />

Mi máximo es 60, ya que lo estoy usando por un temporizador de segundos, pero es posible que tenga algo diferente.

El truco es que necesitas usar style = "? Android: attr / progressBarStyleHorizontal" aunque sea un progreso circular.