Para isso:

  � Abra o App Inventor acessando o link:

  App Inventor 2

  � Na tela principal, clique em Projetos >> Iniciar novo projeto.
  � Na janela apresentada, conforme mostra a Figura 2.1 abaixo, digite o nome do seu projeto. No nosso caso: AlteraCorDeFundo.

Figura 2.1 � Janela para a cria��o do projeto.

  � Clique em OK para prosseguir.

  OBS.: � ideal que os nomes dos projetos que voc� desenvolver sejam compat�veis com o que eles fazem. Dessa forma voc� n�o precisar� execut�-los primeiro para saber o que eles fazem, apenas pelo nome voc� poder� identific�-los. Tamb�m n�o utilize espa�os, caracteres especiais ou n�meros no in�cio dos nomes dos projetos.

  Depois disso, o seu projeto ser� mostrado na lista do App Inventor, e logo em seguida ser� mostrada a tela principal. Veja a Figura 2.2:

Figura 2.2 � Tela principal do App Inventor 2 com o nome do projeto.

  O nosso aplicativo � o mais simples poss�vel que pode ser feito no App Inventor. Como j� foi dito, vamos utilizar apenas dois bot�es para alterar a cor de fundo da tela.

  N�o precisa salvar o projeto, todas as altera��es que voc� fizer s�o salvas pelo pr�prio App Inventor automaticamente, a menos que voc� queira alterar o nome do projeto.

  A Tela Principal (Screen1):

  A nossa tela principal se chama Screen1, nome padr�o dado pelo pr�prio App Inventor 2, assim como os nomes de todos os outros componentes, mas poder�o ser alterados para os nomes que quisermos se for necess�rio. As propriedades da tela principal referem-se ao aplicativo como um todo.

  Antes de criarmos o nosso projeto propriamente dito, ou seja, inserir os componentes na tela do celular, valos alterar algumas propriedades da tela principal. Voc� n�o precisa necessariamente alterar todas as propriedades dos componentes, somente aquelas que julgar necess�rias.

  Para o nosso projeto, vamos alterar apenas o tema (Theme) e o T�tulo. As outras propriedades discutiremos � medida que forem sendo necess�rias.

  Alterando as propriedades da Tela Principal:

  Ent�o vejamos como fazer isso:

  Para alterar o tema (Theme):

  � Na se��o Componentes, clique em Screen1. Feito isso, a se��o Propriedades mostrar� imediatamente todas as propriedades da tela principal.
  � Clique no combobox Theme (quase no final da lista), e selecione a op��o: Dark.

  Para alterar o T�tulo:

  � Na caixa de texto T�tulo (logo ap�s a propriedade Theme), digite: Altera a Cor de Fundo, e tecle Enter para confirmar.

  Feito isso, o nome Screen1 no t�tulo do emulador ser� alterado imediatamente para o novo t�tulo, e a faixa do t�tulo tamb�m ser� alterada. Veja a Figura 2.3:

Figura 2.3 � Emulador com o nome do projeto.

  Agora vamos inserir os componentes do projeto:

  Inserindo o primeiro Bot�o:

  � Na se��o Paleta > Interface de Usu�rio, clique no componente Bot�o e arraste-o para a �rea branca do celular, e solte-o. Feito isso, voc� deve ter observado que quando voc� solta o bot�o ele fica localizado no canto superior esquerdo da tela do emulador, conforme mostra a Figura 2.4:

Figura 2.4 � Bot�o inserido no Emulador.

  Isso acontece porque n�o foi utilizado nenhum layout ainda. Layout � a forma de organizar os componentes na tela de forma apresent�vel. Existe v�rios tipos de layouts para fazer isso. Veremos como usar layouts a partir dos pr�ximos tutoriais.

  Note que na se��o Componentes o bot�o est� logo abaixo da tela principal (Screen1), e um pouco recuado. Isso significa que o bot�o est� um n�vel abaixo da tela principal e subordinado a ela hierarquicamente.

  Agora vamos alterar algumas propriedades desse bot�o:

  Alterando as propriedades do primeiro Bot�o:

  Mas antes vamos alterar o nome do bot�o para um mais apropriado para ser utilizado na programa��o, e n�o utilizar o nome padr�o Bot�o1, nomeado pelo App Inventor.

  Para isso:

  � Clique no bot�o, na tela do emulador ou na se��o Componentes.
  � Logo abaixo, na se��o Componentes, clique no bot�o Renomear.
  � Ser� mostrada uma pequena janela para criarmos um novo nome para o bot�o, conforme mostra a Figura 2.5:

Figura 2.5 � Janela para alterar o nome do bot�o.

  Esse nome ser� utilizado para identificar o bot�o no c�digo, portanto, n�o utilize espa�os, caracteres especiais nem comece com um n�mero. Al�m disso, crie um nome compat�vel com sua fun��o, assim ser� mais f�cil saber o que ele faz.

  Agora vamos alterar algumas propriedades. Para isso:

  Na se��o Propriedades, altere as seguintes:

  � CorDeFundo: Vermelho.
  � FonteNegrito: clique no checkbox para ativar o negrito.
  � Forma: arredondado.
  � Texto: Vermelho.
  � CorDeTexto: Branco.

  Depois disso, o seu projeto dever� ficar igual ao da Figura 2.6:

Figura 2.6 � Apar�ncia do projeto com o primeiro Bot�o.

  Agora vamos inserir o segundo bot�o.

  Para isso:

  � Arraste outro bot�o da Paleta e solte na tela do celular. Imediatamente ele ir� ficar abaixo do primeiro bot�o, tendo em vista que o primeiro bot�o j� ocupou o resto da linha e n�o estamos utilizamos nenhum layout.

  Alterando as propriedades do segundo Bot�o

  Agora vamos alterar algumas de suas propriedades.

  Na se��o Propriedades, altere as seguintes:

  � Nome: btnAzul. Utilize o bot�o Renomear na se��o Componentes.
  � CorDeFundo: Azul.
  � FonteNegrito: clique no checkbox para ativar o negrito.
  � Forma: arredondado.
  � Texto: Azul.
  � CorDeTexto: Branco.

  Depois disso, o seu projeto dever� ficar igual ao da Figura 2.7:

Figura 2.7 � Apar�ncia do design do projeto conclu�do.

  Voc� deve ter notado que o bot�o azul ficou menor do que o vermelho. Isso acontece por-que o App Inventor 2 dimensiona o tamanho do bot�o de acordo com o r�tulo inserido nele, � o padr�o. Mais adiante, em outros tutoriais, veremos como dimensionar os componentes para o tamanho que quisermos.

  Agora vamos criar os c�digos dos componentes.

  C�digo para o primeiro Bot�o:

  Agora que terminamos a parte visual do nosso projeto, vejamos como criar os c�digos e tornar o nosso aplicativo funcional. Para isso:

  � Clique no bot�o Blocos, no canto superior direito da tela.
  � Feito isso, ser� mostrada a tela da Figura 2.8:

Figura 2.8 � Tela Blocos.

  Essa tela apresenta duas se��es, ou janelas. A se��o da esquerda mostra a rela��o dos blocos, organizados por categorias, e a janela da direita mostra uma tela em branco. O que vamos fazer � arrastar os blocos que queremos para a �rea branca e montar o c�digo do nosso aplicativo, de acordo com a finalidade do projeto.

  Ent�o vamos l�:

  � Na se��o da esquerda � Blocos � clique no bot�o btnVermelho. Feito isso ser�o apresentados todos os blocos de c�digo referentes a esse bot�o, conforme mostra a Figura 2.9:

Figura 2.9 � Tela de Blocos de c�digos referentes ao Bot�o btnVermelho.

  Para ver mais op��es, gire o bot�o central do mouse para baixo ou arraste a barra de rolagem vertical.

  � Agora, clique no primeiro bloco e arraste para a �rea em branco. Veja na Figura 2.10:

Figura 2.10 � Bloco de c�digo a ser utilizado pelo Bot�o btnVermelho.

  Esse c�digo est� dizendo o seguinte:

  Quando o bot�o btnVermelho for clicado, fa�a alguma coisa. E essa alguma coisa � alte-rar a cor de fundo da tela do celular para vermelho. Para isso, vamos criar o c�digo para cumprir essa tarefa. Ent�o:

  � Clique no bot�o Screen1, e arraste o bloco marcado na Figura 2.11 para a �rea branca:

Figura 2.11 � C�digo da Screen1 para alterar a cor de fundo.

  � Em seguida, encaixe esse bloco na lacuna �fazer� do bloco j� existente. Veja na Figura 2.12 como seu c�digo dever� ficar:

Figura 2.12 � C�digo complementar para o Bot�o btnVermelho.

  Esse c�digo nos diz que, quando o bot�o btnVermelho for clicado, ajuste a cor de fundo da tela Screen1 para uma cor qualquer. Para finalizarmos o c�digo do bot�o btnVermelho precisamos informar a cor que desejamos.

  Para isso:

  � Clique na categoria Cores e arraste o pequeno bloco referente � cor Vermelha e encaixe no final do c�digo j� existente. Seu c�digo dever� ficar igual ao da Figura 2.13:

Figura 2.13 � C�digo final do bot�o btnVermelho.

  E assim conclu�mos o c�digo referente ao bot�o btnVermelho.

  C�digo para o segundo Bot�o

  Para criar o c�digo do segundo bot�o � btnAzul - utilize o mesmo procedimento anterior. O seu c�digo final dever� ficar igual ao da Figura 2.14:

Figura 2.14 � C�digo completo do Projeto.

  Feito isso, terminamos o nosso primeiro projeto. Para execut�-lo consulte o pr�ximo tutorial: Como Executar seu Aplicativo em um Dispositivo Real no App Inventor 2. L� voc� encontrar� todas as instru��es necess�rias.

  Voc� pode baixar o c�digo completo desse projeto acessando os links:

  AlteraCorDeFundo.aia

  AlteraCorDeFundo.apk