• Thu, Dec 2024
FECHAR

Sugerido:

Ciência e Tecnologia

Como criar um aplicativo para Android usando WebView que carrega um site diretamente no app

Por Kaio Lima 02 Nov, 2024 59 minutos de leitura 707 visualizações
0 comentários 0 curtidas
Como criar um aplicativo para Android usando WebView que carrega um site diretamente no app

Vou te ajudar a criar um aplicativo básico para Android usando WebView que carrega um site diretamente no app.

Vou te ajudar a criar um aplicativo básico para Android usando WebView que carrega um site diretamente no app.

Aqui está um guia passo a passo:

Índice [Mostrar]

1. Configuração inicial

  • Crie um novo projeto no Android Studio.
  • Escolha o tipo de projeto como "Empty Activity" e siga os passos iniciais.

2. Permissão para acessar a internet

  • No arquivo AndroidManifest.xml, adicione a permissão de internet para que o aplicativo possa carregar páginas da web:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.webviewapp">

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

    <application
        android:label="WebView App"
        android:theme="@style/Theme.AppCompat.Light.DarkActionBar">
        <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>

 

3. Layout com WebView

  • No arquivo activity_main.xml, adicione um componente WebView para carregar o site:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

 

4. Configurar o WebView no código Java/Kotlin

  • No arquivo MainActivity.java ou MainActivity.kt, configure o WebView para carregar o URL desejado.

Exemplo em Java:

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        WebView webView = findViewById(R.id.webView);

        // Configurações do WebView
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true); // Habilita JavaScript, se necessário

        // Carrega o URL dentro do WebView
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl("https://www.exemplo.com"); // Insira a URL desejada aqui
    }
}

 

Exemplo em Kotlin:

import android.os.Bundle
import android.webkit.WebSettings
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val webView: WebView = findViewById(R.id.webView)

        // Configurações do WebView
        webView.settings.javaScriptEnabled = true

        // Carrega o URL dentro do WebView
        webView.webViewClient = WebViewClient()
        webView.loadUrl("https://www.exemplo.com") // Insira a URL desejada aqui
    }
}

 

5. Configurações adicionais

  • Habilitar JavaScript: Caso o site precise de JavaScript para funcionar corretamente, ele foi habilitado na configuração acima.
  • Abrir links no WebView: Usamos WebViewClient para garantir que todos os links abram dentro do próprio app.

Pronto! Agora seu aplicativo Android com WebView está configurado para carregar uma página da web diretamente no app.

 

Sugestões de Próximos Passos

a. Adicionar um sistema de navegação, como botões para "Voltar" e "Avançar" no navegador.
b. Implementar tratamento de erros, como exibir mensagens quando não houver conexão à internet.

A. Adicionar Navegação com Botões "Voltar" e "Avançar"

Para adicionar uma navegação básica, você pode criar botões para "Voltar" e "Avançar" na interface e configurar o WebView para responder a esses botões.

Passos:

  1. Modificar o layout (activity_main.xml) para incluir botões "Voltar" e "Avançar":
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/navigationLayout" />

    <LinearLayout
        android:id="@+id/navigationLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:background="#E0E0E0"
        android:padding="8dp">

        <Button
            android:id="@+id/buttonBack"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Voltar" />

        <Button
            android:id="@+id/buttonForward"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Avançar" />
    </LinearLayout>
</RelativeLayout>

Configurar os botões no código (MainActivity.java ou MainActivity.kt):

Em Java:

import android.os.Bundle;
import android.view.View;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

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

        webView = findViewById(R.id.webView);
        webView.setWebViewClient(new WebViewClient());
        webView.getSettings().setJavaScriptEnabled(true);
        webView.loadUrl("https://www.exemplo.com");

        findViewById(R.id.buttonBack).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (webView.canGoBack()) {
                    webView.goBack();
                }
            }
        });

        findViewById(R.id.buttonForward).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (webView.canGoForward()) {
                    webView.goForward();
                }
            }
        });
    }
}

Em Kotlin:

import android.os.Bundle
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        webView.webViewClient = WebViewClient()
        webView.settings.javaScriptEnabled = true
        webView.loadUrl("https://www.exemplo.com")

        findViewById<Button>(R.id.buttonBack).setOnClickListener {
            if (webView.canGoBack()) {
                webView.goBack()
            }
        }

        findViewById<Button>(R.id.buttonForward).setOnClickListener {
            if (webView.canGoForward()) {
                webView.goForward()
            }
        }
    }
}

 

B. Implementar Tratamento de Erros

Para mostrar uma mensagem caso não haja conexão com a internet ou ocorra um erro ao carregar a página, configure um WebViewClient customizado.

  1. Adicionar o código de tratamento de erros:

    Em Java:

    import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    //... código anterior

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //... código de configuração anterior do WebView

        // Adiciona o tratamento de erros
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                Toast.makeText(MainActivity.this, "Erro ao carregar a página", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebViewClient.WebResourceError error) {
                Toast.makeText(MainActivity.this, "Erro ao carregar a página", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Em Kotlin:

import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    //... código anterior

    override fun onCreate(savedInstanceState: Bundle?) {
        //... código de configuração anterior do WebView

        // Adiciona o tratamento de erros
        webView.webViewClient = object : WebViewClient() {
            override fun onReceivedError(view: WebView, errorCode: Int, description: String, failingUrl: String) {
                Toast.makeText(this@MainActivity, "Erro ao carregar a página", Toast.LENGTH_SHORT).show()
            }

            override fun onReceivedError(view: WebView, request: WebResourceRequest, error: WebResourceError) {
                Toast.makeText(this@MainActivity, "Erro ao carregar a página", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

 

Agora, seu app exibe uma mensagem de erro ao usuário se houver um problema de carregamento ou conexão com a página da web.

Para criar uma página de erro personalizada para o caso de ausência de conexão no WebView, você pode exibir uma página HTML customizada com uma mensagem amigável. Aqui estão os passos:

Passos para Implementar Página de Erro Personalizada

  1. Criar uma Página HTML de Erro Local:

    • Adicione um arquivo HTML de erro dentro da pasta assets, para que o WebView possa carregá-la quando houver erro de conexão.

    Passo: No seu projeto, crie uma pasta assets dentro do diretório src/main. Nela, crie um arquivo chamado error_page.html com o conteúdo abaixo:

    <!-- src/main/assets/error_page.html -->
<html>
<head>
    <title>Erro de Conexão</title>
    <style>
        body { 
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            color: #333;
            background-color: #f4f4f4;
            text-align: center;
        }
        h1 { color: #e74c3c; }
        p { font-size: 18px; }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 16px;
            color: white;
            background-color: #3498db;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover { background-color: #2980b9; }
    </style>
</head>
<body>
    <div>
        <h1>Ops! Sem Conexão</h1>
        <p>Não foi possível carregar a página. Verifique sua conexão com a internet e tente novamente.</p>
        <button onclick="location.reload();">Tentar Novamente</button>
    </div>
</body>
</html>

 

Carregar a Página de Erro no WebView:

  • No MainActivity, modifique o WebViewClient para carregar essa página HTML local quando houver um erro de conexão.
  • Java:
import android.os.Bundle;
import android.webkit.WebResourceRequest;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {
    private WebView webView;

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

        webView = findViewById(R.id.webView);
        webView.getSettings().setJavaScriptEnabled(true);

        // Define o WebViewClient
        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                view.loadUrl("file:///android_asset/error_page.html");
            }

            @Override
            public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                view.loadUrl("file:///android_asset/error_page.html");
            }
        });

        // Carrega o URL desejado
        webView.loadUrl("https://www.exemplo.com");
    }
}

 

Kotlin:

import android.os.Bundle
import android.webkit.WebResourceError
import android.webkit.WebResourceRequest
import android.webkit.WebView
import android.webkit.WebViewClient
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {
    private lateinit var webView: WebView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        webView = findViewById(R.id.webView)
        webView.settings.javaScriptEnabled = true

        // Define o WebViewClient
        webView.webViewClient = object : WebViewClient() {
            override fun onReceivedError(view: WebView, errorCode: Int, description: String, failingUrl: String) {
                view.loadUrl("file:///android_asset/error_page.html")
            }

            override fun onReceivedError(view: WebView, request: WebResourceRequest, error: WebResourceError) {
                view.loadUrl("file:///android_asset/error_page.html")
            }
        }

        // Carrega o URL desejado
        webView.loadUrl("https://www.exemplo.com")
    }
}

 

  1. Explicação do Funcionamento
    • Quando ocorre um erro de carregamento de página, como uma falha de conexão, o WebViewClient chama o método onReceivedError.
    • Dentro desse método, usamos view.loadUrl("file:///android_asset/error_page.html"); para carregar a página de erro HTML salva nos assets.
    • A página HTML exibe uma mensagem informando o usuário sobre a falta de conexão e oferece um botão "Tentar Novamente" para recarregar a página.

Agora, quando o dispositivo estiver offline ou houver um erro de carregamento, o usuário verá uma página personalizada informando sobre a ausência de conexão.

 
Kaio Lima

Kaio Lima

Categorias