Seu Site como Aplicação no Android

qrcodeAntes de fazer sua primeira aplicação para o Android, é necessário seguir os procedimentos descritos nesse post. Além disso, para os testes você precisará criar um AVD, a descrição de como fazer isso, pode ser encontrada no conteúdo desse post.

Abra o Eclipse, File, New, Project. Escolha Android Project Using Studio for Android se você instalou o MOTODEV Studio ou Android Project caso contrário. Clique em Next.

New Project
New Project

Vou prosseguir utilizando o Wizard do MOTODEV Studio. Informe o nome do projeto, escolha um dos AVDs criados e configure as informações do projeto. Clique em Finish.

New Android Project
New Android Project

Abra o MainActivity.java ou o activity que você criou. Você deverá ter algo semelhante à esse:

package br.com.thiagovespa.android.helloandroid;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Uma Activity é o local onde o usuário interage (uma Activity por vez). O método onCreate será chamado quando a Activity iniciar, portanto é nele que você deve iniciar a parte da interface com o usuário. Na linha 9, está indicado que a tela utilizará o arquivo de layout main. Esse arquivo encontra-se na pasta res/layout.

Package Explorer main.xml
Package Explorer main.xml

Abra o arquivo. O editor gráfico de layout deverá aparecer. Caso você tenha problema com Missing theme, é porque o campo de tema está desabilitado (bug do SDK). Para habilitar, selecione outra plataforma na parte superior direita do editor e volte para a anterior novamente.

Graphical Layout Missing theme bug/error
Graphical Layout Missing theme bug/error

Altere as configurações: tema, visualização e tamanho de tela. Agora é só clicar e arrastar. Para nossa aplicação vamos alterar o texto padrão e exibir meu site. Para isso, abra o arquivo res/values/strings.xml e mude o valor da chave hello para Olá Android. Volte para o main.xml. Na palheta (Palette), selecione Composite e arraste o WebView para abaixo do texto. Clique com o botão direito sobre ele e selecione Edit ID. Digite siteWebView.

Selecione o fundo da tela e clique nas duas setinhas da barra (Toggle Fill Width e Toggle Fill Height) de edição do Graphical Layout. Clique no texto escolha o ícone Change Gravity e mude para Center Horizontally. Selecione o WebView e clique nas duas setinhas da barra (Toggle Fill Width e Toggle Fill Height). Caso você tenha alguma dificuldade, copie e cole o seguinte código no seu main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent">
<TextView
    android:layout_height="wrap_content"
    android:text="@string/hello"
    android:layout_gravity="center_horizontal" android:layout_width="wrap_content"/>
<WebView android:layout_width="match_parent" android:id="@+id/siteWebView" android:layout_gravity="fill" android:layout_height="match_parent"></WebView>
</LinearLayout>

No Activity, coloque o seguinte código:

package br.com.thiagovespa.android.helloandroid;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;

public class MainActivity extends Activity {
	/** Called when the activity is first created. */
	private WebView meuSiteWV;

	private static final String TAG_NAME = MainActivity.class.getName();

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		Log.d(TAG_NAME, "Recuperando componentes...");
		this.meuSiteWV = (WebView) findViewById(R.id.siteWebView);
		Log.d(TAG_NAME, "Carregando web-site...");
		meuSiteWV.getSettings().setJavaScriptEnabled(true);
		meuSiteWV.loadUrl("http://www.thiagovespa.com.br");
		Log.d(TAG_NAME, "Acabou!");
	}

}

Na linha 15 recuperamos o WebView do layout, na linha 17 habilitamos o javascript no WebView. O principal é na linha 18, onde carregamos o website. Não há tratamento de erros ainda, mas já dá pra ter uma idéia de como criar uma aplicação para Android. Estamos também utilizando o LogCat para visualizar no console o que a aplicação está fazendo, conforme descrito nesse post.

Como estamos acessando a internet, é necessário configurar o aplicativo para que tenha permissão para isso. Abra o arquivo AndroidManifest.xml, clique em Permissions, Add..., Uses Permission, pressione OK e em name coloque: android.permission.INTERNET. O seu AndroidManifest.xml deve ficar parecido com o seguinte:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="br.com.thiagovespa.android.helloandroid" android:versionCode="1"
	android:versionName="1.0">
	<uses-permission android:name="android.permission.INTERNET" />
	<uses-sdk android:minSdkVersion="11" />

	<application android:icon="@drawable/icon" android:label="@string/app_name"
		android:permission="android.permission.INTERNET">
		<activity android:name=".MainActivity" android:label="@string/app_name">
			<intent-filter>
				<action android:name="android.intent.action.MAIN" />
				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>

	</application>
</manifest>

Clique com o botão direito na Activity, Run As, Android Application using Studio for Android e selecione o emulador. Aguarde carregar o emulador e veja a aplicação em funcionamento

Hello Android
Hello Android

Para executar no dispositivo, que é bem mais rápido que no emulador, vocẽ deve realizar os procedimentos descritos nesse post e habilitar a ddepuração USB, acessando Configuração, Aplicativos, Desenvolvimento, Depuração USB. Plugue o dispositivo com o cabo USB e ele deverá aparecer automaticamente na View Device Management do Eclipse. Clique com o botão direito na Activity, Run As, Run Configurations..., selecione o Device e clique em Run.

Agora é só brincar 😀

Sobre: Thiago Galbiatti Vespa

Thiago Galbiatti Vespa é mestre em Ciências da Computação e Matemática Computacional pela USP e bacharel em Ciências da Computação pela UNESP. Coordenador de projetos do JavaNoroeste, membro do JCP (Java Community Process), consultor Oracle, arquiteto de software de empresas de médio e grande porte, palestrante de vários eventos e colaborador de projetos open source. Possui as certificações: Oracle Certified Master, Java EE 5 Enterprise Architect – Step 1, 2 and 3; Oracle WebCenter Portal 11g Certified Implementation Specialist; Oracle Service Oriented Architecture Infrastructure Implementation Certified Expert; Oracle Certified Professional, Java EE 5 Web Services Developer; Oracle Certified Expert, NetBeans Integrated Development Environment 6.1 Programmer; Oracle Certified Professional, Java Programmer; Oracle Certified Associate, Java SE 5/SE 6