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.