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ê aproveitará mais o curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.

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

Os codelabs nesta 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

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

O que você vai aprender

• Como conseguir entrada do usuário usando uma visualização EditText.
• Como definir o texto como uma visualização TextView usando o texto da visualização EditText.
• Como trabalhar com View e ViewGroup.
• Como mudar a visibilidade de uma View.

Atividades do 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ê ampliará o app AboutMe para adicionar interações do usuário. Adicione um campo de apelido, um botão CONCLUÍDO e uma visualização de texto para exibir o apelido. Quando o usuário digita 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 tocando na visualização de texto.

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

Etapa 1: primeiros passos

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

Apps serão mais interessantes se o usuário puder interagir com o app, por exemplo, se ele puder inserir texto. Para aceitar a entrada de texto, o Android fornece um widget de interface do usuário (IU) chamado texto de edição. Defina um texto de edição usando EditText, uma subclasse de TextView. O texto de edição 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 é uma TextView, será exibida na parte superior da lista de elementos de texto do painel Palette. Abaixo de Ab TextView, há várias visualizações EditText.
   
   No painel Palette, observe como o ícone para TextView mostra as letras Ab sem sublinhamento. Os ícones EditText, no entanto, mostram Ab sublinhado. O sublinhamento indica que a visualização é editável.
   
   Para cada visualização EditText, o Android define atributos diferentes, e o sistema exibe o método de entrada simples adequado (como um teclado na tela).
3. Arraste um texto de edição de PlainText para a Component Tree e coloque-o abaixo de name_text e acima de star_image.
   
   
   
4. Use o painel Attributes para definir os seguintes atributos na visualização EditText.

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

5. Execute o app. Você verá um texto de edição acima do texto padrão "Nome".
   
   
   

Nesta tarefa, você estilizará a visualização EditText adicionando uma dica, mudando o alinhamento do texto, mudando 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 Attributes para definir os seguintes atributos com a visualização EditText:

Atributo	Valor
style	NameStyle
textAlignment	(ao centro)
hint	@string/what_is_your_nickname

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

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 exibirá o campo de entrada e o teclado na tela apropriados, dependendo do tipo de entrada definido.

Para ver todos os tipos de entrada possíveis, no painel Attributes, clique no campo inputType ou clique nos três pontos ... ao lado dele. Será aberta uma lista que mostra todos os tipos de entrada que você pode usar, com o tipo ativo no momento marcado. Você pode 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 será exibido, e o usuário poderá inserir somente 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 autoFillHints. Este aviso não se aplica a este app e está fora do escopo deste codelab, portanto, você pode ignorá-lo. Se quiser saber mais sobre o preenchimento automático, consulte Otimizar seu app para o preenchimento automático.
   
3. No painel Attributes, 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)

Uma Button é um elemento de IU em que o usuário pode tocar para realizar uma ação. Um botão pode ser formado por texto, um ícone ou ambos.

Nesta tarefa, você adicionará o botão CONCLUÍDO, em que o usuário tocará depois de digitar o apelido. O botão substitui a visualização EditText por uma visualização TextView que exibe 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 Palette para a Component Tree. Posicione o botão abaixo do texto de edição nickname_edit.
   
   
2. Crie um novo recurso de string chamado done. Dê à string um valor de Done.

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

3. Use o painel Attributes para definir os seguintes atributos na visualização Button adicionada recentemente:

Atributo	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 na lista suspensa ou na janela Recursos.
   
   
   
   Esse estilo altera 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 cor ou mudar os recursos de cor existentes 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: definir o estilo do botão CONCLUÍDO

1. No painel Attributes, 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. Acesse a guia Text 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 cores

Nesta etapa, você mudará a cor de destaque do botão para corresponder à barra de apps da sua 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ê verá um botão CONCLUÍDO abaixo do texto de edição.
   
   
   

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

Etapa 1: adicionar uma TextView ao 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 Attributes para definir os seguintes atributos para a nova visualização TextView:

Atributo	Valor
id	nickname_text
style	NameStyle
textAlignment	(centro)

Etapa 2: mudar a visibilidade da TextView

É possível exibir ou ocultar visualizações no app usando o atributo visibility. Esse atributo tem um destes 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 Attributes, 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.
   
   
   
   Ao mudar o atributo no painel Attributes, a visualização nickname_text desaparece do editor de design. A visualização fica oculta na visualização do layout.
2. Mude o valor do atributo text da visualização nickname_text para uma string vazia.

O código XML gerado para essa 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 visualização do layout será parecida com esta:

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 na Activity que hospeda o layout com o botão (visualização).

Geralmente, o listener de clique tem esse formato, em que o valor transmitido é a visualização que recebeu o clique ou o toque.

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

Há duas maneiras de anexar a função listener de cliques aos eventos de clique no botão:

• No layout XML, você pode adicionar 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 forma programática no momento da execução, em onCreate() do Activity, chamando setOnClickListener. Exemplo:

myButton.setOnClickListener {
   clickHanderFunction(it)
}

Nesta tarefa, você vai adicionar um listener de clique ao done_button de forma programática. Adicione o listener de clique à atividade correspondente, que é MainActivity.kt.

A função de listener de cliques, chamada addNickname, fará o seguinte:

• Consiga o texto do texto de edição de nickname_edit.
• Defina o texto na visualização de texto nickname_text.
• Ocultar o texto e o botão de edição
• Mostre 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 com o nome addNickname. Inclua um parâmetro de entrada com o nome 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. Na função addNickname, use findViewById() para ver 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 do nicknameTextView como o texto digitado pelo usuário no editText, usando a propriedade text.

nicknameTextView.text = editText.text

5. Para ocultar a visualização do apelido EditText, defina a propriedade visibility como editText como View.GONE.

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

editText.visibility = View.GONE

6. Para ocultar o botão CONCLUÍDO, defina 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, torne o TextView visível para o apelido definindo a propriedade visibility como View.VISIBLE.

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 usuário toca no botão DONE, é necessário anexá-la à visualização Button.

1. Em MainActivity.kt, no final da função onCreate(), acesse uma referência à visualização DONEButton. Use a função findViewById() e chame setOnClickListener. Transmita uma referência para a função de detecção de cliques, addNickname().

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

No código acima, it refere-se à 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 de apelido.

Mesmo após o usuário tocar no botão CONCLUÍDO, o teclado ainda estará visível. Esse comportamento é o padrão.

Etapa 3: ocultar o teclado

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

1. No MainActivity.kt, no final da função addNickname(), adicione o seguinte código. Se quiser mais informações sobre esse código, consulte a documentação do 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 CONCLUÍDO, o teclado ficará oculto.

Não é possível alterar o apelido depois que o usuário toca 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ê adicionará um listener de clique à visualização de texto do apelido. O listener de clique oculta a visualização de texto do apelido, mostra o texto da edição e mostra o botão CONCLUÍDO.

Etapa 1: adicionar um listener de clique

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

private fun updateNickname (view: View) {
}

2. Na função updateNickname, acesse 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 o código para mostrar o texto de edição, mostre o botão CONCLUÍDO e oculte a visualização de texto.

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

4. No MainActivity.kt, no final da função onCreate(), chame setOnClickListener na visualização de texto nickname_text. Transmita uma referência para a função de detecção de cliques, que é updateNickname().

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

5. Execute o app. Digite um apelido, toque no botão CONCLUÍDO e em seguida a 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.
   
   
   

Observe que, por padrão, a visualização EditText não tem foco, e o teclado não está visível. É difícil para o usuário descobrir que a visualização de texto do apelido é clicável. Na próxima tarefa, você adicionará um foco e um estilo à visualização de texto do apelido.

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

1. No final da função updateNickname, defina o foco como a 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 um 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 plano de fundo à visualização da TextView de apelido

1. Defina a cor de fundo da visualização de texto do nickname_text como @color/colorAccent e adicione um padding inferior de @dimen/small_padding. Essas mudanças servem como uma dica para o usuário de que a visualização de texto do apelido é clicável.

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

2. Execute o app final. O texto de edição tem foco, o apelido é exibido no texto de edição e a visualização do texto do apelido é estilizada.

Agora, mostre ao seu app interativo Sobre mim para um amigo.

Projeto do Android Studio: AboutMeInteractive

• A ferramenta Layout Editor no Android Studio é um editor de design visual. Você pode usar o Layout Editor para criar o layout do seu app arrastando elementos de IU para ele.
• O EditText é um elemento de IU que permite ao usuário inserir e modificar texto.
• Uma Button é um elemento de IU em que o usuário pode tocar para realizar uma ação. Um botão pode ser formado por texto, um ícone ou ambos.

Listeners de cliques

• Você pode fazer qualquer View responder ao toque adicionando um listener de clique a ele.
• A função que define o listener de clique recebe o View que é clicado.

Há duas maneiras de anexar uma função de listener de cliques a um View:

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

Curso da Udacity:

• Como desenvolver apps Android com Kotlin (link em inglês)

Documentação do desenvolvedor Android:

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

Esta seção lista as possíveis atividades para os alunos que estão trabalhando neste codelab como parte de um curso ministrado por um instrutor. Cabe ao instrutor fazer o seguinte:

• Se necessário, atribua o dever de casa.
• Informe aos alunos como enviar o dever de casa.
• Atribua nota aos trabalhos de casa.

Os professores podem usar essas sugestões o quanto quiserem, e eles devem se sentir à vontade para passar o dever de casa como achar adequado.

Se você estiver fazendo este codelab por conta própria, use essas atividades para testar seu conhecimento.

Responda a estas perguntas

Pergunta 1

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

• View
• LinearLayout
• TextView
• Button

Pergunta 2

Qual dos seguintes valores de atributo visibility 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.

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

Para ver links de outros codelabs neste curso, consulte a página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.