Aula liberada do curso Desvenda e Venda Desvendando o Marketing Digital apresentando a Ferramenta Canva é um mini curso para apresentar uma das ferramenta mais usada por social medias, podendo fazer seu trabalho de uma maneira rápida e organizada.
A cada curso que passa vamos aprendendo na pratica a utilizar essa ferramenta rica em recursos
Então bons estudos e acompanhem as próximas aulas.
(app android aula 16) Escolhendo o’que abre fora e dentro do App Download de arquivo
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
(app android aula 15) Corrigir erro de Recarregar ao Girar
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"
(app android aula 14) Splash Screen Tela de abertura no Android
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:
(app android aula 13) Erro mailto: android Webview
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:
(app android aula 12) Publicar o APP na Play Store
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 !
- Abra o Play Console.
- Selecione Todos os apps > Criar app.
- 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.
- Especifique se o aplicativo é um app ou um jogo. Isso pode ser mudado mais tarde.
- Especifique se o app é sem custo financeiro ou pago.
- Adicione um endereço de e-mail para que os usuários da Play Store possam entrar em contato com você sobre o app.
- 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.
- Selecione Criar app.
(app android aula 11) Icone do App personalizado
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)
(app android aula 10) Nosso aplicativo em tela cheia Full Screen
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
(app android aula 09) Adicionar a um (progress bar) preloader loading… carregando…. preloader
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”
(app android aula 08) Adicionar um (Swipe down to Refresh) puxar pra baixo e atualizar o APP
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”
(app android aula 07) Botão Voltar (BACK) mostrando um alerta ao usuário
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?“
(app android aula 06) Verificando se o usuário está com sinal de Internet
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
(app android aula 05) Conectando o dispositivo via USB no Android Studio
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
(app android aula 04) Colocando o Celular Android para modo Desenvolvedor para testar o APP
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
(app android aula 03) Meu primeiro Aplicativo WebView
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" />
(app android aula 02) Android Studio Criando um Projeto
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
– Abrimos o Android Studio
Depois disso, clicar em New Project!
(app android aula 01) Meu Site é compatível para fazer um APP?
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.