動画でわかるAndroidウィジェットアプリの作り方

今回、ウィジェットアプリ「500円玉貯金」を作る時に困ったポイントが、ウィジェットからActivityを起動させる方法です。
わかってしまえば簡単なんですが、色んな書籍を立ち読みして探してみるも見つからず、探すのに非常に苦労したのでアプリの作り方を踏まえながらご紹介。

今回は「Evernote」や「twicca」のような、アプリにウィジェットも同梱されてるようなアプリを作ってみます。
ソースを載せると記事が長くなりすぎるので、今回はQuickTimeの画面収録で動画にして、ポイントになるところについては文章を書き加えています。(1280*720の動画なので、HD+フルスクリーンでご覧になることをおすすめします。)
また、今回使用したソースはこちらからダウンロードできますので、ご自由にお使いください。

Activityを作る

普段Androidアプリを作っている方にとっては、いつもやってることなので特に解説はいらないでしょう。
今回のアプリはAndroid OS1.6を対象にしても動きますが、今更メガネケースまで対象にする必要もないんじゃないかと思っています。

Widgetを作る

動画の1分40秒あたりまではウィジェット用のレイアウトを作成しているだけなので、説明はいらないと思います。
その次からappwidget-provider設定ファイルを作成しています。

ここでの設定項目は以下のようになります。

  • minWidth:ウィジェットの幅
  • minHeight:ウィジェットの高さ
  • updatePeriodMillis:更新間隔
  • initialLayout:レイアウト
  • configure:ウィジェットの設定画面

幅・高さについては、(74dip × 使用する列数or行数) – 2dipで求めます。

今回は3列×1行を使いたいので、
minWidthは(74dip x 3) – 2dipで220dip。
minHeightは(74dip x 1) – 2dipで72dip。
と指定しました。
(動画では72dip x 3というトンチンカンな計算をしてしまい216dipと入力してました。)

今回updatePeriodMillisには0を設定していますが、例えば一分ごとに更新したい場合(時計みたいなウィジェット)は60000(ミリ秒)を指定するといいです。

次に動画の2分25秒あたりからAppWidgetの処理を行うクラスを作成しています。
ウィジェットの場合はActivityではなく、AppWidgetProviderクラスを継承している点に気をつけてください。

まずはAppWidgetのレイアウトを取得するためにRemoteViewsクラスを利用します。

AppWidget.java 18行目

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

次にIntentを作成し、第2引数に起動したいActivityを指定します。

AppWidget.java 20行目

Intent intentSub = new Intent(context, SubActivity.class);

ボタンを押したときにこのインテントを投げてやればいいと思われるかもしれませんが、AppWidget上でのクリックイベントはPendingIntentへ組み込んでやる必要があります。

AppWidget.java 21行目

PendingIntent pendingSub = PendingIntent.getActivity(context, 0, intentSub, 0);

よく紹介されているウィジェットアプリの作り方では、getActivityを使用した例がなかなか見つからず苦戦しました。わかってしまえば何のことはないです。

あとは、RemoteViewsで指定したレイアウトの何が押され(今回はボタン)、どのPendingIntentを投げるかを指定し、ウィジェットを更新してやるだけ。

AppWidget.java 22行目・33行目

views.setOnClickPendingIntent(R.id.sButton, pendingSub);
(省略)
appWidgetManager.updateAppWidget(appWidgetIds, views);

AndroidManifestに登録してあげることも忘れずに。

AndroidManifest.xml 18行目

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

おまけ

この動画では「Facebook」や「500円玉貯金」で使っているような、本来ウィジェットアプリでは使えないEditTextやAlertDialogなどをウィジェットだけで行ってるように見せる(実際は背景を透明にしたAcitivityを起動しているだけ)方法を紹介しています。

これには普通にActivityを作ってあげて、そのActivityに背景が透明のテーマ(@android:style/Theme.Translucent.NoTitleBar)を適用するだけで実現できます。

AndroidManifest.xml 24行目

<activity android:name="AlertActivity" android:theme="@android:style/Theme.Translucent.NoTitleBar"></activity>

動画ではコメントアウトを入れ忘れていましたが、

AlertActivity.java 17行目

getWindow().setFlags(WindowManager.LayoutParams.FLAG_BLUR_BEHIND, WindowManager.LayoutParams.FLAG_BLUR_BEHIND);

と書いてあげると背景がぼけた感じになります。

また、AlertDialogのPositiveButton・NegativeButtonの第2引数はnullでもいいように感じますが、それではAlertDialogが閉じるだけで、Activityが終了されず画面がぼけっぱなしになるなので、finish()にしています。

この記事では紹介してませんが、getServiceを使ってウィジェットに変化をもたらすようなアプリの制作例は探せばいくらでもありますので、そちらをご参考ください。

今回使用したソースはこちら

※今回は手間を省くためにString.xmlを介さず、直接文字を打ち込んだりしていますが、多国語対応などのことも考えてString.xmlで文字列を管理するようにしましょう。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

[...] 動画でわかるAndroidウィジェットアプリの作り方 [...]

プログラミング参考サイト | android manifest configChanges2012年9月9日 11:34 AM

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ