El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo construir interfaces de usuario (UI) en aplicaciones Android utilizando Kotlin. Exploraremos los componentes básicos de la UI, cómo organizarlos y cómo manejar eventos de usuario.

Contenido

Componentes Básicos de la UI
Layouts: Organizando la UI
Manejo de Eventos de Usuario
Ejemplo Práctico: Creando una Aplicación Simple
Ejercicios Prácticos
Conclusión

Componentes Básicos de la UI

TextView

TextView es un componente que muestra texto en la pantalla.

<TextView
    android:id="@+id/textView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Hello, World!" />

Button

Button es un componente que el usuario puede presionar para realizar una acción.

<Button
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Click Me" />

EditText

EditText es un campo de texto editable.

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text" />

Layouts: Organizando la UI

LinearLayout

LinearLayout organiza los componentes en una sola dirección: horizontal o vertical.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />
</LinearLayout>

RelativeLayout

RelativeLayout permite posicionar los componentes en relación unos con otros.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        android:layout_centerInParent="true" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        android:layout_below="@id/textView"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

ConstraintLayout

ConstraintLayout es un layout más flexible y eficiente que permite crear interfaces complejas con menos anidamiento.

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Manejo de Eventos de Usuario

OnClickListener

Para manejar eventos de clic en un botón, utilizamos OnClickListener.

button.setOnClickListener {
    textView.text = "Button Clicked!"
}

Ejemplo Completo

package com.example.myfirstapp

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.textView)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            textView.text = "Button Clicked!"
        }
    }
}

Ejemplo Práctico: Creando una Aplicación Simple

Vamos a crear una aplicación simple que cambia el texto de un TextView cuando se presiona un Button.

Paso 1: Crear el Layout

<!-- res/layout/activity_main.xml -->
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello, World!"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me"
        app:layout_constraintTop_toBottomOf="@id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 2: Configurar la Actividad

// src/main/java/com/example/myfirstapp/MainActivity.kt
package com.example.myfirstapp

import android.os.Bundle
import android.widget.Button
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val textView: TextView = findViewById(R.id.textView)
        val button: Button = findViewById(R.id.button)

        button.setOnClickListener {
            textView.text = "Button Clicked!"
        }
    }
}

Ejercicios Prácticos

Ejercicio 1: Cambiar el Color del Texto

Modifica el ejemplo anterior para que el color del texto cambie a rojo cuando se presione el botón.

Solución:

button.setOnClickListener {
    textView.text = "Button Clicked!"
    textView.setTextColor(Color.RED)
}

Ejercicio 2: Añadir un EditText

Añade un EditText al layout y modifica el texto del TextView para que muestre el texto ingresado en el EditText cuando se presione el botón.

Solución:

<EditText
    android:id="@+id/editText"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Enter text"
    app:layout_constraintTop_toBottomOf="@id/button"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />

val editText: EditText = findViewById(R.id.editText)

button.setOnClickListener {
    val inputText = editText.text.toString()
    textView.text = inputText
}

Conclusión

En esta sección, hemos aprendido a construir interfaces de usuario en Android utilizando Kotlin. Hemos cubierto los componentes básicos de la UI, cómo organizarlos con diferentes tipos de layouts y cómo manejar eventos de usuario. Además, hemos creado una aplicación simple para poner en práctica estos conceptos.

En la siguiente sección, exploraremos cómo manejar la entrada del usuario de manera más avanzada, incluyendo validaciones y manejo de diferentes tipos de input.

Construcción de Interfaces de Usuario