App

App Android de várias telas com App Inventor.

0 Flares Twitter 0 Facebook 0 0 Flares ×

Este é o quinto artigo produzido para a série “Crie você mesmo seus App Android de maneira muito fácil”.

Este artigo não estava previsto para esta série, porém considerei muito importante sua produção após um comentário muito relevante feito ainda no primeiro post da série pelo leitor Rafael.

Segue o comentário do Rafael:
Mestre, MUITO BOM. Me tire uma dúvida. Não consegui fazer um botão chamar uma screen diferente daquela em que ele está presente. Sabe dizer como fazer?

Em resposta a esta dúvida, que muitos outros também podem ter, vamos desenvolver um app Android simples, com duas telas usando o MIT App Inventor.

Para esse App iremos seguir 7 simples passos:

Passo 1: criar um novo App Android. Caso não saiba como, aconselho que acompanhe a série completa do início.

Passo 2: adicione um label em sua primeira tela para identificarmos que estamos na tela 1. Não renomeie a tela 1, pois esta é sua tela principal do app android. As demais telas que usar podem ser renomeadas a critério de cada desenvolvedor. Adicione também um botão na tela 1 que ao ser clicado irá seguir para a tela 2.

app inventor designer - criar app android

Passo 3: Adicione uma nova tela clicando no botão “Add Screen”, indicado pela seta vermelha na imagem acima. Nesta nova tela adicione um label para identificarmos que estamos na tela 2. Adicione também um botão na tela 2 que ao ser clicado irá retornar para a tela 1 do app.

app inventor designer - criar app android

Passo 4: abra o editor de blocos clicando no botão “Open the Blocks Editor”, indicado pela seta vermelha na imagem acima. Perceba que o editor de blocos abrirá de acordo com a tela em que você estiver trabalhando, e que quando selecionarmos a outra tela o editor de blocos irá atualizar-se.

Os procedimentos para cada uma de nossas duas telas serão quase idênticos, por isso vou exibir somente o processo realizado na tela do nosso app android.

Passo 5: No editor de blocos selecione a aba “My Blocks”, clique no “botão” e em seguida em seu evento “Click”, arrastando a “peça” para a área em branco. Como mostra a imagem abaixo:

blocks editor designer

Passo 6: No editor de blocos selecione a aba “Built-In”, clique em “Control”, encontre o comando “open another screen” e o arraste até encaixar no evento click do botão.
Como mostra a figura abaixo:

blocks editor designer

Passo 7: No editor de blocos selecione a aba “Built-In”, clique em “Text”, encontre o comando “text” e o arraste até encaixar no comando “open another screen”. Nesta bloco de texto informe o nome da tela que será chamada quando o botão em questão for clicado.
Como mostra a figura abaixo:

blocks editor designer

Pronto, agora é só repetir o procedimento para a outra tela selecionando a mesma no App Inventor Designer e encaixando as peças no Editor de Blocos.

Clique aqui para baixar o App Android criado neste exemplo.

Conclusão da criação de App Android com várias telas

Este app Android simples com apenas duas telas foi criado para exemplificar uma maneira de desenvolvimento de Apps com as ferramentas do Mit App Inventor.
Não devemos alterar nunca o nome da primeira tela, pois esta será a tela principal do aplicativo.
Para realizar os testes é necessário empacotar o App Android criado para um celular, pois não é permitido testes durante o desenvolvimento de aplicativos com várias telas no App Inventor.

Fonte: MIT

Sobre Adriano

Adriano Henrique Vieira é Bacharel em Sistemas de Informação. Analista de Sistemas com experiência em etapas de levantamento de requisitos, elaboração e planejamento de modelos de dados e programação nas linguagens JAVA e PHP.


  • Rafael

    Meu velho, que bom que atendeu ao meu pedido. Depois de fuçar, eu já havia aprendido essa parte. Mas tenho certeza que este post irá ajudar muito quem está no comecinho.

    Deixo outra sugestão: ensinar o uso do TinyBD. Depois que aprendi a usar este item, as coisas deslancharam pra mim. Já coloquei um app pra rodar em meu celular, estou agora fazendo a parte de validação para depois trabalhar o design do app, a prte da “perfumaria”.

    Minha dúvida real agora é: como faer o app disparar um email após um evento (como um clique de um botão).

    Grande abraço e meus parabéns novamente.
    Rafael Pimenta

    • cicinho

      e daí…

      • adriano

        Bem vindo ao blog Cícero.
        Não entendi seu comentário.

    • adriano

      Obrigado Rafael.
      Realmente e TinYBD é um excelente componente e o envio de E-mails essencial.

  • Bruno Alves

    Olá fiz um teste usando estes mesmos blocos com 02 screen mais no simulador ta dando erro quando apertado o botão para ir para segunda tela

    • Adriano

      Bem vindo ao blog Bruno.
      Pelo que entendi de seu comentário, você está executando o App pelo simulador. Certo?
      Para testar seu App você deve empacotar e testar em um aparelho real, como disse no último paragrafo deste artigo.

      Obrigado pela visita, espero ter ajudado e fique a vontade caso tenha mais dúvidas.

  • marcus vinicius

    Como fazer abrir uma pagina dentro da mesma tela, exemplo: 4 botões dentro de uma tela, e quando clicar em um botão, abrir conteúdo correspondente apenas desse botão, deixando os outros invisíveis e vice-versa.
    Desde já agradeço!

    • Adriano

      Bem vindo ao blog Marcus.
      Me desculpe por não poder lhe ajudar, pois não me aprofundei com o MIT App Inventor.
      Estou reformulando o blog e em breve postarei as novidades.

      Agradeço por sua interação.

  • Paula

    Olá, eu estou com problemas em imprimir informações armazenadas no formulário que criei, o formulário contém nome, cpf (textbox e label) – não sei se precisa colocar algum bloco de comandos em label – listpicker (consegui adicionar todos os itens, e selecionar mas não aparece quando clico no botão verificar), checkbox, e dois botões: verificar e voltar ao menu. Quando clicar no botão verificar tem q aparecer os dados, porém não consigo…seria através de notificações? Obrigada, desde já.

    • Adriano

      Seja bem vinda ao blog Paula.

      Acredito que você possa resolver seus problemas com o TinyDB.

      Confira no link abaixo uma aula, também em vídeo, que ensina a usá-lo:
      http://goo.gl/IBWWMy

      Agradeço por sua interação.

  • Alex Mororó

    Criei um formulário onde recebe alguns dados (nome, endereço, nota, e uma função pra calcular a média). Preciso mostrar esses dados em um outra tela.

    Poderia me ajudar?

    • Adriano

      Bem vindo ao blog Alex.

      Para o seu app você vai precisar usar o TinyDB para acessar os dados.
      E lembrando que para fazer os testes deverá usar um aparelho real, pois não é possível testar um app no emulador do App Inventor.

      Agradeço sua visita.

  • Jeferson Souza

    Amigo, estou tentando criar o app de texto com várias páginas, não esta sendo complicado, sóque o problema é que o testo de uma página não cabe nela e não aparece todo, o que eu faço pra ele ser mostrado?

    • http://hvadriano.com.br Adriano Vieira

      Bem vindo ao blog Jeferson.
      Me desculpe por não poder lhe ajudar, pois não me aprofundei com o MIT App Inventor.
      Estou reformulando o blog e em breve postarei as novidades.

      Agradeço por sua interação.

  • Felipe

    Boa Noite, vc poderia me ajudar? criei um app com 3 Screen, porem ele smp inicia na screan 1, teria como eu fazer ele iniciar direto na screen 2 quando eu iniciasse ele? Obg

    • http://hvadriano.com.br Adriano Vieira

      Olá Felipe, tudo bom?
      Até onde eu sei, o App sempre inicia na Screen 1 mesmo, essa é a tela principal.
      Não entendo como poderia contornar este seu problema.

      • Felipe

        Ah tudo bem, eu acho que realmente ele segue um padrão da primeira pagina que se cria, tentei renomear as paginas, mas mesmo assim ele smp inicia na screen1. vou ter que refazer dnv o app começando pela scrren 2 que eu tinha feito. Obg desde já, Ótimo trabalho parabéns.

        • http://hvadriano.com.br Adriano Vieira

          Obrigado.
          A Screen1 (principal) é a única que não deve ser renomeada, caso esteja pensando em dar nomes as telas.
          Boa sorte.

  • Rubinho Cruz

    Olá Adriano Vieira, estou tendo uma dificuldade com requisição de dados usando o APP Inventor 2, você poderia me ajudar? Poderia te enviar um email para explicar mais detalhadamente? – Desde já, muito obrigado

    • http://hvadriano.com.br Adriano Vieira

      Olá Rubinho, tudo bom?
      Me desculpe por não poder lhe ajudar, eu interrompi meu estudo com o App Inventor.
      Abraço.

  • Philipe Lima

    Muito bom! Excelente artigo Adriano

  • glauco cruz barros

    Olá pessoal, alguém sabe o comando para que uma tela mude para outra automaticamente? Ex: ao entrar no app tem uma logomarca de abertura e depois de alguns segundos ela muda automaticamente para a tela de menu. Agradeço desde já!

  • Bruna Sampaio

    Boa tarde Adriano tem como os usuários tirarem fotos com o app inventor e manda para um e-mail direcionado por mim?

  • Alsan abreu machado

    Ola estou com algumas ideias de novos emojis e emoticons para serviços de messengers tipo whatsapp, gostaria de criar esses emojis para colocar na googleplay como faço, nem tenho ideia por onde começar, como fazer é o problema pra mim

  • Tales Cembraneli Dantas

    como faço para passar valores de uma variável de uma tela para outra?

    • Wesley Alves

      Conseguiu descobrir ?

  • Rafael Santos

    Ola gostaria de tirar um dúvida com vc, fiz um aplicativo no app inventor um app de perguntas e respostas, mas quando baixei ele pro celular parecia tudo normal tinha o ícone e quando entre no mesmo apareceu os dois botões só que quando no botão iniciar ele não saiu da tela inicial vc consegue mim tirar essa dúvida?

  • Tiberio Rafael

    Adriano, to com uma MEGA duvida.. to com um app de cadastro de clientes e O.S. mas to com um problema.. como puxo um cliente da screen de cadastro de clientes para add na screen cadastro de serviços? até onde eu sei não vi nenhum bloco que puxe informações de outras screens.. :( da essa ajuda?

  • Grupo Três

    Boa tarde, Adriano. Estou trabalhando em um projeto, porém estou com uma dúvida de como colocar uma tela de um projeto em um outro.

  • Redação Online

    link para baixar

  • Keith Ubata

    ola galera, alguem sabe de algum comando para colocar ,00 de valor de moeda?
    e um comando para que gere um arqui em jpg e outro em pdf