terça-feira, 6 de outubro de 2009

Android Widgets

Olá povo,

Todo mundo vem reparando a grande quantidade de inovação trazida pelo Android para as aplicações mobile. Entre essas inovações, temos a possibilidade de criar pequenas aplicações que podem ser adicionadas na tela principal do aparelho. A essas aplicações chamamos de widgets.

Procurando um pouco na internet você acha esse exemplo no site do próprio Android.

Porém, ele não é muito trivial nem didático para quem tá querendo aprender os conceitos sobre o assunto. Sendo assim, vou apresentar um exemplo bem simples de widget baseado no tutorial em inglês de Norbert Möhring)

Vamos lá! Crie um novo projeto Android no Eclipse. Dê um nome ao seu projeto; na opção "Build target" coloque a versão 1.5 (os widgets surgiram a partir dessa versão); o pacote que coloquei foi ngvl.android.widget; desmarque a caixa para criar uma atividade, pois não precisamos.

Altere o arquivo res/layout/main.xml, para que fique da seguinte forma:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="vertical"
android:background="@drawable/widget_bg_normal"
android:layout_gravity="center"
android:layout_height="wrap_content">

<TextView android:id="@+id/widget_textview"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_gravity="center_horizontal|center"
android:layout_marginTop="5dip"
android:padding="10dip"
android:textColor="@android:color/black"/>
</LinearLayout>


Notem que eu utilizei uma imagem como background do LinearLayout. Clique aqui para baixá-la, e depois coloque na pasta res/drawable do seu projeto. Essa imagem está no formato Nine Patch. O Android dá suporte a esse padrão de imagem que estabelece como uma imagem deve ser redimensionada. Mais informações sobre esse formato clique aqui.

O nosso widget não será uma Activity, mas sim um BroadcastReceiver que será notificado quando nosso widget receber atualizações (que serão configuradas mais na frente).


package ngvl.android.widget;

import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.Locale;

import android.appwidget.AppWidgetManager;
import android.appwidget.AppWidgetProvider;
import android.content.ComponentName;
import android.content.Context;
import android.os.Handler;
import android.widget.RemoteViews;

public class MeuWidget extends AppWidgetProvider {

private Handler handler;
private MyTime time;

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

time = new MyTime(ctx, appWidgetManager)
handler = new Handler();
handler.post(time);
}

private class MyTime implements Runnable {
RemoteViews remoteViews;
AppWidgetManager appWidgetManager;
ComponentName thisWidget;
DateFormat dateFormat;

public MyTime(Context context,
AppWidgetManager appWidgetManager) {

this.appWidgetManager = appWidgetManager;
this.remoteViews = new RemoteViews(
context.getPackageName(),
R.layout.main);

this.thisWidget = new ComponentName(
context, MeuWidget.class);

this.dateFormat = SimpleDateFormat.
getTimeInstance(
SimpleDateFormat.MEDIUM,
Locale.getDefault());
}

@Override
public void run() {
remoteViews.setTextViewText(
R.id.widget_textview,
"Time "+ dateFormat.format(
new Date()));
appWidgetManager.updateAppWidget(
thisWidget, remoteViews);
handler.postDelayed(this, 1000);
}
}
}


Como podemos ver, nossa classe herda de android.appwidget.AppWidgetProvider que por sua vez, herda de android.content.BroadcastReceiver e devemos implementar o método onUpdate. Esse método é chamado toda vez o o widget precisar ser atualizado. Nesse método estou utilizando um Handler para atualizar o o conteúdo com a data/hora atual.
A classe MyTime recebe uma referência para o contexto da aplicação e um objeto do tipo AppWidgetManager. É a partir dele que obtemos as refências para as views utilizadas no layout. No método run dessa classe atualizamos o TextView com a data/hora atuais.

Agora vamos criar uma pasta chamada xml dentro da pasta res e criar o arquivo meuwidget_provider.xml com o seguinte conteúdo:


<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider
xmlns:android="http://schemas.android.com/apk/res/android"
android:minWidth="146dip"
android:minHeight="72dip"
android:initialLayout="@layout/main"
android:updatePeriodMillis="1000"/>


Nesse arquivo, definimos o tamanho mínimo do nosso componente, bem como o layout e o intervalo de atualizações do mesmo.

Agora, vamos atualizar o nosso AndroidManifest.xml:


<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
package="ngvl.android.widget"
android:versionCode="1"
android:versionName="1.0">

<application
android:icon="@drawable/icon"
android:label="@string/app_name">

<receiver
android:label="@string/app_name"
android:name=".MeuWidget">

<intent-filter>
<action
android:name="android.appwidget.action.APPWIDGET_UPDATE"/>
</intent-filter>
<meta-data
android:name="android.appwidget.provider"
android:resource="@xml/meuwidget_provider"
/>
</receiver>
</application>
<uses-sdk android:minSdkVersion="3" />
</manifest>


Pronto! Agora mande rodar a aplicação. Depois que a aplicaçao for instalada (olhe no Console view ou no Logcat), vá até a Home Screen (a tela onde fica o relógio) e pressione Menu / Add / Widget e voilà! Nosso widget apareceu na lista. Selecione-o na lista e ele ficará na sua tela principal. Para removê-lo, basta pressioná-lo e arrasta-lo para lixeira (na parte inferior).



Espero que tenha sido útil. Qualquer dúvida, entrem em contato.

4br4ç05,
nglauber

Nenhum comentário: