Programming

Cara Membuat dan Menggunakan Widget di Android Studio

Cara Membuat dan Menggunakan Widget di Android Studio
Avatar photo
Written by Techfor Id

Widget Android dapat diakses langsung dari layar beranda, memungkinkan pengguna untuk melihat informasi penting secara sekilas. Widget telah menjadi bagian integral dari sistem operasi Android sejak diperkenalkan pada 2008.

Selama bertahun-tahun, widget sangat populer, memberi pengguna kenyamanan yang luar biasa. Meskipun popularitas widget telah menurun selama beberapa tahun terakhir, mereka masih digunakan secara luas.

Widget waktu dan cuaca harus dimiliki di setiap perangkat Android, dan perusahaan teknologi besar membuat widget mereka sendiri untuk akses yang lebih cepat ke aplikasi mereka. Misalnya, widget LinkedIn, Google Chrome, Gmail, dan Spotify menyediakan cara yang nyaman bagi penggunanya untuk melakukan tindakan dasar dari layar beranda.

Untuk menawarkan lebih banyak kenyamanan kepada pengguna kamu, kamu juga dapat membuat widget untuk aplikasi kamu. Di artikel ini, kami akan menunjukkan kepada  kamu bagaimana melakukannya dengan Android Studio.

Android Studio Widget

Seperti yang kamu liat, ada banyak sekali Widget pada android Studio yang bisa kamu explore. Namun pada kesempatan kali ini, kita akan membahas Widget Textview dan Button saja. Kedua widget ini sangat umum digunakan bagi siapa saja yang membangun aplikasi baik pada Android maupun iOS.

Membuat Widget

Untuk Menambahkan Widget pada Android caranya sangat mudah. Kamu hanya perlu menyeret dan menjatuhkan widget yang kamu inginkan pada Laman pembuatan aplikasi.

Sebagai contoh, mari kita buat Button pada bagian tengah layar aplikasi kita. Android Studio akan membantu kita menyesuaikan letak widget. Tapi perlu diketahui, kamu bisa mengubah tata letaknya di bagian Properties yang tampil di laman Text Page XML.

Mengganti Text pada Button

Secara Default, text yang ada pada Button yang kamu sisipkan berupa kata “New Button” sebagai element teksnya. Kamu bisa menggantinya dengan cara mengkliknya dua kali memodifikasinya di halaman desain atau dengan mengscroll properti Button di sebelah kanan dan pilih Text Properties.

Terakhir, kamu dapat mengubah teksnya dengan beralih ke tab teks XML dan memodifikasi properti android: text.

Mari kita buat tombol dengan teks “Change Background Color” dengan mengubah properti Tombol pada halaman teks XML untuk membaca android: text = “Change background Color”.

String Resources

Kamu akan menemukan bahwa kode akan disorot dengan warna kuning setelah kamu melakukan perubahan. Jangan khawatir, hal ini tidak menyebabkan error pada aplikasi kamu.

Kamu mendapatkan peringatan karena string yang baru saja kita masukkan (“Change Background Color”) adalah string yang dikodekan yang perlu dibuat menjadi String Resources. String Resources disimpan dalam file strings.xml di folder res aplikasi kamu. Setiap kali kamu melakukan hardcode suatu string, Android Studio akan menunjukkan kesalahan String Resources.

Untuk memperbaiki kesalahan ini , kamu bisa mengklik bola lampu kuning di sebelah string yang dikodekan dan memilih “Extract String Resource”. Pilih nama resourcse kamu, lalu klik tombol “OK” untuk menyimpan resources tersebut.

Widget : OnClick

Jika kamu beralih ke halaman Desain, pilih widget Tombol yang kita buat, dan scroll ke bawah properti nya, kamu akan menemukan properti onClick. onClick memungkinkan kamu untuk memilih metode Java yang akan dipanggil aplikasi setelah Tombol diklik.

Mari kita ubah properti onClick dari Tombol kita untuk memanggil metode “changeColor“. Perlu diingat bahwa kita harus membuat metode changeColor () di Java Class kita agar perintah onClick ini berfungsi.

Widget : ChangeColor (View)

Component ID

Untuk memiliki fungsi metode changeColor kita harus menetapkan ID untuk Layout dan TextView nya. Pilih TextView di kotak kanan atas, yang berjudul “Component Tree“. Scroll propertinya hingga kamu melihat “id“. Ubah ID-nya menjadi “Text“.

Lakukan hal yang sama untuk komponen RelativeLayout, tetapi tetapkan ID-nya ke “layout“.

Kamu harus dapat melihat ID yang sesuai di sebelah setiap komponen di Component Tree.

Mari kita beralih ke metode changeColor yang sebenarnya. Buka tab MainActivity.java kamu. Di tab ini, kamu akan melihat metode yang disebut onCreate. Ini berjalan setiap kali aplikasi pertama kali dinyalakan.

Kita akan membuat metode “changeColor” tepat setelah onCreate. Tambahkan yang berikut ini ke kelas MainActivity.java kamu:

public void changeColor(View view)

{

  RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout);

  TextView text = (TextView)findViewById(R.id.text);

  layout.setBackgroundColor(Color.RED);

  text.setText(R.string.PageIsRed);

}

Metode kita nantinya akan mengubah warna layout menjadi merah setelah tombol diklik. Ini juga akan mengatur objek TextView untuk mengatakan “Page is Red”.

Untuk pemula  Android Studio, ada banyak hal di blok kode di atas yang harus di perhatikan.

Pertama, lihat method signature kita: public void changeColor (View View). Android membutuhkan metode onClick untuk mengambil View sebagai parameter; kegagalan melakukannya dapat menyebabkan aplikasi kamu mengalami Crash.

Selanjutnya, perhatikan metode findViewById (). Ini adalah metode standar untuk mengakses View (atau objek pada layar aplikasi) untuk digunakan dalam aplikasi kita. Seperti yang kamu lihat, kita perlu menampilkan tampilan ke RelativeLayout. Casting ini diperlukan karena  findViewById mengembalikan View; Polimorfisme Java tidak memungkinkan RelativeLayout (yang merupakan Tampilan) untuk menggeneralisasi semua jenis Tampilan.

Sekali lagi, kamu juga akan melihat peringatan kuning mengenai resourcse string ketika kamu menggunakan text.setText (“Page Is Red”). Tangani peringatan ini dengan cara yang sama seperti yang kita lakukan tadi pada String Resource button dan Anda akan mendapatkan sumber daya string seperti milik saya (R.string.PageIsRed).

Menguji Aplikasinya

Jalankan aplikasi pada emulator atau perangkat Android debuggable eksternal. Jika kamu Mengklik tombol, nantinya akan mengubah warna layout dan mengubah TextView juga.

Sumber :pluralsight.com

About the author

Avatar photo

Techfor Id

Leave a Comment

Click to ask
Hai, Tanya-Tanya Aja
Hi ini Windy, dari techfor

Windy bisa membantu kamu memahami layanan Techfor
Seperti

1. Kursus Online By Expert
2. Partnership Event dan Konten
3. Layanan liputan multimedia
4. Dan hal lain yg ingin kamu tau

Kirim saja pesan ini serta berikan salah satu nomor diatas atau beritahukan windy lebih jelas agar dapat membantu Kamu