Cómo personalizar una barra de progreso en Android

Estoy trabajando en una aplicación en la que quiero mostrar un ProgressBar , pero quiero reemplazar el predeterminado ProgressBar Android.

Entonces, ¿cómo puedo personalizar el ProgressBar ?

¿Necesito algunos gráficos y animación para eso?

He leído los siguientes posts pero no pude conseguir que funcionen:

Barra de progreso personalizada Android

Https://stackoverflow.com/questions/15377805/how-to-customize-progress-barspinner-in-android

Lo he descrito con código y un ejemplo en este blog: Barra de progreso personalizada en Android

Personalizar un ProgressBar requiere definir el atributo o propiedades para el fondo y el progreso de su barra de progreso.

Cree un archivo XML denominado customprogressbar.xml en su carpeta res->drawable :

Custom_progressbar.xml

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Define the background properties like color etc --> <item android:id="@android:id/background"> <shape> <gradient android:startColor="#000001" android:centerColor="#0b131e" android:centerY="1.0" android:endColor="#0d1522" android:angle="270" /> </shape> </item> <!-- Define the progress properties like start color, end color etc --> <item android:id="@android:id/progress"> <clip> <shape> <gradient android:startColor="#007A00" android:centerColor="#007A00" android:centerY="1.0" android:endColor="#06101d" android:angle="270" /> </shape> </clip> </item> </layer-list> 

Ahora necesita establecer la propiedad progressDrawable en customprogressbar.xml ( customprogressbar.xml )

Puede hacerlo en el archivo XML o en la actividad (en tiempo de ejecución).

Haga lo siguiente en su XML:

 <ProgressBar android:id="@+id/progressBar1" style="?android:attr/progressBarStyleHorizontal" android:progressDrawable="@drawable/custom_progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" /> 

En tiempo de ejecución, haga lo siguiente

 // Get the Drawable custom_progressbar Drawable draw=res.getDrawable(R.drawable.custom_progressbar); // set the drawable as progress drawable progressBar.setProgressDrawable(draw); 

Editar: diseño corregido de xml

En el caso de ProgressBar complejo como este,

Introduzca aquí la descripción de la imagen

Utilice ClipDrawable .

NOTA: No he utilizado ProgressBar aquí en este ejemplo. He conseguido esto usando ClipDrawable por la imagen del recorte con la Animation .

A Drawable que Drawable otro Drawable basado en el valor actual de este Drawable . Usted puede controlar cuánto el niño Drawable se recorta en el ancho y la altura en función del nivel, así como una gravedad para controlar dónde se coloca en su contenedor general. Most often used to implement things like progress bars , aumentando el nivel de setLevel() con setLevel() .

NOTA: El estirable está recortado completamente y no es visible cuando el nivel es 0 y se revela completamente cuando el nivel es 10.000.

He utilizado estas dos imágenes para hacer este CustomProgressBar .

Scall.png

Scall.png

Ballon_progress.png

Ballon_progress.png

MainActivity.java

 public class MainActivity extends ActionBarActivity { private EditText etPercent; private ClipDrawable mImageDrawable; // a field in your class private int mLevel = 0; private int fromLevel = 0; private int toLevel = 0; public static final int MAX_LEVEL = 10000; public static final int LEVEL_DIFF = 100; public static final int DELAY = 30; private Handler mUpHandler = new Handler(); private Runnable animateUpImage = new Runnable() { @Override public void run() { doTheUpAnimation(fromLevel, toLevel); } }; private Handler mDownHandler = new Handler(); private Runnable animateDownImage = new Runnable() { @Override public void run() { doTheDownAnimation(fromLevel, toLevel); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); etPercent = (EditText) findViewById(R.id.etPercent); ImageView img = (ImageView) findViewById(R.id.imageView1); mImageDrawable = (ClipDrawable) img.getDrawable(); mImageDrawable.setLevel(0); } private void doTheUpAnimation(int fromLevel, int toLevel) { mLevel += LEVEL_DIFF; mImageDrawable.setLevel(mLevel); if (mLevel <= toLevel) { mUpHandler.postDelayed(animateUpImage, DELAY); } else { mUpHandler.removeCallbacks(animateUpImage); MainActivity.this.fromLevel = toLevel; } } private void doTheDownAnimation(int fromLevel, int toLevel) { mLevel -= LEVEL_DIFF; mImageDrawable.setLevel(mLevel); if (mLevel >= toLevel) { mDownHandler.postDelayed(animateDownImage, DELAY); } else { mDownHandler.removeCallbacks(animateDownImage); MainActivity.this.fromLevel = toLevel; } } public void onClickOk(View v) { int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100; if (toLevel == temp_level || temp_level > MAX_LEVEL) { return; } toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel; if (toLevel > fromLevel) { // cancel previous process first mDownHandler.removeCallbacks(animateDownImage); MainActivity.this.fromLevel = toLevel; mUpHandler.post(animateUpImage); } else { // cancel previous process first mUpHandler.removeCallbacks(animateUpImage); MainActivity.this.fromLevel = toLevel; mDownHandler.post(animateDownImage); } } } 

Activity_main.xml

 <LinearLayout 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:paddingLeft="16dp" android:paddingRight="16dp" android:paddingTop="16dp" android:paddingBottom="16dp" android:orientation="vertical" tools:context=".MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <EditText android:id="@+id/etPercent" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:inputType="number" android:maxLength="3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Ok" android:onClick="onClickOk" /> </LinearLayout> <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center"> <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/scall" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/clip_source" /> </FrameLayout> 

Clip_source.xml

 <?xml version="1.0" encoding="utf-8"?> <clip xmlns:android="http://schemas.android.com/apk/res/android" android:clipOrientation="vertical" android:drawable="@drawable/ballon_progress" android:gravity="bottom" /> 

En el caso de complejo HorizontalProgressBar sólo cambiar cliporientation en clip_source.xml como este,

 android:clipOrientation="horizontal" 

Puede descargar una demostración completa de aquí .

En tu xml

 <ProgressBar android:id="@+id/progressBar1" android:layout_width="fill_parent" android:layout_height="wrap_content" style="@style/CustomProgressBar" android:layout_margin="5dip" /> 

Y en res/values/styles.xml :

 <resources> <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal"> <item name="android:indeterminateOnly">false</item> <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item> <item name="android:minHeight">10dip</item> <item name="android:maxHeight">20dip</item> </style> <style name="AppTheme" parent="android:Theme.Light" /> </resources> 

Y custom_progress_bar_horizontal es un xml almacenado en una carpeta dibujable que define tu barra de progreso personalizada. Para más detalles vea este blog .

Espero que esto ayude.

Personalizar el color de la barra de progreso, es decir, en el caso del tipo spinner necesita un archivo xml e iniciar códigos en sus respectivos archivos java.

Crear un archivo xml y nombrarlo como progressbar.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" tools:context=".Radio_Activity" > <LinearLayout android:id="@+id/progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content" > <ProgressBar android:id="@+id/spinner" android:layout_width="wrap_content" android:layout_height="wrap_content" > </ProgressBar> </LinearLayout> </LinearLayout> 

Utilice el siguiente código para obtener el hilandero en varios colores esperados.Aquí usamos el código hexadecimal para mostrar el hilandero en color azul.

 Progressbar spinner = (ProgressBar) progrees.findViewById(R.id.spinner); spinner.getIndeterminateDrawable().setColorFilter(Color.parseColor("#80DAEB"), android.graphics.PorterDuff.Mode.MULTIPLY); 

Creación de ProgressBar personalizado como hotstar.

  1. Agregar barra de progreso en el archivo de diseño y establecer el indeterminateDrawable con archivo dibujable.

Activity_main.xml

 <ProgressBar style="?android:attr/progressBarStyleLarge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_centerHorizontal="true" android:id="@+id/player_progressbar" android:indeterminateDrawable="@drawable/custom_progress_bar" /> 
  1. Crear nuevo archivo xml en res \ drawable

Custom_progress_bar.xml

 <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:duration="2000" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="1080" > <shape android:innerRadius="35dp" android:shape="ring" android:thickness="3dp" android:useLevel="false" > <size android:height="80dp" android:width="80dp" /> <gradient android:centerColor="#80b7b4b2" android:centerY="0.5" android:endColor="#f4eef0" android:startColor="#00938c87" android:type="sweep" android:useLevel="false" /> </shape> </rotate> 

Si desea hacer esto en código, he aquí un ejemplo:

 pd = new ProgressDialog(MainActivity.this); pd.setProgressStyle(ProgressDialog.STYLE_SPINNER); pd.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT)); pd.getWindow().setGravity(Gravity.CENTER_HORIZONTAL|Gravity.CENTER_VERTICAL); TextView tv = new TextView(this); tv.setTextColor(Color.WHITE); tv.setTextSize(20); tv.setText("Waiting..."); pd.setCustomTitle(tv); pd.setIndeterminate(true); pd.show(); 

El uso de TextView le ofrece una opción para cambiar el color, el tamaño y la fuente de su texto. De lo contrario, sólo puede llamar a setMessage (), como de costumbre.

La forma más sencilla de crear personalizar una barra de progreso en Android:

  1. Inicializar y mostrar diálogo:

     MyProgressDialog progressdialog = new MyProgressDialog(getActivity()); progressdialog.show(); 
  2. Crear método:

     public class MyProgressDialog extends AlertDialog { public MyProgressDialog(Context context) { super(context); getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); } @Override public void show() { super.show(); setContentView(R.layout.dialog_progress); } } 
  3. Crear diseño XML:

     <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="@android:color/transparent" android:clickable="true"> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true"> <ProgressBar android:id="@+id/progressbarr" android:layout_width="@dimen/eightfive" android:layout_height="@dimen/eightfive" android:layout_centerInParent="true" android:indeterminateDrawable="@drawable/progresscustombg" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@+id/progressbarr" android:layout_marginTop="@dimen/_3sdp" android:textColor="@color/white" android:text="Please wait"/> </RelativeLayout> </RelativeLayout> 
  4. Crear shape progresscustombg.xml y poner res / drawable:

     <?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <shape android:innerRadiusRatio="3" android:shape="ring" android:thicknessRatio="20" android:useLevel="false" > <size android:height="@dimen/eightfive" android:width="@dimen/eightfive" /> <gradient android:centerY="0.50" android:endColor="@color/color_green_icash" android:startColor="#FFFFFF" android:type="sweep" android:useLevel="false" /> </shape> </rotate> 
  • Cómo cambiar ProgressDialog Spinner color en Android?
  • ¿Dónde puedo encontrar la biblioteca como MBProgressHUD para ios, pero para Android?
  • Centrar ProgressBar mediante programación en Android
  • Cambiar el comportamiento indeterminado de ProgressBar.Horizontal
  • Cómo acceder a la carpeta de descargas en android?
  • ¿Cómo crear una barra de progreso de carga horizontal?
  • Uso práctico de ContentLoadingProgressBar
  • Barra de progreso con divisor
  • ¿Cómo hacer Android ProgressBar determinado en el código?
  • Cómo mostrar el estado de la barra de progreso en porcentaje
  • ContentLoadingProgressBar nunca se muestra
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.