[Aula 03] Construindo a Primeira Tela do Aplicativo

Agenda:

• Definindo propósitos e objetivos para a primeira tela.

• Passo a passo: desenvolvendo a primeira tela do zero.

• Introdução a elementos interativos: botões, campos de entrada e visualizações de texto.

• Demonstração prática: inserção e exibição de informações.

• Oportunidade de testes: experimentando no emulador.

1. Definindo o objetivo da primeira tela

Antes de começarmos a construir, é essencial definir o que esperamos alcançar com a nossa primeira tela. Ela será a primeira impressão que os usuários terão do nosso aplicativo, portanto, a clareza e a usabilidade são fundamentais.

Pense na primeira tela como a vitrine de uma loja - ela deve ser atraente e mostrar claramente o que o aplicativo tem a oferecer.

2. Prática: construindo a tela do zero

Agora que temos uma visão clara, vamos começar o desenvolvimento!

1. Layout: Vamos começar selecionando o tipo de layout que desejamos (recomendamos o ConstraintLayout para mais flexibilidade).

2. Elementos: Adicionaremos um EditText para a entrada do usuário, um Button para a interação e um TextView para exibir o resultado.

3. Personalização: Estilize os elementos para se adequar ao design desejado usando o XML.

Lembre-se de verificar frequentemente o design no "modo de design" do Android Studio para ter uma visão visual do progresso.

3. Demonstrando a ação de inserir um texto e exibir na TextView

Vamos criar uma funcionalidade simples para que, quando o usuário insira seu nome e clique no botão, uma saudação seja exibida.

Exemplo:

• Kotlin:

btSend.setOnClickListener {
    val name = etName.text.toString()
    tvResult.text = "Olá, $name!"
}

• Java:

button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        String name = editText.getText().toString();
        textView.setText("Olá, " + name + "!");
    }
});

4. Implementando interação com EditText

1. EditText: É onde o usuário inserirá uma informação (por exemplo, seu nome).

2. Button: Ao clicar, pegaremos o texto inserido e o exibiremos no TextView.

3. TextView: Será usado para exibir uma saudação personalizada com o nome inserido.

---

Com a conclusão desta aula, você tem uma base sólida sobre a construção de interfaces básicas no Android e sobre como adicionar funcionalidades simples. No próximo capítulo, aprofundaremos na melhoria da experiência do usuário e na personalização avançada da interface!