capitulo_025

🚀 3.2 RelativeLayout

O próximo passo é criar o Dashboard da nossa aplicação. Para esta tela, utilizaremos o RelativeLayout, que permite posicionar elementos de forma relativa a outros componentes ou ao próprio contêiner pai.

IMPORTANT

Performance e Hierarquia Plana: Embora o RelativeLayout seja versátil, o uso excessivo de layouts aninhados pode degradar a performance. No desenvolvimento moderno com o Android Studio 2023.1, o ConstraintLayout é a escolha preferida por permitir criar interfaces complexas com uma hierarquia “plana” (sem aninhamento), resultando em renderizações muito mais rápidas.

Construindo o Dashboard

No arquivo dashboard.xml, organizaremos as opções principais utilizando o RelativeLayout dentro de um LinearLayout 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:background="@color/dark_grey">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/app_name"
        style="@style/PremiumTitle" />
 
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/primary_blue"
        android:padding="16dp">
 
        <TextView
            android:id="@+id/cardNovoGasto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginTop="60dp"
            android:drawableTop="@drawable/ic_gasto"
            android:text="@string/novo_gasto"
            style="@style/DashboardItem" />
 
        <TextView
            android:id="@+id/cardNovaViagem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignTop="@id/cardNovoGasto"
            android:drawableTop="@drawable/ic_viagem"
            android:text="@string/nova_viagem"
            style="@style/DashboardItem" />
 
    </RelativeLayout>
</LinearLayout>

Lógica do Dashboard (Java 17 & ViewBinding)

Implementaremos a DashboardActivity utilizando as ferramentas modernas para garantir segurança de tipos e código limpo:

public class DashboardActivity extends AppCompatActivity {
 
    private ActivityDashboardBinding binding;
 
    @Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        binding = ActivityDashboardBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());
 

    // Configuração de cliques usando referências diretas do Binding
    binding.cardNovoGasto.setOnClickListener(v -> abrirSelecao("Novo Gasto"));
    binding.cardNovaViagem.setOnClickListener(v -> abrirSelecao("Nova Viagem"));
}

    private void abrirSelecao(String opcao) {
        var mensagem = "Opção selecionada: " + opcao;
        Toast.makeText(this, mensagem, Toast.LENGTH_SHORT).show();
    }
}

Configuração do Tema no Manifesto

Para uma experiência imersiva, removemos a barra de título padrão no AndroidManifest.xml utilizando um tema moderno do Material3:

<activity 
    android:name=".DashboardActivity"
    android:theme="@style/Theme.Material3.DayNight.NoActionBar" />

TIP

Ao utilizar o Android Studio 2023.1, aproveite o editor visual (“Design Tab”) para ajustar as restrições e relações entre os componentes. Isso facilita a compreensão de como o RelativeLayout (ou o ConstraintLayout) calcula as posições em tempo de execução.

---

⬅️ Capítulo Anterior | Próximo Capítulo ➡️