WebView Android

3 Flares Twitter 0 Facebook 3 Filament.io Made with Flare More Info'> 3 Flares ×

Hoje vamos ver WebView no Android. Acesse e confira…

Projeto

Hoje vamos aprender um exercício que: Vamos clicar em um botão e ser redirecionado para outra tela, nesta outra tela vamos ser redirecionado pelo componente WebView para um site, no caso aqui sera  para o site da DevMobileBrasil.

Aplicação

Vamos criar um novo projeto. Clique no menu “File” / “New” / “Other” / Android Project depois cique em Next.

Nome do projeto: WebViewDevMobile.

Versão: Android 2.2.

Nome da aplicação: Web View.

Package Name: br.webview.com.

Create Activity: WebViewDevMobileActivity.java.

Minimum SDK: 8.

Layout

Agora abra o seu arquivo main.xml que fica localizado na pasta “res” / “layout” de um duplo clique no arquivo e a tela será carreda. Agora com o nosso arquivo main.xml carregado clique na guia main.xml.
Vide Imagem abaixo:

Imagem Layout

Imagem Layout

<?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" android:paddingLeft="10sp" android:paddingRight="10sp" android:paddingTop="10sp" android:paddingBottom="10sp">

<TextView
android:id="@+id/textView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Clique no Botão e Acesse o Nosso Site !!!" android:textSize="20sp" android:gravity="center"/>

<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="0.13" >
</LinearLayout>

<Button
android:id="@+id/btnMostrar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="DevMobileBrasil" android:textSize="22sp"/>

</LinearLayout>

Resultado você confere abaixo:

Imagem Layout

Imagem Layout

Bom nossa primeira tela está pronta, agora vamos adicionar a tela2.

Adicionando Novo Arquivo xml no Android

para adicionar outra tela ou arquivo clique com o botão direito do mouse na pasta layout / “New” / File.

File name  “site.xml”.

Adicionando um layout na aplicação

Linear Layout (vertical).

No arquivo site.xml digite o código:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical" >

<WebView
 android:id="@+id/webView1"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

</LinearLayout>

Resultado você confere abaixo:

Layout pronto

Layout pronto

Codificação do Projeto

Agora vamos ao código. Abra o arquivo WebViewDevMobileActivity.java e digite os códigos:

package br.webview.com;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class WebViewDevMobileActivity extends Activity {
Button btnMostrar;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
btnMostrar = (Button)findViewById(R.id.btnMostrar);
btnMostrar.setOnClickListener(new View.OnClickListener() {

@Override
public void onClick(View arg0) {

Intent intent = new
Intent(WebViewDevMobileActivity.this, SiteActivity.class);
WebViewDevMobileActivity.this.startActivity(intent);
WebViewDevMobileActivity.this.finish();

}
});

}
}

Agora vamos criar uma classe com o nome de SiteActivity.java, botão direito do mouse em “br.webview.com” / “New” / “Class.”

Name SiteActivity.

Codificação do Projeto SiteActivity.java

Agora abra o arquivo SiteActivity.java e digite:

package br.webview.com;</pre>
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class SiteActivity extends Activity {

private WebView myWebView;

public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.site);

myWebView = (WebView) findViewById(R.id.webView1);
 myWebView.getSettings().setJavaScriptEnabled(true);
 myWebView.loadUrl("http://www.devmobilebrasil.com.br");
<pre>}
}

Configurando o AndroidManifest.xml

Para concluir esta aplicação abra agora o arquivo AndroidManifest.xml que fica localizado abaixo da pasta “res”, de um duplo clique nele e clique na guia AndroidManifest.xml para acessar o código, depois de acessar o código digite abaixo da Tag </activity> o código:

<activity  android:name=".SiteActivity"
android:label="@string/app_name">

</activity>

Permitindo conexão com internet

É necessário declarar a permissão INTERNET para que o browser acesse a página. Dentro do arquivo

AndroidManifest.xml digite:

<uses-permission android:name="android.permission.INTERNET"/>

Executando o Projeto

Feito isso agora é hora de testar a aplicação.
Botão direito no projeto “Run As” / Android Applications e conferir o resultado.
Vamos ver abaixo como ficou nossa aplicação:
Executando Aplicação

Executando Aplicação

Faça Download do Projeto:WebView (1481)

Espero que tenham gostado e até a próxima.

Renato Ramos

About Renato Ramos

Graduado em Gestão de tecnologia da informação. Um Entusiasta da tecnologia e de seus avanços. Amante das tecnologias mobile, desde cedo alterando firmwares, sistemas e realizando atualizações e estudando tudo que possível em dispositivos moveis. Programador IOS, Android, Windows Mobile, PhoneGap.

3 thoughts on “WebView Android

  1. Lucas

    Bom dia, Sr. Renato.

    Consegue me ajudar? Desenvolvo em php e preciso criar um apk somente com um webView e fazer com que ao executar o apk ele abra a url que eu informar.
    Tentei seguir seu exemplo acima mas sem sucesso.

    Se for simples para você, por favor me envie um projeto somente com o webView e me informe onde inserir a url no codigo fonte.

    Estou utilizando o eclipse já pronto para desenvolver apk, porém não sei nada de java.

    Obrigado desde já.

  2. Olá Lucas tudo bem..
    Segue o projeto modificado conforme me solicitou.
    Favor atentar-se a seguinte constante:

      
    //AQUI APENAS PARA MOSTRAR COLOQUEI A URL DO TWITTER.
    private final String URL = &quot;https://mobile.twitter.com&quot;; //Modificar para URL para apontar para o site desejado.
    

    Projeto Modificado

  3. Juliano Veiga

    Achar conteúdo para android em português com qualidade ainda é uma coisa muito rara, agradeço a vocês por estre site.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>