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.