Inilah Cara Membuat Widget Android Termudah

Last Updated on March 5, 2022 by

Widget adalah tools atau fitur tambahan yang bermanfaat bagi smartphone untuk memudahkan kerja user. Selain widget default yang menjadi bawaan OS, Anda juga bisa membuat widget Android sendiri dengan mudah, lho!

Widget adalah fitur yang sudah tidak asing lagi bagi para pengguna Android. Bahkan, baru-baru ini fitur widget akhirnya ikut muncul juga di iOS 14. Kejadian ini serta-merta menandakan betapa widget adalah fitur yang sangat berguna bagi smartphone user. Seperti apa, sih, widget itu?

Widget Android adalah tampilan mini dari aplikasi yang bisa bebas Anda sematkan ke home screen maupun lock screen. Meski berupa tampilan mini, ternyata widget Android adalah tools dengan performa tinggi, nyaris tidak ada bedanya dengan aplikasi biasa.

Uniknya lagi, widget juga bisa dikustomisasi dengan bebas oleh user, baik dari segi ukuran maupun tampilannya. Alhasil, tak mengherankan banyak orang senang memakai widget lantaran tools-tools ini mampu mempercantik tampilan antarmuka layar smartphone mereka.

Biasanya, widget Android adalah fitur bawaan milik OS. Akan tetapi belakangan ini mulai ditemukan cara untuk membuat widget Android dengan mudah memakai Android Studio. Penasaran ingin tahu bagaimana cara membuat widget Android dengan Android Studio? Yuk temukan cara-caranya pada artikel berikut ini – selamat membaca!

Persiapan Membuat Widget Android Studio

Proses membuat widget Android dapat dimulai dengan memakai software Android Studio. Apa itu Android Studio? Android Studio adalah IDE atau lingkungan pengembangan software yang paling ideal untuk beragam aplikasi Android.

Kami tidak akan menjelaskan panjang lebar mengenai Android Studio di sini. Tetapi jika Anda penasaran, Anda bisa membaca artikel khusus Appkey bertajuk: “Pedoman Lengkap Cara Update SDK Tools dan IDE Android Studio” dan berikut ini kami sediakan link dari artikel tersebut https://appkey.id/pembuatan-aplikasi/aplikasi-android/update-sdk-ide-android-studio/.

Anda juga bisa membaca artikel tersebut untuk mengetahui cara instalasi Android Studio agar bisa digunakan untuk membuat widget Android.

Kembali lagi ke project membuat widget Android dengan Android Studio. Sebelum memulai, Anda akan memerlukan beberapa komponen penyusunan yaitu:

• Objeck AppWidgetProviderInfo yang merupakan metadata widget Android yang ditentukan dalam XML. Objek ini mencakup frekuensi update dan class AppWidgetProvider.
• Tata letak tampilan widget yang juga ditentukan dalam XML.
• Penerapan aktivitas konfigurasi widget ketika widget diaktifkan serta dimodifikasi oleh user. Meski demikian, penerapan activity widget ini bersifat opsional.
• Penerapan metode dasar class AppWidgetProvider yang akan memungkinkan developer serta user untuk melakukan interaksi terprogram dengan widget Android yang telah dibuat. Penerapan metode dasar ini juga akan membantu Anda menerima info ketika widget diupdate, dihapus, diaktifkan maupun dinonaktifkan.

Step by Step Mengustomisasi Widget Android Studio Sederhana

Sudah mempersiapkan semua bahan-bahan di atas? Jika sudah, mari lanjutkan dengan cara membuat widget Android sederhana berikut ini. Kali ini kami akan mengajak Anda untuk melihat tata cara mengustomisasi widget tombol agar dapat diklik dan berubah warnanya. Disimak, ya!

1.Membuat Project Baru

Pertama, buatlah project baru di Android Studio. Caranya adalah:

1. Buka Android Studio yang sudah terinstall.
2. Pilih ‘create new project’ > beri nama project. Semisal: Android widget.
3. Klik ‘template empty activity’ > beri nama activity dengan ‘MainActivity’.
4. Lanjutkan dengan memberi nama layout sebagai ‘main_layout’.
5. Selesai.

2. Buat Widget

Android Studio sudah memiliki sejumlah template widget siap pakai yang bisa Anda drag and drop pada laman project aplikasi.

Beberapa jenis template widget yang disediakan oleh Android Studio antara lain button, small button, radio button, plain textview, check, toggle button, switch, progress bar (small, normal, large dan horizonal), spinner, web view, seek bar dan rating bar. Anda bisa memilih salah satu widget, semisal button.

Drag dan drop (seret dan letakkan) widget pilihan ke bagian tengah layar project. Nantinya, Android Studio akan membantu Anda menyesuaikan kembali posisi widget di project. Anda juga bisa mengaturnya sendiri di properties Text Page XML.

3. Kustomisasi Teks di Widget

Selanjutnya, kustomisasi teks di widget yang dipilih. Semisal pada widget button yang dipilih pada step 2. Anda bisa menyisipkan teks apa saja pada widget tersebut. Caranya adalah:

1. Perhatikan tombol button, Anda akan menemukan tulisan ‘new button’ – ini adalah elemen teks pada button yang bisa Anda ganti.
2. Klik 2x pada elemen tersebut > muncul halaman desain baru secara khusus > pilih text properties.
3. Ubah teksnya dengan cara beralih ke tab text HTML > modifikasi properti menjadi android: text.
4. Untuk kustomisasi lanjutan seperti mengganti warna widget button, cek halaman text HTML > cari properti tombol, kemudian ketikkan android: text = “change background color”. Contoh codingnya:

<?xml version=”1.0” encoding=”utf-8”?>
<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:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
tools:context="com.example.adiv.widgets.MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selamat Datang!" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Change Background Color"
android:id="@+id/button"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

4. Membuat String Resources

Setelah melakukan kustomisasi di atas, Anda mungkin akan mendapati coding tersorot dengan icon lampu kuning (highlight). Ini adalah peringatan atas string “change background code” yang perlu untuk diubah ke bentuk string resources. Namun tetap tenang, kode ini tidak menunjukkan bahwa coding Anda error.

Ini cara mudah untuk memperbaiki kode string tersebut:

1. Klik icon lampu kuning yang ada di sebelah string code atau memakai kombinasi tombol alternatif Alt+Enter.
2. Klik ‘extract string resource’.
3. Klik nama resource Anda.
4. Simpan resources dengan mengklik ‘ok’.

5.Kustomisasi Desain Widget Lanjutan

Tahap terakhir adalah melakukan kustomisasi desain widget lanjutan pada properti OnClick di halaman desain. Caranya adalah:

1. Pergi ke halaman ‘desain’ di Android Studio > klik widget button yang Anda buat.
2. Scroll hingga menemukan opsi ‘properti OnClick’. Klik properti OnClick. Di sini Anda bisa memilih metode Java yang akan dipanggil kapanpun widget button diklik user. Semisal untuk memanggil metode ‘changeColor’ ( kode: changeColor () ).
3. Untuk bisa menjalankan metode change color, Anda harus menetapkan ID TextView dan Layout terlebih dahulu. Scroll ke bagian pojok kanan atas layar hingga menemukan box ‘componen tree’.
4. Klik menu layout > klik TextView > scroll hingga menemukan opsi ‘id’. Terakhir, ubah ‘id’ menjadi ‘text’. Ulangi langkah yang sama untuk mengubah relative layout, namun komponen ‘id’ diganti menjadi ‘layout’.
5. Lanjutkan dengan membuka tab MainActivity.java > Anda akan menemukan metode onCreate yang berjalan otomatis kapanpun aplikasi dijalankan.
6. Buat metode ‘changeColor’ setelah onCreate dengan menambahkan kode berikut ke tab MainActivity.java:

public void changeColor(View view)

{
RelativeLayout layout = (RelativeLayout)findViewById(R.id.layout);
TextView text = (TextView)findViewById(R.id.text);
layout.setBackgroundColor(Color.BLUE);
text.setText(R.string.PageIsBlue);
}

7. Metode di atas akan mengganti warna layout tombol menjadi biru setelah diklik user, sedangkan teks di dalamnya akan berubah menjadi ‘Page is Blue’.
8. Sudah selesai. Anda bisa menyimpan project lalu mencoba menjalankannya pada emulator. Lakukan uji coba untuk melihat kondisi sebelum dan sesudah mengklik widget tombol, ya. Jika tombol sukses berubah warna menjadi biru, maka widget Anda sudah dapat beroperasi dengan baik.

Demikianlah pembahasan artikel edisi kali ini tentang cara sederhana membuat widget Android Studio. Bagaimana, sudahkah kini Anda siap untuk mencoba mempraktekkan cara membuat widget android? Selamat mencoba mulai berpraktek, ya!