fbpx
Escolha uma Página

WebView: Convertendo Site em Aplicativo

Desenvolvimento Android | 96 Comentários

Se você tem um site responsivo e deseja transformá-lo em um aplicativo Android, utilizar uma WebView pode ser o melhor caminho para isso.

A classe WebView é uma extensão da classe View do Android, que permite exibir páginas da Web como parte do layout da sua Activity.

Este artigo vai mostrar como começar a usar o WebView e como fazer algumas coisas adicionais, como manipular a navegação de página e ligar o JavaScript da sua página da Web ao código do lado do cliente no seu aplicativo Android.

Validando seu Site

Antes de colocar a mão na massa e começar a programar, precisamos verificar se seu site é responsivo e se adapta a diferentes tamanhos de tela.

Precisamos verificar também se seu site é Mobile-friendly, ou seja, qual o potencial dele para funcionar em um celular baseado em fatores como responsividade e velocidade de carregamento.

Para fazer esse teste, vamos utilizar uma ferramenta do Google chamada Mobile-friendly Test para verificar de forma automática se seu site funciona bem em um celular.

Basta colocar a url do seu site no campo que aparece na ferramenta e clicar em Run Test. Depois de fazer a análise a ferramenta vai mostrar se seu site está preparado para funcionar em um celular.

Na imagem acima eu fiz um teste com a url https://www.androidpro.com.br/blog/ e ele mostrou a mensagem “Page is mobile friendly”. Estamos prontos para converter o site para um aplicativo.

Caso não apareça essa mensagem para você, será necessário fazer alguns ajustes em seu site antes de converte-lo.

Entendendo sobre a WebView

As WebViews permitem que você exiba o conteúdo de um site como parte do layout de sua Acitivty, com recursos a mais do que os navegadores padrão.

Uma WebView é útil quando você precisa aumentar o controle sobre a interface do usuário e as opções avançadas de configuração que permitem incorporar páginas Web em um ambiente especialmente projetado para seu aplicativo.

A estrutura da WebView permite que você especifique as configurações que fazem com que suas páginas Web apareçam no tamanho e escala adequados em todas as configurações de tela.

Você pode até mesmo definir uma interface entre seu aplicativo Android e suas páginas Web que permite que o JavaScript nas páginas Web faça chamadas para APIs em seu aplicativo, fornecendo APIs do Android para seu aplicativo baseado na Web.

Começando o Projeto

Para começarmos a conversão do seu site em um aplicativo Android, crie um novo projeto no Android Studio escolhendo a opção de Empty Activity na penúltima tela de configuração.

Desta forma vamos ter um projeto com uma Activity e seu layout XML criada.

É a partir daqui que vamos começar a fazer as modificações para transformar nosso site em um aplicativos Android.

Adicionando a WebView

Vamos começar adicionando o componente XML da WebView no layout da nossa Activity.

Abra o arquivo activity_main.xml e substitua o conteúdo dela pelo código abaixo. Basicamente vamos utilizar um LinearLayout com uma WebView dentro.

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

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

</LinearLayout>

O componente XML da WebView é bem simples e não tem muitas configurações para fazer. O restante dos controles vamos fazer em nossa classe MainActivity.

Abra a classe MainActivity e adicione o carregamento da URL na WebView no método onCreate como o exemplo abaixo.

private WebView myWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    myWebView = (WebView) findViewById(R.id.webview);
    myWebView.loadUrl("https://www.androidpro.com.br/blog/");
}

Precisamos adicionar também uma “permissão de uso” para o usuário acessar a Internet. Adicione a permissão de Internet dentro do seu AndroidManifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="br.com.androidpro.androidprowebview">
    
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Execute o projeto no emulador ou em um celular físico para ver como está ficando.

Se seu site aparecer no emulador quer dizer que já estamos com meio caminho andado. Porém algumas funcionalidades do seu site ainda podem não estar funcionando.

Habilitando o JavaScript

Se você está seguindo este tutorial e utilizou a mesma url que eu no projeto, vai perceber que ao tentar clicar no menu a esquerda do site, ele não faz nada. Isso acontece porque por padrão o JavaScript é desabilitado na WebView.

Então, precisamos habilitar o JavaScript para que as funcionalidades do nosso site se comportem como se tivesse em um navegador no computador.

Para fazer isso, basta recuperar as configurações do WebView e habilitar o JavaScript.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    myWebView = (WebView) findViewById(R.id.webview);
    myWebView.loadUrl("https://www.androidpro.com.br/blog/");

    WebSettings webSettings = myWebView.getSettings();
    //Habilitando o JavaScript
    webSettings.setJavaScriptEnabled(true);
}

Execute novamente o projeto e tente clicar no menu.

Você vai perceber que agora o menu funciona.

Controlando a Navegação

O comportamento padrão quando um usuário clica em um link dentro da página na WebView, é abrir o aplicativo de navegador padrão do sistema. Isso pode prejudicar a experiência do usuário.

Para manter a navegação de página dentro do WebView e também dentro do aplicativo, precisamos criar uma subclasse de WebViewClient e substituir o método shouldOverrideUrlLoading.

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.webkit.WebView;
import android.webkit.WebViewClient;


public class WebViewClientImpl extends WebViewClient {

    private Activity activity = null;

    public WebViewClientImpl(Activity activity) {
        this.activity = activity;
    }

    @Override
    public boolean shouldOverrideUrlLoading(WebView webView, String url) {
        if(url.contains("androidpro.com.br")) return false;

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
        activity.startActivity(intent);
        return true;
    }

}

Depois é só utilizar a classe no método onCreate da sua MainActivity.

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    myWebView = (WebView) findViewById(R.id.webview);

    WebViewClientImpl webViewClient = new WebViewClientImpl(this);
    myWebView.setWebViewClient(webViewClient);

    myWebView.loadUrl("https://www.androidpro.com.br/blog/");

    //Habilitando o JavaScript
    WebSettings webSettings = myWebView.getSettings();
    webSettings.setJavaScriptEnabled(true);
}

Também precisamos implementar o botão Voltar, para que possamos navegar para as página anteriores visitadas.

Fazemos isso adicionando o método onKeyDown em nossa MainActivity.

@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
        myWebView.goBack();
        return true;
    }

    return super.onKeyDown(keyCode, event);
}

O método onKeyDown foi substituído por uma implementação que primeiro verifica se o WebView pode voltar. Se o usuário tiver navegado para fora da primeira página carregada dentro do WebView, o WebView poderá voltar.

O WebView mantém um histórico de navegação como um navegador normal. Se não houver histórico, isso resultará no comportamento padrão do botão Voltar, ou seja, sair do aplicativo.

Personalizando o Aplicativo

Vamos personalizar nosso aplicativo para incorporar ainda mais o site dentro dele e parecer uma coisa só.

A primeira coisa, é remover a “Action Bar” e deixar o site aparecendo quase em tela cheia. Para isso, vamos alterar o tema do nosso Styles.

Abra o arquivo styles.xml e troque o atributo parent da tag <style> para Theme.AppCompat.NoActionBar.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>

Precisamos também alterar as cores do aplicativo, e isso você faz alterando dentro do colors.xml. Seguindo as cores do meu site, eu configurei desta forma.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#a4c629</color>
    <color name="colorPrimaryDark">#719500</color>
    <color name="colorAccent">#404040</color>
</resources>

Por último, vamos criar um ícone personalizado para nosso aplicativo.

Basicamente eu peguei o logo do AndroidPro e gerei o ícone utilizando está ferramenta Gerador de Ícones de Launcher.

Basta fazer o download do arquivo ZIP gerado pela ferramenta e subistituir todas as pastas Mipmap de dentro do seu aplicativo.

Pronto!

Bônus

Existem algums formas de transformar seu site em aplicativo e uma delas é utilizar um template que facilita muita a conversão do seu site em um aplicativo Android e iOS.

Segue 3 templates que vão acelerar de forma barata a conversão do site em aplicativo.

  1. Web2App – Quickest Feature-Rich Android Webview
  2. RocketWeb | Configurable Android WebView App Template
  3. FlyWeb for Web to App Convertor Flutter + Admin Panel

Conclusão

Este artigo mstrou como você pode fornecer acesso às suas páginas Web a partir de um aplicativo Android próprio. A estrutura do WebView permite que você  incorporar um site completo dentro de um aplicativo Android adequando o tamanho e escala em todas as configurações de tela.

No entanto, você não deve desenvolver um aplicativo Android simplesmente como um meio de visualizar seu website. Em vez disso, as páginas Web incorporadas ao seu aplicativo devem ser projetadas especialmente para esse ambiente.

Então, antes verifique se seu site se enquandra no teste de Mobile-friendly que eu mostrei no começo deste artigo.

Gostou? Deixe abaixo suas dúvidas e/ou sugestões.

Leia também