Membuat Progressbar dengan persentase Sketchware

Loading Bar , Loading Counter , Progressbar Atau apapun namanya yang jelas widget ini berfungsi untuk menampilkan pemuatan suatu aktivitas. widget ini sangat penting bagi pengguna aplikasi atau website maka dari itu pada artikel Sketchware pertama ini saya akan mencoba memberikan tutorial tentang cara membuat sebuah progressbar berjalan beserta persentasenya, yang mana ini akan lebih memperjelas proses upload maupun download.

Nah untuk membuat Elemen seperti pada gambar di atas itu cukup mudah, yaitu dengan menambahkan beberapa blok komponen dan variabel yang sudah tersedia pada aplikasi Sketchware yang kalian miliki, jadi Langsung saja kita ke-tutorialnya

Projek Baru & Desain

Seperti biasanya untuk percobaan kita buat projek baru pada Sketchware dengan nama terserah kamu, kemudian masukan 1 buah Layout LinearVertical dengan gravity Center Horizontal dan Center Vertical, Jika sudah, silahkan masukkan 1 elemen TextView dan 1 elemen Progressbar dibawahnya.

Untuk style dari Progressbar silahkan gunakan Horizontal atau circle terus desain warna, ukuran teks dan lainnya silahkan sesuaikan dengan keinginan kamu, Setelah membuat desainnya sekarang kita lanjut ke tahap berikutnya yaitu menambahkan beberapa Block pada onCreate dengan cara masuk pada tab event kemudian klik pada bagian onCreate.

Block & Komponen

Didalam onCreate yang masih kosong silahkan buat Variabel baru untuk variabel Number

Selanjutnya masukkan block variabel pilih yang ( set number to ) masukan variabel n yang kita buat tadi kemudian isikan angka 0 di akhir, selanjutnya masuk ke blok view kemudian pilih blok ( seekBar setMax ) terus masukan Progressbar1 pada seekBar dan setMax ke angka 100.

Jika sudah sekarang masuk pada blok komponen dan tambahkan komponen baru yaitu timer, silahkan set namanya sesuai keinginan atau buat saja dengan nama t untuk timer. Selanjutnya masukan blok timer yang sudah kita buat dengan memilih (timer after ms for every ms ) dan masukkan t untuk timer isi 100 pada kedua kolom ms.

Kemudian didalam blok timer kita isi dengan blok variabel number ( number increase 1 ) dan tambahkan juga blok view ( seekBar setProgress ) dan ( TextView setText ), untuk seekBar isikan progressbar1 kemudian setProgress nya isi dengan Variabel Number yang tadi kita buat dan untuk textview silahkan masukan textview1 setText isi dengan beberapa blok dari operator yaitu 2 block (join and ) digabung dengan blok operator lainnya yaitu toStrig without Decimal. proses ini akan merubah textview1 menjadi value yang dikirim dari variabel Number dan data maximal dari Progressbar.

Pada kolom join pertama silahkan isi dengan text yang ingin di tampilkan kemudian pada kolom kedua isi dengan blok join kedua selanjutnya isi kolom pertama pada blok join kedua dengan toString Without Decimal lalu tambahkan variable number yang sudah kita buat pada blok tostring without decimal lalu pada kolom terakhir join isi denga simbol persentase.

Setelah itu kita masukkan juga blok control dan pilih ( if then ) lalu isi if then dengan boolean dari operator yaitu boolean (=) sama dengan. kemudian masukan variabel Number pada kolom pertama boolean tersebut dan pada kolom kedua isi dengan seekbar getMax.

Jadi jika Number sudah sama dengan maximal dari seekbar maka akan dilakukan sesuatu, maka dari itu kita tambahkan lagi block textview setText kemudian isi dengan "finish" atau apapun untuk memeberi tanda bahwa pemuatan sudah selesai.

Masih belum selesai, selanjutnya tambahkan juga block variabel Number lagi kemudian set ke angka nol (0) untuk me-reset nya dan tambahkan blok timer cancel untuk menghentikan progress. semua blok sudah tersusun hingga hasil akhirnya akan seperti berikut ini.

Blok-blok tersebut sejatinya adalah kumpulan Skrip yang bisanya digunakan untuk membuat aplikasi, dan beginilah tampilan blok jika ditampilkan sebagai skrip.

n = 0; progressbar1.setMax((int)100); t = new TimerTask() { @Override public void run() { runOnUiThread(new Runnable() { @Override public void run() { n++; progressbar1.setProgress((int)n); textview1.setText("LOADING ".concat(String.valueOf((long)(n)).concat(" %"))); if (n == progressbar1.getMax()) { textview1.setText("FINISH 100 %"); n = 0; t.cancel(); } } }); } }; _timer.scheduleAtFixedRate(t, (int)(100), (int)(100));

Jadi selain menggunakan block kamu juga bisa menggunakan skrip di atas untuk membuat tampilan Loading Counter yang saya maksud. kamu tinggal tempel saja skrip diatas pada onCreat menggunakan blok operator (add source directly) seperti gambar berikut.

Dengan begitu kamu sudah berhasil membuat Loading Counter seperti yang saya maksud, kamu tingal mempercatik saja tampilannya sesuai selera masing-masing.

Loading Counter ini bisa kamu buat apa saja seperti contoh disini saya gunakannya untuk tampilan splash screen pada aplikasi yang saya buat, bisa juga untuk proses loading memeuat gambar atau apapun.

Jika kamu masih bingung dengan tutorial diatas kamu bisa melihat tutorial ini secara visual pada video YouTube yang sudah saya buat berikut ini.

Video & Projek

Dan untuk sampel projek apk dan swb file bisa kamu download pada link dibawah

DOWNLOAD