Introdução

Até agora, você configurou tudo e o Android Studio criou muitos códigos. Antes de modificar todo esse código, é importante saber o que você acabou de criar e como navegar pelos arquivos fonte de um aplicativo Android.

Neste tutorial, você aprende mais sobre os principais componentes de um aplicativo Android e adiciona interatividade simples a um aplicativo com um botão.

O que já deveria saber

O que aprenderá

O que fará

Neste tutorial, você cria um projeto de aplicativo chamado DiceRoller e adiciona interatividade básica com um botão. Cada vez que o botão é clicado, o valor do texto exibido muda. O aplicativo DiceRoller final para este tutorial se parece com este:

No último tutorial, você aprendeu sobre as partes principais de um projeto de aplicativo, incluindo os diretórios java e res. Nesta tarefa, você se concentra nos dois arquivos mais importantes que compõem seu aplicativo: O arquivo MainActivity Kotlin e o arquivo de layout activity_main.xml.

Etapa 1: Examine a atividade principal

MainActivity é um exemplo de uma Activity. Uma Activity é uma classe Android principal que desenha uma interface de usuário (IU) de aplicativo Android e recebe eventos de entrada. Quando seu aplicativo é iniciado, ele inicia a atividade especificada no arquivo AndroidManifest.xml.

Muitas linguagens de programação definem um método principal que inicia o programa. Os aplicativos Android não possuem um método principal. Em vez disso, o arquivo AndroidManifest.xml indica que MainActivity deve ser iniciado quando o usuário toca no ícone do iniciador do aplicativo. Para iniciar uma atividade, o sistema operacional Android usa as informações no manifesto para configurar o ambiente para o aplicativo e construir a MainActivity. Em seguida, a MainActivity faz algumas configurações sucessivamente.

Cada atividade possui um arquivo de layout associado. A atividade e o layout são conectados por um processo conhecido como inflação do layout. Quando a atividade começa, as vistas definidas nos arquivos de layout XML são transformadas (ou "infladas" em) objetos de vistas Kotlin na memória. Assim que isso acontecer, a atividade pode desenhar esses objetos na tela e também modificá-los dinamicamente.

  1. No Android Studio, selecione File > New > New Project para criar um projeto. Use a atividade Vazia e clique em Next.
  2. Chame o projeto DiceRoller e verifique todos os outros valores para o nome do projeto local do projeto. Certifique-se de que "Use AndroidX Artifacts" esteja marcado. Clique em Finish.


  3. No painel Project > Android, expanda java > com.example.android.diceroller. Clique duas vezes em MainActivity. O editor de código mostra o código em MainActivity.


  4. Abaixo do nome do pacote e das instruções de importação está a declaração de classe para MainActivity. A classe MainActivity estende AppCompatActivity. 
class MainActivity : AppCompatActivity() { ...
  1. Observe o método onCreate(). As atividades não usam um construtor para inicializar o objeto. Em vez disso, uma série de métodos predefinidos (chamados "métodos de ciclo de vida") são chamados como parte da configuração da atividade. Um desses métodos de ciclo de vida é onCreate(), que você sempre substitui em seu próprio aplicativo. Você aprenderá mais sobre os métodos de ciclo de vida em um tutorial posterior.

    Em onCreate(), você especifica qual layout está associado à atividade e infla o layout. O método setContentView() faz ambos. 
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

O método setContentView() faz referência ao layout usando R.layout.activity_main, que, na verdade, é uma referência inteira. A classe R é gerada quando você constrói seu aplicativo. A classe R inclui todos os recursos do aplicativo, incluindo o conteúdo do diretório res.

Neste caso, R.layout.activity_main se refere à classe R gerada, a pasta layout e o activity_main.xml arquivo de layout. (Os recursos não incluem extensões de arquivo). Você se referirá a muitos dos recursos do aplicativo (incluindo imagens, strings e elementos no arquivo de layout) usando referências semelhantes na classe R.

Etapa 2: Examine e explore o arquivo de layout do aplicativo

Todas as atividades em seu aplicativo possuem um arquivo de layout associado no diretório res/layout do aplicativo. Um arquivo de layout é um arquivo XML que expressa a aparência real de uma atividade. Um arquivo de layout faz isso definindo vistas e definindo onde as vistas aparecem na tela.

Vistas são algo como texto, imagens e botões que estendem a classe View. Existem muitos tipos de vistas, incluindo TextView, Button, ImageView e CheckBox.

Nesta tarefa, você examina e modifica o arquivo de layout do aplicativo.

  1. No painel Project > Android, expanda res > layout e clique duas vezes em activity_main.xml. O editor de design de layout é aberto. O Android Studio inclui este editor, que permite construir o layout do seu aplicativo de uma forma visual e visualizar o design do layout. Você aprenderá mais sobre o editor de design em um tutorial posterior.
  2. Para visualizar o arquivo de layout como XML, clique na guia Text na parte inferior da janela.


  3. Exclua todo o código XML existente no editor de layout. O layout padrão que você obtém com um novo projeto é um bom ponto de partida se você estiver trabalhando com o editor de design do Android Studio. Para esta lição, você trabalhará com o XML subjacente para construir um novo layout do zero.
  4. Copie e cole este código no layout: 


<LinearLayout   
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

Agora examine o código:

  1. O nível superior ou elemento raiz do layout é um elemento <LinearLayout>. A vista LinearLayout é um ViewGroup. Grupos de vistas são contêineres que contêm outras vistas e ajudam a especificar as posições das vistas na tela.

    Todas as vistas e grupos de vistas que você adiciona ao seu layout são organizados em uma vista hierarquia, com o elemento XML superior como a raiz dessa hierarquia. A vista raiz pode conter outras vistas e grupos de vista, e os grupos de vistas contidos podem conter outras vistas e grupos de vista. Quando seu aplicativo executa, a hierarquia de vistas em seu arquivo de layout XML torna-se uma hierarquia de objetos quando o layout é inflado. Nesse caso, o grupo de vistas raiz é um layout linear, que organiza suas vistas filhas linearmente, uma após a outra (vertical ou horizontalmente).

    A raiz padrão que você obtém para um novo projeto Android é um ConstraintLayout, que funciona bem em coordenação com o editor de design. Para este aplicativo, você usa um grupo de vistas LinearLayout, que é mais simples do que o layout de restrição. Você aprenderá muito mais sobre grupos de vistas e layout de restrição na próxima lição.
  2. Dentro da etiqueta LinearLayout, observe o atributo android:layout_width. A largura deste LinearLayout é configurada para match parent, o que o torna da mesma largura de seu pai. Como esta é a vista raiz, o layout se expande para a largura total da tela.
  3. Observe o atributo android:layout_height, que é definido como wrap_content. Este atributo faz com que a altura do LinearLayout corresponda à altura combinada de todas as vistas que ele contém, que por enquanto é apenas o TextView.
  4. Examine o elemento <TextView>. Este TextView, que exibe texto, é o único elemento visual em seu aplicativo DiceRoller. O atributo android:text contém a string real a ser exibida, neste caso, a string "Hello World!"
  5. Observe os atributos android:layout_width e android:layout_height no elemento <TextView>, ambos definidos como wrap_content. O conteúdo da vista de texto é o próprio texto, portanto, a vista ocupará apenas o espaço necessário para o texto.

O aplicativo de lançamento de dados não é muito útil sem uma maneira do usuário rolar os dados e ver o que eles rolaram. Para começar, adicione um botão ao layout para lançar os dados e adicione um texto que mostre o valor dos dados que o usuário lançou.

Etapa 1: Adicione um botão ao layout

  1. Adicione um elemento Button ao layout abaixo da vista de texto inserindo <Button e pressione Return. Um bloco Button aparece que termina com /> e inclui os atributos layout_width e layout_height. 
<Button
   android:layout_width=""
   android:layout_height="" />
  1. Defina os atributos layout_width e layout_height como "wrap_content". Com esses valores, o botão tem a mesma largura e altura do rótulo de texto que contém.
  2. Adicione um atributo android:text ao botão e atribua a ele o valor "Roll". O elemento Button agora se parece com isto: 
<Button
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Roll" />


Para vistas de Button, o atributo text é o rótulo do botão. No editor de layout, o atributo é destacado em amarelo, o que indica uma dica ou um aviso. Nesse caso, o destaque amarelo é porque a string "Roll" está codificada no rótulo do botão, mas a string deve ser um recurso. Você aprenderá sobre os recursos de string na próxima seção.

Etapa 2: Extraia recursos de string

Em vez de codificar strings em seu layout ou arquivos de código, é uma prática recomendada colocar todas as strings de seu aplicativo em um arquivo separado. Este arquivo é denominado strings.xml e está localizado entre os recursos do aplicativo, no diretório res/values/.

Tendo as strings em um arquivo separado torna mais fácil gerenciá-las, especialmente se você usar essas strings mais de uma vez. Além disso, os recursos de string são obrigatórios para traduzir e localizar seu aplicativo, pois você precisa criar um arquivo de recurso de string para cada idioma.

O Android Studio ajuda você a se lembrar de colocar suas strings em um arquivo de recurso com dicas e avisos.

  1. Clique uma vez na string "Roll" no atributo android:text da etiqueta <Button>.
  2. Pressione Alt+Enter (Option+Enter no macOS) e selecione Extract string resource no menu pop-up.
  3. Digite roll_label para o Resource name.
  4. Clique em OK. Um recurso de string é criado no arquivo res/values/string.xml e a string no elemento Button é substituída por uma referência a esse recurso:
    android:text="@string/roll_label"
  5. No painel Project > Android, expanda res > values e clique duas vezes em strings.xml para ver seus recursos de string no strings.xml: 
<resources>
   <string name="app_name">DiceRoller</string>
   <string name="roll_label">Roll</string>
</resources>

Etapa 3: Vistas de estilo e posição

Seu layout agora contém uma vista TextView e uma vista Button. Nesta tarefa, você organiza as vistas dentro do grupo de vistas para parecerem mais atraentes.

  1. Clique na guia Design para ver uma prévia do layout. No momento, as duas vistas estão próximas uma da outra e empurradas para o topo da tela.


  2. Clique na guia Text para retornar ao editor XML. Adicione o atributo android:orientation à etiqueta LinearLayout e atribua a ele um valor de "vertical". O elemento <LinearLayout> agora deve ter a seguinte aparência: 
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   tools:context=".MainActivity">

O grupo de vistas LinearLayout posiciona as vistas que contém uma após a outra em uma linha, seja horizontalmente em uma linha ou verticalmente em uma pilha. Horizontal é o padrão. Como você deseja que o TextView seja empilhado sobre o Button, defina a orientação como vertical. O design agora se parece com isto, com o botão abaixo do texto:

  1. Adicione o atributo android:layout_gravity ao TextView e ao Button e atribua a ele o valor "center_horizontal". Isso alinha ambas as vistas ao longo do centro do eixo horizontal. Os elementos TextView e Button agora devem ter a seguinte aparência:
<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="Hello World!" />

<Button
   android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:text="@string/roll_label" />
  1. Adicione o atributo android:layout_gravity ao layout linear e atribua a ele o valor de "center_vertical". Seu elemento LinearLayout agora deve ter a seguinte aparência: 
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:orientation="vertical"
   android:layout_gravity="center_vertical"
   tools:context=".MainActivity">
  1. Para aumentar o tamanho do texto na vista de texto, adicione o atributo android:textSize ao elemento <TextView> com o valor "30sp". A abreviatura sp significa pixels dimensionáveis ​​, que é uma medida para dimensionar o texto independentemente da qualidade da tela do dispositivo. O elemento TextView agora deve ter a seguinte aparência:
<TextView   
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:textSize="30sp"
   android:text="Hello World!" />
  1. Compile e execute seu aplicativo.


Agora, tanto o texto quanto o botão estão bem posicionados e há um texto maior na vista de texto. O botão ainda não tem nenhuma funcionalidade, então nada acontece quando você clica nele. Você trabalha nisso a seguir.

Etapa 4: Obtenha uma referência ao botão no código

O código Kotlin em MainActivity é responsável por definir as partes interativas do seu aplicativo, como o que acontece quando você toca em um botão. Para escrever uma função que é executada quando o botão é clicado, você precisa obter uma referência ao objeto Button em seu layout inflado em MainActivity. Para obter uma referência ao botão:

Depois de ter uma referência à vista Button, você pode chamar métodos nessa vista para alterá-la dinamicamente à medida que o aplicativo é executado. Por exemplo, você pode adicionar um tratador de cliques que executa o código quando o botão é pressionado.

  1. Abra o arquivo de layout activity_main.xml, se ainda não estiver aberto, e clique na guia Text.
  2. Adicione o atributo android:id ao botão e provenha a ele um nome (neste caso, "@+id/roll_button"). Seu elemento <Button> agora se parece com isto:
<Button
   android:id="@+id/roll_button"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:text="@string/roll_label" />

Quando você cria um ID para uma vista no arquivo de layout XML, o Android Studio cria uma constante de número inteiro com o nome desse ID na classe R gerada. Portanto, se você nomear uma vista roll_button, o Android Studio gera e cria uma constante de número inteiro chamada roll_button na classe R. O prefixo "@+id" para o nome do ID diz ao compilador para adicionar essa constante de ID à classe R. Todos os IDs de vistas da propriedade em seu arquivo XML devem ter este prefixo.

  1. Abra o arquivo MainActivity Kotlin. Dentro de onCreate(), depois de setContentView(), adicione esta linha: 
val rollButton: Button = findViewById(R.id.roll_button)

Use o método findViewById() para obter uma referência de View para a vista que você definiu na classe XML. Neste caso, você obtém a referência do Button da classe R e o ID roll_button e atribui essa referência ao rollButton.

  1. Observe que o Android Studio destaca a classe Button em vermelho e a sublinha, para indicar que é uma referência não resolvida e que você precisa importar esta classe antes de poder usá-la. Uma dica de ferramenta indicando o nome de classe qualificado também pode aparecer:


  2. Pressione Alt+Enter (Option+Enter em um Mac) para aceitar o nome de classe qualificado.

Etapa 5: Adicione um tratador de cliques para exibir um toast

Um tratador de clique é um método que é invocado cada vez que o usuário clica ou toca em um elemento clicável da IU, como um botão. Para criar um gerenciador de cliques, você precisa:

Nesta tarefa, você cria um método de tratador de cliques para exibir um Toast. (Um toast é uma mensagem que aparece na tela por um curto período). Você conecta o método do tratador de cliques ao Button.

  1. Em sua classe MainActivity após onCreate(), crie uma função privada chamada rollDice(). 
private fun rollDice() {
  
}
  1. Adicione esta linha ao método rollDice() para exibir um Toast quando rollDice() é chamado:
Toast.makeText(this, "button clicked", 
   Toast.LENGTH_SHORT).show()

Para criar um toast, chame o método Toast.makeText(). Este método requer três objetos:

  1. Em onCreate(), após a chamada para findViewById() adicione esta linha para atribuir rollDice() como um tratador de clique para o rollButton: 
rollButton.setOnClickListener { rollDice() }

A definição completa de sua classe MainActivity agora se parece com isto: 

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val rollButton: Button = findViewById(R.id.roll_button)
        rollButton.setOnClickListener { rollDice() }
    }

    private fun rollDice() {
        Toast.makeText(this, "button clicked",
            Toast.LENGTH_SHORT).show()
    }
}
  1. Compile e execute seu aplicativo. Cada vez que você toca no botão, um toast deve aparecer.

Nesta tarefa, você modifica o método rollDice() para alterar o texto em TextView. Para a primeira etapa, você altera esse texto de "Hello World!" para a string "Dice Rolled!". Para a segunda etapa, você exibe um número aleatório entre um e seis.

Etapa 1: Exiba uma string

  1. Abra activity_main.xml e adicione um ID ao TextView. 
android:id="@+id/result_text"
  1. Abra MainActivity. No método rollDice(), comente a linha para exibir o Toast.
  2. Use o método findViewById() para obter uma referência ao TextView por seu ID. Atribua a referência a uma variável resultText. 
val resultText: TextView = findViewById(R.id.result_text)
  1. Atribua uma nova string à propriedade resultText.text para alterar o texto exibido. Você pode ignorar a dica para extrair essa string em um recurso; esta é apenas uma string temporária.
resultText.text = "Dice Rolled!"
  1. Compile e execute o aplicativo. Observe que tocar no botão Roll agora atualiza o TextView.

Etapa 2: Exiba um número aleatório

Finalmente, nesta tarefa você adiciona aleatoriedade ao clique do botão, para simular o lançamento dos dados. Cada vez que o botão é clicado ou tocado, seu código escolhe um número aleatório de 1 a 6 e atualiza o TextView. A tarefa de gerar um número aleatório não é específica do Android e você usa a função Random no intervalo para fazê-lo.

  1. No topo do método rollDice(), use o método (1..6).random() para obter um número aleatório entre 1 e 6: 
val randomInt = (1..6).random()
  1. Defina a propriedade text para o valor do número inteiro aleatório, como uma string:
resultText.text = randomInt.toString()
  1. Compile e execute o aplicativo. Cada vez que você toca no botão Roll, o número muda na vista do texto.

Projeto Android Studio: DiceRoller

Desafio: adicione um segundo botão ao aplicativo denominado "Count Up" que aparece logo abaixo do botão Roll. Quando tocado, o botão Count Up deve obter o valor atual da vista do texto do resultado, adicionar 1 a ele e atualizar a vista do texto. Certifique-se de tratar com estes casos extremos:

Código de solução de desafio de programação

Projeto Android Studio: desafio DiceRoller

Atividades

Vistas

Atributos de vista

Strings

Usando vistas

Usando toasts

Um toast é uma vista que mostra ao usuário uma mensagem simples em uma pequena janela pop-up.

Para criar um toast, chame o método fábrica makeText() na classe Toast com três argumentos:

Para exibir o toast, chame show().

Documentação para desenvolvimento em Android:

De outros:

Esta seção lista as possíveis tarefas de casa para os alunos que estão trabalhando neste tutorial como parte de um curso ministrado por um instrutor.

Altere um aplicativo

Abra o aplicativo DiceRoller. Adicione um botão ao aplicativo denominado "Reset" que aparece logo abaixo do botão Roll. Faça com que esse botão reinicie a vista do texto do resultado para 0.

Responda a essas perguntas

Pergunta 1

Qual método em uma Activity infla o layout do aplicativo e disponibiliza suas vistas como objetos?

Pergunta 2

Qual atributo de vistas você usa para definir a largura de uma vista para que se ajuste ao conteúdo?

Envie seu aplicativo para avaliação

Verifique se o aplicativo tem o seguinte:

Comece a próxima lição: 01.3: Recursos de imagem e compatibilidade

Para obter enlaces para outros tutoriais neste curso, consulte a página de destino dos tutoriais Fundamentos de Android em Kotlin.