Criar seu primeiro app Android

1. Antes de começar

Instale o Android Studio no seu computador, caso ainda não tenha feito isso. Verifique se o computador atende aos requisitos do sistema necessários para executar o Android Studio (na parte inferior da página de download). Se você precisar de instruções mais detalhadas sobre o processo de configuração, consulte o codelab Fazer o download e instalar o Android Studio.

Neste codelab, você vai criar seu primeiro app Android usando um modelo de projeto fornecido pelo Android Studio. Use o Kotlin e o Jetpack Compose para personalizar o app. As atualizações do Android Studio podem fazer com que a IU mude; então é normal que ele esteja um pouco diferente das capturas de tela deste codelab.

Pré-requisitos

• Conhecimentos básicos sobre Kotlin

O que é necessário

• A versão mais recente do Android Studio.

O que você vai aprender

• Como criar um app Android usando o Android Studio.
• Como executar apps com a ferramenta de visualização no Android Studio.
• Como atualizar textos com o Kotlin.
• Como atualizar uma interface do usuário (IU) usando o Jetpack Compose.
• Como visualizar o app no Jetpack Compose.

O que você vai criar

• Um app que permite personalizar sua apresentação.

O app vai ficar assim quando você concluir este codelab, mas ele vai mostrar seu nome personalizado:

O que é necessário

• Um computador com o Android Studio instalado.

2. Assistir ao vídeo de orientações (opcional)

Se você quiser acompanhar a conclusão deste codelab por um dos instrutores do curso, assista ao vídeo abaixo.

Recomendamos abrir o vídeo em tela cheia usando o ícone no canto inferior direito da reprodução. Assim, você vê o Android Studio e o código com maior clareza.

Esta etapa é opcional. Você também pode pular o vídeo e começar a seguir as instruções do codelab.

3. Criar um projeto usando o modelo

Neste codelab, você vai criar um app Android com o modelo de projeto Empty Compose Activity fornecido pelo Android Studio.

Para criar um projeto no Android Studio:

1. Clique duas vezes no ícone do Android Studio para iniciar.

2. Na caixa de diálogo Welcome to Android Studio, clique em New Project.

A janela New Project vai ser aberta com uma lista de modelos do Android Studio.

No Android Studio, um modelo de projeto é um projeto do Android que fornece a base para um determinado tipo de app. Os modelos criam a estrutura do projeto e os arquivos necessários para que ele seja criado pelo Android Studio. Com base no modelo escolhido, o Android Studio fornece um código inicial para acelerar o processo.

3. Confira se a guia Phone and Tablet está selecionada.
4. Clique no modelo Empty Compose Activity para selecioná-lo como modelo do projeto. O Empty Compose Activity é o modelo para criar um projeto simples, que você pode usar para criar um app do Compose. Ele tem uma única tela e mostra o texto "Hello Android!".
5. Clique em Next. A caixa de diálogo New Project vai ser aberta. Há alguns campos para configurar o projeto.
6. Configure o projeto desta maneira:

O campo Name é usado para inserir o nome do projeto. Para este codelab, digite "Greeting Card" (Cartão de apresentação).

Deixe o campo Package name como está. É assim que seus arquivos vão ser organizados na estrutura do arquivo. Nesse caso, o nome do pacote vai ser com.example.greetingcard.

Deixe o campo Save location como está. Ele contém o local onde todos os arquivos relacionados ao projeto são salvos. Anote onde o conteúdo está salvo no computador para poder encontrar os arquivos.

O Kotlin já está selecionado no campo Language. Esse campo define a linguagem de programação que você quer usar no projeto. Como o Compose só é compatível com Kotlin, não é possível mudar esse campo.

Selecione API 21: Android 5.0 (Lollipop) no menu do campo Minimum SDK. O campo Minimum SDK indica a versão mínima do Android em que o app pode ser executado.

A caixa de seleção Use legacy android.support libraries já está desmarcada.

7. Selecione Finish. Talvez isso demore um pouco. Pode ser um bom momento para tomar um café. Enquanto isso, uma barra de progresso e uma mensagem indicam se o Android Studio ainda está configurando o projeto. Ela pode ter esta aparência:

Uma mensagem semelhante a esta informa quando a configuração do projeto é criada.

8. Talvez você veja um painel What's New com atualizações sobre novos recursos do Android Studio. Feche-o por enquanto.

9. Clique em Split no canto direito de cima do Android Studio para ver o código e o design. Você também pode clicar em Code para ver somente o código ou em Design para ver apenas o design.

Depois de pressionar Split, você verá três áreas:

• A visualização Project (1) mostra os arquivos e as pastas do projeto.
• A visualização Code (2) é onde você edita o código.
• A visualização Design (3) é onde você tem uma prévia da aparência do app.

Na visualização Design, é mostrado um painel em branco com o texto abaixo:

10. Clique em Build & Refresh. A criação pode demorar um pouco, mas quando terminar, a visualização vai mostrar uma caixa de texto com a mensagem "Hello Android!". A atividade vazia do Compose contém todo o código necessário para criar esse app.

4. Localizar os arquivos do projeto

Nesta seção, você vai continuar a conhecer o Android Studio, aprendendo mais sobre a estrutura do arquivo.

1. No Android Studio, veja a guia Project. A guia Project mostra os arquivos e as pastas do projeto. Durante a configuração do projeto, o nome do pacote era com.example.greetingcard. Veja esse pacote na guia Project. Um pacote é basicamente uma pasta em que o código está localizado. O Android Studio organiza o projeto em uma estrutura de diretórios composta por pacotes.
2. Se necessário, selecione Android no menu suspenso da guia Project.

Essa é a visualização e a organização padrão dos arquivos que você usa. Ela é útil ao escrever códigos para o projeto, porque você consegue acessar facilmente os arquivos com que vai trabalhar no app. No entanto, em um navegador como o Finder ou o Windows Explorer, a hierarquia é organizada de forma muito diferente.

3. Selecione Project Source Files no menu suspenso. Agora você pode procurar os arquivos da mesma maneira que faria em qualquer navegador de arquivos.

4. Selecione Android novamente para retornar à visualização anterior. Você usa a visualização do Android neste curso. Caso a estrutura de arquivos pareça estranha, confira se você ainda está na visualização do Android.

5. Atualizar o texto

Agora que você conhece o Android Studio, é hora de começar a criar seu cartão de apresentação.

Veja a visualização Code do arquivo MainActivity.kt. Há algumas funções geradas automaticamente nesse código, especificamente onCreate() e setContent().

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

A função onCreate() é o ponto de entrada do app e chama outras funções para criar a interface do usuário. Em programas Kotlin, a função main() é o local específico do código em que o compilador Kotlin é iniciado. Em apps Android, a função onCreate() cumpre esse papel.

A função setContent() na função onCreate() é usada para definir o layout usando funções de composição. Todas as funções marcadas com a anotação @Composable podem ser chamadas na função setContent() ou em outras funções de composição. A anotação diz ao compilador Kotlin que essa função é usada pelo Jetpack Compose para gerar a IU.

Agora, observe a função Greeting(). A função Greeting() é de composição e, por esse motivo, a anotação @Composable aparece acima dela. Uma função de composição recebe uma entrada e gera o que vai ser mostrado na tela.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Você aprendeu sobre funções antes, mas existem algumas diferenças em relação às funções de composição. Se quiser relembrar, consulte o codelab sobre criar e usar funções em Kotlin.

• Nomes de funções @Composable usam letras maiúsculas.
• A anotação @Composable é adicionada antes da função.
• As funções @Composable não podem retornar nada.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

No momento, a função Greeting() recebe um nome e mostra Hello para essa pessoa.

1. Atualize a função Greeting() para apresentar você em vez de dizer "Hello":

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. Recrie a DefaultPreview pressionando o botão no canto superior esquerdo do painel de design:

Ótimo! Você mudou o texto, mas ele ainda apresenta você como "Android", que provavelmente não é seu nome. Depois, personalize o app para se apresentar com seu nome.

A função DefaultPreview() é um recurso bem legal que permite ver como o app vai ficar sem que você precise terminar de criá-lo. Uma função precisa da anotação @Preview para ser de visualização.

Como você pode ver, a anotação @Preview recebe um parâmetro conhecido como showBackground. Se showBackground for definido como true, um plano de fundo vai ser adicionado à visualização do app.

Como o Android Studio usa um tema claro por padrão no editor, pode ser difícil ver a diferença entre showBackground = true e showBackground = false. Veja a diferença com um tema escuro. Observe o fundo branco na imagem com o parametro definido como "true".

3. Atualize a função DefaultPreview() com seu nome. Depois, recrie e confira seu cartão de apresenentação personalizado.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

6. Mudar a cor do plano de fundo

Agora você tem um texto de introdução, mas ele está um pouco sem graça. Nesta seção, você vai aprender a mudar a cor do plano de fundo.

Para definir uma cor de plano de fundo diferente no cartão de apresentação, você vai precisar cercar o texto com uma Surface. Uma Surface é um contêiner que representa uma seção da IU em que você pode mudar a aparência, como a cor ou a borda do plano de fundo.

1. Para cercar o texto com uma Surface, destaque a linha de texto, pressione (Alt+Enter para Windows ou Option+Enter no Mac) e selecione Surround with widget.

2. Escolha a opção Surround with Container.

O contêiner padrão fornecido é Box, mas ele pode ser mudado para outro tipo de contêiner.

3. Exclua Box e digite Surface().

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. O contêiner Surface tem um parâmetro color, definido como Color.

@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}

5. Ao digitar "Color", você vai notar que o parâmetro aparece em vermelho e sublinhado. Para resolver esse problema, role até a parte de cima do arquivo, onde está escrito "import", e pressione os três pontos.

6. Adicione essa instrução ao fim da lista de importações.

import androidx.compose.ui.graphics.Color

A lista completa de importações vai ficar assim:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color

7. A prática recomendada é listar as importações no código em ordem alfabética. Para isso, pressione Help na barra de ferramentas na parte de cima da tela, digite Optimize Imports e, em seguida, clique em Optimize Imports.

A lista completa de importações vai ficar assim:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard

8. Observe que "Color", inserido entre parênteses depois de "Surface", não está mais em vermelho e sublinhado. Há apenas um sublinhado vermelho abaixo da palavra agora. Para corrigir esse problema, adicione um ponto depois do parâmetro. Vai aparecer um pop-up mostrando diferentes opções de cor.

Esse é um dos recursos mais interessantes do Android Studio. Ele é inteligente e vai ajudar você quando puder. Neste caso, ele sabe que você quer especificar uma cor, então vai sugerir cores diferentes.

9. Escolha uma cor para a superfície. Este codelab usa magenta, mas você pode escolher sua cor favorita.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

10. Clique em Build & Refresh. O texto vai ser cercado pela cor escolhida.

7. Adicionar padding

Agora, o texto tem uma cor de segundo plano. Depois, você vai adicionar um espaço (padding) ao redor dele.

Um Modifier é usado para aumentar ou decorar um elemento que pode ser composto. Um modificador que pode ser usado é o modificador padding, que aplica espaço ao redor do elemento. Nesse caso, ele adiciona espaço ao redor do texto. Isso é feito com a função Modifier.padding().

1. Adicione essas importações à seção de instruções de importação.

Use Optimize Imports para listar as novas importações em ordem alfabética.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2. Adicione um modificador de padding ao texto com um tamanho de 24.dp e clique em Build & Refresh.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

Parabéns! Você criou seu primeiro app Android no Compose. Essa é uma grande conquista. Tente usar diferentes cores e textos do jeito que quiser.

8. Analisar o código da solução

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

9. Conclusão

Você aprendeu sobre o Android Studio e criou seu primeiro app Android com o Compose. Muito bem!

Este codelab faz parte do curso Noções básicas do Android com o Compose. Para aprender a executar o app no emulador ou em um dispositivo físico, confira os próximos codelabs neste programa de treinamentos.

Resumo

• Para criar um novo projeto: abra o Android Studio, clique em New Project > Empty Compose Activity > Next, digite um nome para o projeto e defina as configurações.
• Para ver a aparência do app, use o painel Preview.
• As funções de composição são como funções normais, com algumas diferenças: os nomes delas começam com letras maiúsculas, você adiciona a anotação @Composable antes da função, e as funções @Composable não podem retornar nada.
• Um Modifier pode ser usado para aumentar ou decorar um elemento que pode ser composto.

Saiba mais

• Vocabulário para noções básicas do Android no Kotlin
• Conheça o Android Studio
• Visão geral de projetos
• Criar um projeto
• Adicionar código de um modelo
• Jetpack Compose