De jogos a agendar suas vidas, as pessoas usam seus telefones e os aplicativos nele contidos para todos os tipos de atividades. Uma das ferramentas mais poderosas disponíveis para os desenvolvedores de tais aplicativos é a capacidade de carregar e buscar dinamicamente páginas e informações da web. Este guia explicará como configurar o Android Studio, bem como construir um navegador da web simples do zero, que pode carregar páginas da web, atualizar e usar um menu de favoritos simples. Este guia aprenderá os fundamentos da criação de aplicativos Android e é um excelente ponto de partida antes de colocar a mão na massa em modelos de aplicativos Android mais avançados disponíveis no Clube do Script.

Instalando o Android Studio

Primeiramente, instalar o Android Studio é uma tarefa simples. Usando o seguinte link: [ https://developer.android.com/studio ] selecione “Download Android Studio”. Em seguida, escolha o local a ser instalado para garantir que ele tenha uma boa quantidade de espaço, pois todos os aplicativos criados nele, bem como os emuladores de dispositivos Android que serão explicados no final do guia, serão armazenados lá.

Depois que o Android Studio for instalado e aberto, você verá uma mensagem de boas-vindas solicitando a criação de um novo projeto. Vá em frente e aceite essa oferta e, em seguida, selecione para criar uma atividade vazia e, em seguida, preencha com um título e um local. Certifique-se de selecionar Java quando solicitado a selecionar um idioma e usaremos a API 15: Android 4.0.3 (IceCreamSandwich) para nosso nível mínimo de API, conforme demonstrado nas imagens. Em seguida, selecione Concluir.

Desenvolvendo o aplicativo WebView

Agora que o Android Studio está funcionando, você deve se encontrar na página de destino cheia de menus, pequenos ícones e outros recursos intimidadores. Não se preocupe, vamos superar isso. Lembre-se de que, mesmo quando a página de destino está aberta, o Android Studio ainda pode estar criando alguns arquivos necessários que podem alterar o layout da visualização da barra lateral. Portanto, para evitar que os itens pulem enquanto você tenta trabalhar com eles, dê ao aplicativo alguns minutos antes de passar para a próxima etapa.

Passo 1 – Esquema

A primeira coisa que precisa ser feita é deixar o layout da aplicação correto, então navegue até o ‘activity_main.xml’. Ele deve estar na barra superior por padrão, mas se não estiver, pode ser encontrado navegando pela barra lateral em “app > res > layout > activity_main.xml” conforme demonstrado pela imagem à direita.

O que eu quero que você observe nesta página é o layout do arquivo xml. O texto dourado define um Layout restrito que contém o aplicativo inteiro. Depois que as configurações iniciais são definidas para o layout restrito, há um TextView dentro dele que possui toda uma série de configurações próprias, incluindo ‘android:text=”Hello World!”’, que é o que controla qual texto é exibido no página do aplicativo atual. Embora TextViews sejam ferramentas muito úteis, o que precisamos fazer neste estágio é apagar tudo relacionado à exibição de texto. Na imagem de exemplo, são as linhas 9 -16. Para que o texto se assemelhe à imagem aqui.

No espaço deixado pelo TextView vamos criar dois layouts lineares aninhados. Um layout linear é um contêiner que organiza seu conteúdo horizontalmente ou verticalmente um ao lado do outro de maneira linear. Para criar um, clique na linha 9 como na imagem. Em seguida, pressione tab uma vez para criar um recuo e digite “<LinearLayout” O Android Studio tentará preencher automaticamente a seção para você. Depois de digitar “<LinearLayout” basta pressionar enter e a seção será criada para você. Ele preencherá seu layout com duas configurações, “layout_width” e “layout_height”. Para ambos, digite “match_parent”. Após a configuração “layout_height” deve haver o seguinte texto “></LinearLayout>”. Isso indica o fim do elemento que você acabou de criar. Então coloque o cursor entre o “>” e “< ” e pressione enter para expandir o layout para que ele possa conter o elemento dentro dele. Nesta seção, pressione tab mais uma vez para obter um nível adicional de recuo e crie outro layout linear exatamente como antes, exceto com “layout_height” definido como “40dp”. Depois de terminar, sua página deve se parecer com a imagem a seguir.

Depois que seus layouts lineares estiverem configurados, precisamos adicionar algumas configurações a cada um deles. Começando com o primeiro que você criou, entre as outras configurações do Android, precisamos ver ‘android:orientation=”vertical”’. 

Isso controla a maneira como os itens dentro do layout linear são organizados. Após essa linha, insira ‘android:id=”@+id/outsideLinearLayout”’ que dará a todo o container o id de “outsideLinearLayout” para encontrarmos no código Java mais tarde. O mesmo precisará ser feito para o segundo layout com algumas diferenças. Em primeiro lugar, a orientação precisará ser definida como ‘horizontal’ em vez de ‘vertical’ e o id será ‘topLinearLayout’. [PS: Sinta-se à vontade para definir os IDs como quiser, no entanto, se você seguir o que estou usando, será um pouco mais fácil garantir que seu código Java esteja configurado corretamente na etapa seguinte]

Agora é isso, seus layouts lineares estão completamente prontos, não tocaremos neles novamente. Parabéns, mas agora vem a parte mais interessante. Vamos adicionar outros 3 elementos ao arquivo xml.

Visualização da imagem: Contida no segundo tipo de layout linear “<ImageView” e pressione enter. O Android Studio irá completá-lo automaticamente, como fez com os elementos de layout. Para layout_height e layout_width, queremos novamente “match_parent” para ambos os campos. Logo abaixo dessas configurações, adicionaremos mais 3 linhas: ‘android:layout_weight=”0.9”’, ‘android:id=”@+id/iconView”’, ‘android:src=”@mipmap/ic_launcher”. O valor do peso decidirá a importância da visualização da imagem. Queremos que esteja sempre presente e ocupe todo o espaço necessário. Esta será a visualização do nosso ícone de cada página visitada pelo webview. O valor src controla a imagem padrão que será exibida na visualização da imagem, estamos usando uma biblioteca de imagens comum e obtendo um ícone simples do Android que será substituído por qualquer página da Web que visitarmos.

Barra de Progresso: Logo abaixo da Visualização da Imagem, digitaremos “<ProgressBar” e pressionaremos enter. Novamente, os tamanhos serão definidos como “match_parent” e, assim como a visualização da imagem, adicionaremos alguns valores às configurações: ‘android:layout_weight=”0.1”’, ‘android:id=”topProgressBar”’, ‘style= ”@style/Widget.AppCompat.ProgessBar.Horizontal”’. Tenho certeza de que o estilo parece um pouco estranho, mas é semelhante a obter o ‘src’ do Image View. Ele examina os estilos comuns da barra de progresso e localiza o estilo horizontal que faz com que a barra aumente ao longo da página à medida que as páginas da Web são carregadas.

Visualização da Web: nós conseguimos, o motivo de você estar aqui. Abaixo do segundo Linear Layout inteiramente (mas ainda dentro do primeiro), digite “<WebView” e pressione Enter. Este é realmente bastante simples de configurar nesta página.

Para altura e largura coloque “match_parent” e então crie um campo de id como este: ‘android:id=”@+id/mainWebView”’ e acredite ou não, isso é tudo que teremos que fazer nesta página.

Eu entendo que isso pode ter parecido muito, mas para referência, sua página activity_main agora deve se parecer com a imagem a seguir.

Passo 2 – Java:

Por enquanto, terminamos com os elementos de layout. É hora de passar do arquivo ‘activity_main.xml’ para o arquivo ‘MainActivity.java’. Como visto em algumas das imagens anteriores que devem aparecer por padrão na barra superior ao lado do arquivo ‘activity_main’. Caso contrário, o arquivo pode ser encontrado navegando pela barra lateral em “app > java > com.example.beginnerwebview > MainActivity.java”. Lembre-se de que ‘com.example.beginnerwebview’ é o nome do pacote que configuramos no início do tutorial e pode ser um nome diferente para você.

No arquivo MainActivity, primeiro precisamos estabelecer uma conexão com os elementos Layout que criamos no arquivo xml. Para isso, encontre a linha que diz ‘public class MainActivity extends AppCompatActivity’ e após esta linha crie uma seção onde estabeleceremos as variáveis ​​que apontarão para os elementos em activity_main. Entre a linha mencionada e o primeiro ‘@Override’ adicione o seguinte:
LinearLayout outsideLinearLayout, topLinearLayout;

ImageView iconView;

ProgressBar barra de progresso;

WebView mainWebView;

À medida que você cria cada uma dessas linhas, deve receber uma solicitação para importar as bibliotecas associadas, basta pressionar Enter para aceitar, mas se isso não for oferecido, as instruções de importação serão destacadas em amarelo na imagem à esquerda.

Para terminar de fazer ponteiros para nossos elementos activity_main, precisaremos trabalhar dentro do método ‘onCreate’. Após a linha ‘setContentView(R.layout.activity_main);’ adicione o seguinte para terminar pontiagudo (destacado em laranja na imagem):

outsideLinearLayout = findViewById(R.id.outsideLinearLayout);

topLinearLayout = findViewById(R.id.topLinearLayout);

iconView = findViewById(R.id.iconView);

progressBar = findViewById(R.id.topProgressBar);

mainWebView = findViewById(R.id.mainWebView);

Lembre-se de que os valores após ‘R.id.’ são os nomes que demos aos elementos de layout em activity_main.

Feito isso, precisamos fazer algumas configurações iniciais para que nossa visualização na web funcione corretamente. Portanto, ainda dentro do método onCreate, mas abaixo das outras linhas que adicionamos, adicionaremos algumas linhas de código para inicializar as coisas corretamente:

progressBar.setMax(100);

mainWebView.loadUrl( https://www.google.com/ );

mainWebView.getSettings().setJavaScriptEnabled(true);

mainWebView.setWebViewClient(new WebViewClient());

mainWebView.setWebChromeClient(new WebChromeClient());

Sinta-se à vontade para definir o valor .loadUrl para qualquer página inicial que desejar. Vou usar google.com para simplificar.

Para terminar este lote atual de codificação Java, precisamos editar o novo WebChromeClient que você criou para fornecer as informações necessárias aos nossos elementos de layout. Então volte para a linha ‘mainWebView.setWebChromeClient(new WebChromeClient());’ e bem no final entre os dois parênteses finais (então entre ‘()’ e ‘);’) crie um colchete aberto e fechado (‘{}’) e pressione enter para ir para uma nova linha entre eles. Nesta seção recém-criada, pressione ‘Ctrl+O’. Isso abrirá uma nova janela chamada ‘Selecionar métodos para substituir/implementar’, selecionaremos três deles:

‘onProgressChanged’

‘onReceivedTitle’

‘onReceivedIcon’

Não importa em que ordem você seleciona esses três, mas escolha todos eles pressionando Ctrl+clique neles e pressione ‘OK’. Agora que eles foram criados, vamos passar por eles um de cada vez e adicionar as linhas necessárias. Começando com ‘onProgressChanged’, dentro do método, logo após a linha que diz ‘super.onProgressChanged(view, newProgress);’ crie uma nova linha com o seguinte texto, ‘progressBar.setProgress(newProgress);’ Este método será chamado toda vez que uma página for carregada e atualizará dinamicamente o nível exibido por nossa barra de progresso. Agora em ‘onReceivedIcon’ novamente como uma nova linha na parte inferior, adicione o seguinte, ‘iconView.setImageBitmap(icon);’. Com essa linha em vigor, toda vez que o cliente chrome obtiver uma nova página da Web, ele fornecerá o ícone associado dessa página ao nosso elemento iconView. Finalmente, em ‘onReceivedTitle’ na mesma posição relativa dos outros dois, adicione a linha ‘getSupportActionBar().setTitle(title);’ Isso mudará o título do nosso visualizador da web para o título da página da web atual conforme ele é carregado.

E é isso por enquanto. Voltaremos ao código java, mas por enquanto dê um tapinha nas costas bem merecido, temos mais um passo muito pequeno e então teremos nossa primeira demonstração em execução.

Passo 3 – Permissões e Demonstração

Precisamos encontrar um novo arquivo em nossa barra lateral novamente. Comece acessando “app > manifests > AndroidManifest.xml”. Este arquivo controla as permissões que nosso aplicativo receberá durante sua execução. Vamos adicionar apenas três linhas a esta página e então você pode esquecer que já a viu, porque será isso. Encontre o ‘>’ na terceira linha desta página e coloque o cursor depois dele. Pressione enter para criar uma nova seção aberta entre essa linha e a linha que começa com ‘<aplicativo’. Nesta área vamos inserir o seguinte:

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

<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE”/>

<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE”/>

Com elas instaladas, agora temos todas as permissões necessárias para o restante deste programa concluído.

Agora, para ver uma demonstração do aplicativo, clique no botão play verde no canto superior direito da janela. Isso abrirá uma nova janela intitulada ‘Selecionar destino de implantação’. Sua seleção provavelmente estará vazia, mas vamos corrigir isso. Perto da parte inferior desta nova janela, clique no botão intitulado ‘Criar novo dispositivo virtual’, que abrirá outra nova janela (última com certeza) intitulada ‘Configuração do dispositivo virtual’. Certifique-se de que a seção de categoria à esquerda esteja definida como ‘Telefone’ e role para qualquer dispositivo Android que deseja emular. Vou usar um Pixel, mas todos devem funcionar. Depois de selecioná-lo, clique em Avançar.

Na nova página fornecida, você será solicitado a selecionar uma imagem do sistema. Os detalhes não são muito importantes, mas você escolherá entre alguns lançamentos diferentes, continuarei com o Q porque é o mais atualizado no momento em que escrevo. Portanto, certifique-se de pressionar ‘Download’ ao lado do nome do lançamento e aguarde o término, destaque o lançamento e clique em Avançar mais uma vez.

Na página seguinte, você terá a opção de alterar o nome deste Android Virtual Device (AVD), se desejar. No entanto, isso não é necessário. Basta clicar em Concluir no canto inferior direito para prosseguir.

Agora, de volta à tela Select Deployment Target, você deve ver o novo dispositivo virtual disponível. Selecione-o e clique em OK. Aguarde algum tempo para implantar, pois a execução de um emulador de um dispositivo totalmente novo pode exigir muito do processador e, em seguida, será necessário instalar o novo aplicativo que você acabou de criar. Depois de alguns minutos, no entanto, você deve ver a tela do telefone com seu novo aplicativo WebView em execução, mostrando google.com ou qualquer página da web que você incluiu como sua página de destino com o título da página na barra superior e à esquerda e o ícone e barra de progresso localizados logo abaixo. Parabéns. Porque agora passamos para as coisas divertidas.

Etapa 4 – Funcionalidade adicional

Portanto, seu WebView funciona. Ótimo, mas é um pouco chato não? Nesta etapa, vamos adicionar algumas funcionalidades ao que já existe. Começando por configurar a barra de progresso para ser exibida apenas quando a página estiver realmente carregando, afinal não precisamos saber que a página está 100% o tempo todo. Em seguida, habilitaremos a atualização da página quando o usuário do telefone deslizar para cima quando a página já estiver rolada para o topo. Além disso, se você pressionar o botão voltar no momento em que o aplicativo de visualização da web simplesmente fechar, adicionaremos algumas funcionalidades que permitirão que o aplicativo volte para a página anterior visitada quando voltar for pressionado e feche o aplicativo apenas uma vez o usuário está de volta onde começou e pressiona novamente. Por fim, podemos querer baixar algo no novo navegador em algum momento,

Visibilidade da barra de progresso

É hora de voltar ao código Java. Lembra como expandimos o novo WebChromeClient adicionando colchetes abertos e fechados? Porque é isso que estamos fazendo novamente para o WebViewClient uma linha acima. Adicione os colchetes abertos e fechados entre os dois parênteses finais e expanda.

Quando estiver na nova seção que você criou, pressione Ctrl-O novamente para abrir a página Selecionar métodos para substituir/implementar. As duas funções que estamos procurando são onPageStarted e onPageFinished. Selecione ambos e pressione ‘OK’. Dessas duas novas funções, ‘onPageStarted’ é executado sempre que a página que você está acessando está sendo carregada no momento e ‘onPageFinished’ é executado quando o carregamento é concluído. Então, começando com onPageStarted, coloque a seguinte linha: ‘topLinearLayout.setVisibility(view.VISIBLE);’

Isso tornará toda a barra superior da página visível quando a página for buscada pela primeira vez. Em onPageFinished, coloque exatamente a mesma linha, exceto em vez de view.VISIBLE, coloque ‘view.INVISIBLE’, que ocultará a barra superior quando a página terminar de carregar. O que vamos conseguir é um efeito visual bastante legal, onde a barra desce do topo da página quando uma página é solicitada pela primeira vez, preenche a barra de carregamento conforme a página está carregando e depois se esconde depois que a página termina carregando.

SwipeRefresh

Um recurso que você vê com muita frequência em navegadores móveis é a capacidade de rolar para cima mesmo quando o navegador está na parte superior da página para fazer com que a página seja atualizada. Faz sentido para nós implementar esse recurso em nosso pequeno aplicativo, então vamos ver como fazer isso. Começando com activity_main.xml, é aqui que você cria o layout geral da página. Na linha superior, substituiremos o texto que define o Layout restrito (isto é: ‘<androidx.constainedlayout.widget.ConstrainLayout’) por ‘<androidx.swiperefreshlayout.widget.SwipeRefreshLayout’. Observe que é importante substituir apenas o texto especificado e nada mais. Bem na parte inferior da página agora deve haver uma tag de fechamento para o layout restrito ‘</androidx.constrainlayout.widget.ConstrainLayout>’ substitua também por: ‘< /androidx.swiperefreshlayout.widget.SwipeRefreshLayout>’ para fechar o layout corretamente. Agora, para finalizar a página .xml, logo abaixo da tag open, precisamos criar um ID para o SwipeRefreshLayout. Eu irei com ‘android:id=”@+id/swipeRefreshLayout”’.

Infelizmente, isso não resolve tudo o que precisamos fazer, no entanto, terminamos com ‘activity_main.xml’ por mais um bom tempo. Por enquanto, volte para MainActivity.java. Nesta página, criaremos um novo ponteiro variável, assim como fizemos antes para nossos elementos de layout, apenas este será para um SwipeRefreshLayout. Então, perto do topo da página, crie uma variável SwipeRefreshLayout (a minha é chamada de ‘swipeRefreshLayout’ porque não sou criativo). Em seguida, no método onCreate, aponte para o elemento de layout usando ‘findViewById’, assim como fizemos para os outros elementos. A última coisa que precisamos fazer para que a atualização de deslizamento funcione é adicionar uma linha no código java ‘swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {});’

Isso deve parecer familiar desde quando criamos os recursos de visualização da web. De qualquer forma, coloque algumas novas linhas entre o ‘{}’ e pressione Ctrl-O, na tela Methods to Override/Implement, estamos procurando o método ‘onRefresh();’. No método onRefresh criado adicione a seguinte linha: ‘mainWebView.reload();’ e com isso concluído, a tela deve ser atualizada ao rolar acima da parte superior da página da web.

No entanto, se você tentar, notará que, uma vez que a página começa a ser atualizada, a roda giratória nunca desaparece. Um pouco de descuido da função, na minha opinião, mas podemos consertar. Você precisa encontrar o novo WebViewClient que construímos antes e ir para o método onPageFinished. Vá logo abaixo do método ‘topLinearLayout.setVisibility’ e digite a seguinte linha: ‘swipeRefreshLayout.setRefreshing(false);’. Isso permitirá que a roda giratória desapareça depois que a página for atualizada.

Voltar para voltar

Como mencionado acima, no momento, se você iniciar o aplicativo e pressionar o botão ‘voltar’ no telefone, o que aconteceria é que o aplicativo fecharia completamente. Isso não é o ideal, pois gostaríamos de poder usá-lo para ir para a página anterior visitada. Vamos consertar isso.

Permaneça dentro do código Java e role para baixo. Tudo o que fizemos até agora envolveu entrar no método onCreate. Desta vez, porém, iremos abaixo desse método (embora ainda dentro da MainActivity). Na parte inferior da página java deve haver dois ‘}’, o primeiro tabulado uma vez e o segundo contra o lado esquerdo da janela. Depois da primeira, então entre as duas, crie uma nova linha e aperte Ctrl-O. O método que estamos procurando aqui é chamado ‘onBackPressed’ e está na categoria ‘androidx.fragment.app.FragmentActivity’. Ao encontrá-lo, pressione ‘OK’. Este método será chamado toda vez que o usuário pressionar o botão voltar enquanto o aplicativo estiver aberto. Atualmente, a única linha que ele contém é ‘super.onBackPressed();’ que basicamente diz para usar apenas a funcionalidade padrão do botão Voltar. Estaremos mantendo essa linha, mas vinculando-a em uma declaração ‘if..else..’. Portanto, antes dessa linha, digite o seguinte ‘if(mainWebView.canGoBack()) {‘ e pressione enter. Dentro das chaves, insira ‘mainWebView.goBack();’. Isso informa ao código que cada vez que o botão Voltar for pressionado, antes de fechar o aplicativo, primeiro verifique se o navegador da Web possui páginas em seu histórico. Se sim, volte uma página. Para impedir que o aplicativo feche ao reconhecer isso, vá para o ‘}’ após a instrução if e digite ‘else {‘ e pressione enter. Coloque ‘super.onBackPressed();’ neste método. Isso impedirá que o código execute a funcionalidade padrão, a menos que você volte para a primeira página do navegador. volte();’. Isso informa ao código que cada vez que o botão Voltar for pressionado, antes de fechar o aplicativo, primeiro verifique se o navegador da Web possui páginas em seu histórico. Se sim, volte uma página. Para impedir que o aplicativo feche ao reconhecer isso, vá para o ‘}’ após a instrução if e digite ‘else {‘ e pressione enter. Coloque ‘super.onBackPressed();’ neste método. Isso impedirá que o código execute a funcionalidade padrão, a menos que você volte para a primeira página do navegador. volte();’. Isso informa ao código que cada vez que o botão Voltar for pressionado, antes de fechar o aplicativo, primeiro verifique se o navegador da Web possui páginas em seu histórico. Se sim, volte uma página. Para impedir que o aplicativo feche ao reconhecer isso, vá para o ‘}’ após a instrução if e digite ‘else {‘ e pressione enter. Coloque ‘super.onBackPressed();’ neste método. Isso impedirá que o código execute a funcionalidade padrão, a menos que você volte para a primeira página do navegador.

Gerenciador de download

Supondo que você realmente queira usar o navegador da web para, você sabe, navegar na web, ocasionalmente você terá que baixar algo. Aqui, veremos rapidamente como permitir que o aplicativo de visualização da Web lide com uma solicitação de download.

No código Java, vá para a parte inferior do método onCreate, onde criamos o novo WebChromeClient. Depois disso, adicione uma nova linha ‘mainWebView.setDownloadListener(new DownloadListener() {});’. Já estamos fazendo isso há algum tempo, você sabe o que está para acontecer. Depois de digitar essa linha, ele deve abrir automaticamente os colchetes e adicionar uma função de substituição chamada ‘onDownloadStart’, mas se isso não acontecer, abra você mesmo os colchetes e pressione Ctrl + O e encontre a função na janela. Dentro dos colchetes para ‘onDownloadStart’ adicione a seguinte linha, ‘DownloadManager.Request currRequest = new DownloadManager.Request(Uri.parse(s));’. É possível que ‘DownloadManager’ e ‘Uri’ apareçam em vermelho, isso significa apenas que as funções não foram importadas. Clique neles e pressione Alt+Enter para importar automaticamente as bibliotecas necessárias. Isso criará um objeto que podemos manipular contendo a solicitação de download enviada pela página da web. Para nossa próxima linha, digite ‘currRequest.allowScanningByMediaScanner();’. Essa linha é opcional, mas garante que, ao baixar arquivos de mídia, como áudio e vídeo, os arquivos sejam listados no reprodutor de mídia nativo. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Isso criará um objeto que podemos manipular contendo a solicitação de download enviada pela página da web. Para nossa próxima linha, digite ‘currRequest.allowScanningByMediaScanner();’. Essa linha é opcional, mas garante que, ao baixar arquivos de mídia, como áudio e vídeo, os arquivos sejam listados no reprodutor de mídia nativo. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Isso criará um objeto que podemos manipular contendo a solicitação de download enviada pela página da web. Para nossa próxima linha, digite ‘currRequest.allowScanningByMediaScanner();’. Essa linha é opcional, mas garante que, ao baixar arquivos de mídia, como áudio e vídeo, os arquivos sejam listados no reprodutor de mídia nativo. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Para nossa próxima linha, digite ‘currRequest.allowScanningByMediaScanner();’. Essa linha é opcional, mas garante que, ao baixar arquivos de mídia, como áudio e vídeo, os arquivos sejam listados no reprodutor de mídia nativo. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Para nossa próxima linha, digite ‘currRequest.allowScanningByMediaScanner();’. Essa linha é opcional, mas garante que, ao baixar arquivos de mídia, como áudio e vídeo, os arquivos sejam listados no reprodutor de mídia nativo. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real. Agora que temos a solicitação de download e a capacidade de saber se é um arquivo de mídia, precisamos de ‘currRequest.setNotificationVisibility(DownloadManager.Request.VISIBILITY_VISIBLE_NOTIFY_COMPLETED);’. O que informará ao gerenciador de download que seremos notificados quando o download for concluído. Agora temos uma solicitação com todas as configurações necessárias concluídas, só precisamos de algo para gerenciar a solicitação e obter o download do arquivo real.

Então, talvez deixando um pouco de espaço em branco para indicar que estamos em uma nova seção, então coloque a linha ‘DownloadManager currDownload = (DownloadManager) getSystemService(DOWNLOAD_SERVICE);’. Este será o nosso gerente e será responsável por garantir que o arquivo chegue aonde está indo. Então, finalmente, coloque ‘currDownload.enqueue(currRequest);’. Isso é para passar nossa solicitação ao nosso gerente que iniciará o download do arquivo solicitado.

Passo 5 – Menu e Marcadores

Agora que temos um navegador da Web com bastante recursos, você não acha que a barra superior parece um pouco vazia com apenas o título da página da Web nela? Pensei isso. Portanto, para esta etapa, adicionaremos alguns ícones à barra de menus, bem como uma pequena lista de favoritos. Vá para a coluna da esquerda e encontre o seguinte diretório: app > res. Clique com o botão direito do mouse na pasta res e vá para Novo > Android Resource Directory. Isso abrirá uma janela para as propriedades da nova pasta. Altere o nome padrão para ‘menu’, bem como o tipo de diretório para um tipo de menu no menu suspenso abaixo da barra de nomenclatura. Agora clique com o botão direito neste novo diretório que você criou e vá para: Novo > Arquivo de recurso de menu. Neste arquivo o único parâmetro que precisa ser configurado é o campo nome.

Você provavelmente reconhecerá esse tipo de arquivo como um arquivo de layout semelhante ao activity_main.xml que editamos até agora. No entanto, será usado apenas para editar o layout da barra de menus.

 

Antes de continuarmos com isso, abra o diretório ‘drawable’ na mesma pasta ‘res’. Atualmente deve haver duas versões do ícone do iniciador que usamos para nossa barra de progresso. Vamos querer alguns botões para pressionar em nossa barra de menu, então estaremos importando as imagens necessárias aqui. Então, clique com o botão direito na pasta drawable e vá para ‘New > Vector Asset’. Isso abrirá uma nova janela especificamente destinada à seleção de ícones. No lado esquerdo dessa nova janela, deve haver uma seção intitulada ‘Clip Art:’ e ao lado desse título haverá uma pequena caixa com o ícone atual. Clique nessa caixa e após um segundo uma nova janela se abrirá com toda uma coleção de ícones disponíveis. Vamos pegar alguns desta janela, começando com ‘seta para trás’. Há uma barra de pesquisa no canto superior esquerdo que pode ajudar a encontrar qualquer um dos ícones mencionados. Depois de encontrar o ícone necessário, clique em ‘Avançar’ e depois em ‘Concluir’ na página seguinte. Agora volte e faça novamente para os seguintes ícones: ‘seta para frente’, ‘menu’, ‘atualizar’.

Agora que todos os seus ícones foram importados, clique em ‘ic_arrow_back_black_24dp’ na pasta drawable para abrir o arquivo .xml para manipulá-lo. O que você deseja encontrar deve estar na linha 7, chamada ‘fillColor:’. Encontre a seção entre aspas que diz “#FF000000”. Altere para “#FFFFFFFF”. Este é um código hexadecimal, estamos alterando a cor do ícone de preto para branco, o que facilitará muito a visualização no fundo azul escuro. Agora vá e faça o mesmo para todos os ícones que acabamos de importar.

Tudo bem, como prometido agora volte para o arquivo browser_menu.xml que criamos no início desta seção. Nós vamos adicionar um pouco de código a isso agora. Começando com a linha superior que contém a declaração <menu. Siga essa linha até o final e depois de ‘android”, mas antes do ‘>’ insira uma nova linha. O código a ser inserido aqui é ‘xmlns:app=”http://schemas.android.com/apk/res-auto”’. Depois disso, podemos realmente entrar no menu e inserir um elemento ‘item’ para cada entrada em nossa barra de menu. Começando com o botão Voltar, digite o seguinte:

‘<item android:title=”Voltar”

android:id=”@+id/menuVoltar”

app:showAsAction=”sempre”

android:icon=”@drawable/ic_arrow_back_black_24dp”/>’

Então, vamos ver quais são esses itens. O ‘título’ é como o item realmente será salvo na barra de menus, o id é algo que usamos antes e será usado por nós no código Java para vincular ao botão, showAsAction controla a frequência com que o botão está no menu e com que frequência ele está na barra de menus sem precisar abrir o menu para vê-lo, configurando-o como “sempre” estamos dizendo que sempre o queremos na barra e não no próprio menu. Por fim, o elemento ícone aponta para o ícone que importamos anteriormente, que deve estar sendo exibido na barra de menus se você iniciar o aplicativo.

Agora, seguindo este mesmo formato, faça o mesmo para o botão ‘Avançar’ e o botão ‘Atualizar’. As alterações são ‘title=”Forward”’, id=”@+id/menuForward” e icon apontando para o nome dos ícones que importamos anteriormente para este fim.

Voltaremos a este arquivo brevemente, mas por enquanto, voltemos para ‘MainActivity.java’. Encontre a área onde fizemos o método de substituição onBackPressed. Vá atrás dele e pressione Ctrl-O novamente. Os métodos que estamos procurando são intitulados ‘onCreateOptionsMenu’ e ‘onOptionsItemSelected’. Escolha ambos e crie os métodos de substituição. Vá para ‘onCreateOptionsMenu’, aqui vamos criar nosso próprio inflador de menu. Um inflador de menu é um objeto que preenche o menu de opções com os itens disponíveis. Portanto, antes da função ‘return’, adicione a seguinte linha: ‘MenuInflater menuInflater = getMenuInflater();’. E uma variável é inútil se você não fizer nada com ela, então coloque: ‘menuInflater.inflate(R.menu.browser_menu, menu);’ Isso dirá ao inflador de menu para fornecer o menu de opções com nosso próprio menu personalizado para o qual acabamos de terminar o layout.

Isso vai acabar com esse método. Agora desça para o método onOptionsItemsSelected que criamos logo depois dele. Neste método, receberemos o item de menu que foi clicado e informaremos ao código o que fazer em resposta. Começaremos criando uma instrução switch com base no MenuItem que é passado por padrão para a função onOptionsItemSelected. Portanto, entre as instruções ‘{‘ e ‘return’, adicione o seguinte ‘switch(item.getItemId()){‘ e pressione enter. Isso nos permitirá alternar entre diferentes métodos, dependendo de qual item é selecionado. Portanto, comece inserindo um item de caso para cada botão que adicionamos ao nosso menu até agora. Eles podem ser adicionados da seguinte forma:

caso R.id.menuRefresh:

parar;

caso R.id.menuVoltar:

parar;

caso R.id.menuForward:

parar;

Atualmente, como a instrução switch funciona é que, quando um item de menu é selecionado, a função onOptionsItemSelected é executada com um parâmetro definido para o botão que foi pressionado. A instrução switch verifica o ID desse botão e verifica se há algum caso definido para esse ID. Atualmente, todos os casos dizem que é necessário interromper a instrução switch, mas adicionaremos algumas funcionalidades aqui.

Começando com menuRefresh. Se o usuário selecionar esse botão, queremos que a página seja recarregada da mesma forma que se o usuário rolasse para cima a partir do topo da página. O que, como vimos antes, é apenas uma simples linha de código. Então, entre o ‘menuRefresh:’ e o ‘break;’ adicione a linha ‘mainWebView.reload();’

Para o menuBack, você pode ficar tentado a fazer um trecho de código semelhante ao que fizemos para quando o botão Voltar é pressionado no dispositivo Android. E se você fizesse isso funcionaria. No entanto, não precisamos despender tanto esforço. Entre o ‘menuBack:’ e o ‘break;’ coloque a linha ‘onBackPressed();’ para simplesmente chamar a função acima, que pode controlar a movimentação de volta pelas páginas por conta própria.

Finalmente, para a seção menuForward. Nós estaremos adicionando algum código no mesmo lugar. No entanto, como ainda não temos uma função criada para lidar com o futuro, teremos que escrever um teste rápido para garantir que nenhum erro seja gerado. Então, no mesmo lugar, adicione:

if(mainWebView.canGoForward())

mainWebView.goForward();

A instrução ‘if’ garantirá que não travemos o aplicativo e apenas avancemos se houver um elemento de avanço nas configurações da página.

Neste ponto, sinta-se à vontade para experimentá-lo, todos os botões que adicionamos à barra de menus devem estar funcionando bem.

Parte 2:

Agora vamos adicionar um pequeno menu de favoritos com algumas páginas básicas que qualquer usuário de nosso webview pode querer acessar rapidamente. Então, para começar, precisamos voltar para ‘browser_menu.xml’. E de volta a esta página de layout, vamos adicionar outros 3 itens (mas sinta-se à vontade para adicionar quantos quiser) que se correlacionam com diferentes páginas da web. Então, assim como fizemos antes, adicionaremos esses itens no formato:

<item android:title=”XXX”

app:showAsAction=”xxx”

android:id=”@+id/XXX”/>

Para essas opções de favoritos, queremos que ‘app:showAsAction’ seja igual a “nunca”, porque o botão sempre estará no menu de favoritos e não deve ser exibido na própria barra de menus.

Para minhas três páginas da web, usarei “Youtube”, “Google” e “Facebook”, mas fique à vontade para apontar para as páginas que desejar. Para chegar lá vou usar os nomes das páginas como títulos (android:title=”Youtube”) e o nome mais ‘button’ para os ids (android:id=”@+id/youtubeButton”).

Agora, para que esses botões funcionem, teremos que voltar ao código Java e inserir alguns casos para eles dentro de nossa instrução switch anterior. Portanto, voltando ao código dentro de ‘onOptionsItemSelected()’, adicionaremos um número de itens a essa instrução switch igual ao número de páginas que queremos adicionar à barra de favoritos. Neste formato:

caso R.id.XXXbotão:

mainWebView.loadUrl(“https://>url aqui</”);

parar;

Com minhas versões demonstradas na imagem à esquerda.

Há uma última coisa antes de podermos chamar a barra de favoritos de pronta. Se você abrisse o emulador do Android agora, veria três botões verticais no lado direito que, quando pressionados, abrem o menu de favoritos. Isso funciona, mas acho que poderia parecer um pouco melhor. Também pedi para você criar um ícone de menu no início desta seção, então seria uma pena não usá-lo. Adicionar um ícone para o botão de menu não é tão fácil quanto para os outros botões que colocamos na barra superior porque ele já existe no layout padrão de um aplicativo Android. Isso pode ser feito no entanto. Comece indo para ‘app > res > values ​​> styles.xml’. Este arquivo contém informações sobre o tema do aplicativo e a parte superior e inferior devem ser tags ‘<resource>’ com tags ‘style’ dentro dele. Vamos adicionar um item dentro das tags ‘estilo’ para começar. vai ler

‘<item name=”android:actionOverflowButtonStyle”>@style/myActionButtonOverflow</item>’

Agora que isso foi adicionado com os outros itens, após o sinalizador ‘</style>, insira uma nova linha. Vamos criar nossa própria seção de estilo. Então digite:

<style name=”myActionButtonOverflow” parent=”android:style/Widget.Holo.Light.ActionButton.Overflow”>

</estilo>

Este elemento de estilo agora conterá todos os elementos de exibição do botão de menu. Assim, dentro desta nova seção de estilo, adicionaremos duas linhas para deixar o botão exatamente como queremos. A primeira deve ser semelhante a adicionar os ícones aos itens da barra superior:

<item name=”android:src”>@drawable/ic_menu_black_24dp</item>

<item name=”android:background”>?android:attr/actionBarItemBackground</item>

A primeira linha define o ícone para ser o ícone do menu que configuramos no início desta seção. E a segunda linha define o plano de fundo da barra superior para seu valor padrão. É esta linha que você terá que mudar se quiser que a barra superior seja nitidamente diferente. Finalmente, a imagem abaixo mostra o que acabei depois de todo esse processo.

Feito isso, nosso aplicativo WebView deve estar pronto. Abra o emulador e dê uma olhada.

Todos os quatro botões do nosso menu devem ser configurados com branco no fundo verde escuro. As páginas devem carregar bem com a barra de progresso visível apenas enquanto a página está carregando ativamente. Por fim, o botão de favoritos deve abrir um pequeno menu com os nomes de alguns sites que, ao serem clicados, direcionam o usuário para o site.

Espero que você tenha se divertido aprendendo um pouco sobre os aplicativos Android Studio e WebView em particular, e veja que não é tão assustador!

Uma vez que você esteja familiarizado com o básico do Android Studio, há muitos modelos avançados de aplicativos Android disponíveis no Clube do Script para dar o pontapé inicial em seu próximo projeto móvel.