あんざいゆき

2011年12月5日

バッテリー表示ウィジェットを作ろう！ by あんざいゆき is licensed

under a Creative Commons 表示 - 非営利 - 改変禁止 3.0 非移植 License.

docs.google.comにある作品に基づいている。

この資料のURL :

1. テキスト表示するだけのウィジェットを作る

1-1.  新しくプロジェクトを作成する

1-2. AppWidgetProvider を継承したクラスを作る

1-3.  ウィジェットの定義ファイルを作成する

1-4.  MyBatteryWidgetProvider とウィジェットの定義ファイルを AndroidManifest に登録する

おまけ. レイアウトを変えてみよう

1. 背景を変えてみる

2. 文字の色と大きさを変えてみる

2. バッテリーの情報を取得する

2-1.  バッテリーの情報を受取るための BroadcastReceiver を作成する

2-2. 2-1で作ったバッテリー情報を受取る BatteryHandler を登録するためのサービスを作成する

2-3. 2-2で作ったサービスをAndroidManifest.xml に登録する

2-4. 2-2で作ったサービスを開始する

3. バッテリーの情報をウィジェットに表示する

3-1.  バッテリーの情報を表示するための TextView に ID をつける

3-2.  ウィジェットのバッテリーの情報を更新するためのメソッドを作成する

3-3.  RemoteViews を使ってウィジェットの TextView を更新する

1-1.  新しくプロジェクトを作成する

[File] - [New] - [Android Project] を選択

ProjectName に MyBatteryWidget と入力して Next をクリック

Android 2.1 を選択して Next をクリック

ApplicationName に MyBatteryWidget、Package Name に com.example.android.mybatterywidget と入力し、CreateActivity のチェックボックスを外して Finish をクリック

1-2. AppWidgetProvider を継承したクラスを作る

パッケージを選択して右クリック - [New] - [Class] を選択

Name に MyBatteryWidgetProvider と入力し、Superclass の Browse... をクリック

AppWidgetProvider を選択して OK をクリック

先ほどのダイアログで Finish をクリック

1-3.  ウィジェットの定義ファイルを作成する

res フォルダを選択して右クリック -  [New] - [Folder] を選択

Folder name に xml と入力して Finish をクリック

xml フォルダーを選択して右クリック - [New] - [Android XML File] を選択

Resource Type に AppWidget Provider を選択し、File に widget と入力して Finish をクリック

widget.xml をダブルクリックして開き、Min width と Min height に 146dip と入力し、initial layout の Browser... をクリック

[Layout] - [main] を選択して OK をクリック

Ctrl キー (Mac だと Command キー) + s キーでファイルを保存する

1-4.  MyBatteryWidgetProvider とウィジェットの定義ファイルを AndroidManifest に登録する

AndroidManifest.xml ファイルをダブルクリックして開く

下の Application タグをクリックし、Application Nodes の Add... ボタンをクリックする。

Receiver を選択して OK を押す。

Attributes for Provider の Name の Receiver... をクリックする

MyBatteryWidgetProvider を選択して OK をクリック

下のタブの AndroidManifest.xml を選択

<receiver> タグの間に <intent-filter> を <meta-data> を追加

AndroidManifest.xml

---

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

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.example.android.mybatterywidget"

    android:versionCode="1"

    android:versionName="1.0" >

    <uses-sdk android:minSdkVersion="7" />

    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name" >

        <receiver android:name="MyBatteryWidgetProvider" >

            <intent-filter >

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

            </intent-filter>

            <meta-data

                android:name="android.appwidget.provider"

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

        </receiver>

    </application>

</manifest>

---

実行してみよう！

ホーム画面でロングタップ - Widget - MyBatteryWidget を選択

Hello World! とでればOK!

おまけ. レイアウトを変えてみよう

res/layout/main.xml をダブルクリックして開く。

下の main.xml タブをクリックする

1. 背景を変えてみる

LinearLayout に android:background=”#ff99ffff” を入れる。

main.xml

---

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:background="#ff99ffff" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello" />

</LinearLayout>

---

＊ やってみよう : #ff99ffff の部分をいろんなカラーコードに変えてみよう。

（#aarrggbb の形式 : aa = alpha, rr = red, gg = green, bb = blue）

2. 文字の色と大きさを変えてみる

main.xml

---

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:background="#ff99ffff" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello"

        android:textColor="#ff336666"

        android:textSize="26dp" />

</LinearLayout>

---

文字の色                android:textColor=”#aarrggbb”

文字の大きさ                android:textSize=”**dp”

2-1.  バッテリーの情報を受取るための BroadcastReceiver を作成する

MyBatteryWidgetProvider.java をダブルクリックして開く

MyBatteryWidgetProvider.java

---

public class MyBatteryWidgetProvider extends AppWidgetProvider {

    static final BatteryHandler mReceiver = new BatteryHandler();

    static final class BatteryHandler extends BroadcastReceiver {

        @Override

        public void onReceive(Context context, Intent intent) {

            int level = intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);

            int scale = intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);

            int batteryLevel = level * 100 / scale;

            Log.d("MyBatteryWidgetProvider", "batteryLevel = " + batteryLevel);

        }

    }

}

---

2-2. 2-1で作ったバッテリー情報を受取る BatteryHandler を登録するためのサービスを作成する

MyBatteryWidgetProvider.java

---

public class MyBatteryWidgetProvider extends AppWidgetProvider {

    static final BatteryHandler mReceiver = new BatteryHandler();

    static final class BatteryHandler extends BroadcastReceiver {

        @Override

        public void onReceive(Context context, Intent intent) {

            int level = intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);

            int scale = intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);

            int batteryLevel = level * 100 / scale;

            Log.d("MyBatteryWidgetProvider", "batteryLevel = " + batteryLevel);

        }

    }

    static boolean mAttached = false;

    public static class MyBatteryWidgetService extends Service {

        @Override

        public void onCreate() {

            super.onCreate();

            if (!mAttached) {

                mAttached = true;

                IntentFilter filter = new IntentFilter();

                filter.addAction(Intent.ACTION_BATTERY_CHANGED);

                getApplicationContext().registerReceiver(mReceiver, filter);

            }

        }

        @Override

        public int onStartCommand(Intent intent, int flags, int startId) {

            return START_STICKY;

        }

        @Override

        public void onDestroy() {

            if (mAttached) {

                mAttached = false;

                getApplicationContext().unregisterReceiver(mReceiver);

            }

            super.onDestroy();

        }

        @Override

        public IBinder onBind(Intent intent) {

            return null;

        }

    }

}

---

2-3. 2-2で作ったサービスをAndroidManifest.xml に登録する

AndroidManifest.xml をダブルクリックして開き、下の方の Application タグを選択する。

Application Nodes の Add... ボタンをクリックし、Serivice を選択して OK をクリックする。

Attribute for Service の Name の Browse... ボタンをクリックし、MyBatteryWidgetService を選択して OK を押す。

Attribute for Service の Process の Browse... ボタンを押し、ダイアログ内の New String... ボタンを押す。

String と New R.string. に remote と入力して OK をクリック。

remote を選択して OK をクリック。

Ctrl キー (Mac だと Command キー) + s キー を押して AndroidManifest.xml ファイルの変更を保存する。

2-4. 2-2で作ったサービスを開始する

MyBatteryWidgetProvider.java

---

public class MyBatteryWidgetProvider extends AppWidgetProvider {

    static final BatteryHandler mReceiver = new BatteryHandler();

    static final class BatteryHandler extends BroadcastReceiver {

        @Override

        public void onReceive(Context context, Intent intent) {

            int level = intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);

            int scale = intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);

            int batteryLevel = level * 100 / scale;

            Log.d("MyBatteryWidgetProvider", "batteryLevel = " + batteryLevel);

        }

    }

    static boolean mAttached = false;

    public static class MyBatteryWidgetService extends Service {

        @Override

        public void onCreate() {

            super.onCreate();

            if (!mAttached) {

                mAttached = true;

                IntentFilter filter = new IntentFilter();

                filter.addAction(Intent.ACTION_BATTERY_CHANGED);

                getApplicationContext().registerReceiver(mReceiver, filter);

            }

        }

        @Override

        public int onStartCommand(Intent intent, int flags, int startId) {

            return START_STICKY;

        }

        @Override

        public void onDestroy() {

            if (mAttached) {

                mAttached = false;

                getApplicationContext().unregisterReceiver(mReceiver);

            }

            super.onDestroy();

        }

        @Override

        public IBinder onBind(Intent intent) {

            return null;

        }

    }

    @Override

    public void onUpdate(Context context, AppWidgetManager appWidgetManager,

            int[] appWidgetIds) {

        Intent intentService = new Intent(context, MyBatteryWidgetService.class);

        context.startService(intentService);

    }

}

---

実行してみよう！

Logcat 画面を開いて、batteryLevel がでていれば OK!

＊ Logcat の開き方

右上の Open Perspective ボタンをクリック

DDMS を選択

Logcat ウィンドウを選択

3-1.  バッテリーの情報を表示するための TextView に ID をつける

res/layout/main.xml をダブルクリックして開き、TextView に android:id=”@+id/battery_info” を追加する

---

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical"

    android:background="#ff99ffff" >

    <TextView

        android:id="@+id/battery_info"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/hello"

        android:textColor="#ff336666"

        android:textSize="26dip" />

</LinearLayout>

---

3-2.  ウィジェットのバッテリーの情報を更新するためのメソッドを作成する

MyBatteryWidgetProvider.java をダブルクリックして開く

MyBatteryWidgetProvider.java

---

public class MyBatteryWidgetProvider extends AppWidgetProvider {

    static final BatteryHandler mReceiver = new BatteryHandler();

    static final class BatteryHandler extends BroadcastReceiver {

        @Override

        public void onReceive(Context context, Intent intent) {

            int level = intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1);

            int scale = intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);

            int batteryLevel = level * 100 / scale;

            Log.d("MyBatteryWidgetProvider", "batteryLevel = " + batteryLevel);

            updateAppWidget(context, batteryLevel);

        }

    }

    static boolean mAttached = false;

    public static class MyBatteryWidgetService extends Service {

        @Override

        public void onCreate() {

            super.onCreate();

            if (!mAttached) {

                mAttached = true;

                IntentFilter filter = new IntentFilter();

                filter.addAction(Intent.ACTION_BATTERY_CHANGED);

                getApplicationContext().registerReceiver(mReceiver, filter);

            }

        }

        @Override

        public int onStartCommand(Intent intent, int flags, int startId) {

            return START_STICKY;

        }

        @Override

        public void onDestroy() {

            if (mAttached) {

                mAttached = false;

                getApplicationContext().unregisterReceiver(mReceiver);

            }

            super.onDestroy();

        }

        @Override

        public IBinder onBind(Intent intent) {

            return null;

        }

    }

    @Override

    public void onUpdate(Context context, AppWidgetManager appWidgetManager,

            int[] appWidgetIds) {

        Intent intentService = new Intent(context, MyBatteryWidgetService.class);

        context.startService(intentService);

        updateAppWidget(context, -1);

    }

    private static void updateAppWidget(Context context, int batteryLevel) {

    }

}

---

3-3.  RemoteViews を使ってウィジェットの TextView を更新する

MyBatteryWidgetProvider.java

---

public class MyBatteryWidgetProvider extends AppWidgetProvider {

   ….

    @Override

    public void onUpdate(Context context, AppWidgetManager appWidgetManager,

            int[] appWidgetIds) {

        Intent intentService = new Intent(context, MyBatteryWidgetService.class);

        context.startService(intentService);

        updateAppWidget(context, -1);

    }

    private static final ComponentName WIDGET_COMPONENT_NAME = new ComponentName(

            "com.example.android.mybatterywidget",

            "com.example.android.mybatterywidget.MyBatteryWidgetProvider");

    private static void updateAppWidget(Context context, int batteryLevel) {

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

        views.setTextViewText(R.id.battery_info, "batteryLevel =" + batteryLevel);

        AppWidgetManager manager = AppWidgetManager.getInstance(context);

        manager.updateAppWidget(WIDGET_COMPONENT_NAME, views);

    }

}

---

実行してみよう！

おまけ. レイアウトを変更したり、画像を入れたり、表示する文字を変えてみよう！