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
?
- ¿Cómo hacer que ProgressBar deje de girar?
- ¿Cómo puedo mostrar un círculo de actividad holo-temático?
- Quite el relleno vertical de ProgressBar horizontal
- Cómo crear ProgressBar circular en android?
- Disposición personalizada de la interfaz de usuario de Android 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
- Cómo crear una barra de progreso circular (gráfico circular) como indicador - Android
- Cómo cambiar el color de progreso de la barra de progreso en Android
- Warcraft ProgressBar en el diseño de Android
- Android ProgressBar no se actualiza onProgress
- Barra de progreso de Android con relleno
- Hacer barra de progreso dentro del botón
- Cómo hacer progresbar circular con el estado de progreso en android?
- ¿Cómo crear un ProgressBar mediante programación?
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,
Utilice ClipDrawable
.
NOTA: No he utilizado
ProgressBar
aquí en este ejemplo. He conseguido esto usando ClipDrawable por la imagen del recorte con laAnimation
.
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
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.
- 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" />
- 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:
-
Inicializar y mostrar diálogo:
MyProgressDialog progressdialog = new MyProgressDialog(getActivity()); progressdialog.show();
-
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); } }
-
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>
-
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>
- Actividad, AppCompatActivity, FragmentActivity y ActionBarActivity: ¿Cuándo utilizar qué?
- Adición de una biblioteca / JAR a un proyecto Eclipse Android