Para iniciar baixe o Android Studio, observe os requisitos mínimos para para execução. Conclua o processo de instalação padrão aceite os pontos
Prepare o emulador ou utilize seu dispositivo físico(recomendo pois consome menos da maquina host).
Passo 1: Criando um novo projeto
- Abra o android studio e na tela de abertura clique em “New Project”
- Escolha o tipo de atividade “Empty Activity” e dê next
- Preencha o name e o Package name, todas as outras opções mantenha padrão
Passo 2: Teste a aplicação no seu dispositivo ou emulador
Certifique-se que o dispositivo está conectado (se for usar o smartphone). Clique em 
ou tecle Shift + F10 para executar a aplicação. No estado atual, a aplicação mostrará
apenas uma mensagem simples na tela, por exemplo, “Hello Android!”.
ATENÇÃO: O run só se torna disponivel após o build se concluir, verifique uma barra verde e o log de construção no canto inferior direito
Passo 3: Habilite o controle e versão e faça o primeiro commit
No canto superior esquerdo há um menu “Version Control” e selecione a opção de ‘Create Repository’ ,confirme a pasta e ok, você terá seu repositorio criado.
No mesmo menu agora selecione a opção commit e digite a mensagem de commit. ex: “Primeiro commit”.(A mensagem de commit pode conter texto e imoji, seja criativo para registrar e celebrar seu sucesso até aqui.)
Parte 2: Criando uma nova tela
Será criada uma tela simples de login com e-mail e a senha do usuário. Não serão feitas verificações adicionais nesse tutorial
Passo 1: Crie uma nova atividade chamada ‘LoginActivity’
Menu New > Activity > Gallery … > Empty Activity Marcar como “Launcher Activity” (atividade que será lançada primeiro no App)
Passo 2: Apague os trechos de código gerados pelo IDE abaixo da classe @Composable
Isto é, trechos iniciados com @Composable
Passo 3: Adicione o trecho de código abaixo após a classe LoginActivity:
| @OptIn(ExperimentalMaterial3Api::class) | |
| @Preview(showBackground = true) | |
| @Composable | |
| fun LoginPage(modifier: Modifier = Modifier) { | |
| var email by rememberSaveable { mutableStateOf("") } | |
| var password by rememberSaveable { mutableStateOf("") } | |
| val activity = LocalContext.current as? Activity | |
| Column( | |
| modifier = Modifier | |
| .padding(16.dp) | |
| .fillMaxWidth(), | |
| ) { | |
| Text( | |
| text = "Bem-vindo/a!", | |
| fontSize = 24.sp, | |
| modifier = Modifier.padding(bottom = 16.dp) | |
| ) | |
| OutlinedTextField( | |
| value = email, | |
| label = { Text(text = "Digite seu e-mail") }, | |
| modifier = Modifier.fillMaxWidth(), | |
| onValueChange = { email = it } | |
| ) | |
| OutlinedTextField( | |
| value = password, | |
| label = { Text(text = "Digite sua senha") }, | |
| modifier = Modifier.fillMaxWidth().padding(top = 8.dp), | |
| onValueChange = { password = it }, | |
| visualTransformation = PasswordVisualTransformation() | |
| ) | |
| Row( | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .padding(top = 16.dp), | |
| horizontalArrangement = Arrangement.SpaceBetween | |
| ) { | |
| Button( | |
| onClick = { | |
| Toast.makeText(activity, "Login OK!", Toast.LENGTH_LONG).show() | |
| } | |
| ) { | |
| Text("Login") | |
| } | |
| Button( | |
| onClick = { | |
| email = ""; | |
| password = "" | |
| } | |
| ) { | |
| Text("Limpar") | |
| } | |
| } | |
| } | |
| } |
by Atenção: faça a importação dos pacotes necessários (Alt+ENTER).
Link útil para entender a sintaxe de Kotlin com Compose: https://developer.android.com/jetpack/compose/kotlin
Passo 4: Adicione espaçadores entre os components pra tornar a UI mais agradavel
Spacer(modifier = Modifier.size(250.dp))
Passo 5: Faça os campos de digitação tomarem toda a largura da tela
usando o modificador modifier = Modifier.fillMaxWidth() nas chamadas de OutlinedTextField.
Passo 6: Adicione uma condição para que o botão de login esteja habilitado apenas se os campos de e-mail e senha estiverem preenchidos
enabled = email.isNotEmpty() && password.isNotEmpty()
Parte 3: Criando uma nova tela e navegando entre elas
Nessa etapa vamos iniciar na navegação entre telas
Passo 1: Na MainActivity, crie uma tela simples chamada HomePage contendo apenas uma mensagem de texto de boas-vindas e um botão para sair.
Adapte o código usado na LoginPage como base. Ajuste os elementos da UI para ficar visualmente agradável.
Passo 2: Na LoginActivity, no onClick de LoginPage, adicione o trecho de código abaixo:
Button( onClick = { … activity?.startActivity( Intent(activity, MainActivity::class.java).setFlags( FLAG_ACTIVITY_SINGLE_TOP ) ) } ) { … }
Passo 3: No tratador de onClick do botão “Sair” da MainActivity, apenas chame activity?.finish() para encerrar a atividade e voltar para a tela de login.
Parte 4: Criando uma nova atividade com mais campos
O objetivo essa etapa é construir uma nova atividade, praticar a criação de diferentes tipos de campo, para praticar o conteudo aprendido até o momento
Passo 1: Crie uma nova atividade chamada RegisterActivity.
Menu New > Activity > Gallery … > Empty Activity Marcar como “Launcher Activity” (atividade que será lançada primeiro no App)
Passo 2: Usando a LoginPage como base, crie a tela RegisterPage
contendo:
• Campo para o nome do usuário
• Campo para o e-mail do usuário
• Campo para a senha
• Campo para repetir a senha
• Botão para confirmar o registro (“Registrar”)
• Botão para limpar o formulário (“Limpar”)
Passo 3: Adicione um botão na tela de login
(LoginActivity) deve chamar a atividade de registro RegisterActivity.
Passo 4: Na tela de registro
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Passo 5: Sobre o botão de registro
faça de registro lançar um Toast confirmando o registro e depois finalize a atividade, voltando para LoginActivity.
Passo 6: Sobre o botão de registro
Faça com que o botão de registro só fique habilitado se os campos estiverem preenchidos e as senhas iguais, usando condições como no caso de LoginActivity
Conclusão
Aqui você aprendeu a instalar a IDE, e conceitos básicos da linguagem de programação kotlin na Pratica.
github do projeto : https://github.com/SamuelvLopes/weatherapp
Deixe um comentário