Sejak Android 1.5, widget aplikasi telah memungkinkan pengguna mendapatkan informasi, mengendalikan aplikasi, dan melakukan tugas penting, semuanya dari kenyamanan homescreens mereka.

Dalam rangkaian bagian dua ini, saya akan menunjukkan kepada Anda bagaimana memberikan pengalaman pengguna yang lebih baik dengan menambahkan widget aplikasi ke proyek Androidmu.

Pada akhir seri, Anda akan membuat widget yang:

• Menampilkan beberapa kumpulan data.
• Melakukan tindakan unik saat pengguna berinteraksi dengan View tertentu di dalam tata letak widget itu.
• Pembaruan secara otomatis setiap kali satu periode waktu telah berlalu.
• Pembaruan dengan data baru sebagai respons terhadap interaksi pengguna.

Di postingan pertama ini, kami akan menggunakan tools bawaan Android Studio untuk menghasilkan dengan cepat dan mudah semua file yang dibutuhkan untuk mengirimkan apa saja widget aplikasi Android. Kami kemudian akan memperluas fondasi ini untuk membuat widget yang mengambil dan menampilkan data dan merespons event onClick.

Apa itu Widget Aplikasi?

Widget aplikasi adalah aplikasi miniatur ringan yang biasanya termasuk dalam salah satu kategori berikut:

• Widget informasi. Widget yang tidak dapat discroll yang menampilkan informasi penting, seperti widget cuaca atau jam.
• Koleksi widget. Widget yang dapat discroll yang menampilkan serangkaian elemen terkait, seperti galeri foto atau artikel dari publikasi yang sama. Widget koleksi biasanya didukung oleh sumber data, seperti Array atau database. Widget koleksi harus menyertakan ListView, GridView, StackView, atau AdapterViewFlipper.
• Kontrol widget. Widget yang bertindak sebagai remote control untuk aplikasi Anda, memungkinkan pengguna untuk memicu fungsi yang sering digunakan tanpa perlu meluncurkan aplikasi Anda. Aplikasi yang memutar musik sering memberikan widget yang memungkinkan pengguna bermain, menjeda, dan melewatkan trek langsung dari homescreen mereka.
• Widget hibrida. Mengapa membatasi diri Anda pada satu kategori, kapan Anda bisa memilih elemen ceri dari beberapa kategori? Sadarilah bahwa pencampuran dan pencocokan dapat menyebabkan pengalaman pengguna yang membingungkan, jadi untuk hasil terbaik Anda harus merancang widget Anda dengan satu kategori dan kemudian menambahkan elemen dari kategori lain sesuai kebutuhan. Misalnya, jika Anda ingin membuat widget yang menampilkan ramalan cuaca hari ini, namun juga memungkinkan pengguna melihat ramalan untuk hari dan lokasi yang berbeda, maka Anda harus membuat widget informasi dan kemudian menambahkan elemen kontrol yang diperlukan sesudahnya.

Selain fungsi di atas, sebagian besar widget merespons event onClick dengan meluncurkan aplikasi yang terkait, serupa dengan shortcut aplikasi, namun juga dapat memberikan akses langsung ke konten tertentu dalam aplikasi itu.

Widget aplikasi harus ditempatkan di dalam App Widget Host, yang paling umum adalah stok homescreen Android, walaupun ada beberapa Host Widget App pihak ketiga, seperti Nova Launcher dan Apex Launcher yang populer.

Sepanjang seri ini, saya akan berbicara tentang widget sebagai sesuatu yang Anda tempatkan di homescreen, namun jika Anda memiliki ingatan samar untuk bisa memasang widget di layar lockscreen, ini bukan sekadar mimpi indah! Antara tingkat API 17 dan 20, adalah mungkin untuk menempatkan widget pada homescreen atau layar lockscreen.

Sejak widget lockscreen sudah tidak berlaku lagi di level API 21, dalam seri ini kita akan membuat widget untuk homescreen saja.

Mengapa Harus Membuat Widget Aplikasi?

Ada beberapa alasan mengapa Anda harus mempertimbangkan untuk menambahkan widget aplikasi ke proyek Android terbarumu.

Akses Mudah terhadap Informasi dan Fitur Penting

Widget memungkinkan pengguna melihat informasi terpenting aplikasi Anda, langsung dari homescreen mereka. Misalnya, jika Anda telah mengembangkan aplikasi kalender, Anda mungkin membuat widget yang menampilkan detail tentang janji temu pengguna berikutnya. Ini jauh lebih mudah daripada memaksa pengguna meluncurkan aplikasimu dan berpotensi menavigasi beberapa layar, hanya untuk mengambil informasi yang sama.

Jika Anda mengembangkan widget kontrol (atau widget hibrida dengan elemen kontrol) maka pengguna juga bisa menyelesaikan tugas langsung dari homescreen mereka. Melanjutkan contoh kalender kami, widget Anda memungkinkan pengguna membuat, mengedit dan membatalkan janji temu, berpotensi bahkan tanpa harus meluncurkan aplikasimu. Ini berpotensi menghapus beberapa langkah navigasi dari beberapa tugas terpenting aplikasimu, yang hanya dapat memberi dampak positif pada pengalaman pengguna!

Akses Langsung ke Semua Layar Paling Penting dari Aplikasimu

Mengetuk widget biasanya membawa pengguna ke tingkat atas aplikasi terkait, mirip dengan shortcut aplikasi. Namun, tidak seperti shortcut aplikasi, widget dapat menautkan ke area tertentu dalam aplikasi yang terkait. Misalnya, mengetuk pemberitahuan email Baru yang diterima oleh widget mungkin meluncurkan aplikasi dengan pesan baru yang telah dipilih, sambil mengetuk Create new email mungkin membawa mereka langsung ke Aktivitas ComposeEmail aplikasi Anda.

Dengan menyematkan beberapa tautan dalam tata letak widget Anda, Anda dapat memberikan akses mudah satu ketukan ke semua Aktivitas terpenting dari aplikasi Anda.

Buat Basis Pengguna yang Loyal dan Terlibat

Sebagai keseluruhan ledakan Pokemon Go dan penurunan selanjutnya terbukti, mendapatkan satu ton orang untuk mendownload aplikasi Anda tidak secara otomatis menjamin basis pengguna loyal yang masih akan menggunakan aplikasi Anda hari, minggu, atau bahkan berbulan-bulan.

Pengguna seluler adalah kelompok yang cukup mudah berubah, dan dengan memori yang tersedia di smartphone atau tablet Android khas Anda setiap saat, mudah kehilangan jejak aplikasi yang telah Anda pasang pada perangkat Anda. Kemungkinannya adalah, jika Anda mengangkat smartphone Android atau tablet Anda sekarang dan menggesek app drawer, Anda akan menemukan setidaknya satu aplikasi yang benar-benar Anda lupakan.

Dengan membuat widget yang menampilkan semua informasi dan fitur yang paling berharga dari aplikasi Anda, Anda memastikan bahwa setiap kali pengguna melirik homescreen mereka, mereka hanya diingatkan tidak hanya bahwa aplikasi Anda ada, namun juga memiliki konten yang bagus.

Menambahkan Widget Aplikasi ke Proyek Anda

Bahkan widget yang paling dasar membutuhkan banyak kelas dan sumber daya, namun saat Anda membuat widget menggunakan alat bawaan Android Studio, semua file ini dibuat untuk Anda. Karena tidak ada gunanya membuat pengembangan Android lebih sulit dari yang seharusnya, kami akan menggunakan tool ini untuk mulai memulai membangun widget kami.

Widget aplikasi harus selalu dikaitkan dengan aplikasi yang mendasarinya, jadi buatlah proyek Android baru dengan pengaturan pilihan Anda.

Setelah Android Studio membangun proyek Anda, pilih File> New > Widget > AppWidget dari toolbar Android Studio. Ini meluncurkan menu Configure Component dimana Anda dapat menentukan beberapa pengaturan awal widget Anda.

Sebagian besar pilihan ini cukup jelas, namun ada beberapa hal yang patut ditelusuri secara lebih rinci.

Resizable (API 12+)

Jika widget resizable, maka pengguna bisa menambah atau mengurangi jumlah 'cells' yang ditempatinya di homescreen mereka, dengan lama menekan widget dan kemudian menyeret pegangan biru yang muncul di seputar garis besarnya.

Bila memungkinkan, Anda harus memberi widget kemampuan untuk mengubah ukuran secara horizontal dan vertikal, karena ini akan membantu widget Anda menyesuaikan diri dengan berbagai konfigurasi layar dan pengaturan homescreen. Jika pengguna memiliki homescreen yang berantakan dengan serius, mungkin widget Anda mungkin tidak muat di homescreen tersebut, kecuali widget Anda dapat disesuaikan.

Jika Anda ingin membuat widget yang tidak dapat resizeable, buka menu dropdown Resizable dan pilih Only horizontal, Only vertikal, atau Not resizable.

Lebar Minimum dan Tinggi

Lebar minimum dan tinggi menentukan jumlah cell yang biasanya akan menempati widget Anda saat ditempatkan di homescreen.

Untuk widget resizable, ini adalah yang terkecil pengguna dapat ukurkan widget Anda, sehingga Anda dapat menggunakan nilai-nilai ini untuk mencegah pengguna dari mengecilkan widget Anda ke titik di mana ia menjadi tidak dapat digunakan.

Jika widget Anda tidak resizable, maka nilai minimum dan tinggi minimum adalah lebar permanen dan tinggi widget Anda.

Untuk meningkatkan kesempatan memasang widget dengan nyaman di berbagai homescreen, disarankan agar Anda tidak menggunakan apapun yang lebih besar dari 4 kali 4 untuk nilai lebar dan tinggi minimum.

Sementara lebar dan tinggi yang tepat dari 'cells' homescreen bervariasi antar perangkat, Anda bisa mendapatkan perkiraan kasar berapa banyak DPIs (dots per inch) widget Anda akan menempati dengan menggunakan rumus berikut:

70 × number of cells -30

Misalnya, jika widget Anda adalah 2 x 3 cell:

70 x 2 - 30 = 110
70 x 3 - 30 = 180

Widget ini akan menempati sekitar 110 x 180 DPIs pada homescreen pengguna. Jika nilai ini tidak sesuai dengan dimensi cell perangkat tertentu, maka Android akan secara otomatis memutar widget Anda ke ukuran cell terdekat.

Tinjau semua opsi di menu ini dan buat perubahan yang diinginkan (saya tetap berpegang pada default) dan kemudian klik Finish.

Android Studio sekarang akan menghasilkan semua file dan sumber daya yang dibutuhkan untuk mengirimkan widget aplikasi dasar. Widget ini tidak terlalu menarik (ini pada dasarnya hanyalah blok biru dengan kata Contoh tertulis di atasnya) namun widget fungsional yang dapat Anda uji pada perangkat Anda.

Untuk menguji widget:

• Install proyek Anda di perangkat fisik Android atau AVD (Android Virtual Device).
• Luncurkan Android's Widget Picker dengan menekan sembarang ruang kosong di homescreen, lalu ketuk kata Widget yang muncul di bagian bawah layar.
• Gesek melalui Penjelajah Widget sampai Anda melihat widget Contoh biru.
• Tekan ke bawah widget ini untuk memasukkannya ke homescreen Anda.
• Masukkan mode resize dengan menekan widget sampai set pegangan biru muncul, lalu seret pegangan ini untuk menambah atau mengurangi jumlah cell yang dimiliki widget ini.

Menjelajahi File Widget Aplikasi

Widget ini mungkin tidak terlalu banyak, tapi mencakup semua kelas dan sumber daya yang akan kita kerjakan sepanjang sisa seri ini, jadi mari kita lihat file-file ini dan peran yang mereka mainkan dalam memberikan widget aplikasi.

NewAppWidget.Java

Penyedia widget adalah kelas kenyamanan yang berisi metode yang digunakan untuk interface pemrograman dengan widget melalui broadcast event. Di bawah tenda, widget pada dasarnya hanya BroadcastReceiver yang dapat merespons berbagai tindakan, seperti pengguna yang memasang contoh widget baru di homescreen mereka.

Yang paling menonjol, penyedia widget aplikasi adalah tempat Anda akan menentukan metode siklus hidup widget Anda, yang bisa dipanggil untuk setiap contoh widget atau hanya untuk contoh tertentu.

Meskipun kita cenderung menganggap widget sebagai entitas tunggal yang ditempatkan pengguna di homescreen mereka sekali, tidak ada yang mencegahnya menciptakan beberapa contoh widget yang sama. Mungkin widget Anda dapat disesuaikan, sampai pada titik di mana berbagai contoh dapat memiliki fungsi yang berbeda secara signifikan, atau mungkin pengguna hanya menyukai widget Anda sehingga mereka ingin memasangnya di seluruh homescreen mereka!

Mari kita lihat berbagai metode siklus hidup yang dapat Anda terapkan di kelas penyedia widget:

Event onReceive

Android memanggil method onReceive() pada BroadcastReceiver yang terdaftar setiap kali event yang ditentukan terjadi.

Anda biasanya tidak perlu menerapkan method ini secara manual, karena kelas AppWidgetProvider secara otomatis menyaring semua siaran widget dan operasi delegasi ke metode yang sesuai.

Event onEnabled

Method lifecycle onEnabled() disebut sebagai respons terhadap ACTION_APPWIDGET_ENABLED, yang disiarkan saat pengguna menambahkan contoh pertama widget Anda ke layar awal mereka. Jika pengguna membuat dua contoh widget Anda, maka onEnabled() dipanggil untuk instance pertama, namun tidak untuk yang kedua.

Metode siklus hidup ini adalah tempat Anda melakukan setup yang hanya perlu dilakukan sekali untuk semua contoh widget, seperti membuat database atau menyiapkan layanan.

Perhatikan bahwa jika pengguna menghapus semua contoh widget Anda dari perangkat mereka dan kemudian membuat instance baru, maka ini digolongkan sebagai instance pertama, dan akibatnya method onEnabled() akan dipanggil sekali lagi.

Event onAppWidgetOptionsChanged

Metode siklus hidup ini disebut sebagai tanggapan terhadap ACTION_APPWIDGET_OPTIONS_CHANGED, yang disiarkan saat contoh widget dibuat dan setiap kali widget diubah ukurannya. Anda dapat menggunakan metode ini untuk mengungkapkan atau menyembunyikan konten berdasarkan ukuran pengguna widget Anda, meskipun callback ini hanya didukung di Android 4.1 dan yang lebih tinggi.

Event onUpdate

Metode siklus hidup onUpdate() disebut setiap waktu:

• Interval update telah berlalu.
• Pengguna melakukan tindakan yang memicu metode onUpdate().
• Pengguna menempatkan contoh widget baru di homescreen mereka (kecuali widget Anda berisi Aktivitas konfigurasi, yang akan kita bahas di bagian dua).

Metode siklus hidup onUpdate() juga disebut sebagai respons terhadap ACTION_APPWIDGET_RESTORED, yang disiarkan setiap kali sebuah widget dipulihkan dari cadangan.

Untuk sebagian besar proyek, metode onUpdate() akan berisi sebagian besar kode penyedia widget, terutama karena ini juga tempat Anda mendaftarkan penangan event widget Anda.

Event onDeleted

Method onDeleted() dipanggil setiap kali sebuah instance dari widget Anda dihapus dari App Widget Host, yang memicu siaran ACTION_APPWIDGET_DELETED sistem.

Event onDisabled

Metode ini disebut sebagai respons terhadap siaran ACTION_APPWIDGET_DISABLED, yang dikirim saat contoh terakhir widget Anda dihapus dari Host Widget Aplikasi. Misalnya, jika pengguna membuat tiga contoh widget Anda, metode onDisabled() hanya akan dipanggil saat pengguna menghapus contoh ketiga dan terakhir dari homescreen mereka.

Metode lifecycle onDisabled() adalah di mana Anda harus membersihkan sumber daya yang Anda buat di onEnabled(), jadi jika Anda membuat database di onEnabled(), maka Anda akan menghapusnya di onDisabled().

Event onRestored

Metode onRestored() dipanggil untuk menanggapi ACTION_APPWIDGET_RESTORED, yang disiarkan setiap kali sebuah instance dari widget aplikasi dipulihkan dari cadangan. Jika Anda ingin mempertahankan data yang persisten, Anda harus mengganti metode ini dan memetakan AppWidgetIds sebelumnya ke nilai yang baru, misalnya:

public void onRestored(Context context, int[] oldWidgetIds,
           int[] newWidgetIds) {
   }
}

Jika Anda membuka file NewAppWidget.java yang dibuat oleh Android Studio secara otomatis, Anda akan melihat bahwa aplikasi tersebut sudah berisi implementasi beberapa metode siklus hidup widget ini:

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.widget.RemoteViews;

//All widgets extend the AppWidgetProvider class//

public class NewAppWidget extends AppWidgetProvider {

static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                              int appWidgetId) {

      CharSequence widgetText = context.getString(R.string.appwidget_text);

    //Load the layout resource file into a RemoteViews object//

      RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
      views.setTextViewText(R.id.appwidget_text, widgetText);

 //Tell the AppWidgetManager about the updated RemoteViews object//

      appWidgetManager.updateAppWidget(appWidgetId, views);
  }

//Define the onUpdate lifecycle method//

  @Override
  public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

//appWidgetIds is an array of IDs that identifies every instance of your widget, so this 
//particular onUpdate() method will update all instances of our application widget//

      for (int appWidgetId : appWidgetIds) {
          updateAppWidget(context, appWidgetManager, appWidgetId);
      }
  }

  @Override

//Define the onEnabled lifecycle method//

  public void onEnabled(Context context) {
      
      //To do//
  }

  @Override

//Define the onDisabled method//

  public void onDisabled(Context context) {
      
//To do//

  }
}

File Layout Widget

File res/layout/new_app_widget.xml mendefinisikan layout widget kita, yang saat ini hanya latar belakang biru dengan kata Example yang tertulis di dalamnya.

Perbedaan utama antara membuat tata letak untuk Aktivitas dan membuat tata letak untuk widget adalah tata letak widget harus didasarkan pada RemoteViews, karena ini memungkinkan Android menampilkan tata letak dalam proses di luar aplikasi Anda (yaitu di homescreen pengguna).

RemoteViews tidak mendukung setiap jenis layout atau View, jadi saat membangun layout widget, Anda terbatas pada tipe berikut:

• AnalogClock
• Button
• Chromometer
• FrameLayout
• GridLayout
• ImageButton
• ImageView
• LinearLayout
• ProgressBar
• RelativeLayout
• TextView
• ViewStub

Jika Anda membuat widget koleksi, Anda juga dapat menggunakan jenis berikut saat aplikasi Anda terpasang pada Android 3.0 dan yang lebih tinggi:

• AdapterViewFlipper
• GridView
• ListView
• StackView
• ViewFlipper

Subclass dan keturunan dari Views dan kelas di atas tidak didukung.

Klik dan Gesek

Untuk memastikan pengguna tidak sengaja berinteraksi dengan widget saat mereka menavigasi di sekitar layar awal mereka, widget hanya akan merespons event OnClick.

Pengecualiannya adalah saat pengguna menghapus widget dengan menyeretnya ke dalam tindakan Uninstall homescreen mereka, karena dalam situasi ini widget Anda akan merespons isyarat gesek vertikal. Namun, karena interaksi ini dikelola oleh sistem Android, Anda tidak perlu khawatir menerapkan dukungan tangkapan vertikal di aplikasi Anda.

File Info Widget

File res/xml/new_app_widget_info.xml (juga dikenal sebagai file AppWidgetProviderInfo) mendefinisikan sejumlah properti widget, termasuk banyak pengaturan yang Anda pilih di menu Configure Component Android Studio, seperti dimensi minimum widget Anda dan apakah itu dapat ditempatkan di layar lockscreen.

File konfigurasi juga menentukan seberapa sering widget Anda meminta informasi baru dari layanan update App Widget. Memutuskan frekuensi ini mengharuskan Anda untuk mencapai keseimbangan yang rumit: interval pembaruan yang lebih lama akan membantu menghemat baterai perangkat, namun menempatkan jarak Anda terlalu jauh dan widget Anda mungkin menampilkan informasi yang kedaluwarsa.

Anda juga harus sadar bahwa sistem akan membangunkan perangkat tidur agar bisa mendapatkan informasi baru, jadi walaupun memperbarui widget Anda setiap setengah jam sekali mungkin tidak terdengar berlebihan, ini bisa mengakibatkan widget Anda membangunkan perangkat setiap 30 menit sekali, yaitu akan mempengaruhi konsumsi baterai

Jika Anda membuka file new_app_widget_info.xml proyek Anda, Anda akan melihat bahwa itu sudah mendefinisikan sejumlah properti widget, termasuk interval update.

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="https://schemas.android.com/apk/res/android"

//The layout your widget should use when it’s placed on the lockscreen on supported devices//

  android:initialKeyguardLayout="@layout/new_app_widget"

//The layout your widget should use when it’s placed on the homescreen//

  android:initialLayout="@layout/new_app_widget"

//The minimum space your widget consumes, which is also its initial size//

  android:minHeight="40dp"
  android:minWidth="40dp"

//The drawable that represents your widget in the Widget Picker//

  android:previewImage="@drawable/example_appwidget_preview"

//Whether the widget can be resized horizontally, vertically, or along both axes, on Android 3.1 and higher//  

  android:resizeMode="horizontal|vertical"

//How frequently your widget should request new information from the app widget provider//

  android:updatePeriodMillis="86400000"

//Whether the widget can be placed on the homescreen, lockscreen (“keyguard”) or both.//
//On Android 5.0 and higher, home_screen is the only valid option//

  android:widgetCategory="home_screen"></appwidget-provider>

Jika Anda memberi pilihan pada pengguna untuk memasang widget di layar lockscreen, ingatlah bahwa isi widget akan terlihat oleh siapa saja yang melirik layar lockscreen. Jika tata letak 'default' Anda berisi informasi pribadi atau berpotensi sensitif, maka Anda harus menyediakan tata letak alternatif agar widget Anda dapat digunakan saat ditempatkan di layar lockscreen.

File res/values/dimens.xml

Widget tidak terlihat terbaik saat mereka saling menekan, atau saat mereka berada di tepi homescreen.

Setiap kali widget Anda ditampilkan di Android 4.0 atau lebih tinggi, sistem operasi Android secara otomatis memasukkan beberapa padding antara frame widget dan kotak pembatas.

Jika aplikasi Anda bergetar pada perangkat yang menjalankan apa saja lebih awal dari Android 4.0, widget Anda harus memasok padding ini sendiri.

Saat Anda membuat widget menggunakan menu File > New > Widget > AppWidget, Android Studio menghasilkan dua file dimens.xml yang menjamin widget Anda selalu memiliki padding yang benar, terlepas dari versi Android yang terpasang di dalamnya.

Anda akan menemukan kedua file ini di folder res proyek Anda:

res/values/dimens.xml

File ini mendefinisikan 8dpi padding yang perlu diberikan widget Anda kapan pun terpasang di level API 13 atau yang lebih baru.

<dimen name="widget_margin">8dp</dimen>

res/values-v14/dimens.xml

Karena Android 4.0 dan yang lebih tinggi secara otomatis menerapkan padding ke setiap widget, padding yang disediakan widget Anda akan menjadi tambahan padding default ini.

Untuk memastikan widget Anda sejajar dengan ikon aplikasi atau widget lain yang telah ditempatkan pengguna di layar awal mereka, file dimens.xml ini menentukan bahwa widget Anda seharusnya tidak memberikan margin tambahan untuk Android 4.0 dan yang lebih tinggi:

<dimen name="widget_margin">0dp</dimen>

Margin default ini membantu menyeimbangkan layar homescreen secara visual, jadi Anda harus menghindari modifikasi - Anda sama sekali tidak ingin widget Anda menjadi yang aneh.

Tata letak widget Anda sudah mengacu pada nilai dimensi ini (android:padding="@dimen/widget_margin") jadi hati-hati jangan sampai mengubah garis ini saat mengerjakan tata letak widget Anda.

Meskipun file dimens.xml ini adalah cara termudah untuk memastikan widget Anda selalu memiliki padding yang benar, jika teknik ini tidak sesuai untuk proyek khusus Anda, maka salah satu alternatifnya adalah membuat beberapa latar belakang sembilan patch dengan margin yang berbeda untuk tingkat API 14 dan lebih tinggi, dan level API 13 dan yang lebih rendah. Anda dapat membuat sembilan patch menggunakan tool 9-patch Android Studio's Draw, atau dengan program edting grafis khusus seperti Adobe Photoshop.

Proyek Manifest

Dalam file AndroidManifest.xml proyek Anda, Anda perlu mendaftarkan widget Anda sebagai BroadcastReceiver dan menentukan penyedia widget dan file AppWidgetProviderInfo yang widget ini harus digunakan.

Jika Anda membuka manifest, Anda akan melihat bahwa Android Studio telah menambahkan semua informasi ini untuk Anda.

//The widget’s AppWidgetProvider; in this instance that’s NewAppWidget.java//

<receiver android:name=".NewAppWidget">
      <intent-filter>

//An intent filter for the android.appwidget.action.APPWIDGET_UPDATE action//

          <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
      </intent-filter>

      <meta-data
          android:name="android.appwidget.provider"

//The widget’s AppWidgetProviderInfo object//

          android:resource="@xml/new_app_widget_info" />

  </receiver>
</application>

Widget Picker Resource

File res/drawable/example_appwidget_preview.png adalah sumber drawable yang mewakili widget Anda di Penjelajah Widget.

Untuk mendorong pengguna memilih widget Anda dari semua opsi yang tersedia, drawable yang diinginkan ini harus menampilkan widget Anda, dikonfigurasikan dengan benar pada layar utama dan menampilkan banyak konten yang bermanfaat.

Saat membuat widget menggunakan menu File > New > Widget > AppWidget, Android Studio akan menghasilkan pratinjau drawable yang dapat dicadangkan secara otomatis (example_appwidget_preview.png).

Pada bagian kedua, saya akan menunjukkan kepada Anda bagaimana dengan cepat dan mudah mengganti stok drawable ini, dengan menggunakan tool bawaan Android Studio untuk menghasilkan gambar pratinjau Anda sendiri.

Membangun Layout Anda

Sekarang kita memiliki gambaran bagaimana file-file ini berkumpul untuk membuat widget aplikasi, mari kita memperluas fondasi ini dan membuat widget yang tidak lebih dari sekedar menampilkan kata Example pada latar belakang biru!

Kami akan menambahkan fungsi berikut ke widget kami:

• TextView yang menampilkan label ID Widget Aplikasi.
• TextView yang mengambil dan menampilkan ID untuk contoh widget tertentu ini.
• TextView yang merespons event onClick dengan meluncurkan browser default pengguna dan memuat URL.

Sementara kita bisa menarik tiga TextViews dari palet Android Studio dan menjatuhkannya ke kanvas, jika widget Anda terlihat bagus maka pengguna akan cenderung menempatkannya di homescreen mereka, jadi mari kita membuat beberapa sumber yang akan memberi widget ekstra visual menarik.

Buat Latar Belakang Widget

Saya akan membuat persegi panjang dengan sudut membulat, latar belakang gradien, dan border, yang akan saya gunakan sebagai latar belakang widget saya:

• Klik kontrol folder proyek drawable Anda dan pilih New > Drawable resource file.
• Beri nama file ini widget_background dan klik OK.
• Masukkan kode berikut:

<?xml version="1.0" encoding="UTF-8"?>
http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <stroke
      android:width="1dp"
      android:color="#ffffff" />

  <gradient
      android:angle="225"
      android:endColor="#00FFFFFF"
      android:startColor="#DD000000" />

  <corners
      android:topRightRadius="10dp"
      android:topLeftRadius="10dp"
      android:bottomRightRadius="10dp"
      android:bottomLeftRadius="10dp" />
</shape>

2. Buat Latar Belakang TextView

Selanjutnya, buat bentuk untuk digunakan sebagai latar belakang TextViews kami:

• Klik kontrol folder proyek drawable Anda dan pilih New > Drawable resource file.
• Nama file ini tvbackground lalu klik OK.
• Masukkan kode berikut:

<?xml version="1.0" encoding="utf-8"?>
http://schemas.android.com/apk/res/android"
  android:shape="rectangle" >

  <stroke
      android:width="1dp"
      android:color="#000000" />

  <solid android:color="#FFFFFFFF" />

  <corners
      android:topRightRadius="15dp"
      android:topLeftRadius="15dp"
      android:bottomRightRadius="15dp"
      android:bottomLeftRadius="15dp" />
</shape>

3. Buat Beberapa Styles

Saya juga akan menggunakan styles berikut:

• widget_text. Efek bold yang akan saya terapkan pada teks widget.
• widget_views. Berbagai margin dan padding yang akan saya terapkan pada TextViews saya.

Buka file styles.xml proyek Anda dan tambahkan yang berikut ini:

<style name="widget_views" parent="@android:style/Widget">
      <item name="android:padding">8dp</item>
      <item name="android:layout_marginTop">12dp</item>
      <item name="android:layout_marginLeft">12dp</item>
      <item name="android:layout_marginRight">12dp</item>
      <item name="android:textStyle">bold</item>
  </style>

<style name="widget_text" parent="@android:style/Widget">
  <item name="android:textStyle">bold</item>
</style>

4. Bangun Layout Anda!

Sekarang semua sumber daya kita ada, kita bisa membuat layout widget kita. Buka file new_app_widget.xml dan tambahkan yang berikut ini:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:padding="@dimen/widget_margin"
  android:background="@drawable/widget_background"
  android:orientation="vertical" >

  <LinearLayout
      android:background="@drawable/tvbackground"
      style="@style/widget_views"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">

      <TextView
          android:id="@+id/id_label"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="@string/widget_id"
          style="@style/widget_text" />

      <TextView
          android:id="@+id/id_value"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="."
          style="@style/widget_text" />
  </LinearLayout>

  <TextView
      android:id="@+id/launch_url"
      style="@style/widget_views"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/URL"
      android:background="@drawable/tvbackground"/>
</LinearLayout>

Akhirnya, buka file strings.xml dan tentukan sumber string yang kami rujuk dalam tata letak kami:

<resources>
  <string name="app_name">Widget</string>
  <string name="widget_id">App Widget ID\u0020</string>
  <string name="URL">Tap to launch URL</string>
</resources>

Tab Desain Android Studio membantu Anda bekerja lebih efisien, dengan melihat pratinjau bagaimana tata letak Anda akan ditampilkan di berbagai perangkat. Beralih ke tab Desain jauh lebih mudah daripada menjalankan proyek Anda di perangkat Android setiap saat Anda membuat perubahan pada tata letak Anda.

Frustratingly, Android Studio tidak menyediakan skin widget khusus, jadi secara default layout widget Anda diberikan seperti Activity biasa, yang tidak memberikan wawasan terbaik tentang bagaimana widget Anda akan terlihat di homescreen pengguna.

Salah satu solusi potensial adalah membuat tata letak Anda menggunakan skin Android Wear (Square), yang sebanding dengan ukuran dan bentuk widget aplikasi Android:

• Pastikan tab Device Android Studio dipilih.
• Buka Device dropdown.
• Pilih 280 x 280, hdpi (Square) dari menu dropdown.

Buat Widget Fungsionalitas

Sekarang widget kita terlihat bagiannya, saatnya untuk memberikan beberapa fungsi:

• Retrieve and display data.  contoh widget diberikan sebuah ID saat ditambahkan ke Host Widget Aplikasi. ID ini tetap ada di seluruh siklus hidup widget dan akan benar-benar unik untuk contoh widget itu, bahkan jika pengguna menambahkan beberapa contoh widget yang sama ke homescreen mereka.
• Add an action. Kami akan membuat OnClickListener yang meluncurkan browser default pengguna dan memuat URL.

Buka file penyedia widget (NewAppWidget.java) dan hapus baris yang mengambil sumber string appwidget_text:

static void updateAppWidget(Context context, AppWidgetManager appWidgetManager,
                          int appWidgetId) {

//Delete the following line//

  CharSequence widgetText = context.getString(R.string.appwidget_text);
  RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
  views.setTextViewText(R.id.appwidget_text, widgetText);

  appWidgetManager.updateAppWidget(appWidgetId, views);

}

Di blok updateAppWidget, sekarang kami perlu memperbarui placeholder R.id.id_value dengan ID unik dari widget ini:

  RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);
      views.setTextViewText(R.id.id_value, String.valueOf(appWidgetId));

Kita juga perlu membuat objek Intent yang berisi URL yang harus dimuat setiap kali pengguna berinteraksi dengan TextView ini.

      Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://code.tutsplus.com/"));
      PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);

//Attach an OnClickListener to our “launch_url” button, using setOnClickPendingIntent//

      views.setOnClickPendingIntent(R.id.launch_url, pendingIntent);

Inilah file penyedia widget lengkap:

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.Context;
import android.widget.RemoteViews;
import android.app.PendingIntent;
import android.content.Intent;
import android.net.Uri;

public class NewAppWidget extends AppWidgetProvider {

  static void updateAppWidget(Context context,

                              AppWidgetManager appWidgetManager,

                              int appWidgetId) {

//Instantiate the RemoteViews object//

      RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.new_app_widget);

//Update your app’s text, using the setTextViewText method of the RemoteViews class//

      views.setTextViewText(R.id.id_value, String.valueOf(appWidgetId));

//Register the OnClickListener//

      Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse("https://code.tutsplus.com/"));
      PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);
      views.setOnClickPendingIntent(R.id.launch_url, pendingIntent);
      appWidgetManager.updateAppWidget(appWidgetId, views);

  }

  @Override
  public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {

      //Update all instances of this widget//

      for (int appWidgetId : appWidgetIds) {
          updateAppWidget(context, appWidgetManager, appWidgetId);
      }
  }
}

Menguji Widget

Sudah waktunya memasang widget ini untuk di uji!

• Pasang proyek yang telah diperbarui di perangkat Android Anda.
• Untuk memastikan Anda melihat versi terbaru widget ini, hapus contoh widget yang ada dari homescreen Anda.
• Tekan sembarang bagian kosong dari homescreen, lalu pilih widget Anda dari Widget Picker.
• Reposisi dan ubah ukuran widget sesuai keinginan.

• Periksa apakah widget merespons peristiwa masukan pengguna, dengan memilih Ketuk untuk meluncurkan URL TextView. Widget aplikasi harus merespons dengan meluncurkan browser default Anda dan memuat URL.

Jika Anda telah mengikuti tutorial ini, maka pada titik ini Anda memiliki widget yang berfungsi penuh yang menunjukkan banyak konsep inti widget aplikasi Android. Anda juga bisa mendownload proyek selesai dari repo GitHub kami.

Kesimpulan

Di postingan ini kami memeriksa semua file yang dibutuhkan untuk mengirimkan widget aplikasi Android, sebelum membangun widget yang mengambil dan menampilkan beberapa data unik dan merespons peristiwa masukan pengguna.

Saat ini, ada satu fungsi utama yang masih hilang dari widget kami: tidak pernah menampilkan informasi baru! Di postingan berikutnya, widget ini kita beri kemampuan untuk mengambil dan menampilkan data baru secara otomatis, berdasarkan jadwal yang telah ditetapkan, dan langsung merespon event input pengguna.

Sementara itu, lihat beberapa postingan keren kami lainnya tentang pengembangan aplikasi Android di sini, di Envato Tuts+!

• Android SDK
  Apa itu Android Instant Apps?
  Jessica Thornsby
• Android SDK
  Membuat Aplikasi Android yang Dapat Diakses
  Jessica Thornsby
• Android SDK
  Buat Desain Material Tabbed Interface di Android App
  Chike Mgbemena
• Android SDK
  Kiat Kilat: Buat Ubin Setelan Cepat Kustom untuk Android
  Ashraff Hathibelagal