Principais dicas para UIs do Android Adquirindo a mágica nos tablets

MOTOROLA e o logotipo estilizado M são marcas comerciais ou marcas registradas da Motorola Trademark Holdings, LLC. Todas as outras marcas comerciais são propriedade dos seus respectivos proprietários. © 2011 Motorola Mobility, Inc. Todos os direitos reservados.

Suzanne AlexandraEvangelista da Tecnologia AndroidMotorola Mobility

Título da apresentação Versão 1.0 24.02.09

Brasil - #appsum11brArgentina - #appsum11ar

México - #appsum11mdeveloper.motorola.com

Nós estamos em um lugar totalmentenovo.

Leve as coisas certas a bordo.

Adquira a mágica

01 PENSE NA ERGONOMIA

02 ENVOLVA OS SENTIDOS

03 USE APARÊNCIAS INCRÍVEIS

04 TORNE-O ÓBVIO

Adquira a mágica

01 PENSE NA ERGONOMIALayouts com orientação paisagemNotificações elaboradasTamanhos de textos

02 ENVOLVA OS SENTIDOSImagensSensibilidade ao toque

03 USE APARÊNCIAS INCRÍVEISTemas, temas, temas

04 TORNE-O ÓBVIOBarras de açõesFragmentosClique e arraste

Suponha que seus usuários estejamusando orientação paisagem.

Layouts com orientação paisagemMuitas vezes, a orientação paisagem precisa de layouts especializados, em qualquer dispositivo

Layouts com orientação paisagemVeja o que acontece no tablet

Layouts com orientação paisagemO que deu errado?

alignParentLeft alignParentRight

Imagempequena

Nada no centro

Layouts com orientação paisagemDesign para tamanho e orientação da tela

Layouts com orientação paisagemO layout vencedor

centerHorizontal="true"

layout_alignLeft<RelativeLayout>layout_alignRight

Layouts com orientação paisagemOtimize a experiência do usuário de wide screens

Layouts com orientação paisagemEvite o efeito de grande oceano

Tamanhos de textosTextos pequenos (como imagens) provavelmente não funcionarão

Tamanhos de textosMelhores práticas

Escale com sp18 sp e superior Certifique-se de que o texto élegível para os usuários reais

Notificações elaboradasUm importante benefício do Android em relação a outrasplataformas móveis

Notificação da sua app

Notificações elaboradasExemplos de quando usar notificações elaboradas

Ao chegar novo conteúdo

Quando uma mídia está sendo reproduzida

Notificações elaboradasDuas notificações são exibidas no Honeycomb

Bandeja(Tray)

Pop-up

Notificações elaboradasUse a classe Notification.Builder

Notification.Builder builder = new Notification.Builder( this );

Como AlertDialog.Builder

Notificações elaboradasCrie a notificação que você quiser

builder.setSmallIcon(R.drawable.icon).setContentTitle(title).setContentText(text).setContentIntent(pintent) // Um “pending intent”.setLargeIcon(myBitmap)

;

Notificações elaboradasCodificação visual

setSmallIcon()setLargeIcon()

setContentText()setContentTitle()

Notificações elaboradasAdquira um pouco de mágica: crie um botão clicável

RemoteViews layout = new RemoteViewsgetPackageName(), R.layout.notification);

layout.setTextViewText(R.id.notification_title, getString(R.string.app_name));

layout.setOnClickPendingIntent(R.id.notification_button,getDialogPendingIntent("Tapped") );

builder.setContent(layout);

Notificações elaboradasEstratégia para compatibilidade com versões anteriores(“backward compatibility”)

private static boolean isHoneycomb =android.os.Build.VERSION.SDK_INT > 10;

if (!isHoneycomb)// iniciar um intent de Activity

else// iniciar outro

Adquira a mágica

01 PENSE NA ERGONOMIA

02 ENVOLVA OS SENTIDOSImagensSensibilidade ao toque

03 USE APARÊNCIAS INCRÍVEIS

04 TORNE-O ÓBVIO

A visão supera todos osoutros sentidos.

Regras do cérebroDr. John Medina

ImagensExpresse-se visualmente, para encantar

ImagensTelas para diferentes dispositivos precisam de tamanhos diferentes de imagem

ImagensEscolha uma estratégia de imagem

Um conjunto de imagens e deixe o Android dimensionarautomaticamente?

Conjuntos de recursos personalizados para tamanhos e densidades diferentes?

Determinar a densidade mais comumente usada?Recuperar imagens dinamicamente em tempo de execução e

escalar para o dispositivo?

ImagensMemória vs tamanho do arquivo: um exemplo

Dimensionamento automático

Conjuntos de imagens

32 MB de memória

23 MB de memória

324 KB de tamanho

728 KB de tamanho

O dimensionamento automático usamemória.

Conjuntos de imagem personalizadosaumentam o tamanho do arquivo.

ImagensApresente amostras de imagens grandes em tempo de execução para economizar memória

BitmapFactory.Options options = newBitmapFactory.Options();

options.inJustDecodeBounds = false;options.inSampleSize = 4;options.inScaled = true;options.inTargetDensity = screenDensity;

Bitmap bitmap = BitmapFactory.decodeResource(

getResources(),R.drawable.clover, options);

ImagensOnde colocar imagens e ícones

Pré-dimensionado paradensidadeCombine estilo 3.0

Ícones de altaresolução

Padrão, dimensionadoautomaticamente

Sensibilidade ao toqueTablets são desenvolvidos para o toque

Sensibilidade ao toqueCertifique-se de que todos os alvos possam ser tocados

Sensibilidade ao toqueCertifique-se de que todos os alvos possam ser tocados

public View getView( int position, View convertView, ViewGroup parent) {

ImageView i = new ImageView(mContext);i.setImageResource(mImageIds[position]);

i.setLayoutParams(new Gallery.LayoutParams(300, 200));

i.setScaleType(ImageView.ScaleType.FIT_XY);i.setBackgroundResource(

mGalleryItemBackground);

return i;}

Sensibilidade ao toqueVeja como as imagens são transferidas entre dispositivos

160 dpi – médiaProporção 16:9

Adquira a mágica

01 PENSE NA ERGONOMIA

02 ENVOLVA OS SENTIDOS

03 USE APARÊNCIAS INCRÍVEISTemas, temas, temas

04 TORNE-O ÓBVIO

TemasCoerente com o dispositivo, ou destacado

Theme.Holo

Theme.Holo.Light

TemasO Honeycomb apresenta dois novos temas holográficos

TemasMas eles exigem aceleração de hardware (“hardware acceleration”)

<application android:icon="@drawable/icon"

android:label="@string/app_name"

android:hardwareAccelerated="true" >

Disponível somente no Honeycomb

TemasPorém, você pode querer que sua aplicação funcione em váriasversões do Android

<uses-sdk android:minSdkVersion="8"android:targetSdkVersion="11" />

TemasCrie diversos temas para versões do Android

<style … parent="@android:style/Theme.Holo">

<style … parent="@android:style/Theme">

Certifique-se de que todas as chamadas de API que você usa funcionam para todas as

versões de API que você suporta.

Adquira a mágica

01 PENSE NA ERGONOMIA

02 ENVOLVA OS SENTIDOS

03 USE APARÊNCIAS INCRÍVEIS

04 TORNE-O ÓBVIOBarras de açõesFragmentosClique e arraste

Barras de açõesTorne os recursos de seus aplicativos prontamente disponíveis

Itens de ações

Ícone daapp

Visualizaçãode ações

Diálogo dropdown

Barras de açõesCodificação visual

onCreateOptionsMenu()

<item android:showAsAction="true" … >

onOptionsItemSelected()android:actionLayoutandroid:actionViewClass

Barras de açõesEtapa 1: foco no nível 11 de API

<uses-sdk android:minSdkVersion="8"android:targetSdkVersion="11" />

Barras de açõesEtapa 2: coloque itens do menu na barra de ações

<item android:id="@+id/favorite"android:title="@string/favorite" android:icon="@drawable/ic_menu_star" android:showAsAction="ifRoom" />

Barras de açõesEtapa 3: manipule a seleção de opções como de costume

@Overridepublic boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) {case R.id.favorite:

// faça algoreturn true;

…}

Barras de açõesNo XOOM e em um smartphone

Barras de açõesUse um pouco de mágica, estilize

<style name="MyTheme"parent="android:style/Theme.Holo" >

<item name="android:actionBarStyle">@style/ActionBar</item>

</style>

<style name="ActionBar" parent="android:style/Widget.Holo.ActionBar">

<item name="android:background">@drawable/my_background</item>

</style>

Barras de açõesUse um pouco de mágica, adicione um diálogo

Use AlertDialog.BuilderCrie um diálogo personalizado em XMLUse um DialogFragment

Barras de açõesMas faça coisas do Honeycomb somente no Honeycomb

private static boolean isHoneycomb =android.os.Build.VERSION.SDK_INT > 10;

se (isHoneycomb) {// criar o diálogo personalizado aqui

}

Fragments (Fragmentos)Use para mostrar mais conteúdo e recursos, de forma mais fluida

Fragments (Fragmentos)É possível usar muitos padrões

Mais comum

Fragments (Fragmentos)O layout inicial do fragment é o mesmo em todas as orientações

Fragments (Fragmentos)Porém, é possível mostrar ou ocultar exibições (“views”)

Fragments (Fragmentos)Encontre seus fragments, em sua Activity principal

Fragment gridFrag =getFragmentManager().findFragmentById(R.id.photogrid);

Fragment photoFrag = getFragmentManager().findFragmentById(R.id.the_frag);

Fragments (Fragmentos)Verifique a orientação e ajuste as exibições (“views”)

private boolean photoInline = false;

photoInline = (photoFrag != null && getResources().getConfiguration().orientation== Configuration.ORIENTATION_LANDSCAPE);

if (photoInline) {// faça algo

} else if ( photoFrag != null ) {getView().setVisibility(View.GONE);

}

Fragments (Fragmentos)Ainda melhor

Transição animada

Fragments (Fragmentos)Use um pouco de mágica: anime a exibição do fragmento –passo 1

<set><objectAnimator

xmlns:android=http://schemas.android.com/apk/res/android

android:propertyName="x" android:valueType="floatType"android:valueFrom="-1280"android:valueTo="0" android:duration="500" />

</set>

Fragments (Fragmentos)Use um pouco de mágica: anime a exibição do fragmento –passo 2

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.setCustomAnimations( R.anim.slide_in_left, R.anim.slide_out_right );

DetailsFragment newFrag =DetailsFragment.newInstance();

ft.replace(R.id.details_fragment_container, newFrag, "detailFragment");

ft.commit();

Clique e arraste (“Drag and drop”)Cria envolvimento físico, direto e imediato

Clique e arraste (“Drag and drop”)Tem diversos estados de evento

ACTION_DRAG_STARTED

ACTION_DRAG_ENTERED

Clique e arraste (“Drag and drop”)Tem diversos estados de evento

ACTION_DROPACTION_DRAG_ENDED

Clique e arraste (“Drag and drop”)Veja como isso funciona nos fragmentos

Escolha um gesto que inicia um arrasto: long click?Crie um listener: OnLongClickListener()Crie objetos ClipData e DragShadowBuilderInicie um arrasto

Clique e arraste (“Drag and drop”)Para iniciar, chame startDrag()

public boolean onLongClick(View v) {ClipData data = ClipData.newPlainText("foo","bar");DragShadowBuilder shadowBuilder = new DragShadowBuilder();v.startDrag(data, shadowBuilder, v, 0);return true;

}

Criar um ouvinte de arrasto (implementar OnDragListener)Substituir onDrag e manipular eventos

Clique e arraste (“Drag and drop”)Em seguida, continue com um listener e onDrag()

class BoxDragListener implements OnDragListener {

public boolean onDrag(View self, DragEvent event) {if (event.getAction() ==

DragEvent.ACTION_DRAG_STARTED) {// fazer algo

} // manipular outros eventos

}

Perguntas?@suzalex@motodev

@motodevbr

Brasil - #appsum11brArgentina - #appsum11arMéxico - #appsum11mx

community.developer.motorola.com

obrigada

LEGAL

INFORMAÇÕES SOBRE LICENÇA

Exceto onde indicado, o exemplo de código fonte escrito pela Motorola Mobility Inc. e fornecido a você é licenciado conforme descrito abaixo.Copyright © 2010-2011, Motorola, Inc. Todos os direitos reservados exceto quando expressamente indicado.A redistribuição e utilização em formulários fonte e binários, com ou sem modificação, são permitidas de acordo com as seguintes condições:As redistribuições de código fonte devem manter o aviso de direitos autorais acima, esta lista de condições e a seguinte isenção de responsabilidade.As redistribuições em formulários binários devem reproduzir o aviso de copyright acima, esta lista de condições e a seguinte isenção de responsabilidade na

documentação e/ou outros materiais fornecidos com a distribuição.

O nome da Motorola, Inc. e os nomes de seus colaboradores não podem ser usados para endossar ou promover produtos derivados desse software sem permissãoprévia por escrito.

ESTE SOFTWARE É FORNECIDO PELOS DETENTORES E COLABORADORES DOS DIREITOS AUTORAIS "NA CONDIÇÃO QUE SE ENCONTRA" E QUALQUER GARANTIA EXPRESSA OU IMPLÍCITA, INCLUINDO, MAS NÃO LIMITADA A GARANTIAS DE COMERCIALIZAÇÃO E ADEQUAÇÃO PARA UMA FINALIDADE ESPECÍFICA NÃO IMPLICAM RESPONSABILIDADE. EM NENHUM CASO O DETENTOR OU COLABORADOR DOS DIREITOS AUTORAIS DEVE SER RESPONSÁVEL POR QUAISQUER DANOS DIRETOS, INDIRETOS, INCIDENTAIS, ESPECIAIS, EXEMPLARES OU CONSEQUENTES (INCLUINDO, MAS NÃO LIMITADOS À AQUISIÇÃO DE BENS OU SERVIÇOS SUBSTITUTOS, PERDA DE USO, DADOS OU LUCROS; OU INTERRUPÇÃO DE NEGÓCIOS) CAUSADOS E SOBRE QUALQUER TEORIA DE RESPONSABILIDADE, SEJA EM CONTRATO, RESPONSABILIDADE OBJETIVA OU AGRAVO (INCLUINDO NEGLIGÊNCIA OU NÃO) DECORRENTE DE QUALQUER MANEIRA DO USO DESSE SOFTWARE, MESMO QUE INFORMADOS DA POSSIBILIDADE DE TAIS DANOS.

Outro código fonte exibido nesta apresentação pode ser oferecido sob outras licenças. Apache 2.0Copyright © 2010, Android Open Source Project. Todos os direitos reservados, salvo disposição em contrário expressamente indicada.

Licenciado sob a Licença Apache, Versão 2.0 (a "Licença"), você não pode usar esse arquivo exceto em conformidade com a Licença. Você pode obter uma cópiada Licença em http://www.apache.org/licenses/LICENSE-2.0.

A menos que exigido pela lei aplicável ou acordado por escrito, o software distribuído sob a Licença é distribuído "NA CONDIÇÃO QUE SE ENCONTRA", SEM GARANTIAS OU CONDIÇÕES DE QUALQUER TIPO, sejam expressas ou implícitas. Consulte a Licença para a linguagem específica que governa as permissões e limitações sob a Licença.

Licença Creative Commons Atribuição 3.0. Partes desta apresentação são reproduzidas a partir do trabalho criado e compartilhado pelo Google (http://code.google.com/policies.html) e usadas de acordo com

os termos da Licença Creative Commons Atribuição 3.0. (http://creativecommons.org/licenses/by/3.0/).

LEGAL

LICENSE NOTICES

Except where noted, sample source code written by Motorola Mobility Inc. and provided to you is licensed as described below.Copyright © 2010-2011, Motorola, Inc. All rights reserved except as otherwise explicitly indicated.Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other

materials provided with the distribution.

Neither the name of the Motorola, Inc. nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Other source code displayed in this presentation may be offered under other licenses.Apache 2.0Copyright © 2010, Android Open Source Project. All rights reserved unless otherwise explicitly indicated.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

Creative Commons 3.0 Attribution LicensePortions of this presentation are reproduced from work created and shared by Google (http://code.google.com/policies.html) and used according to terms described in

the Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).