Cara Menyesuaikan Bilah Kemajuan Di Android

Saya sedang mengerjakan aplikasi yang ingin saya tampilkan ProgressBar, tetapi saya ingin mengganti Android default ProgressBar.

Jadi bagaimana saya bisa menyesuaikan ProgressBar?

Apakah saya memerlukan grafik dan animasi untuk itu?

Saya membaca posting berikut tetapi tidak bisa berfungsi:

Bilah Kemajuan Kustom Android

Menyesuaikan a ProgressBarmembutuhkan pendefinisian atribut atau properti untuk latar belakang dan kemajuan bilah kemajuan Anda.

Buat file XML bernama customprogressbar.xmldi res->drawablefolder Anda :

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> 

Sekarang Anda perlu mengatur progressDrawableproperti dalam customprogressbar.xml(dapat ditarik)

Anda dapat melakukan ini di file XML atau di Activity (saat run time).

Lakukan hal berikut dalam XML Anda:

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

Pada saat menjalankan lakukan hal berikut

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

Edit: tata letak xml dikoreksi

Dalam hal kompleks ProgressBarseperti ini,

gunakan ClipDrawable.

CATATAN: Saya belum pernah menggunakan ProgressBarcontoh ini di sini. Saya telah mencapai ini menggunakan ClipDrawable dengan kliping gambar dengan Animation.

A Drawableyang klip lain Drawableberdasarkan pada Drawablenilai level saat ini. Anda dapat mengontrol berapa banyak anak Drawableterpotong lebar dan tinggi berdasarkan level, serta gravitasi untuk mengontrol di mana ia ditempatkan dalam wadah keseluruhannya. Most often used to implement things like progress bars, dengan meningkatkan level drawable dengan setLevel().

CATATAN: Drawable terpotong sepenuhnya dan tidak terlihat ketika levelnya 0 dan terungkap sepenuhnya saat levelnya 10.000.

Saya telah menggunakan dua gambar ini untuk membuat ini 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" />

Dalam kasus yang kompleks HorizontalProgressBarhanya perubahan cliporientationdi clip_source.xml seperti ini,

android:clipOrientation="horizontal"

Anda dapat mengunduh demo lengkap dari sini .

di xml Anda

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

Dan di 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>

Dan custom_progress_bar_horizontalxml disimpan dalam folder yang dapat digambar yang mendefinisikan bilah progres kustom Anda. Untuk lebih detail lihat blog ini .

Saya harap ini akan membantu Anda.

Menyesuaikan warna progressbar yaitu dalam hal jenis pemintal membutuhkan file xml dan memulai kode dalam file java masing-masing.

Buat file xml dan beri nama sebagai 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>

Gunakan kode berikut untuk mendapatkan pemintal dalam berbagai warna yang diharapkan. Di sini kita menggunakan hexcode untuk menampilkan pemintal dalam warna biru.

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

Ada dua jenis bilah progres yang disebut bilah kemajuan determinasi (durasi tetap) dan bilah progres tak tentu (durasi tidak diketahui).

Drawable untuk kedua jenis progress bar dapat dikustomisasi dengan mendefinisikan drawable sebagai sumber daya xml. Anda dapat menemukan informasi lebih lanjut tentang gaya dan penyesuaian bilah kemajuan di http://www.zoftino.com/android-progressbar-and-custom-progressbar-examples .

Menyesuaikan bilah kemajuan tetap atau horizontal:

Di bawah xml adalah sumber yang dapat digambar untuk kustomisasi bilah kemajuan 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>

Menyesuaikan bilah progres tak tentu

Di bawah xml adalah sumber yang dapat digambar untuk kustomisasi progress bar progress.

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

Membuat Custom ProgressBar seperti hotstar.

1. Tambahkan Progress bar pada file layout dan atur indeterminateDrawable dengan file 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. Buat file xml baru di 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>

Cara termudah untuk membuat kustomisasi bilah kemajuan di Android:

1. Inisialisasi dan tampilkan dialog:

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

2. Buat metode:

   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. Buat tata letak 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. Buat bentuk progresscustombg.xml dan masukkan 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>

Untuk menggunakan drawable khusus:

<?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%" />

(tambahkan di bawah res / drawable progress.xml). my_drawablemungkin xml, png

Kemudian gunakan tata letak Anda

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

Jika Anda ingin melakukan ini dalam kode, berikut ini contohnya:

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

Menggunakan TextView memberi Anda opsi untuk mengubah warna, ukuran, dan font teks Anda. Kalau tidak, Anda bisa memanggil setMessage (), seperti biasa.