Categoria: aplicativo android

Aula faz parte do curso transformando seu site blog loja virtual em um app e subir no Google Play
Aqui nós fizemos a atualização da versão do nosso app com um upgrade de código que fizemos na aula passada

Anteriormente nos arrumamos o erro de abrir um link de email

agora temos outros problemas como baixar um pdf e ao clicar em qualquer link de propaganda abre fora do app

com umas mudanças no código primeiro colocamos
se a url conter minutoculinaria abre dentro do app
se conter https abre fora do app

agora acrescentamos
se conter pdf abre fora do app e baixa o arquivo

vendo o video ate o final vemos que funciona abrindo programa de email pdf e links

Vamos corrigir mais um erro
quando giramos o aparelho o aplicativo (APP) atualiza (recarrega)
para corrigir esse erro abra o arquivo AndroidManifest.xml
e acrescentar essa linha de código onde mostra a imagem

android:configChanges="orientation|screenLayout|screenSize|keyboardHidden|keyboard"

 

Agora vamos fazer uma Splash Screen Tela de Abertura no Android
No Android Studio clicamos com o botão direito do mouse em drawable depois New e Drawable Resource File

 

damos o nome de abertura (ai e da sua preferência)

OK

Copie o código abaixo e substitua como mostra na imagem

<?xml version="1.0" encoding="utf-8"?>

<!-- The android:opacity=”opaque” line — this is critical in preventing a flash of black as your theme transitions. -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item android:drawable="@color/white"/>
    <item>
        <bitmap
            android:src="@drawable/logo"
            android:gravity="center"/>
    </item>

</layer-list>

ficando assim

Clicamos com o botão direito do mouse em drawable e open in finder estou usando o MAC no Windows pode ser diferente

Navegue até a pasta drawable e coloque nela um sua logo ou a imagem de abertura um arquivo .PNG de 340 x 340 px

Deletar o arquivo telacheia.xml

Abra o arquivo themes.xml e substitua o código abaixo no local onde mostra a imagem

<style name="Theme.MinutoCulinaria" parent="Theme.MaterialComponents.DayNight.NoActionBar">

No mesmo arquivo themes.xml acrescente o código abaixo no local onde mostra a imagem

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:windowContentOverlay">@null</item>

No mesmo arquivo themes.xml acrescente o código abaixo no local onde mostra a imagem

<style name="Theme.MinutoCulinaria.Launcher">
    <item name="android:windowBackground">@drawable/abertura</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:windowContentOverlay">@null</item>
</style>

Faça o mesmo no arquivo themes.xml (night) esses são os temas dia e noite dos aparelhos

————

Abra o mesmo no arquivo AndroidManifest.xml substitua o código abaixo no local onde mostra a imagem

android:theme="@style/Theme.MinutoCulinaria.Launcher">

Ficando assim:

 

 

Ao clicar em um link de e-mail da um erro no webview como mostra abaixo :'(

como arrumar esse erro

ao clicar no link de email abrir o app de email 
aqui no exemplo também colocamos um link de telefone se tiver na pagina tel:

copie o código abaixo e substitua no lugar onde mostra a imagem:

if (url.startsWith("tel:")) {
    Intent tel = new Intent(Intent.ACTION_DIAL, Uri.parse(url));
    startActivity(tel);
    return true;
}
else if (url.contains("mailto:")) {
    view.getContext().startActivity(
            new Intent(Intent.ACTION_VIEW, Uri.parse(url)));
    return true;

}else {
    view.loadUrl(url);
    return true;
}

ficando assim:

Aqui suponhamos que já tenha uma conta de desenvolvedor na Play Store
se não tiver, então crie uma conta de desenvolvedor pague o valor unico e  volte aqui !

1. Abra o Play Console.
2. Selecione Todos os apps > Criar app.
3. Selecione um idioma padrão e adicione o nome do app como você quer que ele apareça no Google Play. Isso pode ser mudado mais tarde.
4. Especifique se o aplicativo é um app ou um jogo. Isso pode ser mudado mais tarde.
5. Especifique se o app é sem custo financeiro ou pago.
6. Adicione um endereço de e-mail para que os usuários da Play Store possam entrar em contato com você sobre o app.
7. Na seção “Declarações”, faça o seguinte:
   • Confirme as declarações das “Políticas do programa para desenvolvedores” e das “Leis de exportação dos EUA”.
   • Aceite os Termos de Serviço da Assinatura de apps do Google Play.
8. Selecione Criar app.

Agora colocaremos nossa logo marca em nosso APP

procurei na internet várias maneiras e nenhuma deu certo, então fiz da minha maneira e funcionou pra mim, se alguém souber o método certo põe nos comentários ai e boa aula

na pasta ic_laucher e ic_launcher_round

Selecionamos os arquivos e deletamos

Vai abrir uma janela de OK

Outra janela e de OK Faça isso nas duas pastas

No Android Studio clique com o botão direito do mouse sobre drawable / New / Image Asset como mostra na imagem

Abrirá essa janela em Asset Type: escolha Image e em Path: escolha a imagem do logo em .PNG em seu computador como mostra na próxima imagem

Escolha a imagem logo .PNG no computador clique em Open

Em Scaling marque Trim como YES

Em BackGround Layer escolha color e escolha a cor de seu gosto

Aqui escolhemos Fundo Branco

Em Icon Type: temos opções de aparelhos Tela de Inicio TV, Notificação, Alerta, Guia, Barra de ações. mudamos todos colocando nosso logo

Após mudar todos clicamos em Next

E depois Finish

Podemos ver a esquerda os ícones e suas resoluções

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

Já podemos ver nosso aplicativo e seu respectivo ícone (sua logo)

Já podemos ver nosso aplicativo e seu respectivo ícone (sua logo)

 

Vamos colocar nosso APP em tela cheia no aparelho

No Android Studio clique com o botão direito do mouse sobre drawable / New / Drawable Resource File como mostra na imagem

Aqui colocamos o nome de telacheia ai vai do seu gosto ai clique em OK

Abra o arquivo telacheia.xml

Copie e substitua esse código ficando como mostra a imagem 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <style name="telacheia" parent="Theme.AppCompat.Light.NoActionBar">

        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowActionBar">false</item>
        <item name="android:windowContentOverlay">@null</item>

    </style>

</resources>

No arquivo AndroidManifest.xml na linha

android:theme="@style/Theme.MinutiCulinaria">

Substitua por

android:theme="@style/telacheia">

ficando assim:

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S

Aqui está nosso aplicativo em tela cheia no aparelho

Agora colocaremos outra função nativa do android um Preloader que mostra que o aplicativo está carregando

no arquivo activity_main.xml copie e cole o bloco de código como mostra a imagem

<ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="55dp"
            android:layout_height="55dp"
            android:indeterminate="false"
            android:max="100"
            android:progress="20"
            android:progressTint="@color/black"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

ficando assim:

No arquivo MainActivity.java copie e cole o codigo onde mostra a imagem abaixo

private ProgressBar progressBar;

ficando assim:

clique na palavra em vermelho para resolver o problema ou na lâmpada e importe a classe

No mesmo arquivo MainActivity.java copie e cole o código onde mostra a imagem abaixo

//preloader
progressBar = (ProgressBar) findViewById(R.id.progressBar);
progressBar.setMax(100);

ficando assim

No mesmo arquivo MainActivity.java copie e substitua o código onde mostra a imagem abaixo

webview = findViewById(R.id.webView);
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setDomStorageEnabled(true);
webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
webview.loadUrl(websiteURL);
webview.setWebViewClient(new WebViewClientDemo());
webview.setWebChromeClient(new WebChromeClientDemo());

ficando assim:

No mesmo arquivo MainActivity.java copie e cole o código onde mostra a imagem abaixo

private class WebViewClientDemo extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        progressBar.setVisibility(View.GONE);
        progressBar.setProgress(100);
        mySwipeRefreshLayout.setRefreshing(false);
    }
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        progressBar.setVisibility(View.VISIBLE);
        progressBar.setProgress(0);
    }

}
private class WebChromeClientDemo extends WebChromeClient {
    public void onProgressChanged(WebView view, int progress) {
        progressBar.setProgress(progress);
    }
}

ficando assim:

clique em todas as palavras em vermelho e importe as classes  ficando assim:

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

Temos o carregador ao carregar o aplicativo “processo de carregamento”

 

Agora colocaremos uma função nativa do android que quando o usuário faz o gesto de Swipe down  puxar para baixo 
para atualizar o aplicativo

no arquivo activity_main.xml copie e cole substituindo o bloco de código como mostra a imagem

<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id="@+id/swipeContainer"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/webView"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        tools:ignore="MissingConstraints" />

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

ficando assim:

coloque o mouse acima da linha em vermelho ou na lâmpada e aparecerá essa solução do erro

clique no azul assim resolvendo o erro ficando assim:

No arquivo MainActivity.java copie e cole o codigo abaixo no local onde mostra a imagem

SwipeRefreshLayout mySwipeRefreshLayout;

ficando assim

clique no vermelho e irá abrir uma janela importe a classe para solucionar o erro

ficando como abaixo

No mesmo arquivo MainActivity.java copie e cole o código abaixo no local onde mostra a imagem

//funcionalidade de Deslizar e atualizar
mySwipeRefreshLayout = (SwipeRefreshLayout)this.findViewById(R.id.swipeContainer);

mySwipeRefreshLayout.setOnRefreshListener(
        new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                webview.reload();
            }
        }
);

ficando assim:

No mesmo arquivo MainActivity.java copie e substitua o código abaixo no local onde mostra a imagem

private class WebViewClientDemo extends WebViewClient {
    @Override
    //Ao clicar em links abrir dentro do app
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return true;
    }
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        mySwipeRefreshLayout.setRefreshing(false);
    }
}

ficando assim

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

No aparelho faça o gesto de puxar “arrastar” pra baixo com o dedo e aparecerá o carregador “loader”

Se você quiser que quando o usuário apertar o botão voltar (BACK) não feche o aplicativo, e sim mostre um alerta
“tem certeza que quer fechar esse app?”

Copie e cole esse código abaixo no lugar onde mostra a imagem abaixo:

//funcionalidade para o botao voltar 
@Override
public void onBackPressed() { //se o usuario apertar o botao voltar
    if (webview.isFocused() && webview.canGoBack()) { //verifique se webview pode voltar
        webview.goBack(); //voltar na webview
    } else { //se nao puder voltar mais....

        new AlertDialog.Builder(this) //alertar o usuario
                .setTitle("Minuto Culinaria")
                .setMessage("tem certeza que quer fechar esse app?")
                .setPositiveButton("Fechar", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                })
                .setNegativeButton("Voltar", null)
                .show();
    }
}

no arquivo MainActivity.java na linha
private class WebViewClientDemo extends WebViewClient antes de fechar a ultima chave }

ficando assim

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

aperte o botão voltar no aparelho e abrirá o alerta “tem certeza que quer fechar esse app?“

Evite essa página 

Para evitar o erro a cima

1. Vamos verificar se o usuário está conectado à Internet ou não
Abra seu arquivo AndroidManifest.xml e coloque esse código no local indicado na imagem!

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

3. Agora Abra seu arquivo MainActivity.java e substitua todo o código abaixo de package como mostrado na imagem!

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.net.ConnectivityManager;
import android.net.NetworkInfo;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String websiteURL = "https://minutoculinaria.com.br/"; // coloque aqui a URL do seu site
    private WebView webview;

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

        if( ! CheckNetwork.isInternetAvailable(this)) //retorna true se tiver sinal de internet
        {
            //se não tiver internet
            setContentView(R.layout.activity_main);
            //Toast.makeText(this,"No Internet Connection, Chris",Toast.LENGTH_LONG).show();

            new AlertDialog.Builder(this) //alertar o usuario
                    .setTitle("Sem conexão com a internet :(")
                    .setMessage("Por favor, verifique se você tem dados móveis ou rede Wifi.")
                    .setPositiveButton("Ok", new DialogInterface.OnClickListener() {
                        @Override
                        public void onClick(DialogInterface dialog, int which) {
                            finish();
                        }
                    })
                    //.setNegativeButton("No", null)
                    .show();

        }
        else
        {
            //Webview stuff
            webview = findViewById(R.id.webView);
            webview.getSettings().setJavaScriptEnabled(true);
            webview.getSettings().setDomStorageEnabled(true);
            webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
            webview.loadUrl(websiteURL);
            webview.setWebViewClient(new WebViewClientDemo());

        }
    }


    private class WebViewClientDemo extends WebViewClient {
        @Override
        //Keep webview in app when clicking links
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }


}

class CheckNetwork {

    private static final String TAG = CheckNetwork.class.getSimpleName();

    public static boolean isInternetAvailable(Context context)
    {
        NetworkInfo info = (NetworkInfo) ((ConnectivityManager)
                context.getSystemService(Context.CONNECTIVITY_SERVICE)).getActiveNetworkInfo();

        if (info == null)
        {
            Log.d(TAG,"no internet connection");
            return false;
        }
        else
        {
            if(info.isConnected())
            {
                Log.d(TAG," internet connection available...");
                return true;
            }
            else
            {
                Log.d(TAG," internet connection");
                return true;
            }

        }
    }
}

Agora se o usuário não estiver conectado a Internet aparecerá um aviso
“Por favor, verifique se você tem dados móveis ou rede Wifi“.

Agora vamos testar

No aparelho celular desligue wifi e dados móveis

 

No Android Studio aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

ao abrir o aplicativo também abrirá um aviso

até a próxima aula

Executar em um dispositivo real aqui um Motorola Moto E6S
Conecte o dispositivo à máquina de desenvolvimento com um cabo USB com o Android Studio Aberto

Irá abrir uma alerta de Permissão de Depuração USB
– marque também sempre permitir esse computador e de OK

No Android Studio

Já aparece seu aparelho aqui é um Motorola Moto E6S

Aperte o play ao lado do modelo do aparelho Motorola Moto E6S 

Aqui está nosso site dentro de um APP instalado no nosso aparelho

Nesse exemplo estamos usando um Motorola Moto E6S
Abra o app Configurar (simbolo engrenagem)

Depois Sistema

Depois Avançado

Clique sete vezes sobre Sobre o Telefone até aparecer uma mensagem agora vc e um desenvolvedor

Agora vá até Opções do desenvolvedor

E Habilite a Depuração USB

Permita em OK

 

1. Abra seu arquivo Activity_Main.xml e substitua por esse bloco de código o local mostrado na imagem abaixo
isso irá substituir o textview por um webview

<WebView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:id="@+id/webView"
    android:layout_alignParentTop="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true"
    tools:ignore="MissingConstraints" />

2. Abra o arquivo MainActivity.java e substitua por esse bloco de código o local mostrado na imagem abaixo menos a linha package

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    String websiteURL = "https://minutoculinaria.com.br/"; //  coloque aqui a URL do seu site
    private WebView webview;

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

        //Webview stuff
        webview = findViewById(R.id.webView);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.getSettings().setDomStorageEnabled(true);
        webview.setOverScrollMode(WebView.OVER_SCROLL_NEVER);
        webview.loadUrl(websiteURL);
        webview.setWebViewClient(new WebViewClientDemo());

    }

    private class WebViewClientDemo extends WebViewClient {
        @Override
        //Ao clicar em links abrir dentro do app
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            return true;
        }
    }

}

3. Em seguida, insira a URL do site no espaço marcado abaixo

4. Solicitando permissão de Internet, abra o arquivo AndroidManifest.xml  e cole o código abaixo conforme mostrado na imagem !

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

Aqui já deduzimos que tenha o Android Studio Instalado
caso não tenha baixe nesse link
https://developer.android.com/studio

(se precisar deixa ai nos comentários que eu faço um video aula como instalar o Android Studio)

Criando um Projeto

Primeiro passo para transformarmos nosso site em um aplicativo para Google Play
é saber se ele e compatível mobile friendly
para isso nos vamos ate esse site
https://search.google.com/test/mobile-friendly
se conseguiu passar no teste vamos pra próxima aula.
se não, faça seu site virar mobile friendly e volte nesse ponto.