Conceitos básicos do Kotlin para Android 02.2: adicionar interatividade do usuário

Este codelab faz parte do curso Conceitos básicos do Kotlin para Android. Você vai aproveitar mais este curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página inicial dos codelabs de princípios básicos do Kotlin para Android.

Esses codelabs fazem parte do curso Conceitos básicos do Kotlin para Android. Você vai aproveitar mais este curso se fizer os codelabs em sequência.

Os codelabs desta série são:

• 2.1 Layout linear usando o Layout Editor
• 2.2 Adicionar interatividade do usuário
• 2.3 Layout restrito usando o Layout Editor
• 2.4 Conceitos básicos da vinculação de dados

O que você já precisa saber

• Criar um app Android básico em Kotlin.
• Executar um app Android em um emulador ou dispositivo.
• Criar um layout linear usando o Layout Editor do Android Studio .
• Criar um app simples que usa LinearLayout, TextView, ScrollView e um botão com um gerenciador de cliques.

O que você vai aprender

• Como receber entradas do usuário usando uma visualização EditText.
• Como definir o texto em uma visualização TextView usando o texto da visualização EditText.
• Como trabalhar com View e ViewGroup.
• Como mudar a visibilidade de um View.

Atividades deste laboratório

• Adicione interatividade ao app AboutMe, que é de um codelab anterior.
• Adicione um EditText para que o usuário possa inserir texto.
• Adicione um Button e implemente o gerenciador de cliques dele.

Neste codelab, você vai ampliar o app AboutMe para adicionar interação do usuário. Você adiciona um campo de apelido, um botão CONCLUÍDO e uma visualização de texto para mostrar o apelido. Quando o usuário insere um apelido e toca no botão CONCLUÍDO, a visualização de texto é atualizada para mostrar o apelido inserido. O usuário pode atualizar o apelido novamente tocando na visualização de texto.

Nesta tarefa, você vai adicionar um campo de entrada EditText para permitir que o usuário insira um apelido.

Etapa 1: primeiros passos

1. Se você ainda não tiver o app AboutMe de um codelab anterior, faça o download do código inicial, AboutMeInteractive-Starter. Esse é o mesmo código que você concluiu em um codelab anterior.
2. Abra o projeto AboutMeInteractive-Starter no Android Studio.
3. Execute o app. Você vai ver uma visualização de texto com um nome, uma imagem de estrela e um longo segmento de texto em uma visualização de rolagem.
   
   
   
   Observe que o usuário não pode mudar nenhum texto.

Os apps são mais interessantes se o usuário puder interagir com eles, por exemplo, inserindo texto. Para aceitar a entrada de texto, o Android oferece um widget de interface do usuário (IU) chamado texto de edição. Você define um texto de edição usando EditText, uma subclasse de TextView. Uma edição de texto permite que o usuário insira e modifique a entrada de texto, conforme mostrado na captura de tela abaixo.

Etapa 2: adicionar um EditText

1. No Android Studio, abra o arquivo de layout activity_main.xml na guia Design.
2. No painel Palette, clique em Text.
   
   
   
   Ab TextView, que é um TextView, aparece na parte de cima da lista de elementos de texto no painel Palette. Abaixo de Ab TextView, há várias visualizações EditText.
   
   No painel Palette, observe como o ícone de TextView mostra as letras Ab sem sublinhado. No entanto, os ícones EditText mostram Ab sublinhado. O sublinhado indica que a visualização pode ser editada.
   
   Para cada uma das visualizações EditText, o Android define atributos diferentes, e o sistema mostra o método de entrada flexível adequado (como um teclado na tela).
3. Arraste um texto de edição PlainText para a Component Tree e coloque-o abaixo do name_text e acima do star_image.
   
   
   
4. Use o painel Atributos para definir os seguintes atributos na visualização EditText.

Attribute	Valor
id	nickname_edit
layout_width	match_parent (padrão)
layout_height	wrap_content (padrão)

5. Execute o app. Acima da imagem da estrela, você vai ver um texto de edição com o texto padrão "Nome".
   
   
   

Nesta tarefa, você vai estilizar a visualização EditText adicionando uma dica, mudando o alinhamento do texto, alterando o estilo para NameStyle e definindo o tipo de entrada.

Etapa 1: adicionar texto de dica

1. Adicione um novo recurso de string para a dica no arquivo string.xml.

<string name="what_is_your_nickname">What is your Nickname?</string>

Dica : é recomendável mostrar uma dica em cada visualização EditText para ajudar os usuários a descobrir qual entrada é esperada para campos editáveis.

2. Use o painel Atributos para definir os seguintes atributos na visualização EditText:

Attribute	Valor
style	NameStyle
textAlignment	(center)
hint	@string/what_is_your_nickname

3. No painel Atributos, remova o valor Name do atributo text. O valor do atributo text precisa estar vazio para que a dica seja mostrada.

Etapa 2: definir o atributo inputType

O atributo inputType especifica o tipo de entrada que os usuários podem inserir na visualização EditText. O sistema Android mostra o campo de entrada e o teclado na tela adequados, dependendo do tipo de entrada definido.

Para conferir todos os tipos de entrada possíveis, no painel Atributos, clique no campo inputType ou nos três pontos ... ao lado dele. Uma lista é aberta mostrando todos os tipos de entrada que você pode usar, com o tipo de entrada ativo no momento marcado. É possível selecionar mais de um tipo de entrada.

Por exemplo, para senhas, use o valor textPassword. O campo de texto oculta a entrada do usuário.

Para números de telefone, use o valor phone. Um teclado numérico é exibido, e o usuário pode inserir apenas números.

Defina o tipo de entrada para o campo de apelido:

1. Defina o atributo inputType como textPersonName para o texto de edição nickname_edit.
2. No painel Component Tree, observe um aviso de autoFillHints. Esse aviso não se aplica a este app e está fora do escopo deste codelab. Portanto, ignore-o. Se quiser saber mais sobre o preenchimento automático, consulte Otimizar seu app para o preenchimento automático.
   
3. No painel Atributos , verifique os valores dos seguintes atributos da visualização EditText:

Atributo	Valor
id	nickname_edit
layout_width	match_parent (padrão)
layout_height	wrap_content (padrão)
style	@style/NameStyle
inputType	textPersonName
hint	"@string/what_is_your_nickname"
text	(vazio)

Um Button é um elemento da interface que o usuário pode tocar para realizar uma ação. Um botão pode consistir em texto, um ícone ou ambos.

Nesta tarefa, você vai adicionar um botão CONCLUÍDO, que o usuário toca depois de inserir um apelido. O botão troca a visualização EditText por uma TextView que mostra o apelido. Para atualizar o apelido, o usuário pode tocar na visualização TextView.

Etapa 1: adicionar um botão "CONCLUÍDO"

1. Arraste um botão do painel Paleta para a Árvore de componentes. Coloque o botão abaixo do texto de edição nickname_edit.
   
   
2. Crie um novo recurso de string chamado done. Atribua à string o valor Done.

<string name="done">Done</string>

3. Use o painel Atributos para definir os seguintes atributos na visualização Button recém-adicionada:

Attribute	Valores
id	done_button
text	@string/done
layout_gravity	center_horizontal
layout_width	wrap_content

O atributo layout_gravity centraliza a visualização no layout pai, LinearLayout.

4. Mude o estilo para Widget.AppCompat.Button.Colored, que é um dos estilos predefinidos fornecidos pelo Android. Você pode selecionar o estilo no menu suspenso ou na janela Recursos.
   
   
   
   Esse estilo muda a cor do botão para a cor de destaque, colorAccent. A cor de destaque é definida no arquivo res/values/colors.xml.
   
   
   

O arquivo colors.xml contém as cores padrão do app. Você pode adicionar novos recursos de cores ou mudar os recursos atuais no projeto com base nos requisitos do app.

Arquivo colors.xml de amostra:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

Etapa 2: estilizar o botão "CONCLUÍDO"

1. No painel Atributos, adicione uma margem superior selecionando Layout_Margin > Top. Defina a margem superior como layout_margin, que é definida no arquivo dimens.xml.
   
   
   
2. Defina o atributo fontFamily como roboto no menu suspenso.
   
   
   
3. Mude para a guia Texto e verifique o código XML gerado para o botão recém-adicionado.
   

<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

Etapa 3: mudar o recurso de cor

Nesta etapa, você muda a cor de destaque do botão para corresponder à barra de apps da atividade.

1. Abra res/values/colors.xml e mude o valor de colorAccent para #76bf5e.
   

<color name="colorAccent">#76bf5e</color>

É possível ver a cor correspondente ao código HEX na margem esquerda do editor de arquivos.

Observe a mudança na cor do botão no editor de design.

2. Execute o app. Você vai ver um botão DONE estilizado abaixo do texto de edição.
   
   
   

Depois que o usuário insere um apelido e toca no botão CONCLUÍDO, o apelido aparece em uma visualização TextView. Nesta tarefa, você vai adicionar uma visualização de texto com um plano de fundo colorido. A visualização de texto mostra o apelido do usuário acima do star_image.

Etapa 1: adicionar uma TextView para o apelido

1. Arraste uma visualização de texto do painel Palette para a Component Tree. Coloque a visualização de texto abaixo do done_button e acima do star_image.
   
   

2. Use o painel Atributos para definir os seguintes atributos da nova visualização TextView:

Attribute	Valor
id	nickname_text
style	NameStyle
textAlignment	(centro)

Etapa 2: mudar a visibilidade da TextView

É possível mostrar ou ocultar visualizações no app usando o atributo visibility. Esse atributo usa um de três valores:

• visible: a visualização está visível.
• Invisible: oculta a visualização, mas ela ainda ocupa espaço no layout.
• gone: oculta a visualização, que não ocupa espaço no layout.

1. No painel Atributos, defina a visibility da visualização de texto nickname_text como gone, porque você não quer que o app mostre essa visualização de texto no início.
   
   
   
   À medida que você muda o atributo no painel Atributos, a visualização nickname_text desaparece do editor de design. A visualização fica oculta na prévia do layout.
2. Mude o valor do atributo text da visualização nickname_text para uma string vazia.

O código XML gerado para esse TextView será semelhante a este:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

A prévia do layout vai ficar assim:

Um gerenciador de cliques no objeto Button (ou em qualquer visualização) especifica a ação a ser realizada quando o botão (visualização) é tocado. A função que processa o evento de clique precisa ser implementada no Activity que hospeda o layout com o botão (visualização).

O listener de cliques tem genericamente este formato, em que a visualização transmitida é a que recebeu o clique ou toque.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Você pode anexar a função de listener de clique a eventos de clique do botão de duas maneiras:

• No layout XML, adicione o atributo android:onClick ao elemento <Button>. Exemplo:

<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

OU

• É possível fazer isso de maneira programática no tempo de execução, em onCreate() do Activity, chamando setOnClickListener. Exemplo:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

Nesta tarefa, você vai adicionar um listener de clique para o done_button de maneira programática. Você adiciona o listener de clique na atividade correspondente, que é MainActivity.kt.

Sua função de listener de clique, chamada addNickname, fará o seguinte:

• Extraia o texto da edição nickname_edit.
• Defina o texto na visualização de texto nickname_text.
• Ocultar o texto de edição e o botão.
• Mostrar o apelido TextView.

Etapa 1: adicionar um listener de clique

1. No Android Studio, na pasta java, abra o arquivo MainActivity.kt.
2. No MainActivity.kt, na classe MainActivity, adicione uma função chamada addNickname. Inclua um parâmetro de entrada chamado view do tipo View. O parâmetro view é o View em que a função é chamada. Nesse caso, view será uma instância do botão CONCLUÍDO.

private fun addNickname(view: View) {
}

3. Dentro da função addNickname, use findViewById() para receber uma referência ao texto de edição nickname_edit e à visualização de texto nickname_text.

val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)

4. Defina o texto na visualização de texto nicknameTextView como o texto que o usuário inseriu em editText, extraindo-o da propriedade text.

nicknameTextView.text = editText.text

5. Oculte a visualização do apelido EditText definindo a propriedade visibility de editText como View.GONE.

Em uma tarefa anterior, você mudou a propriedade visibility usando o Layout Editor. Aqui você faz a mesma coisa de maneira programática.

editText.visibility = View.GONE

6. Oculte o botão CONCLUÍDO definindo a propriedade visibility como View.GONE. Você já tem a referência do botão como o parâmetro de entrada da função, view.

view.visibility = View.GONE

7. No final da função addNickname, defina a propriedade visibility da visualização do apelido TextView como View.VISIBLE para que ela fique visível.

nicknameTextView.visibility = View.VISIBLE

Etapa 2: anexar o listener de clique ao botão "DONE"

Agora que você tem uma função que define a ação a ser realizada quando o botão CONCLUÍDO é tocado, é necessário anexar a função à visualização Button.

1. Em MainActivity.kt, no final da função onCreate(), receba uma referência à visualização DONE Button. Use a função findViewById() e chame setOnClickListener. Transmita uma referência à função de listener de clique, addNickname().

findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

No código acima, it se refere ao done_button, que é a visualização transmitida como argumento.

2. Execute o app, digite um apelido e toque no botão CONCLUÍDO. Observe como o texto de edição e o botão são substituídos pela visualização de texto do apelido.

Mesmo depois que o usuário toca no botão CONCLUÍDO, o teclado ainda fica visível. Esse é o comportamento padrão.

Etapa 3: ocultar o teclado

Nesta etapa, você adiciona um código para ocultar o teclado depois que o usuário toca no botão CONCLUÍDO.

1. Em MainActivity.kt, no final da função addNickname(), adicione o seguinte código. Para mais informações sobre como esse código funciona, consulte a documentação de hideSoftInputFromWindow.

// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)

2. Execute o app novamente. Depois de tocar em PRONTO,o teclado é ocultado.

Não há como o usuário mudar o apelido depois de tocar no botão CONCLUÍDO. Na próxima tarefa, você vai tornar o app mais interativo e adicionar funcionalidades para que o usuário possa atualizar o apelido.

Nesta tarefa, você vai adicionar um listener de clique à visualização de texto do apelido. O listener de cliques oculta a visualização de texto do apelido, mostra o texto de edição e o botão CONCLUÍDO.

Etapa 1: adicionar um listener de clique

1. Em MainActivity, adicione uma função de listener de clique chamada updateNickname(view: View) para a visualização de texto do apelido.

private fun updateNickname (view: View) {
}

2. Na função updateNickname, receba uma referência ao texto de edição nickname_edit e ao botão CONCLUÍDO . Para fazer isso, use o método findViewById().

val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)

3. No final da função updateNickname, adicione um código para mostrar o texto de edição, o botão CONCLUÍDO e ocultar a visualização de texto.

editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE

4. Em MainActivity.kt, no final da função onCreate(), chame setOnClickListener na visualização de texto nickname_text. Transmita uma referência à função de listener de clique, que é updateNickname().

findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}

5. Execute o app. Insira um apelido, toque no botão CONCLUÍDO e depois na visualização do apelido TextView. A visualização do apelido desaparece, e o texto de edição e o botão CONCLUÍDO ficam visíveis.
   
   
   

Por padrão, a visualização EditText não tem foco e o teclado não fica visível. É difícil para o usuário descobrir que a visualização de texto do apelido pode ser clicada. Na próxima tarefa, você vai adicionar foco e um estilo à visualização de texto do apelido.

Etapa 2: definir o foco na visualização EditText e mostrar o teclado

1. No final da função updateNickname, defina o foco na visualização EditText. Use o método requestFocus().

// Set the focus to the edit text.
editText.requestFocus()

2. No final da função updateNickname, adicione o código para tornar o teclado visível.

// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

Etapa 3: adicionar uma cor de fundo à visualização TextView do apelido

1. Defina a cor do plano de fundo da visualização de texto nickname_text como @color/colorAccent e adicione um padding na parte de baixo de @dimen/small_padding. Essas mudanças vão servir como uma dica para o usuário de que a visualização de texto do apelido pode ser clicada.

android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"

2. Execute o app final. O texto de edição está em foco, o apelido é mostrado no texto de edição, e a visualização de texto do apelido está estilizada.

Agora mostre seu app interativo AboutMe para um amigo.

Projeto do Android Studio: AboutMeInteractive

• A ferramenta Layout Editor no Android Studio é um editor de design visual. Use o Layout Editor para criar o layout do app arrastando elementos de interface para ele.
• EditText é um elemento da interface que permite que o usuário insira e modifique texto.
• Um Button é um elemento da interface que o usuário pode tocar para realizar uma ação. Um botão pode consistir em texto, um ícone ou ambos.

Listeners de cliques

• Para fazer com que qualquer View responda a um toque, adicione um listener de clique a ele.
• A função que define o listener de clique recebe o View clicado.

É possível anexar uma função de listener de clique a um View de duas maneiras:

• No layout XML, adicione o atributo android:onClick ao elemento <View>.
• De forma programática, use a função setOnClickListener(View.OnClickListener) no Activity correspondente.

Curso da Udacity:

• Desenvolvimento de apps Android com Kotlin

Documentação do desenvolvedor Android:

• Criar uma interface com o Layout Editor
• Button
• EditText
• Tipos de entrada
• Gerenciar entrada do teclado
• Estilos e temas

Esta seção lista as possíveis atividades de dever de casa para os alunos que estão fazendo este codelab como parte de um curso ministrado por um professor. Cabe ao professor fazer o seguinte:

• Atribuir o dever de casa, se necessário.
• Informar aos alunos como enviar deveres de casa.
• Atribuir nota aos deveres de casa.

Os professores podem usar essas sugestões o quanto quiserem, podendo passar os exercícios que acharem mais apropriados como dever de casa.

Se você estiver seguindo este codelab por conta própria, sinta-se à vontade para usar esses deveres de casa para testar seu conhecimento.

Responda estas perguntas

Pergunta 1

A EditText é uma subclasse de qual destas opções?

• View
• LinearLayout
• TextView
• Button

Pergunta 2

Qual dos valores de atributo visibility abaixo faz com que uma visualização fique oculta e não ocupe espaço no layout?

• visible
• Invisible
• gone
• hide

Pergunta 3

Para visualizações EditText, não é uma boa prática fornecer dicas, porque elas atrapalham o campo de entrada. Verdadeiro ou falso?

• Verdadeiro
• Falso

Pergunta 4

Qual das afirmações a seguir sobre visualizações Button é verdadeira?

• Uma visualização Button é um grupo de visualizações.
• Você só pode ter três visualizações Button por tela.
• As visualizações Button são clicáveis e, quando ocorre um clique, o listener de cliques anexado realiza uma ação.
• Uma visualização Button é uma extensão de ImageView.

Comece a próxima lição: 2.3: Layout restrito usando o Layout Editor

Para acessar links de outros codelabs neste curso, consulte a página inicial dos codelabs de conceitos básicos do Kotlin para Android.