Como personalizar uma barra de progresso no Android

Estou trabalhando em um aplicativo no qual quero mostrar um ProgressBar, mas quero substituir o Android padrão ProgressBar.

Então, como posso personalizar o ProgressBar?

Preciso de alguns gráficos e animações para isso?

Eu li o seguinte post, mas não consegui fazê-lo funcionar:

Barra de progresso personalizada Android

A personalização de um ProgressBarrequer a definição do atributo ou propriedades para o plano de fundo e o progresso da sua barra de progresso.

Crie um arquivo XML nomeado customprogressbar.xmlem sua res->drawablepasta:

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> 

Agora você precisa definir a progressDrawablepropriedade em customprogressbar.xml(drawable)

Você pode fazer isso no arquivo XML ou na atividade (em tempo de execução).

Faça o seguinte em seu 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" />

Em tempo de execução, faça o seguinte

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

Editar: layout xml corrigido

Em caso de complexo ProgressBarcomo este,

use ClipDrawable.

NOTA: Não usei ProgressBaraqui neste exemplo. Eu consegui isso usando o ClipDrawable cortando a imagem com Animation.

Um Drawableque corta outro com Drawablebase no Drawablevalor atual do nível. Você pode controlar o quanto a criança Drawableé cortada em largura e altura com base no nível, bem como uma gravidade para controlar onde é colocada em seu recipiente geral. Most often used to implement things like progress bars, aumentando o nível do drawable com setLevel().

NOTA: O drawable é cortado completamente e não é visível quando o nível é 0 e é totalmente revelado quando o nível é 10.000.

Eu usei essas duas imagens para fazer isso 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" />

No caso do complexo HorizontalProgressBarmudança apenas cliporientationem clip_source.xml como esta,

android:clipOrientation="horizontal"

Você pode baixar a demonstração completa aqui .

no seu xml

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

E em 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>

E custom_progress_bar_horizontalé um xml armazenado na pasta drawable que define sua barra de progresso personalizada. Para mais detalhes, consulte este blog .

Eu espero que isso te ajude.

A personalização da cor da barra de progresso, ou seja, no caso do tipo giratório, é necessário um arquivo xml e códigos de início em seus respectivos arquivos java.

Crie um arquivo xml e nomeie-o 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 o código a seguir para obter o botão giratório na cor esperada. Aqui usamos o código hexadecimal para exibir o botão giratório na cor azul.

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

Existem dois tipos de barras de progresso chamadas barra de progresso determinada (duração fixa) e barra de progresso indeterminada (duração desconhecida).

Os drawables para os dois tipos de barra de progresso podem ser personalizados, definindo drawable como recurso xml. Você pode encontrar mais informações sobre estilos e personalização de barras de progresso em http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples .

Personalizando barra de progresso fixa ou horizontal:

Abaixo do xml há um recurso extraível para personalização da barra de progresso horizontal.

 <?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>

Customizando barra de progresso indeterminada

Abaixo do xml há um recurso extraível para a personalização circular da barra de progresso.

<?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>

Criando ProgressBar personalizado como hotstar.

1. Adicione a barra Progresso no arquivo de layout e defina o indeterminateDrawable com o arquivo drawable.

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. Crie um novo arquivo xml em 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>

Maneira mais simples de criar personalizar uma barra de progresso no Android:

1. Inicialize e mostre o diálogo:

   MyProgressDialog progressdialog = new MyProgressDialog(getActivity());
   progressdialog.show();

2. Criar 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. Crie XML de layout:

   <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. Crie shape progresscustombg.xml e coloque 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>

Para usar o drawable personalizado:

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360"
android:drawable="@drawable/my_drawable"
android:pivotX="50%"
android:pivotY="50%" />

(adicione em res / drawable progress.xml). my_drawablepode ser xml, png

Em seu layout, use

<ProgressBar
        android:id="@+id/progressBar"
        android:indeterminateDrawable="@drawable/progress_circle"
...
/>

Se você quiser fazer isso no código, aqui está um exemplo:

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();

O uso do TextView oferece a opção de alterar a cor, tamanho e fonte do seu texto. Caso contrário, você pode simplesmente chamar setMessage (), como de costume.