Conceitos básicos do Kotlin para Android 01.4: aprenda a se ajudar

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.

Introdução

Neste codelab, você vai conhecer recursos úteis para desenvolvedores Android Kotlin, incluindo modelos, documentação, vídeos e apps de exemplo.

O que você já precisa saber

  • O fluxo de trabalho básico do Android Studio.
  • Como usar o Layout Editor no Android Studio.

O que você vai aprender

  • Onde encontrar informações e recursos para desenvolvedores Kotlin e Android.
  • Como mudar o ícone na tela de início de um app.
  • Como procurar ajuda ao criar apps Android usando Kotlin.

Atividades deste laboratório

  • Confira alguns dos recursos disponíveis para desenvolvedores Android em Kotlin de todos os níveis.
  • Faça o download e conheça um app de exemplo do Android em Kotlin.
  • Mudar o ícone na tela de início de um app.

Neste codelab, você vai aprender sobre modelos, exemplos, documentação e outros recursos disponíveis para desenvolvedores Android em Kotlin.

Primeiro, você cria um app simples com base em um modelo do Android Studio e o modifica. Depois, faz o download e explora o app de exemplo Android Sunflower. Você substitui o ícone do iniciador do app de exemplo (um girassol) por um recurso de imagem de arte clip que está disponível no Android Studio (um rosto sorridente).

O Android Studio oferece modelos para designs de apps e atividades comuns e recomendados. Os modelos integrados economizam tempo e ajudam você a seguir as práticas recomendadas de design.

Cada modelo incorpora uma atividade e uma interface de usuário esqueleto. Você já usou o modelo Empty Activity neste curso. O modelo Basic Activity tem mais recursos e incorpora recursos recomendados para apps, como o menu de opções que aparece na barra de apps em dispositivos Android.

Etapa 1: conhecer a arquitetura da atividade básica

  1. No Android Studio, crie um projeto.
  2. Na caixa de diálogo Choose your project, selecione o modelo Basic Activity e clique em Next.
  3. Na caixa de diálogo Configure seu projeto, nomeie o app como quiser. Selecione Kotlin como a linguagem e marque a caixa de seleção Usar artefatos do AndroidX. Clique em Concluir.
  4. Crie e execute o app em um emulador ou dispositivo Android.
  5. Identifique as partes rotuladas na figura e na tabela abaixo. Encontre os equivalentes na tela do dispositivo ou emulador. Inspecione o código Kotlin e os arquivos XML correspondentes descritos na tabela.

Conhecer o código-fonte Kotlin e os arquivos XML vai ajudar você a estender e personalizar o modelo de atividade básica para suas próprias necessidades.

Arquitetura do modelo Basic Activity

#

Descrição da interface

Referência de código

1

Barra de status, que o sistema Android fornece e controla.

Não está visível no código do modelo, mas você pode acessar a barra de status na sua atividade. Por exemplo, você pode adicionar código em MainActivity.kt para ocultar a barra de status, se necessário.

2

A barra de apps, também chamada de barra de ações, oferece estrutura visual, elementos visuais padronizados e navegação.

Em activity_main.xml, procure Barra de ferramentas.

dentro do elemento AppBarLayout. Para compatibilidade com versões anteriores, o AppBarLayout no modelo incorpora um Toolbar que tem a mesma funcionalidade de uma ActionBar.

Para mudar a aparência da barra de apps, altere os atributos da barra de ferramentas. Para tutoriais sobre a barra de apps, consulte Adicionar a barra de apps.

3

O nome do app é derivado inicialmente do nome do pacote, mas você pode mudar para o que quiser.

Em AndroidManifest.xml, procure

android:label="@string/app_name".

Especifique a string app_name em strings.xml.

4

O botão de menu flutuante de opções contém itens de menu para a atividade. O botão flutuante também contém opções de menu globais, como Pesquisar e Configurações para o app. Os itens do menu do app ficam nesse menu.

Em MainActivity.kt, o

O método onOptionsItemSelected() implementa o que acontece quando o usuário seleciona um item de menu.

Para conferir os itens do menu de opções, abra o res/menu/menu_main.xml

main.tf. Apenas o item de menu Configurações é especificado neste modelo.

5

O CoordinatorLayout ViewGroup é um layout que oferece mecanismos para a interação de elementos da interface. A interface do app fica dentro do arquivo content_main.xml, que está incluído no ViewGroup.

Em activity_main.xml, procure a instrução include layout. Nenhuma visualização é especificada nesse layout. Em vez disso, ele inclui o layout content_main, em que as visualizações do app são especificadas. As visualizações do sistema são mantidas separadas das visualizações exclusivas do seu app.

6

O modelo usa uma TextView para mostrar "Hello World". Substitua TextView pelos elementos de interface do seu app.

A visualização de texto "Hello World" está no arquivo content_main.xml. Todos os elementos da interface do app precisam ser definidos nesse arquivo.

7

Botão de ação flutuante (FAB)

Em activity_main.xml, procure o elemento FloatingActionButton. O FAB é definido como um elemento da interface usando um ícone de arte clipe. MainActivity.kt inclui um stub em onCreate() que define um listener onClick() para o FAB.

Etapa 2: personalizar o app produzido pelo modelo

Mude a aparência do app produzido pelo modelo de atividade básica. Por exemplo, você pode mudar a cor da barra de apps para corresponder à barra de status. Em alguns dispositivos, a barra de status é um tom mais escuro da mesma cor primária usada pela barra de apps.

  1. Mude o nome do app que a barra de apps mostra. Para fazer isso, mude o recurso de string app_name no arquivo res > values > strings.xml para o seguinte:
<string name="app_name">New Application</string>
  1. Mude a cor da barra de apps (Toolbar) em res > layout > activity_main.xml mudando o atributo android:background para "?attr/colorPrimaryDark". Esse valor define a cor da barra de apps como uma cor primária mais escura que corresponde à barra de status:
android:background="?attr/colorPrimaryDark"
  1. Execute o app. O novo nome dele vai aparecer na barra de status, e a cor de fundo da barra de apps vai ficar mais escura e corresponder à cor da barra de status. Quando você clica no FAB, uma snackbar aparece, mostrada como 1 na captura de tela abaixo.
  2. Mude o texto da snackbar. Para fazer isso, abra MainActivity e procure o código stub em onCreate() que define um listener onClick() para o botão. Mude "Replace with your own action" para outra coisa. Exemplo:
fab.setOnClickListener { view ->
   Snackbar.make(view, "This FAB needs an action!", Snackbar.LENGTH_LONG)
       .setAction("Action", null).show()
}
  1. A FAB usa a cor de destaque do app. Portanto, uma maneira de mudar a cor da FAB é alterar a cor de destaque. Para mudar a cor de destaque, abra o arquivo res > values > colors.xml e mude o atributo colorAccent, conforme mostrado abaixo. Para ajuda na escolha de cores, consulte o sistema de cores do Material Design.
<color name="colorAccent">#1DE9B6</color>
  1. Execute o app. A FAB usa a nova cor, e o texto da snackbar mudou.

Etapa 3: saiba como adicionar atividades usando modelos

Até agora, nos codelabs deste curso, você usou os modelos Empty Activity e Basic Activity para iniciar novos projetos. Você também pode usar modelos de atividade ao criar atividades depois que o projeto for criado.

  1. Crie um projeto de app ou escolha um projeto atual.
  2. No painel Project > Android, clique com o botão direito do mouse na pasta java.
  3. Selecione New > Activity > Gallery.
  4. Adicione uma atividade ao app selecionando um dos modelos Activity. Por exemplo, selecione Navigation Drawer Activity para adicionar um Activity com uma gaveta de navegação.
  5. Para mostrar a atividade no Layout Editor, clique duas vezes no arquivo de layout da atividade (por exemplo, activity_main2.xml). Use as guias Design e Texto para alternar entre a prévia e o código de layout da atividade.

Os repositórios Google Samples no GitHub oferecem exemplos de código Kotlin Android que você pode estudar, copiar e incorporar aos seus projetos.

Etapa 1: fazer o download e executar uma amostra de código Kotlin para Android

  1. Em um navegador, acesse github.com/googlesamples.
  2. Em Linguagem, selecione Kotlin.
  3. Selecione um app de amostra do Android em Kotlin que tenha sido modificado recentemente e faça o download do código do projeto do app. Para este exemplo, faça o download do arquivo ZIP do app android-sunflower, que demonstra alguns dos componentes do Android Jetpack.
  4. No Android Studio, abra o projeto android-sunflower-master.
  5. Aceite as atualizações recomendadas pelo Android Studio e execute o app em um emulador ou dispositivo Android.

Etapa 2: conferir uma amostra de código Kotlin para Android

Agora que você abriu o app de exemplo Android Sunflower no Android Studio, conheça o app e explore os arquivos do projeto.

  1. Para saber o que um app de exemplo está demonstrando, acesse o arquivo README dele no GitHub. Para este exemplo, consulte o README do Android Sunflower (link em inglês).
  2. No Android Studio, abra um dos arquivos de atividade do Kotlin no app, por exemplo, GardenActivity.kt.
    .
  3. Em GardenActivity.kt, encontre uma classe, um tipo ou um procedimento que você não conhece e pesquise na documentação para desenvolvedores Android. Por exemplo, para saber mais sobre o método setContentView(), pesquise em developer.android.com para encontrar setContentView().

Etapa 3: mudar o ícone do iniciador

Nesta etapa, você vai mudar o ícone do app de exemplo Android Sunflower. Você vai adicionar uma imagem de arte clipe e usá-la para substituir o ícone atual do app na tela de início.

Ícones na tela de início

Cada app criado com o Android Studio começa com um ícone padrão na tela de início que representa o app. Às vezes, os ícones na tela de início são chamados de ícones de apps ou ícones de produtos.

Se você publicar um app no Google Play, o ícone do iniciador dele vai aparecer na página "Detalhes do app" e nos resultados da pesquisa na Google Play Store.

Depois que um app é instalado em um dispositivo Android, o ícone dele aparece na tela inicial e em outros lugares do dispositivo. Por exemplo, o ícone do iniciador do app Android Sunflower aparece na janela Pesquisar apps do dispositivo, mostrado como 1 na captura de tela abaixo. O ícone padrão da tela de início, mostrado como 2 abaixo, é usado inicialmente para todos os projetos de app criados no Android Studio.

Como mudar o ícone na tela de início

Ao mudar o ícone do app na tela de início, você conhece os recursos de recursos de imagem do Android Studio.

No Android Studio, veja como mudar o ícone do app Android Sunflower na tela de início:

  1. No painel Project > Android, clique com o botão direito do mouse (ou Control+clique) na pasta res. Selecione New > Image Asset. A caixa de diálogo Configurar recurso de imagem vai aparecer.

Clique na guia &quot;Camada de primeiro plano&quot; do ícone de acesso rápido.

  1. No campo Icon Type, selecione Launcher Icons (Adaptive & Legacy), caso ainda não esteja selecionado. Clique na guia Camada de primeiro plano.
  2. Em Tipo de recurso, selecione Clip Art, mostrado como 1 na captura de tela abaixo.

  3. Clique no ícone do robô no campo Clip Art, mostrado como 2 na captura de tela acima. A caixa de diálogo Selecionar ícone aparece, mostrando o conjunto de ícones do Material Design.
  4. Navegue pela caixa de diálogo Selecionar ícone ou pesquise um ícone por nome. Selecione um ícone, como o de humor, para sugerir um bom humor. Clique em OK.

  1. Na caixa de diálogo Configurar recurso de imagem, clique na guia Camada de plano de fundo. Em Tipo de recurso, selecione Cor. Clique no chip de cor e selecione uma cor para usar como camada de fundo do ícone.
  2. Clique na guia Legado e revise as configurações padrão. Confirme que você quer gerar ícones legados, redondos e para a Google Play Store. Clique em Próximo.
  3. A caixa de diálogo Confirm Icon Path aparece, mostrando onde os arquivos de ícones estão sendo adicionados e substituídos. Clique em Concluir.
  4. Execute o app em um emulador AVD ou dispositivo Android.

O Android Studio adiciona automaticamente as imagens do ícone de inicialização aos diretórios mipmap para as diferentes densidades de tela. O app Android Sunflower agora usa o novo ícone de arte clipe como ícone de inicialização.

  1. Execute o app novamente. Verifique se o novo ícone do iniciador aparece na tela "Pesquisar apps".

Etapa 1: consultar a documentação oficial do Android

Conheça alguns dos sites de documentação do Android mais úteis e saiba o que está disponível:

  1. Acesse developer.android.com. Essa documentação oficial para desenvolvedores Android é mantida atualizada pelo Google.
  2. Acesse developer.android.com/design/. Este site oferece diretrizes para projetar a aparência e a funcionalidade de apps Android de alta qualidade.
  3. Acesse material.io, um site sobre o Material Design. O Material Design é uma filosofia de design conceitual que descreve como todos os apps, não apenas os do Android, devem aparecer e funcionar em dispositivos móveis. Navegue pelos links para saber mais sobre o Material Design. Por exemplo, para saber mais sobre o uso de cores, clique na guia Design e selecione Cor.
  4. Acesse developer.android.com/docs/ para encontrar informações sobre APIs, documentação de referência, tutoriais, guias de ferramentas e exemplos de código.
  5. Acesse developer.android.com/distribute/ para encontrar informações sobre como publicar um app no Google Play. O Google Play é o sistema de distribuição digital do Google para apps desenvolvidos com o SDK do Android. Use o Google Play Console para aumentar sua base de usuários e começar a ganhar dinheiro.
  1. Confira o canal do YouTube para desenvolvedores Android, uma ótima fonte de tutoriais e dicas.
  2. Acesse o blog oficial do Android, onde a equipe do Android publica notícias e dicas.
  3. Faça uma pergunta na Pesquisa Google, e o mecanismo de pesquisa vai coletar resultados relevantes de vários recursos. Por exemplo, use a Pesquisa Google para perguntar: "Qual é a versão mais usada do SO Android na Índia?" Você pode até inserir mensagens de erro na Pesquisa Google.

Etapa 3: pesquisar no Stack Overflow

O Stack Overflow é uma comunidade de programadores que se ajudam. Se você tiver um problema, é provável que alguém já tenha postado uma resposta.

  1. Acesse o Stack Overflow (em inglês).
  2. Na caixa de pesquisa, digite uma pergunta como "Como configurar e usar o ADB por Wi-Fi?" É possível pesquisar no Stack Overflow sem se registrar, mas, se quiser postar uma nova pergunta ou responder a uma, é necessário fazer isso.
  3. Na caixa de pesquisa, digite [android]. Os colchetes [] indicam que você quer pesquisar postagens marcadas como sendo sobre o Android.
  4. Você pode combinar tags e termos de pesquisa para tornar sua pesquisa mais específica. Tente estas pesquisas:
  • [android] and [layout]
  • [android] "hello world"

Etapa 4: usar o SDK Manager para instalar a documentação off-line

Ao instalar o Android Studio, os componentes essenciais do SDK do Android também são instalados. Para instalar outras bibliotecas e documentação disponíveis, use o SDK Manager.

Para conhecer o SDK Manager e baixar a documentação do SDK, siga estas etapas:

  1. No Android Studio, selecione Tools > SDK Manager. O SDK Manager é aberto.
  2. Na coluna à esquerda do SDK Manager, selecione Android SDK (1 na captura de tela abaixo).
  3. Observe o caminho no campo Android SDK Location (2 na captura de tela abaixo). Você vai usar esse caminho mais tarde para encontrar o que instalar.
  4. No SDK Manager, clique na guia SDK Platforms. Aqui, você pode instalar mais versões do sistema Android.
  5. Clique na guia SDK Tools. Aqui, você pode instalar ferramentas de desenvolvedor do SDK que não são instaladas por padrão. Também é possível instalar uma versão off-line da documentação para desenvolvedores Android.
  6. Clique na guia SDK Update Sites. O Android Studio verifica regularmente se há atualizações nos sites listados e selecionados.
  7. Volte para a guia SDK Tools e marque a caixa de seleção Documentation for Android SDK, se ela ainda não estiver marcada. Clique em Aplicar.

    Uma caixa de diálogo de confirmação será aberta, mostrando quanto espaço em disco o download exige. Clique em OK.
  8. Quando a instalação terminar, clique em Concluir.

Para encontrar a documentação instalada, siga estas etapas:

  1. No computador, navegue até o diretório Android/sdk/. Para encontrar o caminho do diretório, consulte o campo Android SDK Location, mostrado como 2 na captura de tela acima.
  2. Abra o diretório docs/.
  3. Encontre e abra o arquivo index.html em um navegador.
  • A documentação oficial para desenvolvedores Android está em developer.android.com.
  • O Material Design é uma filosofia de design conceitual que descreve como os apps devem aparecer e funcionar em dispositivos móveis. O Material Design não é apenas para apps Android. As diretrizes do Material Design estão em material.io (em inglês).
  • O Android Studio oferece modelos para designs de apps e atividades comuns e recomendados. Esses modelos oferecem código funcional para casos de uso comuns.
  • Ao criar um projeto, você pode escolher um modelo para sua primeira atividade.
  • Durante o desenvolvimento do app, é possível criar atividades e outros componentes com modelos integrados.
  • O Google Samples contém exemplos de código que você pode estudar, copiar e incorporar aos seus projetos.

Curso da Udacity:

Documentação do Android Studio:

Documentação do desenvolvedor Android:

Exemplos de código:

Vídeos:

Outros recursos:

Comece a próxima lição: 2.1: layout linear 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.