sexta-feira, 11 de julho de 2014

Android Wear - Apps

Olá povo,

Nesse terceiro post da série sobre Android Wear, vou mostrar como criar aplicativos específicos para smartwatches. Se você perdeu os dois primeiros posts, leia aqui e aqui.
Crie um novo projeto no Android Studio e após informar o nome e o pacote, clique em Next. Será exibida a tela a seguir, onde você deve selecionar o checkbox "Wear". Depois, clique em Next.
Na próxima tela do assistente, temos a opção de criar uma nova Activity, marque a opção Blank Wear Activity e clique em Next.
Dê um nome à sua Activity e o arquivo de layout que apontará para outros dois arquivos de layout: um para relógios redondos (como o Moto 360) e outro para relógios quadrados (como o Samsung Gear Live).
Clique em Finish e o nosso projeto Android Wear estará criado. Percebam que na pasta res/layout foram criados três arquivos: activity_my.xml, rect_activity_main.xml, round_activity_my.xml. O primeiro é listado abaixo:
<android.support.wearable.view.WatchViewStub
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/watch_view_stub"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:rectLayout="@layout/rect_activity_my"
    app:roundLayout="@layout/round_activity_my"
    tools:context=".MyActivity"
    tools:deviceIds="wear"/>
Notem que o conteúdo desse arquivo é apenas uma WatchViewStub que aponta para o @layout/rect_activity_my quando o werable for quadrado e @layout/round_activity_my para telas redondas.
Nosso exemplo será bem simples, clicaremos em um botão e ativaremos o reconhecimento de voz do wear. Poderemos falar (e no caso do emulador, digitar) e o texto que for reconhecido será exibido em um TextView. Para tal, abra o arquivo res/layout/rect_activity_my.xml e deixe-o como abaixo.
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MyActivity"
    tools:deviceIds="wear_square"
    android:gravity="center">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_square" />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button"
        android:src="@android:drawable/ic_btn_speak_now"/>
</LinearLayout>
Não temos nada de mais nesse arquivo... Então vamos ver como ficará a Activity.
public class MyActivity extends Activity 
    implements
        View.OnClickListener,
        WatchViewStub.OnLayoutInflatedListener {

    private TextView mTextView;

    @Override
    protected void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        WatchViewStub stub = (WatchViewStub) 
                findViewById(R.id.watch_view_stub);
        stub.setOnLayoutInflatedListener(this);
    }

    @Override
    public void onLayoutInflated(WatchViewStub stub) {
        mTextView = (TextView) 
                stub.findViewById(R.id.text);
        stub.findViewById(R.id.button)
                .setOnClickListener(MyActivity.this);
    }

    @Override
    public void onClick(View view) {
        Intent intent = new Intent(
            RecognizerIntent.ACTION_RECOGNIZE_SPEECH);
        
        intent.putExtra(
            RecognizerIntent.EXTRA_LANGUAGE_MODEL,
            RecognizerIntent.LANGUAGE_MODEL_FREE_FORM);
        
        startActivityForResult(
            intent, 1 /* Request code */);
    }

    @Override
    protected void onActivityResult(int requestCode,
            int resultCode, Intent data) {
        
        super.onActivityResult(
            requestCode, resultCode, data);

        if (requestCode == 1 
            && resultCode == RESULT_OK) {

            List<String> results = 
                data.getStringArrayListExtra(
                    RecognizerIntent.EXTRA_RESULTS);
            String spokenText = results.get(0);
            mTextView.setText(spokenText);
        }
    }
}
No onCreate pegamos a referência do WatchViewStub e setamos o listener para sermos notificados quando o arquivo de layout for carregado com o método setOnInflaterListener. Para isso, nossa Activity implementa a interface WatchViewStub.OnLayoutInflatedListener e consequentemente seu método onLayoutInflated. Nele, inicializamos o TextView e setamos o evento de clique do botão.
Ao clicarmos no botão, iniciamos a Activity de reconhecimento de fala e no onActivityResult, pegamos a lista dos resultados do que foi dito, pegamos o primeiro item da lista e exibimos no TextView. Execute a aplicação e veja o resultado.
Não achei uma forma fácil de excluir uma aplicação no relógio, sendo assim você pode usar o comando adb no terminal.
adb shell pm uninstall -k pacote.da.sua.app

Se você estiver com mais de um device conectado, pode usar a opção -s.
adb -s SERIAL shell pm uninstall -k pacote.da.sua.app

Para saber o serial do dispositivo é só utilizar o comando
adb devices

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Fonte: http://developer.android.com/training/wearables/apps/index.html

terça-feira, 8 de julho de 2014

Android Wear - Notifications

Olá povo,

No post anterior, falamos de como configurar o ambiente para iniciar um emulador do Android Wear e como conecta-lo ao smartphone/tablet. Também vimos que as notificações disparadas nos handhelds (smatphones/tablets) ficam sincronizadas no smartwatch. Nesse post vou mostrar como se comportam as notificações nos Android Wear.

Crie um novo projeto no Android Studio 0.8 (ou superior), defina o nome do projeto e seu respectivo pacote e clique em Next. A janela abaixo será exibida, então marque apenas a opção "Phone and Tablet" (spoiler: o próximo post será sobre apps exclusivas para wearables).
Adicione uma Activity em branco ao projeto e conclua o assistente.
Nosso projeto será simples, terá uma Activity principal e outra (DetalheActivity) que receberá uma mensagem vinda do relógio. Na MainActivity, adicione os dois métodos abaixo que usaremos mais adiante.
private NotificationCompat.Builder
    criarNotificacao(String title, String text) {

    return new NotificationCompat.Builder(this)
        .setSmallIcon(R.drawable.ic_like)
        .setContentTitle(title)
        .setContentText(text)
        .setAutoCancel(true)
        .setDefaults(NotificationCompat.DEFAULT_ALL);
}

private void dispararNotificacao(
    Notification notification, int id) {

    NotificationManagerCompat notificationManager =
        NotificationManagerCompat.from(this);

    notificationManager.notify(id, notification);
}
Nada especial nesses dois métodos. O primeiro cria objeto NotificationCompat.Builder que constrói uma notificação com as propriedades mais comuns: título, texto, ícone, cor do led, som e vibração padrão (isso é feito na chamada ao setDefaults). O segundo dispara a notificação usando a classe NotificationManagerCompat. Mas o importante aqui é que essa classe está na versão 20 da API de compatibilidade, então certifique-se de que no seu arquivo build.gradle esteja com o appcompat-v7:20. Outra detalhe é que se você não estiver rodando no emulador do Android L, use o compileSdkVersion com o valor 'android-19' conforme abaixo.
apply plugin: 'com.android.application'

android {
    compileSdkVersion 'android-19'
    buildToolsVersion "20.0.0"

    defaultConfig {
        applicationId "nglauber.android.testewear"
        minSdkVersion 10
        targetSdkVersion 19
        versionCode 1
        versionName "1.0"
    }

    buildTypes {
        release {
            runProguard false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:appcompat-v7:20.+'
}
Então se dispararmos uma notificação simples podemos utilizar o método abaixo.
private void notificacaoSimples() {
    Intent viewIntent = 
        new Intent(this, MyActivity.class);

    PendingIntent viewPendingIntent =
        PendingIntent.getActivity(
            this, 0, viewIntent, 0);

    NotificationCompat.Builder notificationBuilder =
        criarNotificacao("Título", "Texto")
            .setContentIntent(viewPendingIntent);

    dispararNotificacao(
        notificationBuilder.build(), 1);
}
A notificação aparecerá no handheld e no relógio que ficará como abaixo.
Como podemos ver, não fizemos nada de especial do wear, então se você já fez seu aplicativo com notificações, elas estarão integradas com o wearable automaticamente (se eles estiverem pareados, óbvio). Outra coisa que podemos fazer em handhelds e que é ótimo nos relógios são as ações. Vamos ver como adicionar uma...
private void notificacaoComAcao() {
    Intent mapIntent = new Intent(Intent.ACTION_VIEW);
    Uri geoUri = Uri.parse(
        "geo:0,0?q=" + Uri.encode("Av.Caxangá"));
    mapIntent.setData(geoUri);

    PendingIntent mapPendingIntent =
        PendingIntent.getActivity(
            this, 0, mapIntent, 0);

    NotificationCompat.Builder notificationBuilder =
        criarNotificacao("Localização", "Av. Caxangá")
        .setContentIntent(mapPendingIntent)
        .addAction(R.drawable.ic_map, 
            "Abrir mapa", mapPendingIntent);

    dispararNotificacao(
        notificationBuilder.build(), 1);
}
Uma notificação similar a anterior será exibida no relógio, mas se fizermos o swipe para esquerda, veremos essa ação.
Ao clicarmos nessa ação, o aplicativos de mapa (Google Maps ou Waze, por exemplo) será iniciado no smartphone/tablet. Esse exemplo também não usa nada especial do Android Wear :(
Então vou deixar de enrolação e mostrar algo que só funcione no wear: responder uma notificação a partir do relógio como é feito no Gmail.
private void notificacaoComResposta() {
    RemoteInput remoteInput = new RemoteInput.Builder(
        DetalheActivity.EXTRA_VOICE_REPLY)
        .setLabel("Diga a resposta")
        .build();

    Intent replyIntent = new Intent(
        this, DetalheActivity.class);

    PendingIntent replyPendingIntent =
        PendingIntent.getActivity(
            this, 0, replyIntent,
                PendingIntent.FLAG_UPDATE_CURRENT);

    NotificationCompat.Action action =
        new NotificationCompat.Action.Builder(
            R.drawable.ic_reply, "Responder", 
                replyPendingIntent)
            .addRemoteInput(remoteInput)
            .build();

    NotificationCompat.WearableExtender nwe =
        new NotificationCompat.WearableExtender();    

    Notification notification =
        criarNotificacao(
            "Título", "Passe a página p/ responder")
            .extend(nwe.addAction(action))
            .build();
    dispararNotificacao(notification, 1);
}
Quando a notificação for disparada, ao deslizar para a esquerda, teremos a ação de responder.

Ao clicarmos na ação, a tela do comando de voz será exibida, então podemos falar nossa resposta (ou digitar se você estiver usando o emulador).

Como podemos observar, disparamos uma Intent para DetalheActivity (que você deve criar), e nela podemos capturar o texto falado no relógio utilizando o código abaixo.
private CharSequence obterTextoFalado(Intent intent) {
    Bundle remoteInput = RemoteInput
        .getResultsFromIntent(intent);
    if (remoteInput != null) {
        return remoteInput
            .getCharSequence(EXTRA_VOICE_REPLY);
    }
    return null;
}
Muito simples não? Espero que todos os aplicativos de troca de mensagens (como WhatsApp) implementem isso, pois é muito legal! :)
Mas além de ações, podemos adicionar páginas que podem ser visualizadas fazendo o swipe para esquerda.
private void notificacaoComPaginas() {
    Intent viewIntent = new Intent(
        this, MyActivity.class);
    PendingIntent viewPendingIntent =
        PendingIntent.getActivity(
            this, 0, viewIntent, 0);

    NotificationCompat.Builder nb =
        criarNotificacao("Título", "Página1")
        .setContentIntent(viewPendingIntent);

    NotificationCompat.BigTextStyle pagesStyle =
        new NotificationCompat.BigTextStyle()
            .setBigContentTitle("Página 2")
            .bigText("Um monte de texto aqui...");

    Notification secondPageNotification =
        new NotificationCompat.Builder(this)
            .setStyle(secondPageStyle)
            .build();

    Notification twoPageNotification =
        new NotificationCompat.WearableExtender()
            .addPage(pagesStyle)
            .extend(nb)
            .build();

    dispararNotificacao(
        twoPageNotification, 1);
}


Assim, podemos ter um conteúdo maior na notificação utilizando páginas.

É isso aí povo. Nós como desenvolvedores agora temos que pensar que as notificações disparadas no seu aparelho também aparecerão nos smartwatches. Então não perca a oportunidade de fazer sua aplicação funcionar bem também nos relógios com Android Wear.

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Fonte: http://developer.android.com/training/wearables/notifications/index.html

sábado, 5 de julho de 2014

Android Wear


Olá povo,

No Google I/O 2014, um dos principais destaques foi o Android Wear, versão do Android focada em "dispositivos vestíveis", em especial os smartwatches, ou relógios inteligentes. Cada participante ganhou um e poderia optar por um dos dois modelos: o Samsung Gear Live ou o LG G watch. Optei pelo da Samsung devido ao tamanho da tela um pouco maior que o da LG, mesmo sabendo que a bateria durava um pouco menos. Após uma semana de uso, estou satisfeito com o "brinquedinho".
Uma coisa muito bacana de usar o relógio é que ele fica sincronizado com o seu smartphone/tablet, dessa forma toda notificação disparada aparece em ambos os devices. Assim, quando uma notificação é removida do relógio (fazendo o swipe para direita) ela é removida do smartphone/tablet e vice-versa.

Mas não é porque você não tem o relógio que você não pode brincar com o Android Wear. Nesse post vou mostrar como configurar o ambiente para começarmos a brincar os relógios Android.

O que precisaremos?
1) Inicialmente necessitamos da atualização do Google Play Services 5, Google Search e do aplicativo do Android Wear no seu aparelho. Como elas estão em fase de testes (Developer Preview), devemos nos tornar testadores desses aplicativos. Para tal, siga os passos descritos nesse link, que basicamente permitirá que você se torne um tester da versão developer preview desses aplicativos.
2) Ainda no link acima, é informado que devemos abrir o Android SDK Manager para adicionarmos um novo repositório para podermos baixar o SDK Tools 23 e o Platform Tools 20.
3) Precisaremos também do Android Studio 0.8.1 para criar nossos aplicativos wearable. Ele disponível nesse link.
4) Quando tudo estiver pronto, abra o AVD Manager e crie um novo AVD. Conforme podemos observar na figura abaixo, no campo Device temos a opção Android Wear Square e Android Wear Round que representam a tela do relógio que pode ser quadrada ou redonda respectivamente. O comando de voz presente no dispositivo real não está disponível no emulador, então devemos deixar o campo "Hardware keyboard present" habilitado. Preencha os demais campos conforme a figura e depois clique em Ok.
5) Configurado o emulador, mande executar e você deve ter algo como a figura abaixo.
6) Agora abra o terminal e digite o seguinte comando na pasta ANDROID_SDK/platform-tools.
 adb -d forward tcp:5601 tcp:5601
Esse comando deve ser feito para permitir a conexão entre o seu smartphone/tablet e o emulador do wear.
7) Agora abra o aplicativo do Android Wear, clique no menu e selecione a opção Parear com novo wearable.
Será exibida uma tela similar a abaixo. Clique em Next (seta azul) para continuar.

Clique na engrenagem e selecione "Parear com emulador".
Se tudo correr bem, aparecerá a tela inicial com o título "Emulador Conectado".

Um teste simples
Apenas para confirmar se está tudo funcionando, vou mandar um email para mim mesmo. Isso fará com que uma notificação seja disparada no smartphone/tablet. Se estiver tudo ok, a mensagem também chegará no emulador. Conforme podemos ver na imagem abaixo.
Ao tocar na notificação ela ocupará a tela toda e poderemos vê-la melhor, inclusive podendo fazer scroll. Ao deslizar para a esquerda, podemos ver mais opções como excluir, responder e abrir no smartphone.
Se escolhermos a opção "Responder", podemos enviar um email de resposta apenas falando o seu conteúdo. Ao selecionarmos essa opção a tela abaixo será exibida.
No emulador, temos que digitar o texto de resposta, mas no relógio real, apenas falamos, o reconhecimento de voz é feito e o email será enviado.
No próximo post vou mostrar como fazer isso na sua aplicação! \o/

Qualquer dúvida, deixem seus comentários.

4br4ç05,
nglauber

Fonte: http://developer.android.com/training/wearables/apps/creating.html