Membuat slider untuk mengatur volume di Sketchware

Halo teman-teman, selamat datang di kodingHape, dikesempatan kali ini saya akan berbagi cara "Membuat slider untuk mengatur volume di Sketchware". Oke langsung aja ke langkah pembuatan.

Untuk tampilan slidernya seperti ini, bisa teman-teman kreasikan sekreatif teman teman..


Slider Volume By Pace Rizki (Open Source)


Langkah 1

Silahkan teman-teman membuat project baru disketchware, lalu buatlah tampilan layout seperti gambar dibawah ini :


Komponen terdiri dari :

1. Textview (3 item)

2. linear (H) (3 item)

3. Seekbar (1 item)

Langkah 2

Selanjutnya, silahkan buat komponen baru yaitu MediaPlayer, nah komponen ini berfungsi untuk memutar musik yang akan kita test nantinya.


Langkah 3

Silahkan tambahkan musik untuk melakukan pengetesan slider volumenya, saran saya gunakan musik yang ukurannya tidak besar ( < 3 MB), untuk menambahkan sound (musik) bisa langsung menuju ke sound manager.



Langkah 4

Tahap berikutnya, silahkan buat moreblock dengan nama :

  • setVolume
  • showStats

Kemudian, tambahkan block sesuai dengan gambar ya teman-teman. 

Untuk block setVolume :


Silahkan tambahkan addsource dan kode ini ya :

AudioManager audioManager = (AudioManager)getSystemService(Context.AUDIO_SERVICE);
audioManager.setStreamVolume(AudioManager.STREAM_MUSIC, (int)_no, 0);


Untuk block showStats :


Tambahkan addsource dan masukan :

_text.setText("Volume speaker : ".concat(String.valueOf((long)(volume)).concat("\nVolume maksimal : ".concat(String.valueOf((long)(max)).concat("\nVolume Slider : ".concat(String.valueOf((long)(seekbar1.getProgress()))))))));

Langkah 5 

Nah kemudian teman-teman pergi ke tab event, lalu oncreate, masukan kode dan tambahkan block seperti gambar dibawah


Untuk kode diatas, add source :


AudioManager audioManager = (AudioManager)getSystemService(Context.AUDIO_SERVICE);

int volume = audioManager.getStreamVolume(AudioManager.STREAM_MUSIC);

int max = audioManager.getStreamMaxVolume(AudioManager.STREAM_MUSIC); 

Kemudian dibawah seekbar setMax


seekbar1.setProgress((int) volume);


Langkah 6

Nah sekarang coba teman-teman, kembali ke halaman tab view, silahkan tap seekbarnya, lalu properties dan event, pilih onProgressChanged dan masukan block seperti digambar :


Untuk textview2, bisa diganti sesuai dengan textview yang teman-teman masukan, kalau saran saya masukan id sesuai layout yang saya berikan diatas.


Yey.. langkah akhir, silahkan dirun dan dicoba (test), Kalau ribet buat dari awal, teman-teman  bisa langsung unduh aja projeknya, di sini

Oke teman-teman, jika ada kesulitan atau kendala silahkan bertanya di kolom komentar, tetap dukung koding hape dan selamat belajar 😊, semoga bermanfaat :)


Salam koding Hape

#Kodinghape






Post a Comment

1 Comments

  1. mantap. dah lama nih saya cari2 tutornya. akhir nya nemu juga

    ReplyDelete

Halo sobat kodinghape, silahkan berkomentar, memberi saran atau pendapat kalian disini. Harap gunakan bahasa yang sopan dan tidak menyinggung ya.. kenyamanan komunitas adalah tanggung jawab sobat kodinghape 😊