java - studio - Cómo personalizar una barra de progreso en Android

personalizar edittext android

Question

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

Entonces, ¿cómo puedo personalizar ProgressBar ?

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

Leí la siguiente publicación pero no pude hacerlo funcionar:

Barra de progreso personalizado Android

Answer 1

Creando Custom ProgressBar como hotstar.

1. Agregue la barra de progreso en el archivo de diseño y establezca el dibujo indeterminado con un 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"
/>

2. Crear nuevo archivo xml en res / dibujable

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>

Answer 2

En el caso de ProgressBar complejo como este,

usa ClipDrawable .

NOTA: No he usado ProgressBar aquí en este ejemplo. Lo he logrado usando ClipDrawable al recortar imágenes con Animation .

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

NOTA: El dibujo se recorta por completo y no se ve cuando el nivel es 0 y se revela completamente cuando el nivel es 10,000.

He usado estas dos imágenes para hacer esta 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 HorizontalProgressBar complejo simplemente cambie la cliporientation en clip_source.xml así,

android:clipOrientation="horizontal"

Puede descargar la demostración completa desde here .

Answer 3

Hay dos tipos de barras de progreso llamadas barra de progreso determinada (duración fija) y barra de progreso indeterminada (duración desconocida).

Los drawables para ambos tipos de barra de progreso se pueden personalizar definiendo drawable como recurso xml. Puede encontrar más información sobre estilos de barra de progreso y personalización en http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples .

Personalización de la barra de progreso fija o horizontal:

A continuación, xml es un recurso dibujable para la personalización horizontal de la barra 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/background"
android:gravity="center_vertical|fill_horizontal">
<shape android:shape="rectangle"
android:tint="?attr/colorControlNormal">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#90caf9" />
</shape>
</item>
<item android:id="@android:id/progress"
android:gravity="center_vertical|fill_horizontal">
<scale android:scaleWidth="100%">
<shape android:shape="rectangle"
android:tint="?attr/colorControlActivated">
<corners android:radius="8dp"/>
<size android:height="20dp" />
<solid android:color="#b9f6ca" />
</shape>
</scale>
</item>
</layer-list>

Personalizar barra de progreso indeterminado

A continuación, xml es un recurso dibujable para la personalización de barra de progreso circular.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/progress"
android:top="16dp"
android:bottom="16dp">
<rotate
android:fromDegrees="45"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="315">
<shape android:shape="rectangle">
<size
android:width="80dp"
android:height="80dp" />
<stroke
android:width="6dp"
android:color="#b71c1c" />
</shape>
</rotate>
</item>
</layer-list>

Answer 4

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

1. Inicializar y mostrar el 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. Crea shape progresscustombg.xml y coloca 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>

Answer 5

Si desea hacer esto en el código, aquí hay una muestra:

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 la opción de cambiar el color, el tamaño y la fuente de su texto. De lo contrario, simplemente puede llamar a setMessage (), como de costumbre.

Answer 6

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 su barra de progreso personalizada. Para más detalles, mira este blog .

Espero que esto ayude.

Answer 7

La personalización del color de la barra de progreso, en el caso del tipo de girador, necesita un archivo xml e inicia códigos en sus respectivos archivos java.

Crea un archivo xml y nómbralo 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>

Use el siguiente código para obtener la ruleta en varios colores esperados. Aquí usamos el código hexadecimal para mostrar la ruleta en color azul.

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

Answer 8

Lo describí con código y un ejemplo en este blog: barra de progreso personalizada en Android

La personalización de una barra de ProgressBar requiere definir el atributo o las propiedades del fondo y el progreso de la barra de progreso.

Crea un archivo XML llamado customprogressbar.xml en tu res->drawable carpeta customprogressbar.xml :

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).

Haz lo siguiente en tu 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 haz 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 xml corregido