Join FlipAndroid.COM Telegram Group: https://t.me/joinchat/F_aqThGkhwcLzmI49vKAiw


Android: Inicia la barra de progreso circular desde la parte superior (270 °)

He definido una barra de progreso circular usando 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 drawable para ProgressBar en mi diseño usando el siguiente código

  • Animación de propiedades de Android
  • Android: Cómo utilizar AlarmManager
  • OnTouchEvent onClick onLongClick llamadas
  • Cómo obtener información de perfil de usuario de Facebook API Android
  • Android: ListView sólo muestra el primer resultado
  • Programación de Android: ¿Por dónde empezar para crear un navegador de archivos simple?
  •   <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 el progressBar con el siguiente código progressWheel.setSecondaryProgress(percent); (Se utiliza el progreso secundario porque el color verde debe venir encima del color negro del anillo.)

    Esto dibuja el ProgressBar circular cuya posición inicial está a la derecha (0 °) como se muestra en la siguiente imagen

    Introduzca aquí la descripción de la imagen

    Quiero que el progreso comience desde la parte superior como se muestra en la siguiente imagen

    Introduzca aquí la descripción de la imagen

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

  • ViewPager ¿Fragmentos que se destruyen con el tiempo?
  • No se puede usar srcCompat para ImageViews en android
  • Android: menú deslizante con submenú
  • La aplicación se reinicia en lugar de continuar
  • Android: crear JSON Array y JSON Object
  • ¿Cómo obtener RelativeLayout trabajando con la fusión y la inclusión?
  • 6 Solutions collect form web for “Android: Inicia la barra de progreso circular desde la parte superior (270 °)”

    Trate de especificar los grados de rotación de sus 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 ProgressBar en XML de presentación. En su caso -90 ° resolvería su 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" /> 

    Gracias a @Zeba tengo mi respuesta. Para las personas que tienen el mismo problema aquí es 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> 

    Aquí es cómo hice la barra de progreso circular con el porcentaje dentro del círculo en código puro sin ninguna biblioteca.

    La referencia se toma de aquí: la barra de progreso circular androide

    Introduzca aquí la descripción de la imagen

    Primero cree 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 añada 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 utilizado una imagen circular con fondo blanco para mostrar el fondo blanco en torno al porcentaje. Aquí está la imagen:

    Introduzca aquí la descripción de la imagen

    Usted puede cambiar el color de esta imagen para fijar el color de encargo alrededor del texto del porcentaje.

    Ahora finalmente agrega 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 la barra de progreso horizontal, siga este enlace, tiene muchos ejemplos valiosos con el código fuente:
    http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar

    Una solución más simple que encontré es la rotación de la vista de 270 grados, el ajuste del texto interior a la transparencia y la configuración de nuevo TextView en la parte superior de la barra de progreso circular con su información-

     <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 girar cualquier vista por algún ángulo es dar la rotación en XML.

     <Progress Bar 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" /> 
    FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.