Desenvolvimento Android – Activity – Interface com o Usuário
Autor: Ricardo | Publicado: 2012-06-03T07:36:00-07:00



Activity&nbsp;é o nome de uma das principais classes utilizada no desenvolvimento de aplicativos Android e está relacionada principalmente à interface com o usuário (telas/janelas).

A forma mais comum de utilizá-la é criar classes (java) que a extendam e implementem o método&nbsp;onCreate.

A título de exemplo, imaginemos um aplicativo que fará o acompanhamento dos times do campeonato Brasileiro. Ele exibirá o calendário dos jogos, os resultados, exibirá a classificação dos times, fará simulações e algumas outras funcionalidades.



Crie um novo projeto Android e o batize de Brasileirao.&nbsp;Aqui neste post&nbsp;você encontra instruções sobre como fazer isto. Ao criar o projeto, siga as especificações abaixo:

Project name:&nbsp;Brasileirao

Api level:&nbsp;7

Application name:&nbsp;Brasileirao

Packge name:&nbsp;br.org.exemplo.brasileirao

Create Activity:&nbsp;desmarcar

Mim SDK version:&nbsp;7

Para começar, vamos criar uma&nbsp;&nbsp;splash screen&nbsp;(aquelas telas de abertura que são exibidas quando o aplicativo é iniciado, que mostram um logo do aplicativo/empresa e depois desaparecem). Mas antes de codificar é interessante encontrar uma imagem que represente a aplicação.

DEFININDO OS RECURSOS DA TELA DE APRESENTAÇÃO

Eu costumo utilizar a&nbsp;Icons Pedia&nbsp;para encontrar ícones (e algumas vezes até imagens),&nbsp;cuja licença seja&nbsp;free. Procurando por&nbsp;soccer&nbsp;(que é o tema relacionado ao que o aplicativo vai fazer) encontrei os seguintes resultados:



Eu gostei da imagem abaixo e a utilizarei na tela de abertura.



Uma vez que a imagem foi definida, é hora de importá-la para o projeto e criar o layout e a classe que a exibirá.

Faça o download da imagem e importe-a para o projeto recém criado. Clique na pasta&nbsp;res,drawable-hdpi&nbsp;e com o botão direito, clique em&nbsp;Import. Então, selecione&nbsp;Genereal, File System,&nbsp;e clique em&nbsp;Next. Por fim, informe o diretório onde você salvou a imagem, selecione-a e clique em&nbsp;Finish. Confira as imagens abaixo:



Aqui cabe uma informação importante. O Android&nbsp;NÃO ACEITA&nbsp;nomes de recursos com letras em caixa alta (maiúsculas). No exemplo da imagem acima uma mensagem de erro será exibida informando que apenas caracteres de&nbsp;a-z,&nbsp;0-9&nbsp;e&nbsp;_&nbsp;são permitidos. Neste caso, clique com o botão direito sobre a imagem importada e clique em&nbsp;Refactor&nbsp;e depois&nbsp;Rename&nbsp;(ouAlt+Shift+R) e troque o nome. Eu mudei para&nbsp;splash&nbsp;apenas.

Este é o procedimento para importar imagens para seu projeto Android.

Você encontrará um arquivo denominado&nbsp;icon.png&nbsp;dentro de cada pasta&nbsp;drawable. Cabe lembrar que essas pastas são usadas conforme a capacidade gráfica do dispositivo onde o aplicativo irá rodar. A pasta com final&nbsp;hdpi&nbsp;deve conter ícones e imagens para dispositivos de alta resolução, enquanto que&nbsp;mdpi&nbsp;e&nbsp;ldpi&nbsp;para média e baixa resolução respectivamente. Para substituir o ícone padrão do aplicativo basta substituir o arquivo&nbsp;icon.png&nbsp;contido nessas pastas. Ao fazê-lo, lembre-se de respeitar a resolução do ícone atual. Neste exemplo não trocarei o ícone e deixarei o padrão.

O próximo passo é definir o layout.

DEFININDO O LAYOUT

Como você já deve saber, podemos “desenhar” telas de duas formas. A primeira é codificando manualmente cada componente, semelhante ao que acontece com o Swing, ou utilizar um arquivo de layout onde os componentes serão definidos via&nbsp;tags&nbsp;e&nbsp;flags&nbsp;XML. É recomendado utilizar este último por separar o código da lógica com o que desenha a tela, deixando o código fonte mais limpo. Isso também facilita a manutenção.

Para criar um arquivo de layout tecle&nbsp;Ctrl+N&nbsp;&nbsp;e digite XML no campo&nbsp;Wizards&nbsp;&nbsp;da janela que será exibida. A opção “Android XML File” será exibida. Selecione-a e clique em&nbsp;Next. Preencha o campo&nbsp;File&nbsp;com&nbsp;splash.xml&nbsp;e marque a opção&nbsp;Layout&nbsp;do campo “What type of resource configuration would you like?” e finalmente clique em&nbsp;Finish.



Perceba que neste caso, é necessário especificar a extensão do arquivo, neste caso,&nbsp;.xml.

Agora copie e cole o código abaixo na aba&nbsp;splash.xml&nbsp;que foi aberta na janela principal:






01&lt;?xml&nbsp;version="1.0"&nbsp;encoding="utf-8"?&gt;




02&lt;LinearLayout




03&nbsp;&nbsp;&nbsp;&nbsp;android:id="@+id/LinearLayout01"




04&nbsp;&nbsp;&nbsp;&nbsp;android:layout_width="fill_parent"




05&nbsp;&nbsp;&nbsp;&nbsp;android:layout_height="fill_parent"




06&nbsp;&nbsp;&nbsp;&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"




07&nbsp;&nbsp;&nbsp;&nbsp;android:gravity="center|center"




08&nbsp;&nbsp;&nbsp;&nbsp;android:orientation="vertical"




09&nbsp;&nbsp;&nbsp;&nbsp;android:background="#FFFFFF"&gt;




10&nbsp;




11&nbsp;&nbsp;&nbsp;&nbsp;&lt;ImageView




12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_marginTop="-60dip"




13&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:paddingLeft="20dip"




14&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:paddingRight="20dip"




15&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:scaleType="centerInside"




16&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_width="wrap_content"




17&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_height="wrap_content"




18&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:id="@+id/imageView1"




19&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:src="@drawable/splash"&nbsp;/&gt;




20&nbsp;




21&nbsp;&nbsp;&nbsp;&nbsp;&lt;TextView&nbsp;android:text="Brasileirão"




22&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_width="wrap_content"




23&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_height="wrap_content"




24&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:layout_marginTop="38dip"




25&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:typeface="serif"




26&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:shadowDx="0"




27&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:shadowDy="2"




28&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:shadowRadius="1"




29&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:shadowColor="#FFFFFF"




30&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:textColor="#444444"




31&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:textSize="20dip"




32&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:id="@+id/versionNumber"




33&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:gravity="bottom"&nbsp;/&gt;




34&nbsp;




35&lt;/LinearLayout&gt;







No código acima foi adicionado primeiramente um componente de layout denominado&nbsp;LinearLayout. Ele serve como container para outros componentes e foi configurado para exibí-los verticalmente através da flag&nbsp;android:orientation=”vertical”. As flags&nbsp;android:layout_width&nbsp;e&nbsp;android:layout_height&nbsp;foram configuradas para “fill_parent“, o que indica que o container ocupará todo o espaço disponível na tela. A opção&nbsp;android:background&nbsp;define a cor (ou imagem) de fundo que será utilizada. Neste caso,&nbsp;#FFFFFF&nbsp;representa a cor branca, em hexa.

Em seguida vem um componente do tipo&nbsp;ImageView. Sua principal finalidade é exibir imagens (contidas nas pastas&nbsp;drawable). Perceba que a flag&nbsp;src&nbsp;foi configurada como&nbsp;@drawable/splash. Isso indica que o Android irá procurar por&nbsp;splash&nbsp;em qualquer um dos diretórios&nbsp;drawable, a &nbsp;começar pelo que satisfizer a resolução do dispositivo. Perceba que nenhuma extensão foi definida. Apenas o nome foi utilizado. O valor&nbsp;wrap_content, utilizado para definir&nbsp;android:layout_width&nbsp;e&nbsp;android:layout_heigh,&nbsp;indica que o componente ocupará apenas o espaço necessário à exibição. Também foi adicionado flags que adicionam espaço nas laterais do componente,&nbsp;android:paddingLefte&nbsp;android:paddingLeft, ambas com&nbsp;20dip.

Por fim, um componente&nbsp;TextView&nbsp;&nbsp;foi adicionado com a finalidade de exibir um texto, “Brasileirão“&nbsp;em nosso caso. Foram definidas flags que definem a fonte, tamanho e cor a serem utilizadas na exibição. Assim como o&nbsp;ImageView&nbsp;este componente também foi configurado para ocupar apenas o espaço necessário à exibição. Flags que definem sombra (android:shadowDx&nbsp;e&nbsp;android:shadowDy) foram utilizadas para dar um visual mais interessante e&nbsp;android:gravity=”bottom”&nbsp;indica que o componente deverá aparecer no canto inferior da tela.

Como pode ser percebido, as tags e flags utilizadas na confecção do XML são bem intuitivas e lembram CSS e HTML.

Eu prefiro “escrever” telas codificando o XML diretamente ao invés de utilizar o Layout Gráfico. O eclipse disponibiliza rapidamente todos os tipos de componentes que podem ser criados ao teclar&nbsp;Ctrl+Espaço.&nbsp;A mesma regra também vale para as flags de cada um deles. Veja o exemplo abaixo:



Esses recursos facilitam a criação de telas a tal ponto que não sinto a necessidade de um editor visual. Mas, se este não for seu caso, você pode utilizar o&nbsp;&nbsp;”Graphical Layout” como mostra a figura a seguir:



Dessa forma é possível selecionar os componentes na paleta (à esquerda) e arrastá-los para a área de desenho (à direita). Ao clicar com o botão direito sobre os objetos criados uma relação de seus atributos será exibida e a configuração poderá ser feita facilmente. Mas nem todas as opções disponíveis via editor XML estão disponíveis no editor gráfico.

Uma vez que o layout foi definido é hora de criar a primeira&nbsp;Activity.

CRIANDO A &nbsp;ACTIVITY

Clique na pasta&nbsp;src, selecione o único pacote que a compõe no momento,br.org.exemplo.brasileirao&nbsp;(caso você tenha seguido minha sugestão) e clique com o botão direito. Então selecione&nbsp;New&nbsp;e depois&nbsp;Class. Na janela que será aberta preencha o campoName&nbsp;com&nbsp;SplashScreen. Não utilize qualquer extensão, basta fornecer o nome e clicar emFinish. &nbsp;Confira as imagens abaixo:





A classe recém criada será aberta no editor. Logo após as palavras “class SplashScreen“, acrescente &nbsp;”extends Activity“. Depois tecle&nbsp;Ctrl+Shift+O&nbsp;para o eclipse adicionar automaticamente as dependências necessárias na sessão&nbsp;import.

Dentro da classe criada, digite&nbsp;oncr&nbsp;e em seguida tecle&nbsp;Ctrl+Espaço. Isso chamará a janela de templates de código do eclipse. Selecione a opção&nbsp;onCreate(Bundle savedInstanceState)&nbsp;e a declaração do método, bem com uma implementação padrão, serão adicionados.



O método será criado já com duas linhas. A primeira é com um comentário (que começam com //) e a segunda é a chamada ao método&nbsp;onCreate da super classe, a classe pai da nossa Activity.

Para exibirmos o layout recém criado utilizaremos o método&nbsp;setContentView&nbsp;passando como parâmetro o layout&nbsp;splash. Para referenciar itens de recurso dentro do código Java é necessário utilizar uma constante denominada&nbsp;R,&nbsp;criada automaticamente pelo Android quando qualquer recurso novo é adicionado ao projeto. Dessa forma, podemos referenciar o layout&nbsp;splash&nbsp;apontando para&nbsp;R.layout.splash.

Veja o código final da classe&nbsp;SplashScreen.java:






01package&nbsp;br.org.exemplo.brasileirao;




02&nbsp;




03import&nbsp;android.app.Activity;




04import&nbsp;android.os.Bundle;




05&nbsp;




06public&nbsp;class&nbsp;SplashScreen&nbsp;extends&nbsp;Activity {




07&nbsp;




08&nbsp;&nbsp;&nbsp;&nbsp;@Override




09&nbsp;&nbsp;&nbsp;&nbsp;protected&nbsp;void&nbsp;onCreate(Bundle savedInstanceState) {




10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// TODO Auto-generated method stub




11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;super.onCreate(savedInstanceState);




12&nbsp;




13&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Exite o layout da splash screen




14&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;setContentView(R.layout.splash);




15&nbsp;&nbsp;&nbsp;&nbsp;}




16}







Por fim, para que essa classe fique acessível e possa ser utilizada, é necessário “registrá-la” no arquivo&nbsp;AndroidManifest.xml.&nbsp;

CONFIGURANDO O ARQUIVO DE MANIFESTO

O arquivo&nbsp;AndroidManifest.xml&nbsp;é responsável por definir uma série de opções e requerimentos. Um dos principais requerimentos é que todas as classes que serão exibidas devem ser registradas previamente. Caso contrário, ao chamá-las, um erro (excessão) ocorrerá.

Também é necessário configurar qual classe será chamada quando o aplicativo for iniciado. Isso é feito adicionando tags do tipo &nbsp;intent,&nbsp;dentro da tag&nbsp;activity.

Por padrão todas as janelas são exibidas com a barra de título. Como a classe &nbsp;SplashScreentrata-se de uma tela de apresentação, não desejamos que isso ocorra. Neste caso podemos aplicar o tema pré-definido&nbsp;NoTitleBar,&nbsp;criado&nbsp;para esta finalidade. O Android conta com outros temas pré-definidos e também permite que criemos os nossos.

Como resultado o arquivo ficará com o seguinte conteúdo:






01&lt;?xml&nbsp;version="1.0"&nbsp;encoding="utf-8"?&gt;




02&lt;manifest&nbsp;xmlns:android="http://schemas.android.com/apk/res/android"




03&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;package="br.org.exemplo.brasileirao"




04&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:versionCode="1"




05&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;android:versionName="1.0"&gt;




06&nbsp;&nbsp;&nbsp;&nbsp;&lt;uses-sdk&nbsp;android:minSdkVersion="7"&nbsp;/&gt;




07&nbsp;




08&nbsp;&nbsp;&nbsp;&nbsp;&lt;application&nbsp;android:icon="@drawable/icon"&nbsp;android:label="@string/app_name"&gt;




09&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;activity&nbsp;android:name="SplashScreen"android:theme="@android:style/Theme.NoTitleBar"&gt;




10&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;intent-filter&gt;




11&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;action&nbsp;android:name="android.intent.action.MAIN"&nbsp;/&gt;




12&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;category&nbsp;android:name="android.intent.category.LAUNCHER"&nbsp;/&gt;




13&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/intent-filter&gt;




14&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/activity&gt;




15&nbsp;&nbsp;&nbsp;&nbsp;&lt;/application&gt;




16&lt;/manifest&gt;







Por fim, basta executar o aplicativo. Você precisará de um dispositivo virtual. Tratei sobre isto&nbsp;aqui.

O resultado deve ser semelhante a este:



Eis a nossa modesta tela de apresentação em funcionamento.

No próximo post veremos como chamar outras telas e aprenderemos algumas boas práticas que não foram ainda aplicadas aqui.