DS & II

🎲 P01: Guia Passo a Passo - Dados RPG (D20)

Leitura de 4 min

🎲 P01: Guia Passo a Passo - Dados RPG (D20)

Bem-vindo à sua primeira missão como desenvolvedor Android! 🚀 Neste projeto, vamos construir um Simulador de Dados D20. Se você já jogou RPG de mesa, sabe que o D20 é o dado que decide o seu destino. Aqui, ele vai decidir se o seu código é um sucesso crítico!

📑 O que vamos aprender?

  1. Configurar um projeto Android do zero.

  2. Desenhar a tela (Layout) usando XML.

  3. Programar o botão para sortear números usando Java.

  4. Exibir o resultado na tela do celular.

🛠️ Passo 1: Iniciando o Projeto no Android Studio

Antes de codar, precisamos preparar o terreno:

  1. Abra o Android Studio e clique em New Project.

  2. Escolha o template Empty Views Activity (Cuidado: não escolha o “Empty Activity” puro, pois ele usa uma tecnologia diferente chamada Compose).

  3. Configure os dados do seu app:

    • Name: Dados RPG TecPro

    • Package Name: br.com.curso.dadosrpg

    • Save Location: Escolha uma pasta fácil de achar.

    • Language: Java (O clássico).

    • Minimum SDK: API 24 (Android 7.0) ou superior.

  4. Clique em Finish e espere o Android Studio “terminar de carregar” (a barra de progresso no canto inferior deve sumir).

🎨 Passo 2: Desenhando a Interface (XML)

No Android, o desenho da tela fica em arquivos XML. Pense no XML como o “BluePrint” ou a planta baixa da sua casa.

  1. No painel esquerdo, vá em app > src > main > res > layout > activity_main.xml.

  2. Clique na aba Code (no topo superior direito) para ver o código.

  3. Apague tudo e cole este código base:

 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
    android:layout_width="match_parent"
 
    android:layout_height="match_parent"
 
    android:orientation="vertical"
 
    android:gravity="center"
 
    android:padding="16dp"
 
    android:background="#F5F5F5">
 
    <!-- Título do Jogo -->
 
    <TextView
 
        android:layout_width="wrap_content"
 
        android:layout_height="wrap_content"
 
        android:text="MESTRE DOS DADOS"
 
        android:textSize="24sp"
 
        android:textStyle="bold"
 
        android:textColor="#333333"
 
        android:layout_marginBottom="50dp" />
 
    <!-- Onde o número sorteado vai aparecer -->
 
    <TextView
 
        android:id="@+id/txt_resultado"
 
        android:layout_width="wrap_content"
 
        android:layout_height="wrap_content"
 
        android:text="?"
 
        android:textSize="80sp"
 
        android:textColor="#FF1C1C"
 
        android:layout_marginBottom="50dp" />
 
    <!-- O Botão de Ação -->
 
    <Button
 
        android:id="@+id/btn_rolar"
 
        android:layout_width="200dp"
 
        android:layout_height="60dp"
 
        android:text="ROLAR D20"
 
        android:textSize="18sp" />
 
</LinearLayout>

💡 O que aconteceu aqui?

  • LinearLayout: Organizamos tudo um embaixo do outro (vertical).

  • android:id: É o “nome” do componente. Usaremos @+id/txt_resultado para dizer ao Java quem ele deve atualizar.

  • sp/dp: São as medidas do Android. sp é para texto e dp para tamanhos de botões e margens.

🧠 Passo 3: Criando a Lógica (Java)

Agora que a planta está pronta, vamos ligar a energia! Abra o arquivo MainActivity.java em app > src > main > java > br.com.curso.dadosrpg > MainActivity.java.

Substitua o conteúdo pelo código abaixo:

 
package br.com.curso.dadosrpg;
 
import android.os.Bundle;
 
import android.view.View;
 
import android.widget.Button;
 
import android.widget.TextView;
 
import androidx.appcompat.app.AppCompatActivity;
 
import java.util.Random;
 
public class MainActivity extends AppCompatActivity {
 
    // 1. Criamos as variáveis para representar os itens da tela
 
    private TextView txtResultado;
 
    private Button btnRolar;
 
    @Override
 
    protected void onCreate(Bundle savedInstanceState) {
 
        super.onCreate(savedInstanceState);
 
        setContentView(R.layout.activity_main); // Liga este código ao XML
 
        // 2. Fazemos a ponte: O Java encontra o componente pelo ID do XML
 
        txtResultado = findViewById(R.id.txt_resultado);
 
        btnRolar = findViewById(R.id.btn_rolar);
 
        // 3. Programamos o "ouvido" do botão. Ele fica esperando o clique.
 
        btnRolar.setOnClickListener(new View.OnClickListener() {
 
            @Override
 
            public void onClick(View v) {
 
                rolarDado(); // Chama a nossa função de sorteio
 
            }
 
        });
 
    }
 
    private void rolarDado() {
 
        // 4. Geramos um número aleatório entre 0 e 19 e somamos 1 (resultado: 1 a 20)
 
        int numeroSorteado = new Random().nextInt(20) + 1;
 
        // 5. Atualizamos o texto na tela
 
        // Importante: O setText precisa de uma String (texto), por isso o String.valueOf
 
        txtResultado.setText(String.valueOf(numeroSorteado));
 
    }
 
}

🚀 Passo 4: Hora do Show!

  1. Conecte seu celular via USB ou use o Emulator do Android Studio.

  2. Clique no ícone de “Play” verde no topo do Android Studio.

  3. Quando o app abrir, clique no botão e veja a mágica acontecer!

🏆 Desafios para você (Upgrade!)

Se você terminou rápido, tente customizar o seu app:

  • Cores: Mude a cor do fundo no XML (android:background).

  • D6: Crie um segundo botão que sorteia um dado de 6 faces (D6).

  • Som: Tente pesquisar como tocar um som de “dado rolando” ao clicar no botão.

🛠️ Resolvendo Problemas (Troubleshooting)

  • Erro de ponto no XML: Se você digitar 16.dp o app vai dar erro. O correto é sempre sem ponto: 16dp.

  • R.layout não encontrado: Clique em Build > Clean Project para o Android Studio atualizar as referências.

  • O app fecha sozinho: Verifique se o ID no findViewById é exatamente igual ao ID que você escreveu no XML.

Parabéns! Você acaba de criar seu primeiro artefato digital na trilha mobile. 🎮🔥

Visão de gráfico