progressbar indeterminate horizontal examples custom color bar android android-custom-view android-progressbar

indeterminate - progress bar styles android



Android: inicia la barra de progreso circular desde arriba(270 °) (6)

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

La referencia se toma de aquí: barra de progreso circular de Android

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

He definido una barra de progreso circular utilizando el siguiente " ciruclar_progress_bar.xml " ciruclar_progress_bar.xml

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

<item android:id="@android:id/progress"> <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:centerColor="@color/gray" android:endColor="@color/gray" android:startColor="@color/gray" android:type="sweep" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:centerColor="@color/green" android:endColor="@color/green" android:startColor="@color/green" android:type="sweep" /> </shape> </item>

y he usado este dibujo para ProgressBar en mi diseño usando el siguiente código

<ProgressBar android:id="@+id/progressWheel" style="?android:attr/progressBarStyleHorizontal" android:layout_width="152dp" android:layout_height="152dp" android:layout_centerInParent="true" android:progress="100" android:indeterminate="false" android:progressDrawable="@drawable/circular_progress_bar" />

Muestro el progreso en la barra de progreso con el siguiente código progressWheel.setSecondaryProgress(percent); (Se utiliza el progreso secundario porque el color verde debe aparecer sobre el color negro del anillo).

Esto dibuja la barra de progreso circular cuya posición de inicio está a la derecha (0 °) como se muestra en la siguiente imagen

Quiero que el progreso comience desde arriba, como se muestra en la siguiente imagen.

Intenté colocar android:angle="270" en la etiqueta de gradiente de xml dibujable pero no tuve suerte. ¿Hay alguna manera de que pueda iniciar el ángulo de barrido desde la parte superior?


Gracias a @Zeba obtuve mi respuesta. Para las personas que tienen el mismo problema aquí está el circular_progress_bar.xml actualizado

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

<item android:id="@android:id/progress"> <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:angle="120" android:centerColor="@color/gray" android:endColor="@color/gray" android:startColor="@color/gray" android:type="sweep" /> </shape> </item> <item android:id="@android:id/secondaryProgress"> <rotate android:fromDegrees="270" android:pivotX="50%" android:pivotY="50%" android:toDegrees="270" > <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:angle="120" android:centerColor="@color/green" android:endColor="@color/green" android:startColor="@color/green" android:type="sweep" /> </shape> </rotate> </item>


Intenta especificar grados de rotación para tus elementos de progreso.

<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@android:id/progress"> <rotate android:fromDegrees="270" android:toDegrees="270" android:pivotX="50%" android:pivotY="50%" > <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:centerColor="@color/gray" android:endColor="@color/gray" android:startColor="@color/gray" android:type="sweep" /> </shape> </rotate> </item> <item android:id="@android:id/secondaryProgress"> <rotate android:fromDegrees="270" android:toDegrees="270" android:pivotX="50%" android:pivotY="50%" > <shape android:innerRadiusRatio="2.5" android:shape="ring" android:thicknessRatio="25.0" > <gradient android:centerColor="@color/green" android:endColor="@color/green" android:startColor="@color/green" android:type="sweep" /> </shape> </rotate> </item> </layer-list>


También puede aplicar una rotación a su barra de progreso en el diseño XML. En tu caso -90 ° resolvería tu problema.

<ProgressBar android:id="@+id/progressDemo" style="?android:attr/progressBarStyleHorizontal" android:layout_width="152dp" android:layout_height="152dp" android:layout_centerInParent="true" android:indeterminate="false" android:progress="10" android:rotation="-90" android:progressDrawable="@drawable/circular_progress_bar" />


Una solución más simple que encontré es rotar la vista 270 grados, configurar el texto interno como transparente y configurar el nuevo TextView en la parte superior de la barra de progreso circular con sus datos.

<FrameLayout android:id="@+id/linearLayout5" android:layout_width="match_parent" android:layout_height="match_parent"> <com.github.lzyzsd.circleprogress.DonutProgress android:id="@+id/donut_progress_lodging" android:layout_width="90dp" android:layout_height="90dp" android:layout_gravity="left|top" android:layout_marginLeft="30dp" app:donut_text_color="@color/tw__transparent" android:rotation="270" app:donut_finished_color="#34c6f1" app:donut_finished_stroke_width="5dp" app:donut_unfinished_color="#276894" app:donut_unfinished_stroke_width="5dp" /> <TextView android:layout_width="40dp" android:layout_height="wrap_content" android:text="0%" android:textColor="#ffffff" android:layout_marginLeft="55dp" android:layout_marginBottom="10dp" android:textAlignment="center" android:id="@+id/textView_percentage_lodging" android:layout_gravity="left|center_vertical" /> </FrameLayout>


Una solución simple para rotar cualquier vista desde algún ángulo es dar rotación en XML.

<ProgressBar android:id="@+id/progress_bar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="match_parent" android:layout_height="match_parent" android:max="100" android:progress="0" android:rotation="-90" android:progressDrawable="@drawable/circular" />