Conceitos básicos do Kotlin para Android 02.1: layout linear usando o Layout Editor

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.

O que você já precisa saber

• Como criar um app Android básico em Kotlin.
• Executar um app Android em um emulador ou dispositivo.
• Princípios básicos de LinearLayout.
• Criação de um app simples que usa LinearLayout e um TextView

O que você vai aprender

• Como trabalhar com View e ViewGroup.
• Como organizar visualizações em um Activity usando LinearLayout..
• Como usar ScrollView para exibir o conteúdo rolável.
• Como mudar a visibilidade de uma View.
• Como criar e usar recursos de string e dimensão.
• Como criar um layout linear usando o Layout Editor do Android Studio.

Atividades do laboratório

• Crie o app Sobre mim.
• Adicione um TextView ao layout para exibir seu nome.
• Adicionar um ImageView.
• Adicione um ScrollView para exibir um texto rolável.

No app Sobre mim, é possível exibir fatos interessantes sobre você ou personalizá-lo para um amigo, familiar ou animal de estimação. Esse app exibe um nome, um botão CONCLUÍDO, uma imagem com estrela e um texto rolável.

Nesta tarefa, você criará o projeto "AboutMe" do Android Studio.

1. Abra o Android Studio, caso ele ainda não esteja aberto.
2. Se um projeto já estiver aberto no Android Studio, selecione File > New > New Project.
   
   
   
3. Se um projeto ainda não estiver aberto, selecione + Iniciar um novo projeto do Android Studio na caixa de diálogo Welcome to Android Studio .
   
   
   
4. Na caixa de diálogo Create New Project, na guia Phone and Tablet, selecione o modelo Empty Activity. Clique em Próxima.
   
   
   
5. Na próxima caixa de diálogo Create New Project, defina os parâmetros a seguir e clique em Finish.
   

Atributo	Valor
Nome do aplicativo	Sobre mim
Nome da empresa no Android	com.android.example.AboutMe (ou seu próprio domínio)
Salvar local	Não mude o local padrão ou mude para seu diretório preferido.
Idioma	Kotlin
Nível mínimo da API	API 19: Android 4.4 (KitKat)
Este projeto será compatível com apps instantâneos	Deixe essa caixa desmarcada.
Usar artefatos do AndroidX	Marque essa caixa de seleção.

O Android Studio levará alguns instantes para gerar os arquivos do projeto.

6. Execute o app. Você verá a string "Hello World" na tela em branco.
   

O modelo Empty Activity cria uma única atividade vazia, Mainactivity.kt. O modelo também cria um arquivo de layout chamado activity_main.xml. O arquivo de layout tem ConstraintLayout como a raiz ViewGroup e tem uma única TextView como conteúdo.

Nesta tarefa, você mudará a raiz ViewGroup gerada para LinearLayout. Também é possível organizar os elementos da IU verticalmente.

Ver grupos

Uma ViewGroup é uma visualização que pode conter visualizações filhas, que são outras visualizações e grupos de visualizações. As visualizações que compõem um layout são organizadas como uma hierarquia de visualizações com um grupo de visualizações como raiz.

Em um grupo de visualizações LinearLayout, os elementos da IU são organizados horizontal ou verticalmente.

Mude o layout raiz para usar um grupo de visualizações LinearLayout:

1. Selecione o painel Project > Android. Na pasta app/res/layout, abra o arquivo activity_main.xml.
2. Selecione a guia Text e altere o grupo de visualização raiz de ConstraintLayout para LinearLayout.
3. Remova TextView. No elemento LinearLayout, adicione o atributo android:orientation e defina-o como vertical.

Antes:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Depois:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

O Layout Editor é uma ferramenta de design visual do Android Studio. Em vez de escrever código XML manualmente para criar o layout do app, você pode usar o Layout Editor para arrastar elementos da IU para o editor de design.

Para ver o Layout Editor, clique na guia Design. A captura de tela abaixo mostra as partes do Layout Editor.

Editor de design: exibe uma representação visual do layout da tela na visualização de design, em blueprints ou em ambas. O Design Editor é a parte principal do Layout Editor.

Barra de ferramentas: fornece botões para configurar a aparência do layout no editor de design e para alterar alguns atributos do layout. Por exemplo, para mudar a exibição do layout no editor de design, use o menu suspenso Select Design Surface :

• Use Design para uma visualização real do layout.
• Use o Blueprint para ver somente os contornos de cada visualização.
• Use Design + Blueprint para ver as duas telas lado a lado.

Palette: fornece uma lista de visualizações e visualizações em grupo que podem ser arrastadas para o layout ou ao painel Component Tree.

Atributos: mostra os atributos da visualização ou do grupo de visualizações selecionado no momento. Para alternar entre uma lista completa de atributos e atributos usados com frequência, use o ícone na parte superior do painel.

Árvore de componentes: exibe a hierarquia de layouts como uma árvore de visualizações. A Component Tree é útil quando há visualizações pequenas, ocultas ou sobrepostas que não poderiam ser selecionadas de outra forma no editor de design.

Etapa 1: adicionar uma TextView

1. Abra o arquivo res/layout/activity_main.xml, se ele ainda não estiver aberto.
2. Alterne para a guia Text e inspecione o código. O código tem um LinearLayout como grupo de visualização raiz. Grupos de visualizações são visualizações que contêm outras visualizações.
   
   O LinearLayout tem os atributos obrigatórios layout_height, layout_width e orientation, que são vertical por padrão.
3. Alterne para a guia Design para abrir o Layout Editor.

Observação: as guias Design e Text mostram o mesmo layout de maneira diferente. As alterações feitas em uma guia são refletidas na outra.

4. Arraste uma visualização de texto do painel Palette para o editor de design.
   
   
   
5. Observe o painel Component Tree. A nova visualização de texto é posicionada como um elemento filho do grupo de visualizações pai, que é o LinearLayout.
   
   
6. Abra o painel Attributes, se ele ainda não estiver aberto. Para abrir o painel, clique duas vezes no TextView recém-adicionado no Design Editor.
7. Defina os seguintes atributos no painel Attributes:

Atributo	Valor
ID	name_text
texto	Defina seu nome. Um dos campos text mostra um ícone de chave inglesa para indicar que ele é do namespace tools. O que não tem a chave inglesa é para o namespace android. Esse é o campo text que você quer usar.
textAppearance > textSize	20sp
textAppearance > textColor	@android:color/black
textAppearance > textAlignment	Centro

Etapa 2: criar um recurso de string

Em Component Tree, ao lado de TextView,, você verá um ícone de aviso . Para ver o texto de aviso, clique no ícone ou na direção dele, conforme a captura de tela abaixo.

Para resolver o problema, crie um recurso de string:

1. No painel Attributes, clique nos três pontos ao lado do atributo text que você definiu no seu nome. O editor de recursos será aberto.
   
   
   
2. Na caixa de diálogo Resources, selecione Add new resource > New string Value.
3. Na caixa de diálogo New String Value Resource, defina o campo Resource name como name. Defina o campo Valor do recurso como seu nome. Clique em OK. Observe que o aviso desaparece.
   
   
   
4. Abra o arquivo res/values/strings.xml e procure o recurso de string recém-criado chamado name.

<string name="name">Aleks Haecky</string>

Etapa 3: criar um recurso de dimensão

Você acabou de adicionar um recurso usando o Editor de recursos. Você também pode extrair recursos no editor de código XML para criar novos recursos:

1. No arquivo activity_main.xml, alterne para a guia Text.
2. Na linha textSize, clique no número (20sp) e digite Alt+Enter (Option+Enter no Mac). Selecione Extrair recurso de dimensão no menu pop-up.
3. Na caixa de diálogo Extract Resource, insira text_size no campo Resource name. Clique em OK.
   
   
   
4. Abra o arquivo res/values/dimens.xml para ver o seguinte código gerado:

<dimen name="text_size">20sp</dimen>

Observação: se o arquivo dimens.xml ainda não estiver presente na pasta res/values, ele será criado pelo Android Studio.

5. Abra o arquivo MainActivity.kt e procure o seguinte código no final da função onCreate():

setContentView(R.layout.activity_main)

A função setContentView() conecta o arquivo de layout ao Activity. O arquivo de recurso de layout especificado é R.layout.activity_main:

• R é uma referência ao recurso. É uma classe gerada automaticamente com definições de todos os recursos do app.
• layout.activity_main indica que o recurso é um layout chamado activity_main.

6. Execute o app. Uma TextView com seu nome será exibida.
   
   

Quando você olhar a tela do app, seu nome será exibido na parte superior da tela. Portanto, agora você adicionará padding e uma margem.

Padding x margem

O preenchimento é o espaço dentro dos limites de uma visualização ou um elemento. É o espaço entre as bordas da visualização e o conteúdo dela, conforme mostrado na figura abaixo.

O tamanho de uma visualização inclui o preenchimento. Veja a seguir os atributos de padding usados com frequência:

• android:padding especifica o padding de todas as quatro bordas da visualização.
• android:paddingTop especifica o padding da borda superior.
• android:paddingBottom especifica o padding da borda inferior.
• android:paddingStart especifica o preenchimento da borda "inicial" da visualização.
• android:paddingEnd especifica o preenchimento da borda "final" da visualização.
• android:paddingLeft especifica o padding da borda esquerda.
• android:paddingRight especifica o padding da borda direita.

Margem é o espaço adicionado fora das bordas da visualização. É o espaço entre a borda da visualização e o elemento pai, conforme mostrado na figura acima. Veja a seguir os atributos de margem usados com frequência:

• android:layout_margin especifica uma margem para os quatro lados da visualização.
• android:layout_marginBottom especifica o espaço fora da parte inferior dessa visualização.
• android:layout_marginStart especifica o espaço fora do lado "inicial&;da visualização.
• android:layout_marginEnd especifica o espaço no lado final dessa visualização.
• android:layout_marginLeft especifica o espaço no lado esquerdo dessa visualização.
• android:layout_marginRight especifica o espaço no lado direito dessa visualização.

Direita/esquerda e início/fim

Use sempre os lados direito e esquerdo da tela para indicar se o app usa um fluxo da esquerda para a direita (LTR) ou da direita para a esquerda (RTL, na sigla em inglês). "Início" e "final" sempre se referem ao início e ao fim do fluxo:

• Para um fluxo LTR, start = left e end=right.
• Para um fluxo RTL, start=right e end=left.

Caso seu app seja direcionado à API de nível 17 (Android 4.2) ou mais recente:

• Use "quot;start" e "end" em vez de "left" e "right".
• Por exemplo, android:layout_marginLeft precisa se tornar android:layout_marginStart para oferecer compatibilidade com idiomas RTL.

Se você quiser que seu app funcione com versões anteriores ao Android 4.2, ou seja, se a targetSdkVersion ou minSdkVersion do app for 16 ou anterior, faça o seguinte:

• Adicione "quot;start" e final", além de "quot;left" e "right".
• Por exemplo, use android:paddingLeft e android:paddingStart.

Etapa 1: adicionar padding

Para colocar espaço entre seu nome e a borda superior da visualização de texto do name, adicione o padding superior.

1. Abra o arquivo activity_main.xml na guia Design.
2. Na Component Tree ou no editor de design, clique na visualização de texto para abrir o painel Attributes.
3. Na parte superior do painel Attributes, clique no ícone de seta dupla para ver todos os atributos disponíveis.
4. Pesquise Padding, expanda-o e clique nos três pontos ... ao lado do atributo top. A caixa de diálogo Resources será exibida.
5. Na caixa de diálogo Resources, selecione Add new resource > New dimen Value.
6. Na caixa de diálogo New Dimension Value Resource, crie um novo recurso dimen chamado small_padding com um valor de 8dp.
   
   A abreviação dp significa density-independent. Se você quiser que um elemento da IU tenha o mesmo tamanho em telas com densidades diferentes, use o dp como sua unidade de medida. No entanto, ao especificar o tamanho do texto, sempre use sp (pixels escalonáveis).
7. Clique em OK.

Etapa 2: adicionar uma margem

Para mover a visualização de texto name da borda do elemento pai, adicione uma margem superior.

1. No painel Attributes, pesquise "margin" para encontrar Layout_Margin.
2. Expanda Layout_Margin e clique nos três pontos ... ao lado do atributo top.
3. Crie um novo recurso dimen chamado layout_margin e torne-o 16dp. Clique em OK.

Etapa 3: adicionar uma fonte

Para melhorar a visualização de texto do name, use a fonte Android Roboto. Essa fonte faz parte da Biblioteca de Suporte, e você a adiciona como um recurso.

1. No painel Attributes, pesquise "quoquo;fontFamily".
2. No campo fontFamily, clique na seta suspensa , role até a parte inferior da lista e selecione More Fonts.
3. Na caixa de diálogo Resources, pesquise rob e escolha Roboto. Na lista Visualização, selecione Normal.
4. Selecione o botão de opção Add font to project.
5. Clique em OK.
   
   

A pasta res agora tem uma pasta font que contém um arquivo de fonte roboto.ttf. O atributo @font/roboto é adicionado ao seu TextView.

Etapa 4: extrair o estilo

Um estilo é um conjunto de atributos que especificam a aparência e o formato de uma visualização. Os estilos podem incluir cor e tamanho da fonte, cor do plano de fundo, padding, margem e outros atributos comuns.

Você pode extrair a formatação da visualização de texto do name para um estilo e reutilizá-lo em quantas visualizações quiser no seu app. A reutilização de um estilo fará com que o app tenha uma aparência consistente quando houver várias visualizações. O uso de estilos também permite manter esses atributos comuns em um único local.

1. Clique com o botão direito do mouse em TextView em Component Tree e selecione Refactor > Extract Style.
2. Na caixa de diálogo Extract Android Style, desmarque as caixas de seleção layout_width, layout_height e textAlignment. Normalmente, esses atributos são diferentes para cada visualização. Por isso, não convém que eles façam parte do estilo.
3. No campo Nome do estilo, insira NameStyle.
4. Clique em OK.
   
   
   
5. Um estilo também é um recurso, então ele é salvo na pasta res/values/ em um arquivo styles.xml. Abra styles.xml e examine o código gerado para o estilo NameStyle, que será semelhante a este:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. Abra o arquivo activity_main.xml e alterne para a guia Text. O estilo gerado está sendo usado na visualização de texto como style="@style/NameStyle".
7. Execute o app e observe as mudanças na fonte e o padding ao redor da TextView.

A maioria dos apps Android reais consiste em uma combinação de visualizações para exibir imagens e texto e aceitar entradas do usuário na forma de eventos de texto ou de clique. Nesta tarefa, você adicionará uma visualização para exibir uma imagem.

ImageView é uma visualização para exibir recursos de imagem. Por exemplo, uma ImageView pode exibir recursos Bitmap, como arquivos PNG, JPG, GIF ou WebP, ou pode exibir um recurso Drawable, como um desenho vetorial.

Existem recursos de imagem incluídos no Android, como ícones de exemplo, avatares e planos de fundo. Você adicionará um desses recursos ao app.

1. Exiba o arquivo de layout na guia Design e arraste uma ImageView do painel Palette para abaixo de name_text na Component Tree. A caixa de diálogo Resources será aberta.
2. Selecione Drawable se ainda não estiver selecionado.
3. Expanda android, role a tela e selecione btn_star_big_on. É a estrela amarela .
4. Clique em OK.
   
   
   
   A imagem de estrela será adicionada ao layout abaixo do seu nome. Como você tem um LinearLayout vertical, as visualizações adicionadas são alinhadas verticalmente.
   
   
5. Alterne para a guia Text e observe o código ImageView gerado. A largura está definida como match_parent, portanto, a visualização será tão ampla quanto o elemento pai. A altura é definida como wrap_content, por isso a visualização será tão alta quanto o conteúdo dela. O ImageView faz referência ao drawable btn_star_big_on.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. Para renomear o id do ImageView, clique com o botão direito do mouse em "@+id/imageView" e selecione Refactor > Rename.
7. Na caixa de diálogo Renomear, defina id como @+id/star_image. Clique em Refactor.
   
   
   

Dica: refatorar > Renomear renomeia todas as ocorrências de um atributo ou nome de variável no projeto do app.

8. Na guia Design, na Component Tree, clique no ícone de aviso ao lado de star_image. O aviso é de uma contentDescription ausente, que os leitores de tela usam para descrever imagens ao usuário.
9. No painel Attributes, clique nos três pontos ... ao lado do atributo contentDescription. A caixa de diálogo Resources será aberta.
10. Na caixa de diálogo Resources, selecione Add new resource > New string Value. Defina o campo Nome do recurso como yellow_star e o campo Valor do recurso como Yellow star. Clique em OK.
11. Use o painel Attributes para adicionar uma margem superior de 16dp (que é @dimen/layout_margin) à classe yellow_star para separar a imagem em estrela do nome.
12. Execute o app. Seu nome e a imagem de estrela são exibidos na IU do app.
    
    

Um ScrollView é um grupo de visualizações que permite rolar a hierarquia de visualização dentro dele. Uma visualização de rolagem pode conter somente uma outra visualização ou uma visualização em grupo como uma filha. A visualização filha geralmente é um LinearLayout. Dentro de um LinearLayout, você pode adicionar outras visualizações.

A imagem a seguir mostra um exemplo de uma ScrollView contendo uma LinearLayout com várias outras visualizações.

Nesta tarefa, você adicionará um ScrollView que permite ao usuário rolar uma visualização de texto que exibe uma breve biografia. Se você estiver fazendo apenas uma visualização rolável, poderá colocá-la diretamente em ScrollView, que é o que você faz nesta tarefa.

Etapa 1: adicionar uma ScrollView que contenha uma TextView

1. Abra o arquivo activity_main.xml na guia Design.
2. Arraste uma visualização de rolagem para o layout arrastando-a para o editor de design ou para a Component Tree. Coloque a visualização de rolagem abaixo da imagem de estrela.
3. Alterne para a guia Text para inspecionar o código gerado.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

A altura e a largura da ScrollView correspondem ao elemento pai. Depois que a visualização de texto name_text e a visualização de imagem star_image tiverem usado espaço vertical suficiente para exibir o conteúdo, o sistema Android dispõe o ScrollView para preencher o restante do espaço disponível na tela.

4. Adicione um id à ScrollView e chame-o de bio_scroll. Adicionar um id à ScrollView oferece ao sistema Android um controle para a visualização de modo que, quando o usuário girar o dispositivo, o sistema preserve a posição de rolagem.
5. No ScrollView, remova o código LinearLayout, porque o app terá apenas uma visualização rolável, como um TextView.
6. Arraste um TextView de Palette para a Component Tree. Coloque o TextView na bio_scroll como um elemento filho de bio_scroll.
   
   
7. Defina o ID da nova visualização de texto como bio_text.
8. Em seguida, adicione um estilo para a nova visualização de texto. No painel Attributes, clique nos três pontos ... ao lado do atributo style para abrir a caixa de diálogo Resources.
9. Na caixa de diálogo Resources, pesquise NameStyle. Selecione NameStyle na lista e clique em OK. A visualização de texto agora usa o estilo NameStyle, que você criou em uma tarefa anterior.
   
   

Etapa 2: adicionar sua biografia à nova TextView

1. Abra strings.xml, crie um recurso de string chamado bio e coloque um texto longo sobre você ou sobre o que quiser.
   

Observação:

• Use \n para indicar uma quebra de linha.
• Se você usar um apóstrofo, faça o escape usando uma barra invertida. Por exemplo:
  "You mustn\'t forget the backslash."
• Para texto em negrito, use <b>...</b>. Para texto em itálico, use <i>...</i>. Exemplo:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Veja um exemplo de biografia:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. Na visualização de texto bio_text, defina o valor do atributo text para o recurso de string bio que contém sua biografia.
3. Para facilitar a leitura do texto da bio_text, adicione espaçamento entre as linhas. Use o atributo lineSpacingMultiplier e atribua a ele o valor 1.2.
   
   
   
   Observe que, no editor de design, o texto bio é executado até as bordas da tela. Para corrigir esse problema, adicione atributos de preenchimento à esquerda, início, direita e fim à raiz LinearLayout. Não é necessário adicionar o preenchimento inferior, porque o texto executado até os sinais inferiores é indicado ao usuário.
4. Adicione o padding de início e término a 16dp à raiz LinearLayout.
5. Alterne para a guia Texto, extraia o recurso de dimensão e nomeie-o como layout_padding.
   
   

Observação: a partir da API de nível 17, use "quot;start" e "end" em vez de "left" e "right" para preenchimento e margem para adaptar seu aplicativo para idiomas de RTL, como o árabe.

6. Execute o app e role pelo texto.
   
   

Parabéns!

Você criou um app completo do zero!

Projeto do Android Studio: AboutMe

Observação:todos os desafios de programação são opcionais.

No ScrollView, adicione um ImageView acima do TextView. Quando você executa o app, essa imagem, ao contrário da estrela, rola para fora da visualização conforme o texto é exibido.

Dica:a visualização de rolagem só pode ter uma visualização filha. É necessário unir as duas visualizações roláveis, ImageView e TextView, em uma LinearLayout.

• Uma ViewGroup é uma visualização que pode conter outras visualizações. LinearLayout e ScrollView são grupos de visualização.
• LinearLayout é um grupo de visualizações que organiza as visualizações filhas horizontal ou verticalmente.
• Use uma ScrollView quando precisar exibir conteúdo na tela, como textos longos ou uma coleção de imagens. Uma visualização de rolagem pode conter somente uma visualização filha. Caso queira rolar mais de uma visualização, adicione um ViewGroup como um LinearLayout à ScrollView e coloque as visualizações a serem roladas nesse ViewGroup.
• O Layout Editor é um editor de design visual do Android Studio. Você pode usar o Layout Editor para criar o layout do seu app arrastando elementos de IU para ele.
• Um estilo (link em inglês) é uma coleção de atributos que especificam a aparência de uma visualização. Por exemplo, um estilo pode especificar cor e tamanho da fonte, cor do plano de fundo, padding e margem.
• Você pode extrair e coletar toda a formatação de uma visualização em um estilo. Para que o app tenha uma aparência consistente, reutilize o estilo de outras visualizações.

Curso da Udacity:

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

Documentação do desenvolvedor Android:

• Layouts
• ViewGroup
• View
• Layout linear
• ScrollView
• Compatibilidade com densidades de pixel diferentes (dp)
• Criar uma IU com o Layout Editor
• Documentação do Android Studio
• 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

Qual das seguintes opções é um grupo de visualização?

▢ EditText

▢ LinearLayout

▢ TextView

▢ Button

Pergunta 2

Qual das seguintes hierarquias de visualização listadas não é válida?

▢ LinearLayout > TextView, TextView e ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView e ScrollView

Pergunta 3

Os estilos são recursos definidos em styles.xml. Ao usar estilos, você pode definir cores, fontes, tamanho de texto e muitas outras características de uma visualização. Verdadeiro ou falso?

▢ Verdadeiro

▢ Falso

Pergunta 4

Uma ScrollView é um grupo de visualizações que pode conter qualquer número de visualizações ou grupos de visualizações como filhos. Verdadeiro ou falso?

▢ Verdadeiro

▢ Falso

Pergunta 5

Qual elemento da IU pode ser usado para exibir imagens no seu app?

▢ TextView

▢ ImageView

▢ Button

▢ ScrollView

Inicie a próxima lição: 2.2: Adicionar interatividade do usuário

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.