Android - Criação de um Navegador Web
Neste pequeno artigo, será ensinado como criar seu próprio navegador web para Android.
Você não gostou da qualidade deste conteúdo?
(opcional) Você gostaria de comentar o que não lhe agradou?
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. Despois disto, iremos configurar nosso Layout da seguinte forma:
Listagem 1: Layout da primeira página
<?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>
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.
Listagem 2: Definindo as variáveis no código
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);
Para que nosso Browser inicie e já carregue uma página, escreva o seguinte código:
Listagem 3: Inicializando uma página no browser
//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());
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:
Listagem 4: Código do botão Voltar
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();
}
}
});
O mesmo procedimento é aplicado para o ImageButton Avançar:
Listagem 5: Código do botão 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();
}
}
});
O código logo abaixo irá atualizar a pagina atual:
Listagem 6:
Atualizando a página atual
atualizar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//Recarrega a página
pagina.reload();
}
});
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.
Listagem 7: Código do botão Ir
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());
}
});
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:
Listagem 8: Permitindo o acesso à internet pela aplicação
<uses-permission android:name="android.permission.INTERNET"/>
E com isso finalizamos nossa aplicação. Basta executar o projeto e vê-lo funcionar.
Ensino Fundamental e Médio Completo Pelo Colégio da Policia Militar - Unid. Vila Talarico. Técnico em informática pela ETEC de Vila Formosa Atualmente cursando Analise e Desenvovimento de Sistemas na Fatec Zona Leste. Trabalhou Planeta PC Computadores(2010/2012) em Suporte Tecnico. Atualmente ...
4 COMENTÁRIOS
É um pouco dificil achar conteudo de Android... Essa seria uma boa 1º aplicação em Adroid!!! xD
Gostei
Porém, ao executar o projeto, ele não abriu dentro do app(WebView) como imaginei, e sim, chamou um browser e abriu o site fora da aplicação. O que pode ter ocorrido?
lWebView.setWebViewClient(new WebViewClient());
Veja: http://developer.android.com/guide/webapps/webview.html
