beleza e no último vídeo a gente mexeu aqui nesse projeto criamos com o template empt vi activity discutimos sobre cada um dos artefatos e sua estrutura a importância de cada um deles inclusive Ah também fizemos aqui a nossa a nossa activity me né nossa activity M XML da do conteúdo que a gente vai exibir nós fizemos algumas modificações não foram muitas modificamos aqui de a constraint layout se eu não me engano virou um linear e temos aqui um webview que nós adicionamos tá em tela cheia e a identificação que nós determinamos foi webview que com
W em caixa baixa e nós precisamos né nesse momento pelo menos para essa pelo menos para esse passo agora né Eu não tô com a máquina com com com o celular virtual mas a gente vai implementar meso assim e vai fic você testar aí activity Java vamos precisar acessar esse elemento primeiro que esse elemento olha aqui no activity née é um web viw se ele é umb viw eu preciso ter webview aquii webview que permita ser a Instância esse elemento tudo que a gente manipular nessa variável a gente vai est manipulando esse elemento então se
eu vou precisar dessa variável né tô criando aqui ó webview e vou chamar aqui com o Caixa Baixa a palavrinha webview nesse primeiro momento já tá pedindo aqui o Import né Import Class Android webkit P webview né perguntando aqui se eu confirmo através do Alt enter cliquei aqui Alt enter Confirmei já veio aqui para o Import ah Android web kit web viw esses esses escurinhos aqui é porque não tá sendo mais usados né a gente falou ou movê-los aqui bem então agora nós temos esse webview só que esse webview embora o nome esteja igual ao
que nós atribuímos aqui não quer dizer que eu estou acessando aqui poderia inclusive ser qualquer outro nome poderia ser qualquer coisa por exemplo mas eu tô mantendo assim para ficar mais bonitinho tá E e ter uma relação pelo menos uma relação visual que a gente saiba que uma coisa é outra Então essa variável webview aqui que é uma variável Ah capaz de armazenar uma Instância de um objeto webview A gente precisa acessar essa Instância né então pra gente acessar a gente vai fazer aqui um find viw by ID encontrar a identificação uma View pela identificação
esqueci aqui de colocar o igual antes tá find View by id e nós vamos aqui nesse find View by ID acessar esse elemento pela identificação e como é que a gente vai fazer esse elemento pela identificação r.id ponto e qual que é o nome daquele elemento web viw então aqui nós conseguimos fazer com que essa variável webview receba a Instância desse Elo que a gente tá vendo bem aqui tudo que nós fizermos nesse webview eu vou estar manipulando esse elemento aqui PR a gente fazer a a determinação de que esse webview vai receber ó webview
pon set já fi fui clicando aqui ó set quando a gente seleciona o comando set a gente tá automaticamente dizendo que quer enviar alguma coisa para ele set web View client que vai ser a forma que nós vamos ter para dizer eu quero setar para esse meu webview uma uma visão né um novo objeto de visão de um navegador cliente que nesse exato momento ele tá limpo ali então o que que nós precisamos fazer set webview client e vamos criar um novo webview client aqui já tá sugestão né New web viw client Opa neww Cent
perfeito então aqui webview cliente nós podemos através dessa nossa Instância webview web acho pad alguma coisa load load URL então load URL vamos conseguir pedir para esse nosso webview fazer o carregamento da uma url que nós gostaríamos que fosse vamos fazer aqui http 2 p bar bar google.com Aqui tá um exemplo né então nossa webview que tá aqui nessa nessa visão foi instanciado através desse find View by ID também foi ah criamos um novo objeto de uma de de um cliente de visão web para que Ele pudesse que ele tá limpo pudesse carregar e pedimos
para fazer o carregamento da URL com o qual nós temos uma com o qual nós temos uma página né carregar essa essa webview bem só que isso aqui né quando você testar aí vai simplesmente Abrir né no navegador o conteúdo dentro dessa dessa webview em tela cheia só que nós precisamos que essa webview seja capaz de ter um controle nosso nós não queremos que sempre que nós abrirmos esse esse essa nossa tela né no momento em que é criada a nossa tela no momento que ela é aberta eu não quero que sempre Abra o mesmo
site Pode até ser que eu faço a consulta ali né e vou clicando e vou navegando por por caminho né mas se eu quiser digitar uma determinada URL para eu determinar qual seria meu caminho Inicial Eu preciso ter Fontes que me permitam me comunicar com esse a webview e pra gente fazer isso nós precisaríamos fazer o que existe hoje nos navegadores que são as barras de navegação preencher uma caixinha né em que nós poderíamos ah confirmar parar um carregamento e assim sucessivamente pra gente fazer isso né a gente precisa de que esse nosso activity XML
tenha essa Barrinha a gente precisa construir essa Barrinha E olha que interessante nós vamos fazer vamos fazer e não fazer de uma forma bem legal eu já calibrei uma uma I aqui para quem muita gente utiliza hoje o chat GPT e eu tô tentando fazer um teste aqui para essa apresentação utilizando o copilote da Microsoft e já montei já calibrei aqui umas perguntas e foi gerando a estrutura pra gente a gente vai ver como é que ficou essa estrutura dessa Barrinha Tá então vamos para ela primeiro eu comecei aqui com copilote copilote microsoft.com e pedi
ó para o XML Android eu gostaria de uma barra ignorei as pontuações uma barra de navegação de um webview que simule um navegador de Smartphone Popular qualquer contendo pelo menos os botões principais possibilidade de preencher uma url desejada a parte dessa barra deve conter um webview com tela cheia a gente já sabe fazer tudo isso muita coisa aqui mas a gente eu a gente pede só para ver tá tudo pronto né então isso acaba dando pra gente a estrutura mais fácil que eu ter que combinar como eu já posso pedir mas o conteúdo do webview
não pode ser sobreposto pela barra de navegação não quebrar a cabeça de ter que tirar sobreposição vamos pedir tudo prontinho entendi olha aqui ó CoPilot para quem nunca usou cilad ó dá para fazer ó girou todo legalzinho só que quando girou tá a gente pode até ver aqui ó usou um relative layout né o linear que a gente já falou né linear e no linear utilizou a orientação horizontal né ficou ficou lado a lado né gerando uma orientação em gerando uma orientação horizontal um plano de fundo etc né gerou isso aqui que é que a
gente já falou E webview aqui embaixo bem só que eu percebi que não tava legal porque faltava alguma coisa Ah sim tava textos né foi feito só com textos os botões pô com textos não né Eu quero com ícones ao invés de nomes e olha que legal né o copilote gerou novamente utilizando ícones só que eu percebi que esses ícones eram ícones que eles estavam esperando que existisse no meu diretório aquele diretório Dra né que a gente viu drawable em que nós colocamos imagens vetorizadas ou não né a gente consegue ter um conjunto de recursos
ali visuais então ele tá usando né ícones existentes ali no drawable tá só que eu não tinha e nem queria ter o esforço de atrás e pedir novamente ó ícones que existam nos recursos do Android para eu não ter que colocar em meu projeto então gerou novamente e agora ó são ícones do Android Dra drawable EC Mia então para mover para um lá para para avançar para desfazer né então para atualizar então foi gerado novamente aqui eu já me já tive por por satisfeito vamos ver como é que ficou essa última copiar aqui e vamos
utilizar bem eu vou colar aqui respeitando o que existe do das configurações aqui já desse linear tá vou fazer o control V aqui ó coloquei embaixo tá Só que essa estrutura aqui eu vou apagar essa de baixo aqui tá E esse trechinho aqui que tá o relative como a sugestão dele for o relativo eu vou usar o relativo aqui porque eu vou apagar esse que eu tô trazendo aqui agora tá tá me parent largura e me parent altura tá então vou remover isso aqui perfeito então tudo que eu fiz aí foi só tentar recuperar o
que eu já tinha da minha ah do meu layout principal tá e eu trouxe só os pequenos detalhes para cá então fiz basicamente toda cópia para cá e olha que legal como é que ficou a cópia aqui já montou toda a estrutura pra gente com webview deixa eu melhorar aqui a visão eu eu vou Minimizar aqui porque a gente não tá usando nesse momento o simulador né Então olha aqui ó Digite a URL já viio tudo legalzinho ó com o botão de voltar para avançar atualizar né Ficou muito bacana e vamos analisar como é que
ficou isso aqui rapidinho a gente aqui não tá mais usando o linear né a sugestão da ia foi utilizar aqui o relative layout lembra um pouco o Constru layout que é o que tinha no início Ah e eu já falo sobre um pouquinho dessa similaridade ah a sugestão né meth parent tanto para altura e largura foi sugerido também pel EA Até porque faz todo sentido a layout principal preencher toda a tela né então só que dentro desse layout principal foi sugerido ó um linear layout esse linear layout tornou-se esse conteúdo bem aqui ó esse linear
layout seria a nossa barra de navegação tá inclusive pontuado aqui barra de navegação Então essa barra de navegação sugerida aqui nesse linear layout nós vamos escrever os elementos aqui dentro Aliás já vieram escritos na sugestão Quais que foram Edite texto legal que seria o nosso elemento de texto né ó aqui ó elemento de texto seria o image buton Beleza outro image buton e outro im buton aura esse linear layout é pontos que não largura tá cheio né percorrendo todas as laterais ah a altura tá rap content Por que que tá Wap content porque a gente
não tem um tamanho especificado no linear o linear vai obedecer o tamanho do conteúdo que tiver existindo dentro do escopo desse linear ou seja se eu tenho um Edit texto esse Edit texto aqui ó ele tem esse tamanho né então esse linear Wap content ele ficou um pouquinho maior e a gente já vai ver porque que ficou um pouquinho maior Tá mas ele respeitou todo o tamanho dessa caixinha de texto dessa caixinha de Edit test da mesma forma para os demais elementos nós vi Vimos que tem uma orientação horizontal né os elementos estão lado a
lado né tem também o quê tem uma cor de plano de fundo né a gente pode fazer todas essas modificações a necessidade bastante de entender embora você não construa do zero mas te auxilia a tomar decisões para as modificações e nós temos um pading aqui o8 DP o que que seria esse pad a gente pode ó vou tirar aqui vou pô zero perceberam Ó ficou mais estreito parece uma margem né parece como se tivesse uma marzin invisível né Só que essa margem que tem um já tem um chamado margem a gente colocar margem ó layout
margem só que o pading diferente do margem o margem ele faz uma bordinha só que fora da do linear por isso que aqui ficou branco o conteúdo linear é cinza que que ficou branco que o margem faz Essa Marinha fora do linear e quando nós usamos o pading ele faz a Marinha dentro do próprio linear então a gente vê essa esse espaçozinho né mas com a mesma cor que é o conteúdo interno desse linear então ele faz essa essa bordinha né invisível eu acho que vale a gente comentar esse aqui ó tem um chamado layout
weight tá com o número um né esse layout weight ele dá um peso para o elemento que tá dentro desse linear então ele tá aqui com peso um né então ele ficou ocupando um espaço maior do que os demais os demais nem peso tem né linear lout aliás layout weight ó não tá existindo para os demais a gente tá dando um peso específico para esse elemento ele acaba tendo destaque nós poderíamos colocar esse layout wf weight em todos os elementos que estão aqui e colocar um para ser do TRS e a gente ir aumentando diminuindo
esse peso na exibição dentro do linear tá a gente vai respeitar essa sugestão porque acho Ficou bem legal temos o image Bon né basicamente os mesmos atributos com a diferença de que tem aqui a essa essa URL da imagem de de de voltar né de avançar e assim sucessivamente de atualizar E tem também esse content description esse content description descrição do conteúdo tá indo um texto ele não tá visível aí né e para ser bem franco eu tenho dificuldade de como simular pelo que eu entendo do content description ele auxilia ferramentas de software que tem
aquela questão de acessibilidade então isso aqui ajuda a informar usuários que possam ter dificuldades de visão né problema de visão a informar que elemento que tá sendo representado aqui e no caso é o elemento voltar elemento avançar então é uma boa prática fazer isso muito legal essa sugestão que a ia nos deu então só tem um probleminha né tá essa essa lampadazinha aí vamos ver o que que ela tá dizendo pra gente né tá aqui tá sugerindo que a gente use né o string né o arquivo de Strings por quê Porque a gente não quer
que os textos fiquem estáticos fiquem fixos ali a gente quer que os textos sejam dinâmicos no sentido de que por mais que seja sempre voltar ó esse botão ele é sempre voltar mas no escopo de celular que a gente tem muitos idiomas esse voltar ele pode ser back no inglês ou pode ser qualquer outra idioma qualquer outra palavra em outros idiomas então a gente ter o controle dessas respostas da da das mensagens que vão ser respondidas aqui para Outros tantos idiomas que é o que a gente falou em outros vídeos sobre Strings que é o
arquivo Strings esse aqui vai permitir que a gente tenha as traduções né num idioma aqui estaria um nome outro idioma e estaria outro então aqui tá sugerindo isso tá aí não sei se a gente vai fazer a correção agora mas tá sugerindo isso setar através do Strings e óbvio que a gente recebeu da ia dessa forma por quê Porque a ia não não quis gerar o arquivo de string pra gente Ah aqui vai ser @string barra o o nome do elemento por exemplo elemento back que vai receber a palavra voltar se for português palavra back
se for inglês porque deixaria a resposta muito mais longa então ele já sugeriu com a palavra escrita explicitamente mas isso a gente detentores do conhecimento desenvolvimento porque nós que somos os programadores fazermos essa harmonia entre o que feito a suest né Então venha nos ajudar tá fazendo tudo pra gente bem temos a mesma experiência para im buton né temos a mesma experiência para para esse outro image buton e depois desse layout para finalizar nós temos o webview novamente só que esse webview novamente aqui com um um atributo que até então nós não tínhamos usado esse
atributo layout below ser que ele quer dizer né e e ele tem um código aqui ó ID navigation bar esse D naveg bar a gente consegue lembrar que há pouco tempo a gente falou não foi de navigation bar pronto bem aqui ó linear layout tem uma identificação esse aqui ó eu eu alinhei aqui esse aqui é o navigation então nós estamos dizendo através desse webview através do layout below de que ele é ele vai estar com o layout alinhado abaixo eu acho que alguma coisa assim abaixo por baixo abaixo do elemento navigation bar Isso aqui
é uma possibilidade que o relative layout nos dá no linear layout a gente não teria a gente tem algo muito parecido no constraint layout também né chet fica arrastando ali em tela né E fica gerando vários layouts de referência aqui dizendo ó ele tá abaixo do elemento tal um pouquinho à direita do elemento tal um pouquinho à esquerda do outro elemento para determinar onde ele tá no espaço ali da tela né aqui a gente também tem algo muito parecido a gente tem outros layouts a gente pode mais a direita mas à esquerda referente a outro
elemento e outro elemento só que o Constant layout ele dá uma experiência um pouco pouco mais complexa é difícil é difícil eu ter detalhes para conseguir diferenciar com qualidade para vocês mas ele nos dá uma experiência um pouquinho mais complexa da gente ter essa liberdade de movimentação mas eu vou respeitar o relativ layout sugerido pela pela ia Beleza então tá aqui né justificado Tá alinhado abaixo do linear layout de código de identificação navigation bar e agora nós vamos conseguir né Na próxima gravação fazer um comportamento para essa tela que nós vamos identificar pegar o conteúdo
que vai ser digitado aqui pelo usuário vamos poder ah ah acho que tá faltando até um botãozinho aqui né dele confirmar ou então a gente concorda quando ele apertar na teclinha de de enter né a gente pode colocar para acionar através um botão também mas talvez seja necessário a gente colocar um um um cheque cheque Zinho quando ele preencher abrir a página Vamos vamos pensar melhor sobre isso na próxima gravação mas tá aqui a estrutura montada né a gente vai carregar o conteúdo aqui a gente pode atualizar a tela ah avançar para um lado para
outro isso aqui ó se eu quiser ir pra tela eu tô tô na determinada página voltei quero ir pra página de novo que eu acabei de voltar né então esse que vai permitir eu navegar entre as páginas que eu já naveguei então não Ten o botão para confirmar que eu quero abrir o RL a gente pode ver então a gente configuraria para exibir o conteúdo aqui baseado no que nós fizermos nessa barra de navegação vai ficar muito legal eu achei que ficou bonito isso aqui tá quanto a layout aqui desses botões eu vou mexer absolutamente
nada muito bom olha aí E ajudando a gente a ter produtividade aí no desenvolvimento ó a gente vai ter também que para fechar aí né a gente vai ter também que ah não não vai precisar porque eu pensei que talvez o webview fosse mudar o nome aqui tivesse que mudar lá ou mudar aqui então às vezes as sugestões que a gente recebe quando a gente pede auxílio uma uma ia né é que ela pode vir com especificações de atributos de identificações que não esteja em conformidade que a gente tá trabalhando Então a gente precisa est
sempre se policiando em conferir e fazer as correções e adaptações paraas nossas boas práticas ou paraa prática que a gente tá utilizando seja ela boa ou não muito obrigado
