Wailing of a Software Engineer: Manga Mobile Coding Series : Membuat Widget

Maap kalau seri nya mungkin agak ngacak. Tapi kebetulan saya lagi penasaran mau membuat Widget untuk Manga Mobile atas saran dari teman saya (tag : dieend).

Jadi anggap saja kita sudah mempunya Android Project di Eclipse dan sudah men-develop-nya sedemikian rupa sehingga sudah bisa digunakan (detail pembuatan project di Eclipse dan development-nya akan saya tulis dikemudian hari). Lalu kita ingin membuat sebuah widget, misalnya untuk kasus aplikasi Manga Mobile saya, saya ingin memberikan update manga terbaru. Pada contoh ini, saya hanya akan membuat sebuah tombol di widget saya, yang bila dipencet, akan langsung membuka aplikasi Manga Mobile.

Untuk membuat widget, kita memerluka 3 hal :

AppWidgetProviderInfo : yaitu widget itu sendiri. Disini kita akan mendefinisikan layout widget, frekuensi melakukan update dan provider yang akan mengupdate widget.
AppWidgetProvider : yaitu class yang meng-update isi widget.
Layout dari widget itu sendiri.

Pertama, mari kita definisikan AppWidgetProviderInfo dalam bentuk xml. Saya menyimpan file ini di /res/xml/widget.xml

<?xml version="1.0" encoding="utf-8"?>

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="294dp"
    android:minHeight="72dp"
    android:updatePeriodMillis="1000"
    android:initialLayout="@layout/widget_layout"
    >
</appwidget-provider>

Penjelasan singkat : kita membuat widget menggunakan XML. Widget ini ukurannya paling kecil 294 x 72 dp (Density-Independent-Pixel). Widget ini akan mengupdate dirinya sendiri (dengan memanggil suatu method di provider yang akan kita definisikan nanti) setiap 1000 milliseconds. Tampilan widget ini juga akan dikonfigurasi oleh @layout/widget_layout (yang juga akan kita definisikan setelah ini).

Lalu kita membutuhkan WidgetProvider, yaitu class yang akan meng-update isi dari widget ini. Saya menamai kode dibawah ini = MangaMobileWidget.java

package gogo.mobile.mm;

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

public class MangaMobileWidget extends AppWidgetProvider {
    @Override
    public void onUpdate(Context context, AppWidgetManager appWidgetManager, int[] appWidgetIds) {
        final int widgetSize = appWidgetIds.length;
        
        for (int i = 0; i < widgetSize; ++i){
            Intent intent = new Intent(context, SplashScreenActivity.class);
            PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, 0);

            // Get remote layout
            RemoteViews views = new RemoteViews(context.getPackageName(), R.layout.widget_layout);
            views.setOnClickPendingIntent(R.id.widget_button, pendingIntent);

            // update widget
            appWidgetManager.updateAppWidget(appWidgetIds[i], views);
        }
    }
}

Method pada kode diatas akan dipanggil setiap beberapa millisecond (pada kasus ini 1000 milliseconds). Disini saya membuat Intent yang akan memanggil SplashScreenActivity yang sudah saya buat di aplikasi saya. Intent ini dikirim apabila suatu button dipencet. Button yang dimaksud sudah saya definisikan di @layout/widget_layout.

Lalu sekarang saatnya kita mendefinisikan layout dari widget itu sendiri. Layout ini saya simpan di /res/layout/widget_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="200dp"
    android:layout_height="160dp"
    android:padding="10dip"
    android:gravity="center"
    android:id="@+id/widget_layout" 
    android:background="@drawable/bg_button">
     <Button 
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/widget_button"
        android:text="Widget Button Test"
     />
 </LinearLayout>

Saya tidak akan membahas dengan detail tentang pembuatan layout disini. Disini intinya saya membuat sebuah LinearLayout yang memiliki sebuah button didalamnya. Button ini memiliki ID (R.id.widget_button), sehingga bisa diakses oleh WidgetProvider yang telah saya buat.

Lalu, belum selesai sampai sini, kita harus mendefinisikan widget kita ke AndroidManifest.xml. Kode berikut saya letakkan antara tag dan

<receiver android:name=".MangaMobileWidget" >
    <intent-filter>
    <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data android:name="android.appwidget.provider" android:resource="@xml/widget" />
</receiver>

Disini kita mendefinisikan widget, dan mengatakan bahwa widget tersebut dikontrol oleh MangaMobileWidget sebagai WidgetProvider. Resource disini adalah AppWidgetInfo yang telah kita definisikan diatas.

Lalu jalankan emulator :