Implementación de Interfaces de Usuario y Navegación Dinámica en Android

El desarrollo de aplicaciones en Android requiere una comprensión sólida de cómo estructurar los archivos de diseño XML y cómo gestionar la lógica de interacción mediante código Java o Kotlin. A continuación, se presentan diversos patrones para construir formularios de acceso y pantallas de captura de datos, junto con la lógica necesaria para la transición entre actividades.

1. Estructura de Interfaz Básica con LinearLayout

Para vistas simplificadas, el uso de LinearLayout permite organizar elementos de forma secuencial. En este ejemplo, definimos una pantalla de bienvenida con botones de navegación primaria.

<?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="40dp"
    android:background="#f4f4f4">

    <TextView
        android:id="@+id/lbl_mensaje_bienvenida"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Gestión de Sistema"
        android:textSize="24sp"
        android:layout_marginBottom="20dp" />

    <Button
        android:id="@+id/btn_entrar_sistema"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Iniciar Sesión"
        android:textAllCaps="false" />

    <Button
        android:id="@+id/btn_ver_galeria"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Explorar Multimedia"
        android:textAllCaps="false" />

</LinearLayout>

2. Formulario de Autenticación Avanzado

Un módulo de login funcional suele incluir selectores de modo (por contraseña o código) y campos validados. Aquí se utiliza un RadioGroup para alternar la lógica de entrada y un RelativeLayout para posicionar elementos secundarios como la recuperación de credenciales.

<?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:padding="16dp">

    <RadioGroup
        android:id="@+id/group_metodo_auth"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal">
        <RadioButton
            android:id="@+id/opt_pass"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Credenciales"
            android:checked="true" />
        <RadioButton
            android:id="@+id/opt_otp"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:text="Código SMS" />
    </RadioGroup>

    <EditText
        android:id="@+id/input_usuario_tel"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Teléfono móvil"
        android:inputType="phone"
        android:layout_marginTop="15dp" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp">
        <EditText
            android:id="@+id/input_clave_seguridad"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Contraseña"
            android:inputType="textPassword" />
        <TextView
            android:id="@+id/txt_recuperar_cuenta"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:text="¿Olvidó su clave?"
            android:textColor="#3F51B5" />
    </RelativeLayout>

    <CheckBox
        android:id="@+id/chk_mantener_sesion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Recordar dispositivo" />

    <Button
        android:id="@+id/btn_accion_login"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:text="Acceder" />
</LinearLayout>

3. Formulario de Registro de Actividades Diarias

Para aplicaciones de productividad, es común implementar campos de texto multilínea y selectores de fecha. El atributo gravity="top" en un EditText con altura fija asegura que el cursor comience en la parte superior izquierda.

<?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:padding="25dp"
    android:background="#e0f2f1">

    <Button
        android:id="@+id/btn_abrir_calendario"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Definir Fecha" />

    <EditText
        android:id="@+id/input_etiquetas"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Palabras clave (ej. Trabajo, Salud)"
        android:inputType="text" />

    <EditText
        android:id="@+id/input_cuerpo_resumen"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:gravity="top|start"
        android:hint="Escriba aquí sus notas del día..."
        android:inputType="textMultiLine"
        android:background="@android:drawable/editbox_background" />
</LinearLayout>

4. Lógica de Control y Navegación en Java

La clase principal extiende de AppCompatActivity y se encarga de vincular los componentes definidos en el XML con la lógica de negocio. El uso de Intent permite la comunicación entre diferentes componentes de la aplicación.

package com.dev.uiexample;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;

public class ControlPrincipalActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // Inicialización de componentes
        TextView tituloCabecera = findViewById(R.id.lbl_mensaje_bienvenida);
        Button btnLogin = findViewById(R.id.btn_entrar_sistema);
        Button btnGaleria = findViewById(R.id.btn_ver_galeria);

        // Configuración de estilos dinámicos
        tituloCabecera.setText("Consola de Usuario");
        tituloCabecera.setTextColor(Color.parseColor("#2C3E50"));

        // Manejo de eventos para navegación
        btnLogin.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                lanzarActividad(LoginActivity.class);
            }
        });

        btnGaleria.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                lanzarActividad(MediaViewerActivity.class);
            }
        });
    }

    /**
     * Método auxiliar para simplificar la transición entre pantallas
     */
    private void lanzarActividad(Class<?> destino) {
        Intent intentNavegacion = new Intent(this, destino);
        startActivity(intentNavegacion);
    }
}

Etiquetas: Android java XML-Layout mobile-ui Intent

Publicado el 7-3 00:51