Membuat indikator progres

Indikator progres menampilkan status operasi secara visual. Animasi ini menggunakan gerakan untuk menarik perhatian pengguna tentang seberapa dekat prosesnya selesai, seperti memuat atau memproses data. Status ini juga dapat menandakan bahwa pemrosesan sedang berlangsung, tanpa referensi tentang seberapa dekat proses tersebut dengan penyelesaian.

Pertimbangkan tiga kasus penggunaan berikut tempat Anda mungkin menggunakan indikator progres:

• Memuat konten: Saat mengambil konten dari jaringan, seperti memuat gambar atau data untuk profil pengguna.
• Upload file: Berikan masukan kepada pengguna tentang berapa lama waktu yang diperlukan untuk mengupload.
• Pemrosesan yang lama: Saat aplikasi memproses data dalam jumlah besar, sampaikan kepada pengguna berapa banyak total yang sudah selesai.

Dalam Desain Material, ada dua jenis indikator progres:

• Determinate: Menampilkan dengan tepat jumlah progres yang telah dibuat.
• Tidak tentu: Menganimasikan terus-menerus tanpa memperhatikan progres.

Demikian pula, indikator progres dapat berupa salah satu dari dua bentuk berikut:

• Linear: Batang horizontal yang terisi dari kiri ke kanan.
• Melingkar: Lingkaran yang goresannya bertambah panjang hingga mencakup keliling lingkaran penuh.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Membuat indikator yang ditentukan

Indikator determinan mencerminkan seberapa lengkap tindakan. Gunakan composable LinearProgressIndicator atau CircularProgressIndicator dan teruskan nilai untuk parameter progress.

Cuplikan berikut memberikan contoh yang relatif mendetail. Saat pengguna menekan tombol, aplikasi akan menampilkan indikator progres, dan meluncurkan coroutine yang secara bertahap meningkatkan nilai progress. Hal ini menyebabkan indikator progres melakukan iterasi secara bergantian.

Hasil

Saat pemuatan selesai sebagian, indikator linear dalam contoh sebelumnya akan muncul sebagai berikut:

Demikian pula, indikator melingkar akan muncul sebagai berikut:

Membuat indikator yang tidak ditentukan

Indikator yang tidak ditentukan tidak mencerminkan seberapa dekat operasi dengan penyelesaian. Sebaliknya, indikator ini menggunakan gerakan untuk menunjukkan kepada pengguna bahwa pemrosesan sedang berlangsung, meskipun tanpa menentukan tingkat penyelesaian apa pun.

Untuk membuat indikator progres yang tidak ditentukan, gunakan composable LinearProgressIndicator atau CircularProgressIndicator, tetapi jangan teruskan nilai untuk progress. Contoh berikut menunjukkan cara mengalihkan indikator tidak tentu dengan menekan tombol.

Hasil

Berikut adalah contoh penerapan ini saat indikator aktif:

Berikut adalah contoh penerapan yang sama, tetapi dengan LinearProgressIndicator, bukan CircularProgressIndicator.

Poin utama

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat indikator progres yang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Di antara parameter utama yang harus Anda perhatikan adalah sebagai berikut:

• progress: Progres saat ini yang ditampilkan indikator. Teruskan Float antara 0.0 dan 1.0.
• color: Warna indikator, yaitu bagian komponen yang mencerminkan progres dan yang sepenuhnya mencakup komponen saat progres selesai.
• trackColor: Warna jalur tempat indikator digambar.

Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.

Buka FAQ Berikan masukan