Android - Criação de um Navegador Web

Neste pequeno artigo, será ensinado como criar seu próprio navegador web para Android.

Atualmente, o uso de dispositivos móveis vem aumentando cada vez mais e, por isso, foi necessário criar um sistema operacional que se adapte a esta situação, então o Android entrou em cena e se popularizou rapidamente. Com isso, esses dispositivos passaram a ter como função principal não mais a realização de ligações telefônicas e sim o acesso à Internet e redes sociais. Diante disso, a programação mobile vem crescendo cada vez mais e por este motivo criei esse artigo que ensina um pouco sobre ela. Aqui foi utilizado o Android 3.1, mas o conceito se aplica em todas as versões da plataforma.

Começando, abra o Eclipse, crie um novo projeto Android, selecione a versão de sua preferência. Depois disto, iremos configurar nosso Layout 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:layout_height="fill_parent" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" > <ImageButton android:id="@+id/voltar" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/back" /> <ImageButton android:id="@+id/avancar" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/front" /> <ImageButton android:id="@+id/atualizar" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/ref" /> <EditText android:id="@+id/url" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:ems="10" /> <ImageButton android:id="@+id/ir" android:layout_width="45dp" android:layout_height="45dp" android:src="@drawable/ir" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="0.35" android:orientation="vertical" > <WebView android:id="@+id/pagina" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>
Listagem 1. Layout da primeira página

Nessa nossa interface usei o ImageButton ao invés do Button para poder adicionar imagens nos botões e torna-los mais parecidos com um navegador web.

Depois de ter feito isso, nós vamos começar a codificar nosso projeto. Acesse sua classe principal e em seguida crie variáveis do tipo ImageButton, EditText e WebView, conforme a Listagem 2, e relacione-as aos componentes que criamos na interface com o XML.

public class NavegadorwebActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); ImageButton voltar = (ImageButton)findViewById(R.id.voltar); ImageButton avancar = (ImageButton)findViewById(R.id.avancar); ImageButton atualizar = (ImageButton)findViewById(R.id.atualizar); ImageButton ir = (ImageButton)findViewById(R.id.ir); final EditText url = (EditText)findViewById(R.id.url); final WebView pagina = (WebView)findViewById(R.id.pagina);
Listagem 2. Definindo as variáveis no código

Para que nosso Browser inicie e já carregue uma página, escreva o seguinte código:

//Habilita o JavaScript nas paginas web pagina.getSettings().setJavaScriptEnabled(true); //Habilita o zoom nas páginas pagina.getSettings().setSupportZoom(true); //Joga uma uma url no EditText url.setText("http://www.google.com"); //fará o browser carregar a pagina de acordo com o Texto no EditText pagina.loadUrl(url.getText().toString());
Listagem 3. Inicializando uma página no browser

Bom, até o momento nosso Browser irá iniciar e carregar a URL do Google, mas precisamos definir os eventos para os ImageButtons para que possamos manipular nossa navegação. Vamos criar primeiramente para o ImageButton voltar. O código ficaria assim:

voltar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //verifica se é possivel voltar e se possivel ele irá redirecionar o Browser a pagina anterior if(pagina.canGoBack()){ pagina.goBack(); } } });
Listagem 4. Código do botão Voltar

O mesmo procedimento é aplicado para o ImageButton Avançar:

avancar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Verifica se é possível avançar. Em caso positivo, irá redirecionar o Browser para a página posterior if (pagina.canGoForward()){ pagina.goForward(); } } });
Listagem 5. Código do botão Avançar

O código logo abaixo irá atualizar a pagina atual:

atualizar.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //Recarrega a página pagina.reload(); } });
Listagem 6. Atualizando a página atual

Por ultimo, e mais importante, temos o evento do ImageButton Ir. É ele que irá acionar o carregamento das paginas de acordo com o endereço digitado no EditText.

ir.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { //carrega o brownser de acordo com a url digitada no EditText pagina.loadUrl(url.getText().toString()); } });
Listagem 7. Código do botão Ir

Ainda não terminamos, há algo de extrema importância que garante o funcionamento do nosso navegador e garante que ele acesse a internet. É preciso adicionar permissão de acesso à internet. No arquivo AndroidManifest.xml, insira a seguinte linha:

<uses-permission android:name="android.permission.INTERNET"/>
Listagem 8. Permitindo o acesso à internet pela aplicação

E com isso finalizamos nossa aplicação. Basta executar o projeto e vê-lo funcionar.

Ebook exclusivo
Dê um upgrade no início da sua jornada. Crie sua conta grátis e baixe o e-book

Artigos relacionados