Kotlin Doc

Ejemplo: JavaScript desde Kotlin

2019-11-03T00:10:00.000+01:00

Página web desarrollada con KotlinJS con ejemplos de:

Cómo utilizar botones HTML para producir acciones (abrir ventanas de alerta, cambios de estilo, actualizar variables).
Insertar código JavaScript con la función js("...").
Declarar de forma segura API de JavaScript con la palabra reservada external.

Más detalles en Calling JavaScript from Kotlin (en inglés).

En el navegador aparece así:

A continuación los archivos principales (main.tk, index.html y estilo.css):

// main.kt
import org.w3c.dom.HTMLButtonElement
import kotlin.browser.document

// función de JavaScript que podemos usar como si fuera de Kotlin
external fun alert(msg: String)

fun main() {

    var contador1 = 0
    var contador2 = 0
    var contador3 = 0

    val h1 = document.createElement("h1")
    h1.textContent = "Desarrollo Web con KotlinJS"

    val p1 = document.createElement("p")
    p1.textContent = "Página web desarrollada con Kotlin JS con ejemplos de:"

    val ul1 = document.createElement("ul")
    val li1 = document.createElement("li")
    li1.textContent = "Cómo utilizar botones HTML para producir acciones."
    val li2 = document.createElement("li")
    li2.textContent = "Insertar código JavaScript con la función js(\"...\")"
    val li3 = document.createElement("li")
    li3.textContent = "Declarar de forma segura API de JavaScript con la palabra reservada \"external\"."
    ul1.append(li1, li2, li3)

    // BOTÓN 1
    val boton1 = document.createElement("button") as HTMLButtonElement
    boton1.type = "button"
    boton1.textContent = "Botón 1"
    boton1.addEventListener("click", {
        if (contador1 == 0) {
            boton1.style.background = "#f44336"
            js("alert(\"Boton 1 pulsado!\")")
        }
        contador1 += 1
        boton1.textContent = contador1.toString()
    })

    // BOTÓN 2
    val boton2 = document.createElement("button") as HTMLButtonElement
    boton2.type = "button"
    boton2.textContent = "Botón 2"
    boton2.addEventListener("click", {
        if (contador2 == 0) {
            boton2.style.background = "#555555"
            val json = js("{}")
            json.msg = "Botón 2 pulsado!"
            js("alert(JSON.stringify(json.msg))")
        }
        contador2 += 1
        boton2.textContent = contador2.toString()
    })

    // BOTÓN 3
    val boton3 = document.createElement("button") as HTMLButtonElement
    boton3.type = "button"
    boton3.textContent = "Botón 3"
    boton3.addEventListener("click", {
        if (contador3 == 0) {
            boton3.style.background = "#008CBA"
            alert("Boton 3 pulsado!")  // invoca función de JavaScript
        }
        contador3 += 1
        boton3.textContent = contador3.toString()
    })

    document.body?.append(h1, p1, ul1, boton1, boton2, boton3)
}

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alertJS</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>

    <script src="out/production/alertJS/lib/kotlin.js"></script>
    <script src="out/production/alertJS/alertJS.js"></script>

</body>
</html>

/* estilo.css */
button {
    background-color: #4CAF50;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 20px;
    width:200px;
}

Ejemplo de Kotlin JS para desarollo web

2019-11-02T00:00:00.000+01:00

Un ejemplo simple, similar al código que vimos en la entrada Ejemplo: Html Builder (KotlinJS), sobre cómo usar Kotlin en el desarrollo web en lugar de Javascript. Adaptación del código Kotlin JS for Web development disponible en el repositorio kotlinjs-example.

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>KotlinJS</title>
</head>
<body>
    <script src="out/production/Kotlin Web/lib/kotlin.js"></script>
    <script src="out/production/Kotlin Web/Kotlin Web.js"></script>
</body>
</html>

//Main.tk
import html.*
import kotlin.browser.document

fun main() {
    document.body?.apply {

        h1("Desarrollo Web con KotlinJS")

        div {
            p("Test para generar código HTML con Kotlin")
            p("Iterando sobre un rango con for:")
            ul {
                for (i in 1..10) {
                    if (i < 10) li("0$i") else li("$i")
                }
            }
        }
    }
}

//html.kt
package html

import org.w3c.dom.Element
import kotlin.browser.document

// enumeramos las etiquetas HTML
enum class HtmlTag(val text: String) {
    H1("h1"),
    DIV("div"),
    P("p"),
    UL("ul"),
    LI("li")
}

// funciones sobre objetos de tipo Element que devuelven el resultado
// de una función que toma como primer argumento un valor del enum
fun Element.h1(text: String): Element = textElement(HtmlTag.H1, text)
fun Element.div(f: Element.() -> Unit) = structuralElement(HtmlTag.DIV, f)
fun Element.p(text: String): Element = textElement(HtmlTag.P, text)
fun Element.ul(f: Element.() -> Unit) = structuralElement(HtmlTag.UL, f)
fun Element.li(text: String) = textElement(HtmlTag.LI, text)

private fun Element.textElement(tag: HtmlTag, text: String): Element {
    return createTag(tag) { textContent = text }
}

private fun Element.structuralElement(tag: HtmlTag, f: Element.() -> Unit): Element {
    return createTag(tag) { f() }
}

private fun Element.createTag(tag: HtmlTag, f: Element.() -> Unit): Element {
    val element = document.createElement(tag.text)
    element.f()
    append(element)
    return element
}

El resultado se ve así en el navegador:

Ejemplo: Html Builder (KotlinJS)

2019-11-01T15:53:00.002+01:00

Ejemplo para crear una web html con Kotlin ilustrando y ampliando el contenido expuesto en la entrada Introducción a KotlinJS: Desarrollo web con Kotlin.

Observa en el código que getHTML se refiere a una función que toma como argumento una expresión lambda que utiliza una instancia de la clase HTML, y headTag y bodyTag son funciones miembro de la clase HTML, y agregamos el texto a las etiquetas html invocando el operador String.unaryPlus(). Para más detalles puedes ver (en inglés): Type-Safe Builders

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>

<body>

    <script src="out/production/html/lib/kotlin.js"></script>
    <script src="out/production/html/html.js"></script>

</body>
</html>

//html.kt
package html

import kotlin.browser.document

fun main() {

    val codeHTML = getHTML {
        // <head>
        headTag {
            title { +"KotlinJS" }
        }
        // <body>
        bodyTag {
            h1Tag { +"Desarrollo web con Kotlin" }
            pTag {
                +"Página web con etiquetas de marcado"
                +"HTML <h1>, <p>, <b>, <a>, <ul>, <li>"
                +"desarrollada con Kotlin"
            }
            pTag {
                bTag { +"Kotlin Doc" }
                +"comparte y divulga en español"
                +"información y ejemplos sobre programación con Kotlin y Android. Visita"
                aTag(href = "https://kotlindoc.blogspot.com") {
                    +"Kotlin Doc"
                }
            }
            pTag {
                +"La tabla de multiplicar del 2 iterando sobre un rango con un bucle for:"
                ulTag { for (i in 1..10) li { +"$i * 2 = ${i * 2}" } }
            }
        }
    }
    document.body?.appendChild(codeHTML.elemento)
}

// Clase abstracta
abstract class TagHTML(name: String) {
    val elemento = document.createElement(name)
    protected fun <T : TagHTML> initTag(tag: T, init: T.() -> Unit): T {
        tag.init()
        elemento.appendChild(tag.elemento)
        return tag
    }
}

// Clase Abstracta que herada de TagHTML
abstract class TagTextHTML(name: String) : TagHTML(name) {
    operator fun String.unaryPlus() {
        elemento.appendChild(document.createTextNode("$this "))
    }
}

// Clases que heredan de TagTextHTML
class HTML : TagTextHTML("html") {
    fun headTag(init: Head.() -> Unit) = initTag(Head(), init)
    fun bodyTag(init: Body.() -> Unit) = initTag(Body(), init)
}

class Head : TagTextHTML("head") {
    fun title(init: Title.() -> Unit) = initTag(Title(), init)
}

class Title : TagTextHTML("title")

// Clase abstracta
abstract class BodyTag(name: String) : TagTextHTML(name) {
    fun bTag(init: B.() -> Unit) = initTag(B(), init)
    fun pTag(init: P.() -> Unit) = initTag(P(), init)
    fun h1Tag(init: H1.() -> Unit) = initTag(H1(), init)
    fun ulTag(init: UL.() -> Unit) = initTag(UL(), init)
    fun aTag(href: String, init: A.() -> Unit) {
        val a = initTag(A(), init)
        a.href = href
    }
}

// Clases que heredan de BodyTag
class Body : BodyTag("body")

class UL : BodyTag("ul") {
    fun li(init: LI.() -> Unit) = initTag(LI(), init)
}

class B : BodyTag("b")

class LI : BodyTag("li")

class P : BodyTag("p")

class H1 : BodyTag("h1")

class A : BodyTag("a") {
    var href: String
        get() = elemento.getAttribute("href") ?: ""
        set(value) = elemento.setAttribute("href", value)
}

// función que toma como argumento una expresión lambda que utiliza una instancia de la clase HTML
fun getHTML(init: HTML.() -> Unit): HTML {
    val html = HTML()
    html.init()
    return html
}

Lo que se visualiza en el navegador de esta manera:

Introducción a KotlinJS: Desarrollo web con Kotlin

2019-10-29T08:00:00.000+01:00

Hasta ahora estamos escribiendo Kotlin principalmente para el desarrollo de aplicaciones en Android, pero Kotlin es un lenguaje de programación versátil con cuatro ámbitos principales de aplicación: Android, JVM, nativo y, lo que nos interesa ahora, desarrollo web. Esto es así porque Kotlin también puede ser compilado a código fuente de JavaScript, con la diferencia de que con Kotlin se puede disfrutar de la experiencia de utilizar un lenguaje fuertemente tipado y de gran potencia.

Hay varias formas de compilar Kotlin a JavaScript, siendo el enfoque recomendado usar Gradle, aunque también se pueden crear proyectos JavaScript directamente desde IntelliJ IDEA, usar Maven o compilar el código manualmente desde la línea de comandos. De momento vamos a ver un ejemplo sencillo de cómo usar KotlinJS (Kotlin a JavaScript) para el desarrollo web.

Abrimos IntelliJ Idea y creamos un nuevo proyecto seleccionando Kotlin y JS | IDEA:

Asignamos un nombre al proyecto y seleccionamos una librería (en caso de no existir la creamos con el botón Create):

Observa la estructura de archivos que se ha creado. En la carpeta src creamos un archivo tipo Kotlin, por ejemplo kotlinJS.kt, y en la raíz del proyecto creamos un archivo html (File -> New -> HTML File), por ejemplo index.html, y un archivo para contener el estilo, por ejemplo estilo.css (también se puede crear un archivo xsl desde File -> New -> XSLT Stylesheet).

Ahora ya podemos ejecutar Build -> Build Project, lo que genera una nueva carpeta llamada out, donde ahora nos interesan dos archivos:

out/production/KotlinJS/lib/kotlin.js
out/production/KotlinJS/KotlinJS.js

Ahora tenemos esta estructura de archivos:

Abrimos el archivo index.html y cambiamos el título y añadimos las referencias a esos dos archivos y al archivo de estilo, quedando de esta manera:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Desarrollo Web con KotlinJS</title>
    <link rel="stylesheet" href="estilo.css">
</head>
<body>
    <script src="out/production/KotlinJS/lib/kotlin.js"></script>
    <script src="out/production/KotlinJS/KotlinJS.js"></script>
</body>
</html>

Y en el archivo kotlinJS.kt podemos crear un par de elementos html que añadimos a la etiqueta body:

import kotlin.browser.document

fun main() {
    val h1 = document.createElement("h1")
    h1.textContent = "Hola KotlinJS!"

    val p1 = document.createElement("p")
    p1.textContent = "Mi primera web con Kotlin."

    document.body?.append(h1, p1)
}

Y en el archivo estilo.css establecemos un estilo:

body {
    background-color : #d8da3d;
    font-family : arial;
}

h1 {
    font-size : 36pt;
    font-family : verdana, arial;
    text-align : center;
    color: white;
    background-color : teal;
    padding: 10%;
}
p {
    font-size : 16pt;
    font-family : arial,helvetica;
    font-weight : normal;
    color: teal;
}

Volvemos a reconstruir con Build Project y desde el archivo index abrimos un navegador para ver el resultado (en la esquina superior derecha aparecen los iconos de los navegadores configurados, o alternativamente desde View -> Open in Browser; en caso de pulsar sobre un navegador no instalado, se abre la ventana de advertencia Browser Error, y pulsando sobre Fix abrimos una ventana para editar los navegadores). Así se ve en el navegador:

Android: Diseño adaptado a la orientación de pantalla

2019-10-28T08:00:00.000+01:00

A la hora de desarrollar una aplicación habitualmente creamos un diseño en vertical puesto que es la orientación por defecto, aunque suele ser conveniente que el diseño sea lo suficientemente flexible para adaptarse a la rotación del dispositivo y mostrarse de manera correcta también en horizontal.

Si quieres que tu aplicación sea igualmente funcional en ambas orientaciones (portrait y landscape), Android Studio nos facilita las cosas.

Antes de nada, cuando ejecutes tu aplicación en el emulador de Android asegúrate que en los ajustes está activada la opción de rotación automática (Auto-rotate) como se ve en la imagen:

Nuestra aplicación de ejemplo (para esta entrada he utilizado código del repositorio en Github de Google Developer Training) se ve así en modo vertical:

Al rotar el dispositivo (en el emulador) la aplicación se muestra así en modo apaisado:

Comprobamos que la imagen se corta y que la disposición del diseño no queda optimizada para esta orientación.

Para solucionarlo abrimos el archivo de diseño, en nuestro ejemplo layout/activity_main.xml, y desde la pestaña Design pulsamos sobre el icono Orientation for Preview, donde está activada la opción Portrait; seleccionamos Landscape y comprobamos que se ve igual que en el emulador (no podíamos esperar otra cosa).

En Orientation for Preview pulsamos sobre Create Landscape Variation, lo que crea un nuevo archivo: layout-land/activity_main.xml que es una copia del archivo de diseño original. Sobre este archivo debemos hacer los cambios para que el diseño se ajuste correctamente en horizontal.

Una vez hechos los cambios oportunos en el diseño (se podría hacer mejor, pero para el ejemplo simplemente he cambiado el escalado de la imagen de fondo y la distribución del texto inferior), volvemos a ejecutar la aplicación en el emulador, y comprobamos que al rotar el dispositivo la aplicación toma automáticamente el diseño que corresponde a cada orientación:

Material Design: Paleta de colores

2019-10-27T08:00:00.000+01:00

A partir de la versión 5.0 de Android (API 21), Google introduce una guía para el diseño visual de las aplicaciones, conocida como Material Design, que pretende proporcionar una experiencia consistente a través de distintas plataformas y aplicaciones.

Uno de sus principios básicos es, a diferencia del Flat Design, dar peso o materialidad a los elementos de la interfaz de usuario aportando apariencia de volumen o profundidad con sombras, bordes, capas y animaciones. También propone transmitir significado a través del color, utilizando para ello determinados tonos y combinaciones.

En cuanto al color, cada aplicación debe definir, dentro de cierto abanico de colores, su propia paleta que la identifique y diferencie del resto de aplicaciones. Por ello, si decides seguir las especificaciones de Material Design, una de las primeras decisiones respecto al diseño será escoger la paleta de colores que vas a utilizar.

En la web puedes encontrar distintas herramientas online especialmente útiles para este cometido, como por ejemplo Material Palette y Color Tool. En cualquiera de las dos se deben seleccionar los colores primario y secundario para la aplicación, lo que nos permite ver una previsualización del diseño y finalmente exportar y guardar en un archivo con formato xml para utilizar en nuestra aplicación.

De esta manera hemos conseguido una manera rápida y sencilla de seleccionar los colores para nuestra aplicación siguiendo las directrices de estilo de Material Design.

Más información sobre el sistema de colores en Material Design en The color system - Material Design (en inglés).

Introducción al ciclo de vida de una actividad en Android

2019-10-26T07:58:00.000+02:00

En Android toda actividad (y también todo fragmento) tiene lo que se conoce como ciclo de vida (activity lifecycle), término que hace alusión a los ciclos de vida de los animales, especialmente gráfico en los diferentes estados que atraviesa la mariposa en su proceso de metamorfosis.

En concreto, el ciclo de vida de una actividad es un conjunto de estados a través de los cuales se desarrolla una actividad, empezando cuando se crea por primera vez y terminando cuando se destruye (y su memoria es recuperada por el sistema). A medida que el usuario navega entre actividades y dentro y fuera de una aplicación, cada actividad se mueve entre distintos estados dentro del ciclo de vida de la actividad.

La siguiente imagen muestra los estados del ciclo de vida de una actividad:

Entonces una actividad en Android puede estar en uno de esos estados, lo que determina si la actividad tiene instancia en la memoria, es visible para el usuario o está en primer plano y acepta interacción del usuario (tiene el foco):

Activa (Resumed / Running): La actividad está encima de la pila, lo que quiere decir que es visible y tiene el foco.
Visible (Started / Paused): La actividad es visible pero no tiene el foco. Se alcanza este estado cuando otra actividad pasa a activa con alguna parte transparente o que no ocupa toda la pantalla. Cuando una actividad está tapada por completo, pasa a estar parada.
Parada (Created / Stopped): Cuando la actividad no es visible. El programador debe guardar el estado de la interfaz de usuario, preferencias, etc.
Destruida (Destroyed): Cuando la actividad termina al invocarse el método finish(), o es matada por el sistema.

La clase Activity (y cualquier subclase de Activity, como AppCompatActivity) implementa un conjunto de métodos para invocar cada estado del ciclo de vida. Android invoca automáticamente estos métodos cuando la actividad se mueve de un estado a otro, pero podemos sobrescribirlos (override) para realizar tareas específicas en respuesta a los cambios de estado del ciclo de vida.

Por tanto, cada vez que una actividad cambia de estado se van a generar eventos que podrán ser capturados por ciertos métodos de la actividad. Dentro del ciclo de vida de una actividad existen métodos específicos para activar un estado desde otro estado, existiendo siete métodos como se ve en la siguiente imagen (en el ciclo de vida de un fragmento además existen otros métodos específicos):

Más información sobre el ciclo de vida de las actividades en Android Developers: Actividades.

Android: log con Timber

2019-10-25T12:25:00.001+02:00

En entradas anteriores, como por ejemplo en Anatomía de una app básica y en Fundamentos de Android: Interacción del usuario, ya hemos visto el uso de la clase Log para ver el historial de log o registro de eventos o acciones en una aplicación. Por ejemplo, para comprobar el estado Created dentro del ciclo de vida de la actividad de una aplicación, dentro del método onCreate podemos incluir:

// requiere import android.util.Log
Log.i("MainActivity", "Activity Status: Created")

En la clase Log tenemos tres elementos:

i que significa que se trata de un menseje de carácter informativo (también puede ser, entre otras opciones, e para errores o w para advertencias o warnings),
el primer parámetro que es una etiqueta o tag que nos sirve para localizar más fácilmente los mensajes y en muchas ocasiones suele ser el nombre de la clase, y
el segundo parámetro que contiene el mensaje.

Después podemos hacer un seguimiento de este log a través de la pestaña Logcat, y para encontrarlo más fácilmente podemos filtrar nuestro mensaje dentro de los múltiples mensajes del Logcat escribiendo I/MainActivity en el campo de búsqueda.

Una alternativa al uso de la clase Log es la biblioteca Timber, que es una biblioteca de código abierto desarrollada por Jake Wharton que proporciona funciones adicionales de registro, con ciertas ventajas sobre la clase integrada Log, como que genera automáticamente la etiqueta según el nombre de la clase, ayuda a evitar mostrar registros en una versión de lanzamiento o permite la integración con bibliotecas de informes de fallos.

Para utilizar Timber debemos añadirlo a Gradle. Concretamente en el archivo build.gradle (Module: app), en la sección de dependencias debemos añadir:

dependencies {
   ...
   implementation 'com.jakewharton.timber:timber:4.7.1'
}

Ten en cuenta que el número de versión puede cambiar, por lo que debes comprobarlo en el la web del proyecto en GitHub (el número de versión se muestra bajo el encabezado Download).

La implementación de DebugTree determinará automáticamente desde qué clase se está llamando y usará ese nombre de clase como etiqueta:

Timber.plant(Timber.DebugTree())

Aunque podemos hacer esta implementación en el método onCreate, suele ser recomendable hacerla dentro de otra clase de la aplicación (como una subclase de Application) e incluir esta clase en el archivo AndroidManifest.xml. Por ejemplo (código extraído de Android Kotlin Fundamentals Course):

//ClickerApplication.kt
package com.example.android.dessertclicker

import android.app.Application
import timber.log.Timber

class ClickerApplication: Application() {

    override fun onCreate() {
        super.onCreate()

        Timber.plant(Timber.DebugTree())
    }
}

Y en el archivo AndroidManifest.xml, en la parte superior del elemento application añadimos:

<application
   android:name=".ClickerApplication"
...

Ahora ya podemos sustituir la clase Log por Timber de esta manera:

// requiere import timber.log.Timber
// ya no se requiere import android.util.Log
// Log.i("MainActivity", "Activity Status: Created")
Timber.i("Activity Status: Created")

Y comprobamos en Logcat que aparece el mensaje (en el campo de búsqueda podemos escribir simplemente el nombre de la actividad, por ejemplo MainActivity).

Bucles con repeat

2019-10-21T18:13:00.002+02:00

Hasta ahora hemos creado bucles con instrucciones como for, while y do/while, pero la biblioteca estándar de Kotlin también contiene otra instrucción, repeat, que nos permite otra forma de crear estructuras de repetición.

En concreto, la función repeat() nos sirve para ejecutar una acción una cantidad determinada de veces tomando como parámetros una función lambda y un índice entero de veces de iteración:

repeat(10) { ... }

Por ejemplo:

fun main() {
    repeat(5) { i ->
        println("Paso ${i + 1} de 5")
    }
}

Otro ejemplo:

fun main() {

    // saluda 3 veces
    repeat(3) {
        println("Hola")
    }

    repeat(0) {
        error("¡Esta acción no debería ejecutarse!")
    }
}

Y aplicada a una secuencia de caracteres la podemos utilizar de esta manera para conseguir el mismo resultado que en el ejemplo anterior:

print("Hola\n".repeat(3))

En este caso, un índice negativo lanza la excepción IllegalArgumentException. Otro ejemplo:

val str = "*".repeat(10)
println(str)  // **********

Expresiones frecuentes en Kotlin

2019-10-20T18:14:00.002+02:00

Colección de expresiones de uso frecuente (modismos) en Kotlin.

Variables

Intercambiar dos variables:

var a = 1
var b = 2
a = b.also { b = a }

Propiedad lazy:

val p: String by lazy {
    // calcula el valor del string
}

String

Interpolación de Strings:

println("Nombre: $nombre")

Expresiones

Expresión if:

fun foo(param: Int) {
    val result = if (param == 1) {
        "one"
    } else if (param == 2) {
        "two"
    } else {
        "three"
    }
}

Expresión try/catch:

fun test() {
    val result = try {
        count()
    } catch (e: ArithmeticException) {
        throw IllegalStateException(e)
    }

    // trabajando con result
}

Colecciones

Lista de solo lectura:

val list = listOf("a", "b", "c")

Lista mutable:

val lista = listOf("a", "b", "c")
val listaMutable = mutableListOf("a", "b", "c").apply {
    add("d")
    remove("b")
}

Mapa de solo lectura:

val map = mapOf("a" to 1, "b" to 2, "c" to 3)

Mapa mutable:

val mapa = mutableMapOf("a" to 1, "b" to 2, "c" to 3)
mapa["a"] = 10

Acceder a un mapa:

println(map["key"])
map["key"] = value

Filtrar una lista:

val positivos = list.filter { x -> x > 0 }

O, alternativamente y más corto:

val positivos = list.filter { it > 0 }

Comprobar la presencia de un elemento en una colección:

if ("fulano@example.com" in emailsList) { ... }

if ("mengano@example.com" !in emailsList) { ... }

Recorrer un mapa o lista de pares:

for ((k, v) in map) {
    println("$k -> $v")
}

Otra opción:

for (map in mapa) {
    println("${map.key} -> ${map.value}")
}

Rangos

Usar rangos:

for (i in 1..100) { ... }  // incluye 100
for (i in 1 until 100) { ... } // no incluye 100
for (x in 2..10 step 2) { ... }
for (x in 10 downTo 1) { ... }
if (x in 1..10) { ... }

Gestión de tipos nulos

Si no null:

val files = File("Test").listFiles()

println(files?.size)

Si no null con else:

val files = File("Test").listFiles()

println(files?.size ?: "empty")

Ejecutar una declaración si es nulo:

val values = ...
val email = values["email"] ?: throw IllegalStateException("Email is missing!")

Obtener el primer elemento de una colección que puede estar vacía:

val emails = ... // puede estar vacía
val mainEmail = emails.firstOrNull() ?: ""

Ejecutar una declaración si es nulo:

val value = ...

value?.let {
    ... // ejecuta este bloque si no null
}

Valor nulable del mapa si no es nulo:

val value = ...

val mapped = value?.let { transformValue(it) } ?: defaultValueIfValueIsNull

Boolean anulable:

val b: Boolean? = ...
if (b == true) {
    ...
} else {
    // `b` is false or null
}

Funciones

Valores predeterminados para parámetros de función

fun foo(a: Int = 0, b: String = "") { ... }

Declaración de retorno con when:

fun transform(color: String): Int {
    return when (color) {
        "Red" -> 0
        "Green" -> 1
        "Blue" -> 2
        else -> throw IllegalArgumentException("Invalid color param value")
    }
}

Funciones de extensión:

fun String.spaceToCamelCase() { ... }

"Convert this to camelcase".spaceToCamelCase()

Otro ejemplo:

fun String.invertirTexto(): String {
    var textoInvertido = ""
    for (i in (this.length - 1 downTo 0)) {
        textoInvertido = textoInvertido + this.get(i)
    }
    return textoInvertido
}

Métodos que devuelven Unit:

fun arrayOfMinusOnes(size: Int): IntArray {
    return IntArray(size).apply { fill(-1) }
}

Funciones de una sola expresión:

fun theAnswer() = 42

que es equivalente a:

fun theAnswer(): Int {
    return 42
}

Esto se puede combinar con otras expresiones idiomáticas, lo que lleva a un código más corto. Por ejemplo, con la expresión when:

fun transform(color: String): Int = when (color) {
    "Red" -> 0
    "Green" -> 1
    "Blue" -> 2
    else -> throw IllegalArgumentException("Invalid color param value")
}

Función genérica que requiere la información de tipo genérico:

//  public final class Gson {
//     ...
//     public <T> T fromJson(JsonElement json, Class<T> classOfT) throws JsonSyntaxException {
//     ...

inline fun <reified T: Any> Gson.fromJson(json: JsonElement): T = this.fromJson(json, T::class.java)

Clases y objetos

Crear objetos o clases (DTO – Data Transfer Object, POCO – Plain Old CLR Object, POJO Plain Old Java Object) con funcionalidades getters y setters (en caso de var) para todas las propiedades:

data class Cliente(val nombre: String, val email: String)

Comprobación de instancias:

when (x) {
    is Foo -> ...
    is Bar -> ...
    else   -> ...
}

Crear un singleton:

object Resource {
    val nombre = "Nombre"
}

O un objeto anónimo:

val resource = object {
    val nombre = "Kotlin"
}

Llamar a varios métodos en una instancia de objeto (with):

class Turtle {
    fun penDown()
    fun penUp()
    fun turn(degrees: Double)
    fun forward(pixels: Double)
}

val myTurtle = Turtle()
with(myTurtle) { // dibujar un cuadrado de 100 pix
    penDown()
    for(i in 1..4) {
        forward(100.0)
        turn(90.0)
    }
    penUp()
}

Acceso a recursos (Java 7)

val stream = Files.newInputStream(Paths.get("/some/file.txt"))
stream.buffered().reader().use { reader ->
    println(reader.readText())
}

Esta entrada es una traducción libre y adaptada de Idioms, a collection of random and frequently used idioms in Kotlin, disponible en la web oficial de Kotlin.

Android Studio con corrector ortográfico en español

2019-10-08T19:36:00.000+02:00

Con frecuencia Android Studio nos lanza alertas "Typo: in word" en relación, por ejemplo, al nombre de una variable. Este tipo de advertencias nos avisan de posibles errores ortográficos, aunque realmente significan que esa palabra no es reconocida, y más concretamente que esa palabra no está en el diccionario, o mejor dicho, en ninguno de los diccionarios instalados.

Por tanto no se trata de ningún error de código, y no hay que alarmarse. Esta inspección del corrector ortográfico (Spellchecker) ayuda a localizar errores tipográficos y errores ortográficos en el código, tanto en comentarios como en literales, y corregirlos con un solo clic.

Ante estas advertencias podemos actuar de distinta manera: agregar la palabra al diccionario instalado, desactivar el corrector ortográfico, ignorar las alertas o, la solución que recomiendo, instalar el diccionario correspondiente a tu idioma.

Por defecto Android Studio incluye el diccionario en inglés, como podemos ver en File -> Settings -> Editor -> Spelling -> Dictionaries. Para añadir el diccionario en español primero lo descargamos desde WinEdt ASCII Dictionaries y descomprimimos el archivo descargado. En la ventana anterior de Android Studio, en Dictionaries, pulsamos sobre + y seleccionamos el archivo descargado con extensión dic.

Si Android Studio no lo reconoce en el momento, reinicia y ya no aparecerán este tipo de advertencias (salvo que la palabra esté mal escrita o no esté incluida en el diccionario).

Nota de reconocimiento: Este diccionario ASCII en español ha sido elaborado originalmente por Juan L. Varona de la Universidad de La Rioja y modificado por Juan I. Montijano y sus colegas.

Android: Diálogo para introducir datos

2019-09-07T17:30:00.002+02:00

En esta entrada vamos a ver dos métodos para mostrar un diálogo que sirve para que el usuario introduzca algún dato que la aplicación le solicita.

El primer método utiliza la clase AlertDialog para activar un recurso de diseño con un EditText, y luego configura los botones Aceptar y Cancelar:

fun mostrarDialogo() {
    val context = this
    val builder = AlertDialog.Builder(context)
    builder.setTitle("New List")

    // recurso de diseño xml con un EditText
    val view = layoutInflater.inflate(R.layout.dialog_new_list, null)
    val listEditText = view.editText_newList as EditText
    builder.setView(view)

    builder.setPositiveButton(android.R.string.ok) { dialog, p1 ->
        val newList = listEditText.text
        var isValid = true
        if (newList.isBlank()) {
            isValid = false
        }
        if (isValid) {
            val nameList = listEditText.text.toString()
            // hacer algo con el valor obtenido
        }
        if (!isValid) {
            dialog.dismiss()
        }
    }

    builder.setNegativeButton(android.R.string.cancel) { dialog, p1 ->
        dialog.cancel()
    }

    builder.show()
}

El segundo método utiliza la clase DialogFragment como contenedor:

// EditTextDialog.kt
class EditTextDialog : DialogFragment() {

    companion object {
        private const val EXTRA_TITLE = "title"
        private const val EXTRA_HINT = "hint"
        private const val EXTRA_LAYOUT = "layout"

        fun newInstance(title: String? = null, hint: String? = null, layout: Int): EditTextDialog {
            val dialog = EditTextDialog()
            val args = Bundle().apply {
                putString(EXTRA_TITLE, title)
                putString(EXTRA_HINT, hint)
                putInt(EXTRA_LAYOUT, layout)
            }
            dialog.arguments = args
            return dialog
        }
    }

    lateinit var editText: EditText
    var onOk: (() -> Unit)? = null
    var onCancel: (() -> Unit)? = null

    override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
        val title = arguments?.getString(EXTRA_TITLE)
        val hint = arguments?.getString(EXTRA_HINT)
        val layout = arguments?.getInt(EXTRA_LAYOUT)
        val view = when (layout) {
            is Int -> {
                activity!!.layoutInflater.inflate(layout, null)
            }
            else -> null
        }
        if (view != null) {
            when (layout) {
                R.layout.dialog_new_list -> editText = view.editText_newList
                R.layout.dialog_new_item -> editText = view.editText_newItem
            }
        }
        editText.hint = hint

        val builder = AlertDialog.Builder(context!!)
            .setTitle(title)
            .setView(view)
            .setPositiveButton(android.R.string.ok) { _, _ ->
                if (!editText.text.isBlank()) {
                    onOk?.invoke()
                } else {
                    onCancel?.invoke()
                }
            }
            .setNegativeButton(android.R.string.cancel) { _, _ ->
                onCancel?.invoke()
            }

        return builder.create()
    }
}

Y para utilizarlo desde una actividad creamos una nueva instancia de esta manera:

val dialogo = EditTextDialog.newInstance(
    title = "Add new List",
    hint = "Name List",
    layout = R.layout.dialog_new_list
)
dialogo.onOk = {
    val name = dialogo.editText.text.toString()
    // hacer algo con el valor obtenido
}
dialogo.onCancel = {
    Toast.makeText(this, "Operación cancelada", Toast.LENGTH_SHORT).show()
}
dialogo.show(supportFragmentManager, "editDescription")

Crear Views dinámicamente

2019-09-04T21:26:00.001+02:00

Hasta ahora hemos visto la manera de crear elementos de diseño de manera estática a la vez que diseñamos el aspecto visual, organizados como recursos en los archivos de diseño XML, pero en muchas aplicaciones nos interesa crear elementos visuales programáticamente, esto es, desde el código fuente en función de la dinámica de la propia aplicación.

En general los pasos a seguir son:

Crear el contenedor, por ejemplo un LinearLayout, en el archivo xml de diseño.
Crear el elemento visual (view) que nos interesa desde el archivo de la actividad.
Agregarle propiedades, por ejemplo, un texto, un tamaño de texto, color, márgenes...
Agregar un método, usualmente un evento al hacer clic sobre el elemento.
Añadirlo al contenedor.

De momento dejo un par de ejemplos para crear dos tipos de views (TextView y CheckBox), pero próximamente actualizaré esta entrada con más ejemplos:

// creando TextView
val textLista = TextView(this)
textLista.textSize = 20f
textLista.text = ...
textLista.setOnClickListener { ... }
// añade el TextView al LinearLayout
layoutListas.addView(textLista)


// creando CheckBox
val textItem = CheckBox(this)
textItem.text = ...
textItem.textSize = 24F
textItem.isChecked = false
layoutItems.addView(textItem)

Navegando por la aplicación (2ª parte)

2019-08-25T10:26:00.001+02:00

En esta entrada, que es una continuación de Navegando entre fragmentos, vamos a ver cómo facilitar al usuario otras maneras de navegar por una aplicación, y concretamente, partiendo de la aplicación Test CI que vimos en esa entrada, vamos a añadir nuevas posibilidades para moverse entre fragmentos. Para ello vamos a presentar el contenido secuenciado en tres pasos a modo de objetivos:

Añadir un botón a la barra de la aplicación.
Crear un menú de opciones.
Crear un cajón de navegación.

1. Añadir un botón Up a la barra de la aplicación

Usualmente en la barra de la aplicación encontramos en el centro un título descriptivo acerca de la aplicación o la pantalla concreta, a su derecha un botón con el icono de tres puntos verticales para acceder al menú de opciones y, dependiendo de la pantalla, el botón Arriba (the Up button) a la izquierda en forma de flecha apuntando hacia la izquierda.

En cuanto al título, para establecer desde un fragmento el título que aparece en la barra de la aplicación podemos invocar supportActionBar.title; por ejemplo en el caso del fragmento de inicio, TitleFragment.kt, dentro de onCreate, sería:

// requiere import androidx.appcompat.app.AppCompatActivity
(activity as AppCompatActivity).supportActionBar?.title = getString(R.string.app_name)

Repetimos lo anterior para todos los fragmentos (excepto en TestFragment.kt puesto que ya lo tiene) asignando a cada uno su respectivo recurso de texto almacenado en values/strings.xml.

En Navegando entre fragmentos ya configuramos el botón Atrás del dispositivo para navegar a la pantalla que nos interesaba en cada caso, pero además podemos añadir un botón Up en la barra de la aplicación con un comportamiento similar. Una diferencia importante entre los botones Arriba y Atrás es que el primero es dependiente de la aplicación y navega dentro de ella sin salir de la aplicación, mientras que el segundo es dependiente del dispositivo y navega hacia atrás en la pila posterior de destinos o back stack del sistema. Y en nuestra aplicación nos interesa incluir un botón Up que aparezca en todas las pantalla excepto en la pantalla de inicio (la pantalla de título: fragment_title.xml) puesto que esta pantalla está en la parte superior de la jerarquía de la aplicación.

Recuerda que en su momento ya incluimos las dependencias de navegación a los archivos de Gradle (revisar la entrada Navegando entre fragmentos), y los componentes de navegación incluyen una biblioteca llamada NavigationUI que permite que el controlador de navegación se integre con la barra de aplicaciones para implementar el comportamiento del botón Up. Vamos a utilizarlo.

En el archivo MainActivity.kt, dentro del método onCreate agregamos el código para localizar el objeto del controlador de navegación (recuerda que en activity_main.xml se identificó el fragmento como myNavHostFragment para crear el NavHostFragment):

// requiere import androidx.navigation.findNavController
val navController = this.findNavController(R.id.myNavHostFragment)

Inmediatamente después, vinculamos el controlador de navegación a la barra de la aplicación:

// requiere import androidx.navigation.ui.NavigationUI
NavigationUI.setupActionBarWithNavController(this, navController)

Y ahora, fuera del método onCreate, sobrescribimos el método onSupportNavigateUp para invocar navigationUp en el controlador de navegación:

override fun onSupportNavigateUp(): Boolean {
    val navController = this.findNavController(R.id.myNavHostFragment)
    return navController.navigateUp()
}

Ejecutamos la aplicación para comprobar que el botón Up aparece en la barra de la aplicación de todas las pantallas excepto en la pantalla de inicio, y que al pulsarlo siempre nos lleva a la pantalla de inicio independientemente de la pantalla donde nos encontremos. Además cada pantalla aparece con su correspondiente título en la barra de la aplicación. Primer objetivo conseguido, a por el segundo.

2. Crear un menú de opciones

En Android se accede al menú de opciones desde el botón de tres puntos verticales situado en la barra de la aplicación. Vamos a incorporarlo a nuestra aplicación y en el menú de opciones vamos a añadir un elemento (Acerca de) para que, cuando el usuario lo pulse, la aplicación navegue al fragmento AboutFragment y muestre la información que contiene este fragmento.

Primero, con el botón New Destination agregamos el fragmento aboutFragment al gráfico de navegación:

Después debemos agregar el recurso de menú de opciones: desde la carpeta res, New -> Android Resource File, y en la nueva ventana que se abre ajustamos el nombre (options_menu) y el tipo (Menu):

Abrimos menu/options_menu.xml en vista Design para ver el editor de diseño. Desde la paleta de elementos arrastramos Menu Item al árbol de componentes bajo el elemento menu:

Seleccionamos el nuevo Item y desde el panel de atributos ajustamos el ID en aboutFragment (asegúrate de que este valor es el mismo que el valor de la ID del fragmento en el gráfico de navegación) y el título en @string/about.

Ahora falta incorporle un controlador onClick. En el archivo TitleFragment.kt, dentro del método onCreateView y por supuesto antes de return, invocamos el método setHasOptionsMenu con el argumento true:

setHasOptionsMenu(true)

Ahora, fuera y después del método onCreateView, sobrescribimos el método onCreateOptionsMenu y, en él, agregamos el menú de opciones y activamos (inflamos) el archivo de recursos del menú:

// import android.view.*
override fun onCreateOptionsMenu(menu: Menu?, inflater: MenuInflater?) {
    super.onCreateOptionsMenu(menu, inflater)
    inflater?.inflate(R.menu.options_menu, menu)
}

Sobrescribimos el método onOptionsItemSelected para seleccionar la acción adecuada cuando se pulsa el elemento del menú, esto es, navegar hasta el fragmento que tiene la misma identificación (id) que el elemento del menú:

// import androidx.navigation.ui.NavigationUI
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
    return NavigationUI.onNavDestinationSelected(item!!,
        view!!.findNavController())
        || super.onOptionsItemSelected(item)
}

Ejecutamos en el emulador para comprobar que ahora en la barra de la aplicación de la pantalla de inicio aparece, a la derecha, el botón de tres puntos verticales, y al pulsarlo se muestra un menú con el ítem Acerca de, que nos lleva a la pantalla del fragmento correspondiente. ¡Segundo objetivo conseguido!

3. Crear un cajón de navegación

El cajón de navegación (the navigation drawer) forma parte de Material (Material library o Material Components for Android library, biblioteca utilizada para implementar modelos siguiendo las reglas Material Design de Google) y consiste en un panel que se desliza desde el borde de la pantalla y que generalmente contiene un encabezado y un menú. En dispositivos del tamaño de un smartphone este cajón está oculto cuando no se usa, y suele mostrarse con dos acciones del usuario: con un movimiento de deslizamiento desde un borde de la pantalla hacia el otro (en nuestra aplicación haremos que aparezca cuando el usuario deslice de izquierda a derecha) y pulsando el botón de tres líneas horizontales (nav drawer button o hamburger icon) que está en la barra de la aplicación.

En nuestra aplicación el cajón de navegación contendrá dos elementos de menú, uno como el recién creado item Acerca de y un segundo elemento que apuntará al fragmento (InfoFragment) con información sobre el funcionamiento de la aplicación.

Primero debemos agregar la Material library al proyecto. Para ello, en el archivo build.gradle (Module:app) añadimos la dependencia correspondiente:

dependencies {
    ...
    implementation "com.google.android.material:material:$supportlibVersion"
}

Y sincronizamos el proyecto.

En el gráfico de navegación añadimos el fragmento infoFragment (ID: infoFragment):

Después, para crear el cajón de navegación, desde la carpeta res -> New -> Android Resource File y ajustamos los valores File name: navdrawer_menu y Resource type: Menu.

En menu/navdrawer_menu.xml (vista Design) agregamos dos elementos Menu Item desde la paleta de elementos hasta el árbol de componentes, bajo el elemento menu. Para el primer Item establecemos id: infoFragment (la ID del fragmento en el gráfico de navegación), como título @string/info y como icono una imagen desde res/drawable (@drawable/ic_code). Para el segundo Item ajustamos la id a aboutFragment (comprueba que coincide con la id en el gráfico de navegación), el título a @string/about y el icono a @drawable/ic_mid_mapping.

Abrimos layout/activity_main.xml en vista Text, y colocamos todos los elementos dentro de un DrawerLayout como elemento inmediatamente después del layout raíz, envolviendo el LinearLayout:

<!-- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

            <fragment
                android:id="@+id/myNavHostFragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:defaultNavHost="true"
                app:navGraph="@navigation/navigation" />

        </LinearLayout>

    </androidx.drawerlayout.widget.DrawerLayout>

</layout>

Ahora añadimos el cajón, que es un NavigationView que usa el navdrawer_menu que definimos antes, después del cierre de la etiqueta LinearLayout:

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/navdrawer_menu" />

Vemos que Android Studio nos advierte de un error, ya que el recurso de diseño layout/nav_header no existe. Se trata del diseño del encabezado del cajón, que queremos que sea una imagen de la aplicación. Pulsamos sobre el error y con Alt + Enter (o desde el icono de la bombilla) lo creamos con androidx.constraintlayout.widget.ConstraintLayout como elemento raíz (y la advertencia del error desaparecerá):

Y le añadimos una ImageView quedando de esta manera:

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/navHeader"
    android:layout_width="match_parent"
    android:layout_height="@dimen/image_header_height"
    android:background="@color/fondoazul"
    android:padding="@dimen/button_padding"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">

    <ImageView
        android:id="@+id/navHeaderImage"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="@dimen/horizontal_margin"
        android:layout_marginTop="@dimen/top_margin"
        android:layout_marginEnd="@dimen/horizontal_margin"
        android:layout_marginBottom="@dimen/bottom_margin"
        android:scaleType="fitCenter"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_problem_solving" />

</androidx.constraintlayout.widget.ConstraintLayout>

Hasta ahora hemos creado los elementos del menú para el cajón de navegación y el diseño del propio cajón, pero necesitamos conectar el cajón al controlador de navegación para que cada elemento navegue a su correspondiente fragmento. Abrimos MainActivity.kt y en onCreate permitimos al usuario mostrar el cajón de navegación llamando al método setupWithNavController:

NavigationUI.setupWithNavController(binding.navView, navController)

Si en principio no reconoce la referencia a navView que acabamos de crear en activity_main.xml, podemos solucionarlo desde Build -> Clean Project y después Build -> Rebuild Project. Ejecutamos la aplicación y hacemos un movimiento de deslizamiento desde el borde izquierdo para mostrar el cajón de navegación, y comprobamos que cada item navega a su destino correcto:

Funciona, pero deberiamos también mostrar el cajón de navegación desde el botón de tres líneas de la barra de la aplicación. Para hacerlo, en MainActivity.kt, justo antes del método onCreate, declaramos una variable con el modificador lateinit (para permitir retrasar su inicialización) para representar el diseño del cajón (requiere import androidx.drawerlayout.widget.DrawerLayout):

private lateinit var drawerLayout: DrawerLayout

Y dentro del método onCreate la inicializamos después de que se haya inicializado la variable de enlace:

val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)

drawerLayout = binding.drawerLayout

Y la agregamos como tercer parámetro al método setupActionBarWithNavController:

// NavigationUI.setupActionBarWithNavController(this, navController)
NavigationUI.setupActionBarWithNavController(this, navController, drawerLayout)

Ahora editamos el método onSupportNavigateUp para devolver, en lugar de navController, NavigationUI con el método navigateUp pasándole el controlador de navegación y el diseño del cajón:

override fun onSupportNavigateUp(): Boolean {
    val navController = this.findNavController(R.id.myNavHostFragment)
    // return navController.navigateUp()
    return NavigationUI.navigateUp(navController, drawerLayout)
}

Ejecutamos la aplicación en el emulador y comprobamos que en la pantalla de inicio, en la barra de la aplicación, a la izquierda tenemos el botón de tres líneas que abre el cajón de navegación (que también podemos abrir desde cualquier pantalla deslizando de izquierda a derecha).

Finalmente hemos creado distintas opciones de navegación en la aplicación. En resumen, el usuario puede avanzar a través de la aplicación según el acierto o no de sus respuestas, puede volver en cualquier momento a la pantalla de inicio usando el botón Arriba, y puede acceder a la pantalla Acerca de desde el menú de opciones o bien desde el cajón de navegación que se puede abrir con un gesto de deslizamiento o con el botón de la barra de la aplicación en la pantalla de inicio; además, al pulsar en el botón Atrás del dispositivo regresa a pantallas anteriores de una manera que tiene sentido para la aplicación (no necesariamente a la última pantalla visitada). ¡Objetivo conseguido: La aplicación incluye rutas de navegación robustas y lógicas que son intuitivas para el usuario!

Clases restringidas o selladas (sealed classes) en Kotlin

2019-08-22T18:06:00.004+02:00

Antes de entrar en las clases selladas vamos a recordar lo que vimos en su día sobre los enumerados o enum class en Kotlin con un ejemplo:

enum class DiaSemana {LUNES, MARTES, MIERCOLES, JUEVES, VIERNES, SABADO, DOMINGO}

fun main() {
    val diaSemana = DiaSemana.LUNES
    println(diaSemana) // LUNES
}

También se pueden inicializar haciendo referencia a una propiedad definida en el constructor (un valor):

enum class DiaSemana(val dia: Int) {
    LUNES(1),
    MARTES(2),
    MIERCOLES(3),
    JUEVES(4),
    VIERNES(5),
    SABADO(6),
    DOMINGO(7)
}

Pero además de valor pueden tener comportamiento, de dos maneras:

Definiendo sus propios métodos, abstractos o no:

enum class DiaSemana(val dia: Int) {
    LUNES(1) {
        override fun esFinDeSemana() = false
    },
    MARTES(2) {
        override fun esFinDeSemana() = false
    },
    MIERCOLES(3) {
        override fun esFinDeSemana() = false
    },
    JUEVES(4) {
        override fun esFinDeSemana() = false
    },
    VIERNES(5) {
        override fun esFinDeSemana() = false
    },
    SABADO(6) {
        override fun esFinDeSemana() = true
    },
    DOMINGO(7) {
        override fun esFinDeSemana() = true
    };

    abstract fun esFinDeSemana(): Boolean

    fun anteriorA(diaSemana: DiaSemana): Boolean = dia < diaSemana.dia
}

fun main() {
    val dia1 = DiaSemana.JUEVES
    val dia2 = DiaSemana.DOMINGO
    println(dia1.esFinDeSemana()) // false
    println(dia2.esFinDeSemana()) // true
    println(dia1.anteriorA(dia2)) // true
    println(dia2.anteriorA(dia1)) // false
}

Implementando interfaces, aunque no extendiendo otras clases:

interface Dia {
    fun esFinDeSemana(): Boolean
    fun esDiaSemana(): Boolean
}

enum class DiaSemana(val dia: Int) : Dia {
    LUNES(1) {
        override fun esFinDeSemana() = false
    },
    MARTES(2) {
        override fun esFinDeSemana() = false
    },
    MIERCOLES(3) {
        override fun esFinDeSemana() = false
    },
    JUEVES(4) {
        override fun esFinDeSemana() = false
    },
    VIERNES(5) {
        override fun esFinDeSemana() = false
    },
    SABADO(6) {
        override fun esFinDeSemana() = true
    },
    DOMINGO(7) {
        override fun esFinDeSemana() = true
    };

    override fun esDiaSemana(): Boolean = true
}

Hasta aquí los enumerados se ven fuertes y con muchas potencialidades, pero su principal limitación es que todos los subtipos tienen una misma estructura (en el ejemplo, todos comparten un valor y unos métodos, ya sean individuales o uno general para todos los tipos). La solución son las clases selladas (sealed classes), donde cada subtipo (subclase) es una clase que puede contener sus propios valores y métodos independientes.

Imagina que queremos controlar los posibles errores de acceso en una pantalla de identificación con usuario y contraseña; tendremos un error si alguno de los campos está en blanco, otro si el usuario no está registrado, otro si la contraseña no corresponde al usuario registrado y otro desconocido por lo que pueda pasar. Esto lo podemos modelar de esta manera (para declarar una clase sellada colocamos el modificador sealed antes del nombre de la clase):

sealed class LoginError {
    data class Incompleto(val username: String, val password: String) : LoginError()
    class NoRegistrado(val username: String) : LoginError()
    class PassError(val password: String) : LoginError()
    object Indefinido : LoginError()
}

Las llaves son opcionales, por lo que podemos escribir los mismo de esta manera:

sealed class LoginError
data class Incompleto(val username: String, val password: String) : LoginError()
class NoRegistrado(val username: String) : LoginError()
class PassError(val password: String) : LoginError()
object Indefinido : LoginError()

Donde LoginError es una clase abstracta que tiene únicamente cuatro hijos: Incompleto, NoRegistrado, PassError e Indefinido, y por tanto cuando manejamos un LoginError éste solo puede ser de uno de estos tipos. A partir de aquí podemos utilizar la expresión when de esta manera (con is en el caso de las clases y sin is en el caso de los objectos, y como una expresión no requiere else al contemplar todas las opciones posibles):

sealed class LoginError {
    data class Incompleto(val username: String, val password: String) : LoginError()
    class NoRegistrado(val username: String) : LoginError()
    class PassError(val password: String) : LoginError()
    object Indefinido : LoginError()
}

fun main() {
    val error = LoginError.PassError("1234")
    println(getError(error))
}

fun getError(error: LoginError): String = when (error) {
    is LoginError.Incompleto -> "Campos de usuario y contraseña requeridos."
    is LoginError.NoRegistrado -> "El usuario ${error.username} no está registrado."
    is LoginError.PassError -> "Contraseña ${error.password} no reconocida"
    LoginError.Indefinido -> "Error desconocido."
}

Esto hace que si entramos, por ejemplo, en la opción NoRegistrado nuestra variable error sea inmediatamente (por conversión implícita o smart cast) un NoRegistrado en ese ámbito. Observa que, en el ejemplo, estamos accediendo al atributo password que no es compartido por todos los elementos.

Como vemos, frente a los enumerados, la principal ventaja de las clases selladas es el hecho de que los elementos son clases (class, data class, object e incluso sealed class), y que cada subclase puede tener sus propios valores y métodos (además, los enumerados solamente pueden tener una instancia, mientras que las subclases de clases selladas pueden tener varias instancias, cada una con su estado).

Por tanto, las clases selladas, además de entenderse como una extensión de la clase enum o superenumerados, son empleadas para construir una herencia cerrada en la que el compilador conoce cuáles son las únicas clases hijas, ya que no puede haber otras; representan jerarquías de clases restringidas en las que un valor debe tener uno de los tipos de un conjunto limitado, pero no puede tener ningún otro tipo. Y aunque el conjunto de valores para un tipo enum también está restringido, para cada constante enum existe solo una única instancia (sólo tenemos un único objeto por tipo) mientras que una subclase de una clase sellada puede tener múltiples instancias que pueden contener estado.

Vamos a ver unos ejemplos utilizando sealed classes:

sealed class Expr
data class Const(val number: Double) : Expr()
data class Sum(val e1: Expr, val e2: Expr) : Expr()
object NotANumber : Expr()

fun main() {
    val pi = Const(3.1415)
    println(eval(pi)) // 3.1415
    println(eval(Sum(pi, pi))) // 6.283
}

fun eval(expr: Expr): Double = when (expr) {
    is Const -> expr.number
    is Sum -> eval(expr.e1) + eval(expr.e2)
    NotANumber -> Double.NaN
    // else no es requerido porque cubrimos todos los casos
}

Otro ejemplo:

// enum class PuntoCardinal { NORTE, SUR, OESTE, ESTE }
sealed class PuntoCardinal {
    class Norte(val value: Int) : PuntoCardinal()
    class Sur(val value: Int) : PuntoCardinal()
    class Oeste(val value: Int) : PuntoCardinal()
    class Este(val value: Int) : PuntoCardinal()
}

fun main() {
    var orientacion: PuntoCardinal
    orientacion = PuntoCardinal.Sur(30)
    println(rumbo(orientacion))  // 210
    orientacion = PuntoCardinal.Este(10)
    println(rumbo(orientacion))  // 100
}

fun rumbo(orientacion: PuntoCardinal) = when (orientacion) {
    is PuntoCardinal.Norte -> orientacion.value + 0
    is PuntoCardinal.Este -> orientacion.value + 90
    is PuntoCardinal.Sur -> orientacion.value + 180
    is PuntoCardinal.Oeste -> orientacion.value + 270
}

Y otro más:

sealed class Operacion {
    class Suma(val valor: Int) : Operacion()
    class Resta(val valor: Int) : Operacion()
    class Multiplicacion(val valor: Int) : Operacion()
    class Division(val valor: Int) : Operacion()
}

fun main() {
    val numero = 5
    var operacion: Operacion
    operacion = Operacion.Suma(3)
    val numero2 = calcular(numero, operacion)
    println(numero2)  // 8
    operacion = Operacion.Multiplicacion(6)
    println(calcular(numero2, operacion))  // 48
}

fun calcular(x: Int, op: Operacion) = when (op) {
    is Operacion.Suma -> x + op.valor
    is Operacion.Resta -> x - op.valor
    is Operacion.Multiplicacion -> x * op.valor
    is Operacion.Division -> x / op.valor
}

Navegando entre fragmentos

2019-08-19T16:14:00.001+02:00

En esta entrada vamos desarrollar una aplicación para ilustrar el uso de fragmentos (en la primera parte) y las rutas de navegación (en una segunda parte) en Android con Kotlin. La aplicación representa un sencillo test de inteligencia cuyo diseño se distribuye en varios componentes principales (estos componentes nos servirán de referencia a la hora de crear los fragmentos):

Pantalla de inicio, que contiene el logo y nombre de la aplicación y un botón para iniciar el test.
Pantalla del test, abierta al pulsar el botón de inicio, en la que se van sucediendo preguntas con las posibles opciones de respuesta.
Pantallas de resultados.
Pantallas de información y acerca de.
Un cajón de navegación que se abre al pulsar sobre un botón de navegación situado en la barra de la aplicación y que contiene un menú con enlaces a las pantallas de información y acerca de.

En esta entrada veremos los tres primeros puntos, dejando el resto para próximas entregas.

Empezamos creando un nuevo proyecto llamado Test CI desde una actividad vacía. Lo configuramos para trabajar con Data Binding (para más detalles, revisar Fundamentos de Android: Data Binding), esto es:

En app/build.gradle (Module: app) habilitamos dataBinding (y ya que estamos habilitamos la compatibilidad con Java 8).
Ajustamos el archivo de diseño con una etiqueta layout como clase raíz (también eliminamos el TextView y cambiamos el ConstraintLayout por un LinearLayout de orientación vertical).
Y en el archivo de la actividad creamos el objeto de enlace.

Hasta ahora los archivos de la actividad y del diseño han quedado así:

// MainActivity.kt
package com.android.testci

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.testci.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
    }
}

<!-- layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

    </LinearLayout>

</layout>

Parte 1: Estructura de fragmentos

Creamos un fragmento llamado TitleFragment y en la ventana New Android Component desactivamos todas las opciones excepto Create Layout XML?. Abrimos layout/fragment_title.xml y lo configuramos para que una etiqueta layout sea el elemento superior que contenga un ConstraintLayout, en cuyo interior creamos una imagen, un par de TextView encadenados y un botón:

<!-- layout/fragment_title.xml -->
?xml version="1.0" encoding="utf-8"?>

<layout 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"
    tools:context="com.android.testci.TitleFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/titleConstraint"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/titleImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:contentDescription="@string/logo"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toTopOf="@+id/textView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_mid_mapping" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/horizontal_margin"
            android:paddingRight="@dimen/horizontal_margin"
            android:text="@string/test"
            android:textAllCaps="false"
            android:textColor="@color/azul"
            android:textSize="@dimen/titulo"
            android:textStyle="bold"
            app:layout_constraintBaseline_toBaselineOf="@+id/textView2"
            app:layout_constraintEnd_toStartOf="@+id/textView2"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/titleImage" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:paddingLeft="@dimen/horizontal_margin"
            android:paddingRight="@dimen/horizontal_margin"
            android:text="@string/ci"
            android:textColor="@color/rosa"
            android:textSize="@dimen/titulo"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/playButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/textView" />

        <Button
            android:id="@+id/playButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:layout_marginBottom="32dp"
            android:paddingStart="@dimen/button_padding"
            android:paddingEnd="@dimen/button_padding"
            android:text="@string/start"
            android:textColor="@color/colorAccent"
            android:textSize="@dimen/button_text_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

Que en la vista Design del editor de diseño se ve así:

Abrimos el archivo del nuevo fragmento y en la función onCreateView (es uno de los métodos que se llama durante el ciclo de vida de un fragmento) quitamos la instrucción return dejándola así:

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {

}

Y en su lugar creamos un objeto binding y activamos (inflamos) la vista del fragmento (lo que es equivalente a usar setContentView en una actividad). Para esta activación utilizamos el método DataBindingUtil.inflate sobre el objeto binding del fragmento con cuatro parámetros:

inflater, que es el LayoutInflater utilizado para activar el diseño del binding.
R.layout.fragment_title: el recurso de diseño para activar.
container (parámetro opcional) para el ViewGroup padre.
false, valor que se asigna a attachToParent (adjuntar al padre).

Asignamos al objeto binding el resultado del método DataBindingUtil.inflate y hacemos que la función onCreateView devuelva binding.root, que contiene la vista activada:

class TitleFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        // return inflater.inflate(R.layout.fragment_title, container, false)
        val binding = DataBindingUtil.inflate<FragmentTitleBinding>(
            inflater, R.layout.fragment_title, container, false
        )
        return binding.root
    }
}

Ahora añadimos el nuevo fragmento al diseño de la actividad, dentro del LinearLayout:

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <fragment
            android:id="@+id/titleFragment"
            android:name="com.android.testci.TitleFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

</layout>

Repitiendo los pasos anteriores, vamos a crear otros fragmentos correspondientes a los distintos componentes que necesitamos en nuestra aplicación: 1) pantalla de inicio, 2) las preguntas del test, dos posibles resultados de 3) acierto y 4) error, y los dos componentes para las 5) instrucciones y la información 6) Acerca de. Aunque de momento no están conectados entre sí, los diseños de estos fragmentos se presentan así:

Además en el fragmento dedicado a presentar las preguntas del test (TestFragment.kt) utilizamos una data class con un parámetro tipo String para contener las preguntas y otro parámetro tipo Lista de String para contener las respuesta posibles.

data class Question(
    val text: String,
    val answers: List<String>
)

Después creamos una lista de objetos de este tipo (Question) que asignan a cada parámetro los valores de cada pregunta y sus respectivas respuestas alternativas:

private val questions: MutableList<Question> = mutableListOf(
    Question(
        text = "¿Cuál de las siguientes palabras no encaja con el resto?",
        answers = listOf("Ordenanza", "Escriba", "Secretario", "Amanuense", "Copista")
    ),
    Question(
        text = "Complete la analogía: ENOJO es a CALMA como ENFURECER a",
        answers = listOf("Apaciguar", "Descansar", "Despertar", "Marear", "Alterar")
    ),
    ...
)

Y dentro de la función onCreateView:

Llamamos a la función randomizeQuestions que aleatoriza el orden de las preguntas y establece la primera pregunta (al final de la entrada se puede ver el código de los principales archivos).
Con setOnClickListener capturamos la acción del botón de respuesta del diseño (binding.submitButton.setOnClickListener), que a su vez captura la opción activada en el RadioGroup (binding.questionRadioGroup.checkedRadioButtonId) para comprobar si la respuesta es correcta y en ese caso avanza a la siguiente pregunta después de comprobar si han realizado todas las preguntas (entoncés se activará el fragmento de victoria), o si la respuesta no es correcta se activará el fragmento de fin del test.

Parte 2: Definir las rutas de navegación

Una vez que hemos construido la estructura de la aplicación, ahora crearemos la posibilidad de navegar (las rutas) entre estos componentes conectando las pantallas con acciones y ofreciendo al usuario una forma de navegar entre las pantallas.

Para ello debemos agregar las dependencias de navegación a los archivos de Gradle. Abrimos el archivo build.gradle a nivel de proyecto, y en la parte superior, junto con las otras variables ext, agregamos una variable para navigationVersion. Si solo tenemos una variable ext, como por ejemplo ext.kotlin_version, la reescribimos en el bloque ext de esta forma:

// ext.kotlin_version = '1.3.21'
ext {
    kotlin_version = '1.3.21'
}

Y añadimos la dependencia de navegación (para encontrar la última versión estable consulta Declaring dependencies):

ext {
    kotlin_version = '1.3.21'
    navigationVersion = '1.0.0-rc02'
}

Ahora abrimos build.gradle a nivel de módulo para agregar las dependencias navigation-fragment-ktx y navigation-ui-ktx:

dependencies {
  ...
  implementation "android.arch.navigation:navigation-fragment-ktx:$navigationVersion"
  implementation "android.arch.navigation:navigation-ui-ktx:$navigationVersion"
  ...
}

En caso de utilizar navigationVersion = '2.1.0-rc01' posiblemente necesites estas dependencias:

dependencies {
  ...
  implementation "androidx.navigation:navigation-fragment-ktx:$$navigationVersion"
  implementation "androidx.navigation:navigation-ui-ktx:$$navigationVersion"
  ...
}

Build -> Rebuild Project y sincronizamos los cambios.

Ahora vamos a agregar un gráfico de navegación desde la carpeta res -> New -> Android Resource File, seleccionamos Navigation como tipo de recurso y le asignamos un nombre:

Esto crea, en la carpera res, la carpeta navigation con el archivo navigation.xml, que en la vista Design solo muestra el mensaje 'Click to add a destination':

También vemos que en el panel Destinations aparece el mensaje 'No NavHostFragments found'. Un fragmento host de navegación (NavHostFragment, de navigation host fragment) actúa como cabeza u organizador de fragmentos en un gráfico de navegación. A medida que el usuario se mueve entre los destinos definidos en el gráfico de navegación, el NavHostFragment intercambia fragmentos según sea necesario.

Para crear el NavHostFragment abrimos el archivo de diseño de la actividad principal (activity_main.xml) y cambiamos el nombre (atributo name) del fragmento (com.android.testci.TitleFragment) por androidx.navigation.fragment.NavHostFragment y también cambiamos la identificación (atributo id) a myNavHostFragment. Le añadimos el atributo app:navGraph con el valor del recurso del gráfico de navegación que hemos creado (@navigation/navigation) y el atributo app:defaultNavHost con el valor true:

<!--
<fragment
    android:id="@+id/titleFragment"
    android:name="com.android.testci.TitleFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
-->

<fragment
    android:id="@+id/myNavHostFragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/navigation" />

Ahora este punto de navegación es el NavHostFragments predeterminado y como tal interceptará el botón Atrás del sistema.

Ahora queda añadir los fragmentos que hemos creado al gráfico de navegación, empezando por los fragmentos de portada (fragment_title.xml) y de test (fragment_test.xml). En el archivo navigation/navigation.xml al pulsar sobre el botón New Destination aparece una lista de fragmentos y actividades, y seleccionamos fragment_title para que sea el inicio de la aplicación.

Repetimos para añadir como nuevo destino el fragmento fragment_test (si la vista previa no está disponible, vamos a la vista Text para asegurarnos que el elemento correspondiente a testFragment incluye el atributo tools:layout="@layout/fragment_test".

Seleccionamos el fragmento del título y pulsamos sobre el punto de conexión del lado derecho, arrastrándolo al fragmento del test, lo que crea una acción que conecta ambos fragmentos. Para ver los atributos de esta acción, seleccionamos la línea o flecha de conexión y comprobamos el valor de su ID (action_titleFragment_to_testFragment) y el atributo Destination (testFragment).

Ahora debemos añadir un controlador de clic al botón EMPEZAR del fragmento de inicio para que al pulsarlo se pueda navegar desde el primero al segundo fragmento (y se ejecute la conexión que acabamos de crear, conduciendo al usuario a la pantalla del test). Abrimos TitleFragment.kt y dentro de onCreateView agregamos el controlador antes de la declaración de devolución (return):

binding.playButton.setOnClickListener { }

Y en su interior escribimos el código para navegar al fragmento del test (requiere import androidx.navigation.findNavController):

binding.playButton.setOnClickListener { view: View ->
    view.findNavController().navigate(R.id.action_titleFragment_to_testFragment)
}

Ejecutamos la aplicación para comprobar que el botón cumple su cometido de llevarnos a la pantalla del test. Además con el botón Atrás del dispositivo volvemos a la primera pantalla.

Ahora vamos a crear rutas de navegación condicionales en función de las respuestas del usuario, lo que activará el fragmento fragment_test_won.xml o el fragmento fragment_test_over.xml en función de si responde correctamente o no a las preguntas.

Para ello, con el botón New Destination agregamos estos dos fragmentos al gráfico de navegación del archivo navigation.xml:

Ahora conectamos el fragmento del test a estos dos fragmentos:

El archivo TestFragment.kt contiene la clase TestFragment que es un fragmento que contiene las preguntas y respuestas del test y también incluye la lógica que determina si el usuario responde correctamente o no, y en cada caso tendrá una acción distinta (distintas rutas de navegación) por parte de la aplicación.

if (answers[answerIndex] == currentQuestion.answers[0]) { }  // si esto es true, la respuesta es correcta

Si la condición anterior devuelve false (la respuesta es incorrecta), se termina el test y la aplicación navega a TestOverFragment.

else {
    view.findNavController().navigate(R.id.action_testFragment_to_testOverFragment)
}

Pero si la respuesta es correcta, debemos comprobar (dentro del bloque if anterior) si se ha completado el test (3 aciertos seguidos) o no:

if (questionIndex < numQuestions) { // si true, continuar con la siguiente pregunta
    ...
} else { // si false, test completado -> navegar a TestWonFragment
    view.findNavController().navigate(R.id.action_testFragment_to_testWonFragment)
}

El sistema Android realiza un seguimiento de los destinos visitados por los usuarios en un dispositivo (cada vez que el usuario va a un nuevo destino, Android lo agrega a una pila posterior de destinos o back stack). Y cuando se presiona sobre el botón Atrás del dispositivo, la aplicación accede al destino situado en la parte superior de esa pila, que por defecto es el último destino visitado. Pero podemos cambiar este funcionamiento para ajustar otro destino. Por ejemplo, en nuestra aplicación estaría bien que desde el fragmento TestOverFragment (fin del test), el botón Atrás sirviera para acceder a la pantalla de inicio de la aplicación (TitleFragment) en lugar de a las preguntas del test (TestFragment) como hace ahora.

Vamos a tomar el control de la pila de destinos visitados. En concreto vamos a eliminar TestFragment de la pila para que cuando el usuario gane o pierda (TestWonFragment o TestOverFragment) y pulse el botón Atrás la aplicación no encuentre esos fragmentos y vuelva al fragmento de portada de la aplicación (TitleFragment).

Para administrar esta pila debemos configurar el comportamiento de "pop" para las acciones que conectan los fragmentos, lo cual admite diversos ajustes en sus atributos:

El atributo popUpTo de una acción abre la pila a un destino determinado (los destinos se eliminan de la pila).
Si el atributo popUpToInclusive es false o no está configurado, popUpTo elimina los destinos hasta el destino especificado y lo deja en la pila posterior.
Si popUpToInclusive se establece como true, el atributo popUpTo elimina todos los destinos hasta el destino dado de la pila posterior.
Si popUpToInclusive es true y popUpTo está configurado en la ubicación de inicio de la aplicación, la acción elimina todos los destinos de la aplicación de la pila posterior, por lo que el botón Atrás saca al usuario de la aplicación.

Entonces, desde el gráfico de navegación, seleccionamos la acción (flecha) para navegar desde TestFragment a TestOverFragment, y en el panel de atributos ajustamos el atributo Pop To a testFragment y activamos la casilla Inclusive (true). Podemos combrobar en el archivo xml (vista Text) que se han agregado estos atributos:

app:popUpTo="@+id/testFragment"
app:popUpToInclusive="true"

Esto hace que el componente de navegación elimine los fragmentos de la pila posterior hasta TestFragment (inclusive). Lo mismo lo podríamos heber hecho ajustando el atributo Pop To en titleFragment y desactivando Inclusive (false). Hacemos lo mismo para la acción de navegación desde TestFragment a TestWonFragment.

Ejecutamos la aplicación en el emulador para comprobar que ahora el botón Atrás del dispositivo salta la pantalla de preguntas y llega hasta la pantalla de inicio desde cualquiera de las dos pantallas de resultados.

Ahora vamos a darle funcionalidades a los botones 'Siguiente Test' (TestWonFragment) e '¿Interntarlo otra vez?' (TestOverFragment) para que ambos accedan a las preguntas (TestFragment) y después, si el usuario presiona el botón Atrás no vuelva a TestWonFragment ni a TestOverFragment, sino a TitleFragment.

En el gráfico de navegación añadimos una acción de navegación que conecte TestOverFragment con TestFragment (esta conexión la usará el botón). Y en el atributo Pop To de esta acción ajustamos a titleFragment con Inclusive false (una vez en TestFragment, el botón Atrás irá a TitleFragment).

Repetimos para crear una nueva acción de navegación desde TestWonFragment a TestFragment y la configuramos igual:

En el archivo TestOverFragment.kt, al final del método onCreateView, antes del return, escribimos un controlador de clics al botón:

binding.tryAgainButton.setOnClickListener { view: View ->
    view.findNavController().navigate(R.id.action_testOverFragment_to_testFragment)
}

Repetimos en el archivo TestWonFragment para su botón:

binding.nextTestButton.setOnClickListener { view: View ->
    view.findNavController().navigate(R.id.action_testWonFragment_to_testFragment)
}

Ejecutamos para comprobar que funciona. Hasta aquí esta entrada donde hemos repasado la creación de fragmentos y hemos aprendido a navegar entre ellos. En una próxima entrega seguiremos trabajando con esta aplicación para añadir un botón en la barra de la aplicación que nos ayudará a navegar por la aplicación, y un menú de opciones y un cajón de navegación para ir a los fragmentos Info y About.

A continuación se muestran los archivos más importantes relativos a las actividades, fragmentos y el recurso de navegación de la aplicación:

// MainActivity.kt
package com.android.testci

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.testci.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = DataBindingUtil.setContentView<ActivityMainBinding>(this, R.layout.activity_main)
    }
}

<!-- layout/activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <fragment
            android:id="@+id/myNavHostFragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/navigation" />

    </LinearLayout>

</layout>

// TitleFragment.kt
package com.android.testci

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.navigation.findNavController
import com.android.testci.databinding.FragmentTitleBinding

class TitleFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        val binding = DataBindingUtil.inflate<FragmentTitleBinding>(
            inflater, R.layout.fragment_title, container, false
        )

        binding.playButton.setOnClickListener { view: View ->
            view.findNavController().navigate(R.id.action_titleFragment_to_testFragment)
        }

        return binding.root
    }
}

<!-- layout/fragment_title.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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"
    tools:context="com.android.testci.TitleFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/titleConstraint"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:id="@+id/titleImage"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toTopOf="@+id/textView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_mid_mapping" />

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="@dimen/horizontal_margin"
            android:paddingRight="@dimen/horizontal_margin"
            android:text="@string/test"
            android:textAllCaps="false"
            android:textColor="@color/azul"
            android:textSize="@dimen/titulo"
            android:textStyle="bold"
            app:layout_constraintBaseline_toBaselineOf="@+id/textView2"
            app:layout_constraintEnd_toStartOf="@+id/textView2"
            app:layout_constraintHorizontal_chainStyle="packed"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/titleImage" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="32dp"
            android:paddingLeft="@dimen/horizontal_margin"
            android:paddingRight="@dimen/horizontal_margin"
            android:text="@string/ci"
            android:textColor="@color/rosa"
            android:textSize="@dimen/titulo"
            android:textStyle="bold"
            app:layout_constraintBottom_toTopOf="@+id/playButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/textView" />

        <Button
            android:id="@+id/playButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginTop="32dp"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:layout_marginBottom="32dp"
            android:paddingStart="@dimen/button_padding"
            android:paddingEnd="@dimen/button_padding"
            android:text="@string/start"
            android:textColor="@color/colorAccent"
            android:textSize="@dimen/button_text_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

// TestFragment.kt
package com.android.testci

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.navigation.findNavController
import com.android.testci.databinding.FragmentTestBinding

class TestFragment : Fragment() {
    data class Question(
        val text: String,
        val answers: List<String>
    )

    // Lista de Question (pregunta y lista de respuestas)
    // La primera respuesta es la correcta y después se presentan de manera aleatoria
    private val questions: MutableList<Question> = mutableListOf(
        Question(
            text = "¿Cuál de las siguientes palabras no encaja con el resto?",
            answers = listOf("Ordenanza", "Escriba", "Secretario", "Amanuense", "Copista")
        ),
        Question(
            text = "Complete la analogía: ENOJO es a CALMA como ENFURECER a",
            answers = listOf("Apaciguar", "Descansar", "Despertar", "Marear", "Alterar")
        ),
        Question(
            text = "Al lanzar dos dados ¿cuál es la probabilidad de que las caras orientadas hacia arriba sumen un total de 6 en dos ocasiones consecutivas?\n",
            answers = listOf("25/1296", "8/1296", "10/1296", "16/1296", "36/1296")
        ),
        Question(
            text = "El nieto de mis padres es uno de mis sobrinos y tengo tres sobrinos más que no son hermanos entre sí. Como mínimo ¿cuántos hijos e hijas tienen mis padres? (asumiendo que nadie ha muerto)",
            answers = listOf("Cuatro", "Dos", "Tres", "Cinco", "No hay datos suficientes para saberlo")
        ),
        Question(
            text = "¿Cuántos múltiplos de 4 hay entre 1000 y 2000 inclusives?",
            answers = listOf("251", "300", "500", "204", "164")
        ),
        Question(
            text = "Dibujando sobre un papel un cuadrado y dos triángulos ¿cuántas áreas pueden delimitarse?. Dicho de otro modo, ¿cuál es el número máximo de parcelas que pueden delimitarse en un prado con una cerca de alambre cuadrada y dos triangulares?",
            answers = listOf("19", "7", "11", "15", "24")
        ),
        Question(
            text = "Encuentre el número que completa esta serie lógica: 3, 5, 10, 24, 65, ?",
            answers = listOf("187", "174", "201", "123", "130")
        ),
        Question(
            text = "Complete la analogía: DESDEÑOSO es a DESPECTIVO como ALTIVO es a",
            answers = listOf("Soberbio", "Estrafalario", "Arreglado", "Negativo", "Positivo")
        ),
        Question(
            text = "¿Si el hijo de Marmaduke es el padre de mi hijo, ¿qué parentesco tengo yo con Marmaduke?",
            answers = listOf("Su hijo", "Soy su abuelo", "Su padre", "Su nieto", "Yo soy Marmaduke")
        ),
        Question(
            text = "En una hilera de cuatro casas, los Brown viven al lado de los Smith pero no al lado de los Bruce. Si los Bruce no viven al lado de los Jones, ¿quiénes son los vecinos inmediatos de los Jones?",
            answers = listOf("Los Brown", "Los Smith", "Los Brown y los Smith", "Es imposible averiguarlo", "Ninguno de los anteriores")
        )
    )
    private lateinit var binding: FragmentTestBinding
    lateinit var currentQuestion: Question
    lateinit var answers: MutableList<String>
    private var questionIndex = 0
    private val numQuestions = Math.min((questions.size + 1) / 2, 3)

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {

        binding = DataBindingUtil.inflate(
            inflater, R.layout.fragment_test, container, false
        )

        // Mezcla las preguntas y determina el índice de la primera pregunta en la lista de preguntas
        randomizeQuestions()

        binding.test = this

        binding.submitButton.setOnClickListener @Suppress("UNUSED_ANONYMOUS_PARAMETER")
        { view: View ->
            val checkedId = binding.questionRadioGroup.checkedRadioButtonId
            if (-1 != checkedId) {  // no hace nada si ninguna opción está activada
                var answerIndex = 0
                when (checkedId) {
                    R.id.secondAnswerRadioButton -> answerIndex = 1
                    R.id.thirdAnswerRadioButton -> answerIndex = 2
                    R.id.fourthAnswerRadioButton -> answerIndex = 3
                    R.id.fiveAnswerRadioButton -> answerIndex = 4
                }
                if (answers[answerIndex] == currentQuestion.answers[0]) {  // si true: respuesta correcta
                    questionIndex++
                    if (questionIndex < numQuestions) {  // si true: siguiente pregunta
                        currentQuestion = questions[questionIndex]  // siguiente pregunta
                        setQuestion()
                        binding.invalidateAll()
                    } else {  // tres respuestas correctas: navegar a testWonFragment
                        view.findNavController().navigate(R.id.action_testFragment_to_testWonFragment)
                    }
                } else {  // error de respuesta: navegar a testOverFragment
                    view.findNavController().navigate(R.id.action_testFragment_to_testOverFragment)
                }
            }
        }
        return binding.root
    }

    private fun randomizeQuestions() {
        questions.shuffle()  // mezcla la lista
        questionIndex = 0
        setQuestion()  // obtiene una pregunta y mezcla sus respuestas
    }

    private fun setQuestion() {
        binding.questionRadioGroup.clearCheck()
        currentQuestion = questions[questionIndex] // selecciona la Question
        answers = currentQuestion.answers.toMutableList()
        answers.shuffle()  // y mezcla sus respuestas
        (activity as AppCompatActivity).supportActionBar?.title =
            getString(R.string.title_android_testci_question, questionIndex + 1, numQuestions)
    }
}

<!-- layout/fragment_test.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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"
    tools:context="com.example.android.navigation.InGame">

    <data>
        <variable
            name="test"
            type="com.android.testci.TestFragment" />
    </data>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/questionImage"
                android:layout_width="0dp"
                android:layout_height="@dimen/image_header_height_min"
                android:layout_marginStart="@dimen/horizontal_margin"
                android:layout_marginTop="@dimen/vertical_margin"
                android:layout_marginEnd="@dimen/horizontal_margin"
                android:layout_marginBottom="@dimen/vertical_margin"
                android:scaleType="fitCenter"
                app:layout_constraintBottom_toTopOf="@+id/questionText"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintVertical_chainStyle="packed"
                app:srcCompat="@drawable/ic_preguntas" />

            <TextView
                android:id="@+id/questionText"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/question_horizontal_margin"
                android:layout_marginTop="@dimen/vertical_margin"
                android:layout_marginEnd="@dimen/question_horizontal_margin"
                android:fontFamily="sans-serif"
                android:text="@{test.currentQuestion.text}"
                android:textSize="@dimen/question_size"
                android:textStyle="bold"
                android:typeface="normal"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/questionImage"
                tools:text="¿Qué número sigue en la siguiente serie?\n9, 16, 25, 36 ...  " />

            <RadioGroup
                android:id="@+id/questionRadioGroup"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/question_horizontal_margin"
                android:layout_marginTop="@dimen/vertical_margin"
                android:layout_marginEnd="@dimen/question_horizontal_margin"
                android:animateLayoutChanges="true"
                android:orientation="vertical"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/questionText">

                <RadioButton
                    android:id="@+id/firstAnswerRadioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/question_vertical_margin"
                    android:checked="true"
                    android:text="@{test.answers[0]}"
                    android:textSize="@dimen/answer_text_size"
                    tools:text="42" />

                <RadioButton
                    android:id="@+id/secondAnswerRadioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/question_vertical_margin"
                    android:text="@{test.answers[1]}"
                    android:textSize="@dimen/answer_text_size"
                    tools:text="49" />

                <RadioButton
                    android:id="@+id/thirdAnswerRadioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/question_vertical_margin"
                    android:text="@{test.answers[2]}"
                    android:textSize="@dimen/answer_text_size"
                    tools:text="51" />

                <RadioButton
                    android:id="@+id/fourthAnswerRadioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/question_vertical_margin"
                    android:text="@{test.answers[3]}"
                    android:textSize="@dimen/answer_text_size"
                    tools:text="54" />

                <RadioButton
                    android:id="@+id/fiveAnswerRadioButton"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="@dimen/question_vertical_margin"
                    android:text="@{test.answers[4]}"
                    android:textSize="@dimen/answer_text_size"
                    tools:text="Ninguna de las anteriores" />

            </RadioGroup>

            <Button
                android:id="@+id/submitButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/question_horizontal_margin"
                android:layout_marginTop="@dimen/vertical_margin"
                android:layout_marginEnd="@dimen/question_horizontal_margin"
                android:text="@string/respoder"
                android:textSize="@dimen/button_text_size"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/questionRadioGroup" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </ScrollView>
</layout>

// TestWonFragment.kt
package com.android.testci

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.navigation.findNavController
import com.android.testci.databinding.FragmentTestWonBinding

class TestWonFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val binding: FragmentTestWonBinding = DataBindingUtil.inflate(
            inflater, R.layout.fragment_test_won, container, false
        )

        binding.nextTestButton.setOnClickListener { view: View ->
            view.findNavController().navigate(R.id.action_testWonFragment_to_testFragment)
        }

        return binding.root
    }
}

<!-- layout/fragment_test_won.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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"
    tools:context="com.android.testci.TestWonFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/testWonConstraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/fondoazul">

        <Button
            android:id="@+id/nextTestButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingStart="@dimen/button_padding"
            android:paddingEnd="@dimen/button_padding"
            android:text="@string/next"
            android:textColor="@color/youWinDark"
            android:textSize="@dimen/button_text_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/youWinImage" />

        <ImageView
            android:id="@+id/youWinImage"
            android:layout_width="0dp"
            android:layout_height="@dimen/game_over_height"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginTop="8dp"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:layout_marginBottom="@dimen/vertical_margin"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toTopOf="@+id/nextTestButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/ic_award" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

// TestOverFragment.kt
package com.android.testci

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.navigation.findNavController
import com.android.testci.databinding.FragmentTestOverBinding

class TestOverFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val binding: FragmentTestOverBinding = DataBindingUtil.inflate(
            inflater, R.layout.fragment_test_over, container, false
        )

        binding.tryAgainButton.setOnClickListener { view: View ->
            view.findNavController().navigate(R.id.action_testOverFragment_to_testFragment)
        }

        return binding.root
    }
}

<!-- layout/fragment_test_over.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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"
    tools:context="com.android.testci.TestOverFragment">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/gameOverConstraintLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/fondorosa">

        <ImageView
            android:id="@+id/testOverFragment"
            android:layout_width="wrap_content"
            android:layout_height="362dp"
            android:layout_marginStart="@dimen/horizontal_margin"
            android:layout_marginEnd="@dimen/horizontal_margin"
            android:layout_marginBottom="8dp"
            android:scaleType="fitCenter"
            app:layout_constraintBottom_toTopOf="@+id/tryAgainButton"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_chainStyle="packed"
            app:srcCompat="@drawable/ic_assignment" />

        <Button
            android:id="@+id/tryAgainButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="@dimen/vertical_margin"
            android:layout_marginTop="@dimen/vertical_margin"
            android:layout_marginEnd="@dimen/vertical_margin"
            android:layout_marginBottom="8dp"
            android:paddingStart="@dimen/button_padding"
            android:paddingEnd="@dimen/button_padding"
            android:text="@string/try_again"
            android:textColor="?colorAccent"
            android:textSize="@dimen/button_text_size"
            android:textStyle="bold"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/testOverFragment" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

<!-- navigation/navigation.xml -->
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/navigation"
    app:startDestination="@id/titleFragment">

    <fragment
        android:id="@+id/titleFragment"
        android:name="com.android.testci.TitleFragment"
        android:label="fragment_title"
        tools:layout="@layout/fragment_title">
        <action
            android:id="@+id/action_titleFragment_to_testFragment"
            app:destination="@+id/testFragment" />
    </fragment>
    <fragment
        android:id="@+id/testFragment"
        android:name="com.android.testci.TestFragment"
        android:label="TestFragment"
        tools:layout="@layout/fragment_test">
        <action
            android:id="@+id/action_testFragment_to_testOverFragment"
            app:destination="@id/testOverFragment"
            app:popUpTo="@+id/testFragment"
            app:popUpToInclusive="true" />
        <action
            android:id="@+id/action_testFragment_to_testWonFragment"
            app:destination="@id/testWonFragment"
            app:popUpTo="@+id/testFragment"
            app:popUpToInclusive="true" />
    </fragment>
    <fragment
        android:id="@+id/testOverFragment"
        android:name="com.android.testci.TestOverFragment"
        android:label="fragment_test_over"
        tools:layout="@layout/fragment_test_over">
        <action
            android:id="@+id/action_testOverFragment_to_testFragment"
            app:destination="@id/testFragment"
            app:popUpTo="@+id/titleFragment"
            app:popUpToInclusive="false" />
    </fragment>
    <fragment
        android:id="@+id/testWonFragment"
        android:name="com.android.testci.TestWonFragment"
        android:label="fragment_test_won"
        tools:layout="@layout/fragment_test_won">
        <action
            android:id="@+id/action_testWonFragment_to_testFragment"
            app:destination="@id/testFragment"
            app:popUpTo="@+id/titleFragment"
            app:popUpToInclusive="false" />
    </fragment>
</navigation>

Android Studio con Java 8

2019-08-15T16:21:00.001+02:00

Desde la versión 3.0 (y posteriores) Android Studio admite todas las funciones del lenguaje Java 7 además de un subconjunto de funciones de Java 8 que varía según la versión de la plataforma (hay que tener en cuenta que, aunque el uso de Java 8 es opcional, para la compilación de aplicaciones con Java 7 se debe usar JDK 8).

Android Studio proporciona compatibilidad integrada para el uso de ciertas funcionalidades de Java 8 y de bibliotecas de terceros que las necesitan, pero para poder usar Java 8 debemos configurar correctamente nuestro proyecto en Android Studio. Además, como ya hemos visto en entradas anteriores, si intentamos usar algunas características de Java 8 sin esta configuración podemos encontrarnos con un error parecido a 'Error Default interface methods are only supported starting with Android N...'

Para poder lograr la compatibilidad con Java 8 con el conjunto de herramientas predeterminadas de Android Studio debemos seguir estos tres pasos:

PRIMERO

Lo primero es, si fuera el caso, inhabilitar Jack, que es un conjunto de herramientas que ha quedado obsoleto. Esta advertencia es solo para aquellos proyectos más antiguos que dependen de Jack y que deben realizar esta migración para usar la compatibilidad con Java 8. Para inhabilitar Jack simplemente hay que quitar, en caso de existir, el bloque jackOptions{} en el archivo build.gradle del módulo.

SEGUNDO

Actualizar el complemento Gradle de Android (Android Gradle plugin) al menos a la versión 3.0.0 (o versiones posteriores). Podemos especificar la versión de este complemento para todos los módulos integrados en un proyecto de Android Studio desde File > Project Structure > Project:

Y también en el archivo build.gradle del proyecto:

buildscript {
    ext.kotlin_version = '1.3.21'
    repositories {
        google()
        jcenter()

    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.3.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

Hay que tener en cuenta dos cosas: 1) que cada versión del complemento Android Gradle requiere una versión de Gradle, por lo que si actualizas el complemento posiblemente debas actualizar también Gradle (en ese caso Android Studio lanzará un mensaje de actualización), y 2) que para obtener el mejor rendimiento se debe usar la última versión posible de ambos.

TERCERO

Y por último, para cada módulo que use Java 8 (ya sea en su código fuente o a través de dependencias), debemos especificar la compatibilidad de origen y destino agregando lo siguiente a su archivo build.gradle, dentro del bloque android:

android {
    ...
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

Fundamentos de Android: Introducción a los Fragmentos

2019-08-14T18:04:00.001+02:00

Android introduce los fragmentos en Android 3.0 (nivel de API 11) principalmente para admitir diseños de la interfaz de usuario (IU o UI, de user interface) más dinámicos y flexibles en pantallas grandes, como las de las tablets, dividiendo el diseño de una actividad en fragmentos, lo que permite modificar el aspecto de la actividad en tiempo de ejecución.

Un fragmento (fragment) representa una parte de la IU en una actividad. Podemos combinar múltiples fragmentos en una sola actividad para construir una IU compleja,
y reutilizar un fragmento en distintas actividades. Podemos pensar en un fragmento como una sección modular de una actividad, que tiene su propio ciclo de vida, que recibe sus propios eventos de entrada y que se puede agregar o quitar mientras la actividad se está ejecutando, algo así como una "subactividad" que se volver a usar en diferentes actividades. En definitiva, un fragmento es un componente de Android que puede contener parte del comportamiento y de la IU de una actividad, a la que está vinculado.

Y es que un fragmento siempre debe estar integrado en una actividad (no son entidades independientes) y el ciclo de vida del fragmento se ve directamente afectado por el ciclo de vida de la actividad anfitriona (en próximas entradas hablaremos del ciclo de vida de la actividad). Por ejemplo, cuando la actividad está pausada, también lo están todos sus fragmentos, y cuando la actividad se destruye, lo mismo ocurre con todos los fragmentos. Sin embargo, mientras una actividad se está ejecutando se puede manipular cada fragmento de forma independiente, por ejemplo, para agregarlos o quitarlos.

Debemos diseñar cada fragmento como un componente modular y reutilizable de la actividad, pudiendo cambiar las combinaciones de fragmentos para diferentes tamaños de pantalla y reutilizando los fragmentos en diferentes configuraciones de diseño para optimizar la experiencia del usuario en función del espacio de pantalla disponible. La siguiente imagen representa la manera en que dos módulos de la IU definidos por fragmentos se pueden combinar en una actividad para un diseño de tablet y se presentan por separado para un diseño de teléfono en, por ejemplo, una aplicación de noticias que usa un fragmento para mostrar una lista de artículos a la izquierda y otro fragmento para mostrar el artículo seleccionado a la derecha:

En resumen, los fragmentos en Android aportan:

Modularidad: División del código de una actividad compleja en fragmentos para una mejor organización y mantenimiento.
Reusabilidad: Al ubicar un comportamiento o parte de la IU en fragmentos, éstos pueden ser compartidos por múltiples actividades.
Adaptabilidad: La representación de secciones de la IU como fragmentos permite utilizar diferentes diseños según la orientación y el tamaño de la pantalla.

En esta entrada vamos a aprender a crear un fragmento a través de un ejemplo básico, y en próximas entradas veremos cómo los fragmentos pueden enviar información a una actividad y cómo añadir y remplazar fragmentos.

Empezamos creando un nuevo proyecto desde una actividad vacía. Una manera rápida de crear un fragmento es enfocar el panel de archivos del proyecto seleccionando, por ejemplo, la carpeta com.android.miapp y desde el menú superior accedemos a File -> New -> Fragment -> Fragment (Blank) o bien con el botón secundario del ratón com.android.miapp -> New -> Fragment -> Fragment (Blank):

Esto abre la ventana New Android Component, donde asignamos un nombre al fragmento y desactivamos las casillas de verificación relativas a factory methods e interface callbacks como se ve en la imagen:

Comprobamos que al crear el fragmento tenemos un nuevo archivo de Kotlin y su correspondiente archivo de diseño XML con un TextView. Repetimos para crear un segundo fragmento. Configuramos los archivos de diseño de ambos fragmentos con algunos atributos distintos (color de fondo y texto) para distinguirlos más fácilmente en el diseño de la actividad, quedando de esta manera:

<!-- layout/fragment_primer_fragmento.xml -->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorAccent"
    tools:context=".PrimerFragmento">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="@dimen/padding_4"
        android:text="@string/primer_fragment"
        android:textSize="18sp" />

</FrameLayout>

<!--layout/fragment_segundo_fragmento.xml-->
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context=".SegundoFragmento">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="@dimen/padding_4"
        android:text="@string/segundo_fragment"
        android:textSize="18sp" />

</FrameLayout>

Ahora abrimos el archivo activity_main.xml para añadir ambos fragmentos como parte del diseño de la actividad principal, lo que podemos hacer con la etiqueta <fragment> en vista Text o más fácilmente en vista Design, arrastrando desde la paleta de elementos el elemento <fragment> hasta el árbol de componentes (al hacerlo, Android Studio preguntará cuál de los fragmentos creados queremos añadir):

Eliminamos el TextView que viene por defecto y distribuimos los fragmentos en la pantalla dentro del ConstraintLayout:

<!--layout/activity_main.xml-->
<?xml version="1.0" encoding="utf-8"?>
<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">

    <fragment
        android:id="@+id/fragment"
        android:name="com.android.miapp.PrimerFragmento"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/fragment2"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <fragment
        android:id="@+id/fragment2"
        android:name="com.android.miapp.SegundoFragmento"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/fragment"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Al ejecutar la aplicación en el emulador podemos ver un resultando semejante a éste:

En esta entrada introductoria hemos visto cómo crear y añadir un fragmento a una actividad, pero lo hemos hecho de un modo estático, cuando los fragmentos permiten variaciones en el diseño en tiempo de ejecución. Próximamente veremos cómo crear y usar fragmentos dinámicamente desde la actividad con FragmentManager y cómo realizar transacciones de fragmentos.

Operaciones con colecciones IX: Operaciones de escritura

2019-08-11T13:03:00.000+02:00

Aunque más adelante veremos otras características y funcionalidades de las colecciones, y concretamente operaciones específicas para listas, conjuntos y diccionarios, con esta entrada terminamos la serie dedicada a las operaciones con colecciones.

Las colecciones mutables admiten ciertas operaciones que permiten cambiar su contenido, por ejemplo agregando o eliminando elementos.

Agregar elementos

Así, para agregar un solo elemento a una lista o a un conjunto usamos la función add(), que agrega el nuevo elemento al final de la colección:

val numeros = mutableListOf(1, 2, 3, 4)
numeros.add(5)
println(numeros) // [1, 2, 3, 4, 5]

También tenemos la función addAll() que utiliza como argumento un iterable, una secuencia o una array para agregar cada elemento de dicho objeto, sin necesidad de que los tipos del argumento y de la colección receptora sean similares, esto es, se pueden agregar todos los elementos de un conjunto (Set) a una lista (List).

Cuando addAll() se invoca sobre listas, los nuevos elementos se agregan en el mismo orden en que aparecen en el argumento. También se puede llamar a addAll() especificando una posición determinada como primer argumento, y entonces el primer elemento del argumento se inserta en esa posición seguido por el resto de elementos del argumento, desplazando a los elementos de la colección receptora hasta el final.

val numeros = mutableListOf(1, 2, 5, 6)
numeros.addAll(arrayOf(7, 8))
println(numeros) // [1, 2, 5, 6, 7, 8]
numeros.addAll(2, setOf(3, 4)) // el primer argumento es el índice de inserción
println(numeros) // [1, 2, 3, 4, 5, 6, 7, 8]

Otra manera de agregar elementos es utilizando el operador +=, tanto con un elemento individual como con otra colección, insertando los nuevos elementos al final de la colección:

val numeros = mutableListOf("uno", "dos")
numeros += "tres"
println(numeros) // [uno, dos, tres]
numeros += listOf("cuatro", "cinco")
println(numeros) // [uno, dos, tres, cuatro, cinco]

Eliminar elementos

Para eliminar un elemento de una colección mutable usamos la función remove(), que toma un valor y, en caso de existir en la colección, elimina la primera ocurrencia de ese valor (en caso contrario no hace nada).

val numeros = mutableListOf(1, 2, 3, 4, 3)
numeros.remove(3) // elimina el primer 3
println(numeros) // [1, 2, 4, 3]
numeros.remove(5) // no elimina nada
println(numeros) // [1, 2, 4, 3]

Para eliminar múltiples elementos a la vez, existen las siguientes funciones:

removeAll(), que elimina todos los elementos que están presentes en la colección de argumentos. Alternativamente, se puede llamar con un predicado como argumento y en este caso la función elimina todos los elementos para los cuales el predicado resulta verdadero (true).
retainAll() que, al contrario que la anterior, elimina todos los elementos excepto los de la colección de argumentos. Cuando se usa con un predicado, deja solo los elementos que coinciden.
clear(), que elimina todos los elementos de una lista y la deja vacía.

val numeros = mutableListOf(1, 2, 3, 4)
println(numeros) // [1, 2, 3, 4]
numeros.retainAll { it >= 3 }
println(numeros) // [3, 4]
numeros.clear()
println(numeros) // []

val numerosSet = mutableSetOf("uno", "dos", "tres", "cuatro")
numerosSet.removeAll(setOf("uno", "dos"))
println(numerosSet) // [tres, cuatro]

Y al igual que para agregar elementos de una colección usamos el operador +=, podemos eliminar elementos con el operador -=, tanto con un elemento individual (elimina la primera aparición del mismo) como con otra colección (se eliminan todas las apariciones de sus elementos):

val numeros = mutableListOf("uno", "dos", "tres", "tres", "cuatro", "cuatro")
numeros -= "tres"
println(numeros) // [uno, dos, tres, cuatro, cuatro]
numeros -= listOf("cuatro", "cinco")
println(numeros) // [uno, dos, tres]

Por otra parte, otras operaciones de escritura sobre colecciones consisten en actualizar los valores de sus elementos, como veremos en próximas entradas cuando hablemos sobre operaciones específicas de cada tipo de colección.

Ejercicio de diseño: de LinearLayout a ConstraintLayout

2019-08-10T12:38:00.001+02:00

Hasta ahora hemos visto diversos conceptos relativos al diseño y la distribución de elementos en la pantalla, pero la mejor manera de familiarizarse con ellos es utilizarlos y trastear con el editor de diseño. Por ello, en esta entrada vamos a practicar con el diseño de una aplicación, y concretamente vamos a transformar una aplicación diseñada a base de LinearLayout para convertir el contenedor principal de elementos en un ConstraintLayout (ver Fundamentos de Android: Diseño con ConstraintLayout) y que el diseño sea más limpio reduciendo la jerarquía de elementos anidados. Además vamos utilizar otros conceptos conocidos como cadenas de elementos (chain), elementos de imagen, recursos de distinto tipo (texto, dimensiones, colores, estilos, etc.) y algunos más.

Vamos a partir del proyecto ControlAcceso, que hemos ido retocando en las últimas entradas, tal como lo dejamos en Data Binding para mostrar datos. Concretamente, en esa entrada el código de los archivos de diseño quedó así:

<!--- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".MainActivity">

        <LinearLayout
                android:id="@+id/linearLayout"
                style="@style/estilo_linear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <TextView
                    android:id="@+id/user_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/margen_txt_end1"
                    android:text="@string/usuario" />

            <EditText
                    android:id="@+id/user_input"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="@string/usuario"
                    android:inputType="textPersonName" />
        </LinearLayout>

        <LinearLayout
                android:id="@+id/linearLayout2"
                style="@style/estilo_linear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

            <TextView
                    android:id="@+id/pass_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/margen_txt_end2"
                    android:text="@string/contraseña" />

            <EditText
                    android:id="@+id/pass_input"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="@string/contraseña"
                    android:inputType="textPassword" />
        </LinearLayout>

        <Button
                android:id="@+id/entrar_btn"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/btn_entrar" />

    </LinearLayout>

</layout>

<!--- activity_login_check.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
                name="usuario"
                type="com.android.controlacceso.Usuario" />
    </data>

    <LinearLayout
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".LoginCheck">

        <TextView
                android:id="@+id/acceso_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/login_check"
                android:textAlignment="center" />

        <TextView
                android:id="@+id/login_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@={usuario.nombre}"
                android:textAlignment="center" />

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

            <EditText
                    android:id="@+id/pass_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@null"
                    android:ems="10"
                    android:enabled="false"
                    android:inputType="textPassword"
                    android:text="@={usuario.pass}"
                    android:textAlignment="center" />

            <CheckBox
                    android:id="@+id/checkBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="@string/btn_ver" />

        </LinearLayout>

        <Button
                android:id="@+id/button_cerrar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/cerrar" />

    </LinearLayout>

</layout>

En las siguientes imágenes se aprecia el editor de diseño de ambos archivos después de la conversión del LinearLayout a un ConstraintLayout, observándose en el árbol de componentes los elementos de diseño utilizados, y finalmente unas capturas de pantalla de la aplicación en funcionamiento:

Como se supone que ya se conocen los métodos de aplicación de las técnicas utilizadas (en caso contrario revisar las entradas correspondientes), solo se expone el resultado final del código:

<!--- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraint_layout"
            style="@style/estilo_constraint"
            tools:context=".MainActivity">

        <TextView
                android:id="@+id/textView"
                style="@style/estilo_titulo"
                android:text="@string/acceso"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <ImageView
                android:id="@+id/imageView"
                style="@style/estilo_imagen"
                android:contentDescription="@string/imagen_candado"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/textView"
                app:srcCompat="@android:drawable/ic_secure" />

        <TextView
                android:id="@+id/user_txt"
                style="@style/estilo_texto"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margen16"
                android:text="@string/usuario"
                app:layout_constraintBaseline_toBaselineOf="@+id/user_input"
                app:layout_constraintEnd_toStartOf="@+id/user_input"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent" />

        <EditText
                android:id="@+id/user_input"
                style="@style/estilo_texto"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen32"
                android:layout_marginEnd="@dimen/margen16"
                android:ems="10"
                android:hint="@string/usuario"
                android:inputType="textPersonName"
                android:textAlignment="textEnd"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/user_txt"
                app:layout_constraintTop_toBottomOf="@+id/imageView" />

        <TextView
                android:id="@+id/pass_txt"
                style="@style/estilo_texto"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margen16"
                android:text="@string/contraseña"
                app:layout_constraintBaseline_toBaselineOf="@+id/pass_input"
                app:layout_constraintEnd_toStartOf="@+id/pass_input"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent" />

        <EditText
                android:id="@+id/pass_input"
                style="@style/estilo_texto"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen32"
                android:layout_marginEnd="@dimen/margen16"
                android:ems="10"
                android:hint="@string/contraseña"
                android:inputType="textPassword"
                android:textAlignment="textEnd"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/pass_txt"
                app:layout_constraintTop_toBottomOf="@+id/user_input" />

        <Button
                android:id="@+id/entrar_btn"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginBottom="@dimen/margen32"
                android:text="@string/sesion_inicio"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

<!--- activity_login_check.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout 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">

    <data>
        <variable
                name="usuario"
                type="com.android.controlacceso.Usuario" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/constraint_layout"
            style="@style/estilo_constraint"
            android:background="@color/fondo"
            android:padding="@dimen/padding16"
            tools:context=".LoginCheck">

        <TextView
                android:id="@+id/acceso_txt"
                style="@style/estilo_titulo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/login_check"
                android:textAlignment="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <ImageView
                android:id="@+id/imageView2"
                style="@style/estilo_imagen"
                android:contentDescription="@string/imagen_candado_abierto"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/acceso_txt"
                app:srcCompat="@android:drawable/ic_partial_secure" />

        <TextView
                android:id="@+id/login_txt"
                style="@style/estilo_texto"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margen32"
                android:layout_marginTop="@dimen/margen_linea"
                android:layout_marginEnd="@dimen/margen32"
                android:text="@={usuario.nombre}"
                android:textAlignment="center"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/imageView2" />


        <EditText
                android:id="@+id/pass_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margen32"
                android:layout_weight="1"
                android:background="@null"
                android:ems="10"
                android:enabled="false"
                android:hint="@string/code_pass"
                android:inputType="textPassword"
                android:text="@={usuario.pass}"
                android:textAlignment="center"
                app:layout_constraintBaseline_toBaselineOf="@+id/checkBox"
                app:layout_constraintEnd_toStartOf="@+id/checkBox"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toStartOf="parent" />

        <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen32"
                android:layout_marginEnd="@dimen/margen8"
                android:layout_weight="1"
                android:text="@string/btn_ver"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintStart_toEndOf="@+id/pass_txt"
                app:layout_constraintTop_toBottomOf="@+id/login_txt" />

        <Button
                android:id="@+id/button_cerrar"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="@dimen/margen32"
                android:layout_marginEnd="@dimen/margen32"
                android:layout_marginBottom="@dimen/margen32"
                android:text="@string/cerrar"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

Por otra parte, hemos aprovechado estos cambios de diseño para mejorar el código del controlador del CheckBox en el archivo de la actividad LoginCheck, que estaba de esta manera:

binding.checkBox.setOnClickListener(View.OnClickListener {
    if (binding.checkBox.isChecked) {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT
    } else {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
    }
})

para dejarlo así (lo que hace innecesaria la instrucción de importación import android.view.View):

binding.checkBox.setOnClickListener {
    if (binding.checkBox.isChecked) {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT
    } else {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
    }
}

Data Binding para mostrar datos

2019-08-08T18:03:00.001+02:00

En la entrada anterior (Fundamentos de Android: Data Binding) vimos cómo utilizar Data Binding para acceder a los elementos del diseño desde la actividad. Pero además podemos usar data binding para mostrar datos haciendo que los objetos de una data class (ver Clase de datos o data class en Kotlin) estén directamente disponibles para un elemento del diseño.

Para verlo con un ejemplo vamos a continuar con el proyecto ControlAcceso como lo dejamos en la entrada sobre data binding.

Vemos que en el archivo activity_login_check.xml el TextView login_txt muesra el texto desde un recurso de texto (@string/bienvenido) que luego es cambiado por la actividad (binding.loginTxt.text = getString(R.string.bienvenido, user)) con el dato recuperado que se ha enviado desde la primera actividad con la clase Intent. Nuestro objetivo será que la segunda actividad almacene en la clase Usuario el dato recibido y que después el TextView del diseño remplace el recurso de texto por una referencia al valor almacenado en la data class.

Primero crearemos una data class para el nombre de usuario y la contraseña en un nuevo archivo llamado Usuario.kt en el directorio java (sobre java/com/android/controlacceso -> New -> Kotlin File/Class):

data class Usuario(var nombre: String = "", var pass: String = "")

Para añadir los datos al diseño, abrimos activity_login_check.xml en modo Text, e insertamos la etiqueta <data> </data> en la parte superior del diseño entre las etiquetas <layout> y <LinearLayout>:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

    </data>

    <LinearLayout

Dentro de las etiquetas <data> podemos declarar variables con un nombre y un parámetro de tipo con la referencia completa a la clase:

<data>
    <variable
            name="usuario"
            type="com.android.controlacceso.Usuario" />
</data>

Ahora en lugar de utilizar el recurso de texto para el TextView, podemos hacer referencia a la variable usuario. Así, donde tenemos

android:text="@string/bienvenido"

escribimos en su lugar:

android:text="@={usuario.nombre}"

Donde la directiva @={} sirve para obtener los datos a los que se hace referencia dentro de las llaves, y usuario hace referencia a la variable que definimos antes con el mismo nombre (que apunta a la clase Usuario) y obtiene el valor de la propiedad nombre de esa clase.

En el archivo LoginCheck.kt, antes de onCreate, creamos una variable privada de la clase Usuario:

private lateinit var usuario: Usuario

Una vez que la segunda actividad recibe el valor desde la primera actividad, le asignamos a la variable usuario una instancia de la clase Usuario con ese valor:

usuario = Usuario(user.toString())

Y utilizando el objeto de enlace (binding object) asignamos el valor de esta variable a la variable del mismo nombre que hemos creado en el archivo de diseño:

binding.usuario = usuario

Y por tanto ya no necesitamos ajustar el valor del TextView desde la actividad puesto que es accesible directamente desde el diseño:

// binding.loginTxt.text = getString(R.string.bienvenido, user)

Esto puede mostrar un error porque se necesita actualizar el objeto de enlace después de realizar estos cambios; intenta resolverlo actualizando los archivos generados desde Build -> Clean Project seguido de Build -> Rebuild Project.

Ejecutamos en el emulador para comprobar que funciona.

También podríamos hacer que el usuario pudiera ver la contraseña introducida una vez que ha iniciado sesión. Para ello, repitiendo los pasos anteriores, debemos:

Enviar el valor de la contraseña desde la primera a la segunda actividad.
Vincular el valor de una view a la variable del diseño, y concretamente a la propiedad de la clase que nos interesa.
En la actividad, crear una instancia de la clase Usuario con los valores recibidos, y almacenarla en una variable (y vincular su valor a la variable de diseño).

Para la primera tarea, utilizamos la clase Bundle para enviar varios datos a la vez:

val intento1 = Intent(this, LoginCheck::class.java)
val bundle = Bundle()
bundle.putString("usuario", binding.userInput.text.toString())
bundle.putString("pass", binding.passInput.text.toString())
intento1.putExtra("datosUsuario", bundle)
startActivity(intento1)

En el archivo de diseño activity_login_check.xml ya tenemos creada una variable que apunta a la clase Usuario de la data class. Entonces en el mismo archivo, creamos un nuevo elemento (en este caso un EditText) y vinculamos su valor a esa variable (a la propiedad pass de la clase Usuario). Además junto a él creamos un CheckBox para mostrar / ocultar la contraseña. Ambos elementos contenidos en un LinearLayout horizontal sobre el botón CERRAR:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

    <EditText
            android:id="@+id/pass_txt"
            style="@style/estilo_texto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="@null"
            android:ems="10"
            android:enabled="false"
            android:inputType="textPassword"
            android:text="@={usuario.pass}"
            android:textAlignment="center" />

    <CheckBox
            android:id="@+id/checkBox"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/btn_ver" />

</LinearLayout>

Observa que en el EditText hemos ajustado el atributo background a null para que no muestre la línea inferior característica de los elementos editables, el atributo enabled a false para que no sea editable por el usuario y el atributo inputType a textPassword para que por defecto no muestre el texto de la contraseña.

En la actividad correspondiente (LoginCheck), recibimos los datos desde la primera actividad y con ellos creamos una instancia de la clase usuario que almacenamos en la variable declarada previamente:

val bundle = intent.getBundleExtra("datosUsuario")
val user = bundle?.getString("usuario").toString()
val pass = bundle?.getString("pass").toString()

usuario = Usuario(user, pass)

Además, como ya teníamos, a través del objeto de enlace asignamos a la variable del diseño los valores de la instancia de clase:

binding.usuario = usuario

Por último, añadimos un controlador para el CheckBox para que cambie el tipo de datos introducidos en el EditText en función de si está o no activado:

binding.checkBox.setOnClickListener(View.OnClickListener {
    if (binding.checkBox.isChecked) {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT
    } else {
        binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
    }
})

A continuación se muestran los códigos de los archivos de las actividades y de los diseños:

// MainActivity.kt
package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.controlacceso.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        binding.entrarBtn.setOnClickListener {
            if (!esNuloVacio(binding.userInput.text.toString()) && !esNuloVacio(binding.passInput.text.toString())) {
                val intento1 = Intent(this, LoginCheck::class.java)
                val bundle = Bundle()
                bundle.putString("usuario", binding.userInput.text.toString())
                bundle.putString("pass", binding.passInput.text.toString())
                intento1.putExtra("datosUsuario", bundle)
                binding.apply {
                    userInput.setText("")
                    passInput.setText("")
                }
                startActivity(intento1)
            } else {
                Toast.makeText(
                    this, "ERROR: Usuario y contraseña requeridos.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun esNuloVacio(str: String?): Boolean {
        return !(str != null && !str.trim().isEmpty())
    }
}

<!--- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".MainActivity">

        <LinearLayout
                android:id="@+id/linearLayout"
                style="@style/estilo_linear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

            <TextView
                    android:id="@+id/user_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/margen_txt_end1"
                    android:text="@string/usuario" />

            <EditText
                    android:id="@+id/user_input"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="@string/usuario"
                    android:inputType="textPersonName" />
        </LinearLayout>

        <LinearLayout
                android:id="@+id/linearLayout2"
                style="@style/estilo_linear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

            <TextView
                    android:id="@+id/pass_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginEnd="@dimen/margen_txt_end2"
                    android:text="@string/contraseña" />

            <EditText
                    android:id="@+id/pass_input"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:ems="10"
                    android:hint="@string/contraseña"
                    android:inputType="textPassword" />
        </LinearLayout>

        <Button
                android:id="@+id/entrar_btn"
                style="@style/Widget.AppCompat.Button.Colored"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/btn_entrar" />

    </LinearLayout>

</layout>

// LoginCheck.kt
package com.android.controlacceso

import android.os.Bundle
import android.text.InputType
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.controlacceso.databinding.ActivityLoginCheckBinding

class LoginCheck : AppCompatActivity() {

    private lateinit var binding: ActivityLoginCheckBinding

    private lateinit var usuario: Usuario

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_login_check)

        val bundle = intent.getBundleExtra("datosUsuario")
        val user = bundle?.getString("usuario").toString()
        val pass = bundle?.getString("pass").toString()

        usuario = Usuario(user, pass)
        binding.usuario = usuario

        binding.checkBox.setOnClickListener(View.OnClickListener {
            if (binding.checkBox.isChecked) {
                binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT
            } else {
                binding.passTxt.inputType = InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
            }
        })

        binding.buttonCerrar.setOnClickListener {
            finish()
        }
    }
}

<!--- activity_login_check.xml -->
<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
                name="usuario"
                type="com.android.controlacceso.Usuario" />
    </data>

    <LinearLayout
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".LoginCheck">

        <TextView
                android:id="@+id/acceso_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/login_check"
                android:textAlignment="center" />

        <TextView
                android:id="@+id/login_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@={usuario.nombre}"
                android:textAlignment="center" />

        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

            <EditText
                    android:id="@+id/pass_txt"
                    style="@style/estilo_texto"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@null"
                    android:ems="10"
                    android:enabled="false"
                    android:inputType="textPassword"
                    android:text="@={usuario.pass}"
                    android:textAlignment="center" />

            <CheckBox
                    android:id="@+id/checkBox"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:text="@string/btn_ver" />

        </LinearLayout>

        <Button
                android:id="@+id/button_cerrar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/margen_linea"
                android:text="@string/cerrar" />

    </LinearLayout>

</layout>

Fundamentos de Android: Data Binding

2019-08-06T17:48:00.001+02:00

Hasta ahora hemos visto dos maneras para acceder a los elementos visuales del diseño (views) desde la actividad:

El clásico método findViewById con la referencia del recurso del elemento como argumento, por ejemplo:

val dadoBoton: Button = findViewById(R.id.dado_boton)

Y el "método síntético" (synthetics) de las extensiones de Android de esta manera:

// requiere import kotlinx.android.synthetic.main.activity_main.*
val dadoBoton: Button = dado_boton

Sin duda la segunda opción resulta más elegante y práctica, y cada vez ha sido más usada tendiendo a sustituir a la primera. No obstante, realmente nunca ha sido una práctica formalmente recomendada; su API no fue construida por Google y es parte de las Extensiones creadas por JetBrains, y aunque Google en ocasiones también la ha usado, finalmente ha establecido que no es la mejor práctica (más información, en inglés, en The Argument Over Kotlin Synthetics).

Y aunque a este método se le han achacado problemas de seguridad y rendimiento, parece que en este criterio de Google ha podido influir el hecho de que no está disponible en Java, por lo que pone en cuestión la interoperabilidad de Kotlin con este lenguaje de programación. Pese a todo, en general sigue siendo una buena opción en Kotlin.

Ante esta situación han ido apareciendo algunas alternativas para resolver, con sus ventajas e inconvenientes, esta situación, como son Data Binding y Butterknife. Y aunque al parecer el sucesor definitivo será View Binding, que estará disponible en próximas versiones de Android Studio como anunció Yigit Boyar en Google I/O'19 (What's New in Architecture Components), de momento en esta entrada trataremos del uso de Data Binding, la opción que actualmente defiende Google.

Hay que tener en cuenta que cada vez que se usa findViewById (y también synthetics) para buscar un elemento (view), el sistema Android debe atravesar en tiempo de ejecución toda la jerarquía de elementos para localizarlo, lo que no es un problema en aplicaciones con diseños pequeños, pero en aplicaciones mayores y complejas puede llevar el tiempo suficiente como para ralentizar notablemente la aplicación (el almacenamiento de views en variables puede ayudar, pero tampoco es la solución).

Una solución es crear un objeto que contenga una referencia a cada view y que este objeto, llamado objeto de enlace (binding object), pueda ser utilizado por toda la aplicación. Esta técnica se llama enlace o vínculo de datos (data binding) y se basa en que, una vez que se ha creado el objeto de enlace para la aplicación, se puede acceder a las views y a otros datos a través de ese objeto sin tener que atravesar la jerarquía de vistas o buscar los datos.

En general el vínculo de datos o data binding tiene los siguientes beneficios:

El código es más corto, más fácil de leer y más fácil de mantener que el código que usa findByView().
Los datos y los elementos de diseño están claramente separados.
El sistema Android solo atraviesa la jerarquía de vistas una vez para obtener cada vista, lo que ocurre durante el inicio de la aplicación y no en tiempo de ejecución cuando el usuario interactúa con la aplicación.
Se obtiene seguridad de tipo para acceder a las views, lo que significa que el compilador valida los tipos durante la compilación y arroja un error si intenta asignar el tipo incorrecto a una variable.

Para verlo con un ejemplo vamos a partir del código del proyecto ControlAcceso que vimos en Fundamentos de Android: comunicación entre actividades. Cocretamente, los archivos de las actividades y del diseño quedaron así:

// MainActivity.kt
package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        entrar_btn.setOnClickListener {
            if (!esNuloVacio(user_input.text.toString()) && !esNuloVacio(pass_input.text.toString())) {
                val intento1 = Intent(this, LoginCheck::class.java)
                intento1.putExtra("usuario", user_input.text.toString())
                user_input.setText("")
                pass_input.setText("")
                startActivity(intento1)
            } else {
                Toast.makeText(
                    this, "ERROR: Usuario y contraseña requeridos.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun esNuloVacio(str: String?): Boolean {
        return !(str != null && !str.trim().isEmpty())
    }
}

<!--- activity_main.xml -->
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

    <LinearLayout
            android:id="@+id/linearLayout"
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <TextView
                android:id="@+id/user_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/margen_txt_end1"
                android:text="@string/usuario" />

        <EditText
                android:id="@+id/user_input"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/usuario"
                android:inputType="textPersonName" />
    </LinearLayout>

    <LinearLayout
            android:id="@+id/linearLayout2"
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

        <TextView
                android:id="@+id/pass_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/margen_txt_end2"
                android:text="@string/contraseña" />

        <EditText
                android:id="@+id/pass_input"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/contraseña"
                android:inputType="textPassword" />
    </LinearLayout>

    <Button
            android:id="@+id/entrar_btn"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/btn_entrar" />

</LinearLayout>

// LoginCheck.kt
package com.android.controlacceso

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_login_check.*

class LoginCheck : AppCompatActivity() {

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

        val bundle = intent.extras
        val user = bundle?.getString("usuario")

        login_txt.text = getString(R.string.bienvenido, user)

        button_cerrar.setOnClickListener {
            finish()
        }
    }
}

<!--- activity_login_check.xml -->
<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        style="@style/estilo_linear"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".LoginCheck">

    <TextView
            android:id="@+id/acceso_txt"
            style="@style/estilo_texto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/login_check"
            android:textAlignment="center" />

    <TextView
            android:id="@+id/login_txt"
            style="@style/estilo_texto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/bienvenido"
            android:textAlignment="center" />

    <Button
            android:id="@+id/button_cerrar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/cerrar" />
</LinearLayout>

A partir de este código vamos a configurar el vínculo de datos (data binding) y lo vamos a usar para reemplazar las referencias a los elementos del diseño con llamadas al objeto de enlace o binding object.

Para usar data binding, lo primero que tenemos que hacer es habilitarlo en el archivo Gradle (por defecto no está habilitado porque aumenta el tiempo de compilación y puede afectar al tiempo de inicio de la aplicación).

Abrimos app/build.gradle (Module: app) y dentro de la sección de android añadimos una sección de dataBinding y lo habilitamos configurando enabled en true:

dataBinding {
    enabled = true
}

Entonces sincronizamos el proyecto desde el aviso que ha aparecido junto a la barra de herramientas con el texto Gradle files have changed... Sync Now. En caso de que no aparezca este aviso, puedes sincronizar desde File > Sync Project with Gradle Files.

Después, para trabajar con data binding debemos ajustar el diseño XML con una etiqueta <layout> que será la clase raíz que contendrá el resto de elementos y grupos de elementos, lo que permite que el binding object pueda reconocer los elementos que contiene. Para ello abrimos el archivo layout/activity_main.xml en vista Text y añadimos <layout> y </layout> como la etiqueta más externa alrededor del <LinearLayout>:

<layout>
   <LinearLayout ... >
   ...
   </LinearLayout>
</layout>

Si necesitas recolocar la sangría del código, lo puedes hacer desde Code > Reformat code. Como las declaraciones de espacio de nombres deben estar en la etiqueta más externa, las cortamos del <LinearLayout> y las pegamos en la nueva etiqueta <layout>:

<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            tools:context=".MainActivity">

Bien, ahora vamos a crear un objeto de enlace (binding object) en la actividad principal de modo que nos sirva para acceder a las views. Abrimos el archivo MainActivity.tk y antes de onCreate(), a nivel superior, creamos una varible (habitualmente llamada binding) para almacenar este objeto:

private lateinit var binding: ActivityMainBinding

El tipo de la variable binding, la clase ActivityMainBinding, es creado específicamente para esta actividad y su nombre se deriva del nombre del archivo de diseño, que es activity_main, más Binding. Al crear esta variable, Android Studio ha solicitado la importación de ActivityMainBinding, que se ve así:

import com.android.controlacceso.databinding.ActivityMainBinding

También tenemos que reemplazar la actual función setContentView() con una instrucción que crea el objeto de enlace y asocia, con el método setContentView de la clase DataBindingUtil (que tiene que ser importada), la actividad de MainActivity (this) con el diseño de activity_main:

//setContentView(R.layout.activity_main)
binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

Ahora ya podemos reemplazar en el código todas las llamadas a las views con referencias mediante el objeto de enlace (binding data), teniendo en cuenta que el compilador genera los nombres de las views en el objeto a partir de sus ID, transformando sus nombres en formato camelCase (por ejemplo, done_button será doneButton en el binding object). Así, en nuestro código tenemos la llamada a entrar_btn que la podemos remplazar por binding.entrarBtn de esta manera:

//entrar_btn.setOnClickListener {
binding.entrarBtn.setOnClickListener {

Repetimos con el resto de llamadas a los elementos del diseño, quedando el archivo MainActivity.tk así (se han mantenido comentadas las llamadas a las views):

package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.controlacceso.databinding.ActivityMainBinding
//import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //setContentView(R.layout.activity_main)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)

        //entrar_btn.setOnClickListener {
        binding.entrarBtn.setOnClickListener {
            //if (!esNuloVacio(user_input.text.toString()) && !esNuloVacio(pass_input.text.toString())) {
            if (!esNuloVacio(binding.userInput.text.toString()) && !esNuloVacio(binding.passInput.text.toString())) {
                val intento1 = Intent(this, LoginCheck::class.java)
                //intento1.putExtra("usuario", user_input.text.toString())
                intento1.putExtra("usuario", binding.userInput.text.toString())
                //user_input.setText("")
                binding.userInput.setText("")
                //pass_input.setText("")
                binding.passInput.setText("")
                startActivity(intento1)
            } else {
                Toast.makeText(
                    this, "ERROR: Usuario y contraseña requeridos.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun esNuloVacio(str: String?): Boolean {
        return !(str != null && !str.trim().isEmpty())
    }
}

Como vemos, ya no es necesaria la importación de kotlinx.android.synthetic.

Aplicamos los mismos pasos para la actividad LoginCheck.kt y su archivo de diseño activity_login_check.xml:

Etiqueta <layout> en el archivo de diseño como elemento raíz, con las correspondientes declaraciones de espacio de nombres.
Creamos la varible que almacena el binding object (e importamos la clase correspondiente).
Creamos el objeto de enlace y asociamos la actividad con su diseño.
Remplazamos las llamadas a las views por referencias en el objeto.

Nota: si Android Studio advierte de algún error en el paso 2, y concretamente de un error como Unresolved reference: databinding..., intenta resolverlo actualizando los archivos generados desde Build -> Clean Project seguido de Build > Rebuild Project. Si no se soluciona, prueba con File > Invalidate Caches/Restart para realizar una limpieza más exhaustiva.

Aplicando estos cambios, el archivo LoginCheck.kt nos queda así:

package com.android.controlacceso

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import com.android.controlacceso.databinding.ActivityLoginCheckBinding

class LoginCheck : AppCompatActivity() {

    private lateinit var binding: ActivityLoginCheckBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = DataBindingUtil.setContentView(this, R.layout.activity_login_check)

        val bundle = intent.extras
        val user = bundle?.getString("usuario")

        binding.loginTxt.text = getString(R.string.bienvenido, user)

        binding.buttonCerrar.setOnClickListener {
            finish()
        }
    }
}

Ejecuta la aplicación en el emulador para comprobar que funciona. De esta manera hemos conseguido utilizar referencias de los elementos del diseño de una manera más sofisticada con binding. Además, en ocasiones podemos agrupar instrucciones binding usando la función apply{}:

// binding.userInput.setText("")
// binding.passInput.setText("")
binding.apply {
    userInput.setText("")
    passInput.setText("")
}

Fundamentos de Android: Diseño con ConstraintLayout

2019-08-04T16:35:00.000+02:00

Hasta ahora en nuestros diseños hemos utilizado LinearLayout como contenedor de elementos. En esta entrada vamos a utilizar ConstraintLayout para realizar el diseño de una aplicación sencilla, además de repasar otros conceptos ya conocidos como, por ejemplo, el manejo de recursos de distinto tipo (dimensiones, texto, estilos, fuentes...) y la interacción del usuario que puedes revisar en entradas previas.

Un ConstraintLayout es un contenedor de elementos o ViewGroup (grupo de vistas), disponible a partir de API 9, que permite posicionar y dimensionar otros elementos o vistas (views) de manera flexible. Este tipo de contenedor permite crear diseños complejos sin otros grupos anidados. Además, es muy fácil de usar directamente desde el editor de diseño, arrastrando los elementos sin necesidad de editar el código XML.

Podemos entender un constraint (quizá en este contexto se puede traducir como fijación o sujeción) como una conexión o alineación entre dos elementos en la interfaz de usuario; y cada una conecta o alinea un elemento con otro, con el elemento padre o con una guía no visible. En este tipo de diseño, posicionamos cada elemento definiendo al menos una referencia horizontal y vertical respecto a otros elementos.

Vamos a practicar con este diseño creando un nuevo proyecto en Android Studio a partir de una actividad vacía (Empty Activity). Como sabemos, esta plantilla utiliza en el diseño un ConstraintLayout como grupo raíz por defecto (además de un TextView con el texto "Hello World!"):

Abrimos layout/activity_main.xml en la vista Design. Como vamos a ajustar el diseño manualmente, debemos desactivar la conexión automática de elementos; nos aseguramos que está desactivada desde un botón en la barra de herramientas como se ve en la imagen:

Junto al botón Autoconnect está el botón para establecer los márgenes por defecto (Default Margins) cuyo valor predeterminado es 8dp; lo ajustamos a 16dp, para que a partir de ahora se aplique a los nuevos constraints que utilicemos.

Seleccionamos el TextView y nos fijamos que en el panel de atributos vemos el inspector de elementos (view inspector), que solo está disponible para los elementos contenidos en un ConstraintLayout. Este inspector incluye controles para ajustar atributos del diseño como los constraints, los tipos de constraint, el descentramiento o desviación horizontal y vertical (constraint bias) y los márgenes.

Vamos a practicar con el inspector de elementos o vistas. Por ejemplo, el atributo de desviación (constraint bias) posiciona el elemento a lo largo de los ejes horizontal y vertical (por defecto todo elemento se centra con un valor del 50%). Para cambiar los valores debemos arrastrar los controles deslizantes sobre los ejes y comprobamos que simultáneamente cambia la posición del TextView en los ejes de la pantalla.

Observamos en el inspector de vistas que el valor para los cuatro márgenes (izquierdo, derecho, superior e inferior) es 0; desde el desplegable, a los tres primeros lo cambiamos a 16 (que es 16dp). Podemos comprobar en la vista Text que se han añadido estos valores:

android:layout_marginLeft="16dp"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"

En el inspector de vistas, las flechas dentro del cuadrado representan un tipo de constraint, con tres tipos posibles que cambian sucesivamente al pulsar sobre ellas:

Wrap Content: el elemento se expande solo lo necesario para ajustarse a su contenido.
Fixed: se especifica una dimensión fija para los márgenes del elemento.
Match Constraints: el elemento se expande tanto como sea posible (teniendo en cuenta los márgenes propios). Este tipo es muy flexible ya que permite que el diseño se adapte a diferentes tamaños y orientaciones de pantalla.

En nuestra aplicación, cambiamos izquierda y derecha a Match Constraints:

En el inspector de vistas, eliminamos la fijación inferior pulsando en el punto Delete Bottom Constraint. Ahora pasamos a la vista Text, y en el atributo android:layout_marginLeft extraemos el recurso de dimensión con el nombre margen_ancho:

Y lo aplicamos a los márgenes superior y derecho:

android:layout_marginLeft="@dimen/margen_ancho"
android:layout_marginTop="@dimen/margen_ancho"
android:layout_marginRight="@dimen/margen_ancho"

Ahora, desde el panel de atributos, le podemos agregar una tipografía desplegando el campo fontFamily y seleccionando More Fonts para abrir la ventana Resources; buscamos roboto y seleccionamos Roboto -> Regular; y la añadimos al proyecto:

Esto agrega la carpeta res/font que contiene el archivo de fuente roboto.ttf. Además, en la vista Text tenemos el atributo android:fontFamily="@font/roboto". En el atributo textSize le asignamos un valor de 24sp para el tamaño de la fuente y con el botón de los tres puntos creamos un nuevo recurso de dimensión:

Ahora en values/styles.xml podemos añadir un estilo personalizado como éste (fondo y texto de colores determinados, alineado al centro, de tamaño establecido en la dimensión box_text_size, negrita y fuente establecida en font/roboto):

<style name="whiteBox">
   <item name="android:background">@android:color/holo_green_light</item>
   <item name="android:textAlignment">center</item>
   <item name="android:textSize">@dimen/box_text_size</item>
   <item name="android:textStyle">bold</item>
   <item name="android:textColor">@android:color/white</item>
   <item name="android:fontFamily">@font/roboto</item>
</style>

Ahora en el atributo text (el que no tiene el icono de llave inglesa) pulsamos sobre los tres puntos para abrir la ventana Resources; y agregamos un nuevo recurso de texto:

Volvemos al TextView en vista de Design, y le aplicamos el estilo whiteBox:

Puesto que este estilo ya contiene el atributo android:fontFamily con el valor Roboto, en el TextView, en modo Text, podemos eliminar este atributo. Volvemos a la vista Design y pulsamos en el botón Device for preview (D) que por defecto muestra Pixel, para desplegar una lista de dispositivos, y seleccionamos algunos para ver cómo el TextView se adapta a las distintas pantallas. Podremos ver algo así:

Bien, ahora añadimos otro TextView bajo el que ya tenemos (arrastrándolo desde la paleta directamente a la vista previa) y lo alineamos manualmente al margen izquierdo. En el editor de diseño, con el nuevo TextView seleccionado, nos situamos sobre el punto superior, que es el controlador de sujeción (constraint handle), y entonces se vuelve verde y parpadea:

Entonces creamos un Top Constraint conectando la parte superior del TextView con la parte inferior del otro TextView:

Al crear la conexión entre ambos elementos, automáticamente el margen superior se ajusta a 16dp porque es el valor por defecto que configuramos antes. Repetimos el mismo proceso para crear una fijación en el lado izquierdo respecto al elemento raíz. Ten en cuenta que además de utilizar directamente el elemento desde el editor de diseño, también podemos crear fijaciones desde el inspector de vistas:

Desde el panel de atributos, ajustamos algunos valores así:

ID: box_dos_txt
layout_height: 130dp
layout_width: 130dp
text: @string/box_dos
style: @style/whiteBox

Ten en cuenta que estamos utilizando dimensiones fijas para la altura y anchura del TextView, pero suele ser más recomendable usar fijaciones flexibles y relativas, por ejemplo match_constraint o wrap_content, puesto que en general cuanto más elementos de tamaño fijo tiene una aplicación menos adaptable será su diseño para diferentes configuraciones de pantalla.

Otra forma de crear fijaciones es con una cadena de elementos (chain), esto es, agrupando o encadenando elementos vinculados entre sí con sujeciones bidireccionales. Por ejemplo, el siguiente diagrama muestra dos elementos que están fijados entre sí, lo que crea una cadena horizontal:

El primer elemento de una cadena se conoce como cabeza o cabecera de la cadena (head of the chain), y sus atributos controlan, posicionan y distribuyen todas los elementos en la cadena. Para cadenas horizontales, la cabeza es la vista más a la izquierda mientras que para cadenas verticales, la cabeza es la vista superior.

Se pueden aplicar distintos estilos a las cadenas para definir la forma en que los elementos encadenados se extienden y alinean:

Spread: Después de tener en cuenta los márgenes, los elementos se distribuyen uniformemente en el espacio disponible (es el estilo por defecto).
Spread inside: El primer y el último elementos se adjuntan al elemento padre en cada extremo de la cadena, mientras que el resto de elementos se distribuyen uniformemente en el espacio disponible.
Weighted: Los elementos cambian de tamaño para llenar todo el espacio en función de los valores establecidos en los atributos layout_constraintHorizontal_weight o layout_constraintVertical_weight. De manera predeterminada, el espacio se distribuye uniformemente entre cada elemento según match constraints (0dp), pero se puede asignar un valor a cada elemento para ocupar más o menos espacio.
Packed: Los elementos se agrupan (después de tener en cuenta los márgenes) y luego se puede ajustar la posición de toda la cadena cambiando la desviación (bias) de la cabeza.

Podemos aplicar uno de estos estilos a una cadena desde el editor de diseño en el atributo layout_constraintHorizontal_chainStyle o en el atributo layout_constraintVertical_chainStyle para la cabeza de la cadena, o bien desde el código XML, por ejemplo:

// Horizontal spread chain
app:layout_constraintHorizontal_chainStyle="spread"

// Vertical spread inside chain
app:layout_constraintVertical_chainStyle="spread_inside"

// Horizontal packed chain
app:layout_constraintHorizontal_chainStyle="packed"

Para crear una cadena vertical en nuestra aplicación, en el archivo activity_main.xml, vista Design, creamos otros tres elementos TextView arrastrándolos a la derecha del TextView box_dos_txt:

Como hicimos antes con los otros TextView, ajustamos sus atributos de id, text y style. Observa que para aplicar el mismo estilo a los tres (@style/whiteBox), desde el árbol de componentes puedes seleccionarlos conjuntamente y aplicarlo de una vez.

Ahora, para crear la cadena, desde el editor de diseño seleccionamos los tres elementos y con el botón secundario pulsamos en Chains > Create Vertical Chain. Esto crea una cadena vertical que se extiende desde Box Uno hasta el final del diseño.

Seleccionamos el elemento Box Tres y creamos una sujeción desde su parte superior hasta la parte superior del Cuadro Dos (esta nueva sujeción reemplaza la sujeción superior existente por lo que no es necesario eliminarla explícitamente):

Creamos otra sujeción desde la parte inferior del Box Cinco hasta la parte inferior del Box Dos:

También creamos una sujeción desde el lado izquierdo del Box Tres al lado derecho del Box Dos. Repetimos para los Boxes Cuatro y Cinco. Además creamos sujeciones del lado derecho de estos tres elementos al lado derecho del diseño, y para los tres cambiamos el atributo layout_width a match_constraint (que es lo mismo que poner el valor 0dp).

Para separar estos tres elementos entre sí, agregamos márgenes asignando al atributo Layout_Margin el valor que tenemos guardado en el recurso de dimensiones llamado margen_ancho; para los tres elementos lo aplicamos a Layout_Margin start y end y para el Box Cuatro también a top y bottom (y eliminamos el resto de márgenes de estos elementos).

Podemos comprobar que el diseño se adapta a cambios en la pantalla ajustando la orientación a Landscape (horizontal) de la vista previa desde el icono Orientation for Preview (O) de la barra de herramientas:

Ahora vamos a añadir cierta interacción del usuario para que cuando toque algunos elementos cambien de color. Para ello primero cambiaremos el color de todos los elementos de texto a blanco, desde values/styles.xml, en el estilo whiteBox cambiamos el color de fondo (android:background) a blanco:

<item name="android:background">@android:color/white</item>

En MainActivity.kt, después de la función onCreate(), escribimos una función llamada pintarView con un View como parámetro que será el elemento que cambiará de color:

private fun pintarView(view: View) { }

Dentro de esta función podemos utilizar una instrucción when con el id de recurso del elemento utilizado como argumento, de modo que cuando el bloque when verifique el id del elemento se aplicará el cambio de color de fondo para ese elemento con el método setBackgroundColor() y como argumento constantes de la clase Color (requiere import android.graphics.Color):

private fun pintarView(view: View) {
    when (view.id) {
        R.id.box_uno_txt -> view.setBackgroundColor(Color.DKGRAY)
        R.id.box_dos_txt -> view.setBackgroundColor(Color.GRAY)
        R.id.box_tres_txt -> view.setBackgroundColor(Color.BLUE)
        R.id.box_cuatro_txt -> view.setBackgroundColor(Color.MAGENTA)
        R.id.box_cinco_txt -> view.setBackgroundColor(Color.BLUE)
    }
}

También queremos que si el usuario toca el fondo, éste cambie a un tono de gris claro que revelará los contornos de los elementos de texto, lo que orientará al usuario sobre dónde tocar. Para ello, si ninguna de las condiciones de when se verifica, sabemos que el usuario ha tocado el fondo, por lo que añadimos una instrucción else con un color gris:

else -> view.setBackgroundColor(Color.LTGRAY)

Otra posible manera de escribir lo mismo es:

val color = when (view.id) {
    R.id.box_uno_txt -> Color.DKGRAY
    R.id.box_dos_txt -> Color.GRAY
    R.id.box_tres_txt -> Color.BLUE
    R.id.box_cuatro_txt -> Color.MAGENTA
    R.id.box_cinco_txt -> Color.BLUE
    else -> Color.LTGRAY
}
view.setBackgroundColor(color)

También debemos añadir una identificación (id) al elemento raíz del diseño para cambiar su color; para ello desde activity_main.xml, asignamos un valor al ID del ConstraintLayout.

Ahora nos falta detectar los clics, y para ello escribimos la función clicView() para que pueda invocar a la función pintarView para cada elemento pulsado. Esta función es invocada desde onCreate:

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

    clicView()
}

private fun clicView() { }

En la función clicView declaramos una lista con los elementos que nos interesa que tengan una acción al ser pulsados:

val clickableViews = listOf(box_uno_txt, box_dos_txt, box_tres_txt, box_cuatro_txt, box_cinco_txt, constraint_layout)

Así, con un bucle for podemos crear rápidamente un controlador de clic para cada elemento:

for (item in clickableViews) {
    item.setOnClickListener { pintarView(it) }
}

Ejecuta la aplicación en el emulador para comprobar que funciona. De momento el código de MainActivity.tk queda así:

package com.android.colores

import android.graphics.Color
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        clicView()
    }

    private fun clicView() {
        val clickableViews =
            listOf(box_uno_txt, box_dos_txt, box_tres_txt, box_cuatro_txt, box_cinco_txt, constraint_layout)

        for (item in clickableViews) {
            item.setOnClickListener { pintarView(it) }
        }
    }

    private fun pintarView(view: View) {
        /*when (view.id) {
            R.id.box_uno_txt -> view.setBackgroundColor(Color.DKGRAY)
            R.id.box_dos_txt -> view.setBackgroundColor(Color.GRAY)
            R.id.box_tres_txt -> view.setBackgroundColor(Color.BLUE)
            R.id.box_cuatro_txt -> view.setBackgroundColor(Color.MAGENTA)
            R.id.box_cinco_txt -> view.setBackgroundColor(Color.BLUE)
            else -> view.setBackgroundColor(Color.LTGRAY)
        }*/

        val color = when (view.id) {
            R.id.box_uno_txt -> Color.DKGRAY
            R.id.box_dos_txt -> Color.GRAY
            R.id.box_tres_txt -> Color.BLUE
            R.id.box_cuatro_txt -> Color.MAGENTA
            R.id.box_cinco_txt -> Color.BLUE
            else -> Color.LTGRAY
        }
        view.setBackgroundColor(color)
    }
}

Otra posibilidad es usar imágenes en lugar de colores y texto, de modo que cuando el usuario toca los elementos se muestran las imágenes; en ese caso se utilizaría la función setBackgroundResource() para establecer una imagen como fondo del elemento.

Aunque funciona (hace lo que se supone que debe hacer), estaría bien añadir unas mínimas instrucciones que indiquen al usuario cómo usar la aplicación. Para ello, vamos a crear dos TextView bajo el resto de elementos, uno con la etiqueta 'Cómo jugar' y el otro con la información. El primero lo creamos con estos atributos:

ID: etiqueta_info
text: @string/etiqueta_info
fontFamily: @font/roboto
textSize: @dimen/box_text_size
textStyle: B (bold)

Y creamos una sujeción desde su lado izquierdo hasta el elemento raíz, y a Layout_Margin start le asignamos el valor del recurso @dimen/margen_ancho.

<TextView
    android:id="@+id/etiqueta_info"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margen_ancho"
    android:fontFamily="@font/roboto"
    android:text="@string/etiqueta_info"
    android:textSize="@dimen/box_text_size"
    android:textStyle="bold"
    app:layout_constraintStart_toStartOf="parent"
    tools:layout_editor_absoluteY="235dp" />

Vemos que el último atributo difiere en el prefijo del espacio de nombres (tools): son los conocidos como atributos de tiempo de diseño (design-time attributes). Estos atributos solo se usan y aplican durante el plan del diseño pero no en tiempo de ejecución; así, cuando se ejecuta la aplicación esos atributos son ignorados. En este caso se ha agregado este atributo porque todavía no hemos especificado una sujeción vertical para el elemento y, como sabemos, todos los elementos contenidos en un ConstraintLayout deben fijarse horizontal y verticalmente (de lo contrario, los elementos saltan a un borde del elemento padre cuando ejecuta la aplicación, y por eso el Editor de Diseño agrega atributos de tiempo de diseño para mantener el elemento en su lugar durante el diseño, y los elimina en el momento que se crea la sujeción que falta).

Creamos otro TextView a la derecha y bajo el anterior con estos atributos:

ID: info_text
layout_width: match_constraint
text: @string/text_info
fontFamily: @font/roboto

Creamos una sujeción desde su lado derecho hasta el borde derecho del elemento padre y otra desde su lado izquierdo hasta la derecha de etiqueta_info.

Ahora podemos alinear los textos de ambos TextView utilizando la sujeción de línea base (Baseline constraint), lo que suele resultar especialmente útil con elementos de texto con fuentes de distinto tamaño. Para ello, al seleccionar el elemento etiqueta_info y mantener el ratón sobre él, aparece el icono de Edit Baseline; lo pulsamos y aparece una línea verde parpadeante bajo el texto. Pulsamos sobre ella y la arrastramos hasta la linea verde de debajo del texto del elemento info_text (para eliminarla volvemos a pulsar sobre la línea, ahora roja, bajo el texto).

Como vimos, nos faltaba especificar sujeciones verticales a los nuevos elementos de texto; creamos sujeciones para el info_text: desde su parte inferior hasta la parte inferior del elemento padre y desde su parte superior hasta la parte inferior del Box Dos (como vemos, no hace falta especificar una sujeción vertical para etiqueta_info puesto que este elemento está fijado a info_text, que sí está fijado verticalmente).

Para terminar, vamos a agregar una cadena de botones. Arrastramos tres botones desde la paleta hasta la parte inferior del diseño y a cada uno le asignamos un id y un recurso de texto. Alineamos verticalemente las etiquetas de los botones entre sí creando una sujeción de línea base (Baseline constraint) desde el texto de cada botón lateral al texto del botón central. Seleccionamos los tres botones y creamos una cadena horizontal (Chains > Create Horizontal chain). Ajustamos los márgenes: el margen izquierdo del botón izquierdo, los márgenes derecho e izquierdo del botón central y el márgen derecho del botón derecho con un valor de 16dp (@dimen/margen_ancho).

Y ajustamos las sujecciones del botón central: desde su parte superior a la parte inferior del info_text y desde su parte inferior hasta la parte inferior del diseño. Cambiamos también su desviación vertical (vertical bias) a 100 para situar los botones en la parte inferior del diseño.

<Button
    android:id="@+id/boton_rojo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/margen_ancho"
    android:text="@string/boton_rojo"
    app:layout_constraintBaseline_toBaselineOf="@+id/boton_amarillo"
    app:layout_constraintEnd_toStartOf="@+id/boton_amarillo"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/boton_amarillo"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margen_ancho"
    android:layout_marginTop="16dp"
    android:layout_marginRight="@dimen/margen_ancho"
    android:layout_marginBottom="16dp"
    android:text="@string/boton_amarillo"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@+id/boton_verde"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/boton_rojo"
    app:layout_constraintTop_toBottomOf="@+id/info_text"
    app:layout_constraintVertical_bias="1.0" />

<Button
    android:id="@+id/boton_verde"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="@dimen/margen_ancho"
    android:text="@string/boton_verde"
    app:layout_constraintBaseline_toBaselineOf="@+id/boton_amarillo"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/boton_amarillo" />

Probamos el diseño en diferentes dispositivos y orientaciones. Ya solo nos queda añadir los controladores para los botones, para que cuando sean pulsados cambie el color de los TextView. Primero añadimos algunos colores al archivo values/colors.xml:

<color name="verde">#12C700</color>
<color name="rojo">#E54304</color>
<color name="amarillo">#FFFF00</color>

En MainActivity.kt, en la lista de elementos clickableViews añadimos los botones a través de sus atributos id:

val clickableViews = listOf(
    box_uno_txt, box_dos_txt, box_tres_txt, box_cuatro_txt, box_cinco_txt,
    constraint_layout,
    boton_rojo, boton_amarillo, boton_verde
)

Y en la función pintarView() dentro de la expresión when (antes de la instrucción else) escribimos el código para cambiar los colores cuando se pulsan los botones:

private fun pintarView(view: View) {
    when (view.id) {
        R.id.box_uno_txt -> view.setBackgroundColor(Color.DKGRAY)
        R.id.box_dos_txt -> view.setBackgroundColor(Color.GRAY)
        R.id.box_tres_txt -> view.setBackgroundColor(Color.BLUE)
        R.id.box_cuatro_txt -> view.setBackgroundColor(Color.MAGENTA)
        R.id.box_cinco_txt -> view.setBackgroundColor(Color.BLUE)

        R.id.boton_rojo -> box_tres_txt.setBackgroundResource(R.color.rojo)
        R.id.boton_amarillo -> box_cuatro_txt.setBackgroundResource(R.color.amarillo)
        R.id.boton_verde -> box_cinco_txt.setBackgroundResource(R.color.verde)

        else -> view.setBackgroundColor(Color.LTGRAY)
    }
}

Operaciones con colecciones VIII: obtener valores de agrupación

2019-08-01T16:47:00.002+02:00

Continuando la serie sobre operaciones con colecciones, en esta entrada vamos a ver un conjunto de funciones que realizan operaciones (de agrupación o agregación, del inglés aggregate operations) para calcular ciertos valores o índices de agrupación a partir de los datos de la colección, como por ejemplo, los valores mínimo y máximo, el número de elementos, la suma de todos los elementos, la media o la suma acumulada. Un ejemplo de operación de agrupamiento es el cálculo del promedio de temperatura a partir de los valores de temperatura diaria durante un mes.

Ejemplos de este tipo de funciones son:

min() y max(), que devuelven el elemento más pequeño y el más grande respectivamente.
average(), que devuelve el valor promedio en una colección de números.
sum(), que devuelve la suma de elementos en una colección de números.
count(), que devuelve el número de elementos en una colección.

fun main() {
    val gradosC = listOf(25.5, 26.1, 24.3, 25.2)

    println("Datos: ${gradosC.count()}")
    println("Máximo: %.1f".format(gradosC.max()))
    println("Mínimo: %.1f".format(gradosC.min()))
    println("Media: %.1f".format(gradosC.average()))
    println("Suma: %.1f".format(gradosC.sum()))
}

También hay otras funciones que sirven para recuperar los elementos más pequeños y más grandes mediante funciones de selección o mediante un comparador personalizado, como son:

maxBy() y minBy(), que mediante una función de selección devuelven el elemento con el valor más grande o más pequeño (o en caso de igualdad, el primero que encuentra).
maxWith() y minWith(), que tomando como referencia un objeto de tipo Comparator devuelven el elemento más grande o más pequeño (o en caso de igualdad, el primero que encuentra).

fun main() {
    val numeros = listOf(1, 2, 3, 4, 5)
    val moduloDos = numeros.minBy { it % 2 }
    println(moduloDos) // 2

    val strings = listOf("uno", "dos", "tres", "cuatro", "cinco")
    val masLargo = strings.maxWith(compareBy { it.length })
    println(masLargo) // cuatro
}

Además, hay funciones de suma avanzada o compleja que toman una función que opera sobre los elementos y devuelven la suma total de los valores de retorno:

sumBy() se aplica a funciones que devuelven valores de tipo Int en los elementos de la colección.
sumByDouble() funciona con funciones que devuelven valores de tipo Double.

val numeros = listOf(1, 2, 3, 4)
println(numeros.sumBy { it * 2 }) // 20
println(numeros.sumByDouble { it.toDouble() / 2 }) // 5.0

Por otro lado, existen las funciones reduce() y fold() que aplican la operación proporcionada a los elementos de la colección de forma secuencial y devuelven el resultado acumulado. La operación toma dos argumentos: el valor acumulado previamente y el elemento de colección, con la diferencia de que fold() toma un valor inicial y lo usa como el valor acumulado en el primer paso, mientras que reduce() usa en el primer paso el primer y el segundo elementos como argumentos de la operación. Más claro en un ejemplo comentado:

fun main() {
    val numeros = listOf(5, 2, 10, 4)

    val acumulado = numeros.reduce { sum, element -> sum + element }
    println(acumulado) // 5 -> (5 + 2) -> (7 + 10) -> (17 + 4) = 21

    val desdeDiez = numeros.fold(10) { sum, element -> sum + element }
    println(desdeDiez) // 10 + 5 -> (15 + 2) -> (17 + 10) -> (27 + 4) = 31

    val acumuladoDoble = numeros.fold(0) { sum, element -> sum + element * 2 }
    println(acumuladoDoble) // 5x2 -> (10 + 2x2) -> (14 + 10x2) -> (34 + 4x2) = 42

    // con reduce el primer elemento no se multiplica por 2:
    val acumuladoDobleReduce = numeros.reduce { sum, element -> sum + element * 2 }
    println(acumuladoDobleReduce) // 5 -> (5 + 2x2) -> (9 + 10x2) -> (29 + 4x2) = 37
}

Para aplicar estas funciones en el orden inverso, usamos las funciones reduceRight() y foldRight(), que operan de manera similar a reduce() y fold() pero comienzan desde el último elemento y avanzan hacia el anterior hasta el primero (además hay que tener en cuenta que en estas funciones los argumentos de la operación cambian su orden: primero va el elemento y luego el valor acumulado).

También podemos realizar operaciones que toman los índices de los elementos como parámetros con las funciones reduceIndexed() y foldIndexed() pasando el índice del elemento como primer argumento de la operación (y las funciones inversas que aplican las operaciones a los elementos de la colección de derecha a izquierda: reduceRightIndexed() y foldRightIndexed()).

fun main() {
    val numeros = listOf(5, 2, 10, 4)
    val sumaPosicionesPares = numeros.foldIndexed(0) { idx, suma, elemento -> if (idx % 2 == 0) suma + elemento else suma }
    println(sumaPosicionesPares) // 5 -> 5 -> (5 + 10) -> 15 = 15
    // idx = 0 -> 5 (suma + elemento)
    // idx = 1 -> 5 (suma)
    // idx = 2 -> 5 + 10 (suma + elemento)
    // idx = 3 -> 15 (suma)
}

Fundamentos de Android: comunicación entre actividades

2019-07-30T16:47:00.001+02:00

Hasta ahora hemos visto aplicaciones sencillas con una sola actividad pero lo más común es que una aplicación tenga varias actividades, y además que enviemos datos desde una a otra actividad. Vamos a verlo con un ejemplo.

Abrimos Android Studio y creamos un nuevo proyecto llamado 'Control Acceso' desde una actividad vacía (Empty Activity):

Adaptamos el diseño de la actividad para que se muestre algo así:

Para ello hemos utilizado elementos que ya conocemos, como LinearLayout (vertical y horizontal) como contenedores para organizar el resto de elementos, elementos de texto (TextView y EditText) y un botón (que todavía no hace nada). El panel del árbol de componentes se ve así:

También hemos utilizado recursos de texto (values/strings.xml), de colores (values/colors.xml), de dimensiones (values/dimens.xml) y de estilos (values/styles.xml). Ten en cuenta que cuando creamos estilos, Android Studio nos pregunta en qué ámbito los vamos a usar, ya sea solo para ese archivo de diseño o para todo el proyecto; como después nos interesará aplicarlo también en otra actividad, hemos seleccionado que tengan alcance para todo el proyecto. Concretamente el archivo layout/activity_main.xml es éste:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".MainActivity">

    <LinearLayout
            android:id="@+id/linearLayout"
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

        <TextView
                android:id="@+id/user_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/margen_txt_end1"
                android:text="@string/usuario" />

        <EditText
                android:id="@+id/user_input"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/usuario"
                android:inputType="textPersonName" />
    </LinearLayout>

    <LinearLayout
            android:id="@+id/linearLayout2"
            style="@style/estilo_linear"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

        <TextView
                android:id="@+id/pass_txt"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="@dimen/margen_txt_end2"
                android:text="@string/contraseña" />

        <EditText
                android:id="@+id/pass_input"
                style="@style/estilo_texto"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ems="10"
                android:hint="@string/contraseña"
                android:inputType="textPassword" />
    </LinearLayout>

    <Button
            android:id="@+id/entrar_btn"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/btn_entrar" />

</LinearLayout>

A partir de este diseño vamos a pretender que cuando el usuario introduzca un nombre de usuario y una contraseña pueda acceder a otra actividad, y desde esa nueva actividad pueda 'cerrar sesión' y volver a la primera actividad.

Para crear esta segunda actividad, desde el panel Project (vista Android) New -> Activity -> Empty Activity como se ve en la imagen:

Y le asignamos un nombre a la nueva actividad:

Ahora ya tenemos, además del archivo de la actividad app/src/main/java/com/android/controlacceso/LoginCheck.kt, su correspondiente archivo de diseño layout/activity_login_check.xml. Adaptamos el diseño de éste último para que se vea así:

Y el archivo layout/activity_login_check.xml es:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        style="@style/estilo_linear"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".LoginCheck">

    <TextView
            android:id="@+id/acceso_txt"
            style="@style/estilo_texto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/login_check"
            android:textAlignment="center" />

    <TextView
            android:id="@+id/login_txt"
            style="@style/estilo_texto"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/bienvenido"
            android:textAlignment="center" />

    <Button
            android:id="@+id/button_cerrar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/margen_linea"
            android:text="@string/cerrar" />
</LinearLayout>

Ahora que ya tenemos dos actividades, en la actividad principal tenemos que implementar la funcionalidad para activar la segunda ventana. Para ello, como vimos en la entrada Fundamentos de Android: Interacción del usuario, utilizamos la llamada a setOnClickListener para manejar el evento de clic sobre el botón:

entrar_btn.setOnClickListener { }

Y como bloque de este controlador creamos un objeto de la clase Intent con dos parámetros: la referencia a esta clase (this) y la referencia a la otra actividad (LoginCheck::class.java). Y después llamamos al método startActivity pasándole ese objeto de la clase Intent:

entrar_btn.setOnClickListener {
    val intento1 = Intent(this, LoginCheck::class.java)
    startActivity(intento1)
}

Quedando el archivo MainActivity.kt así:

package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        entrar_btn.setOnClickListener {
            val intento1 = Intent(this, LoginCheck::class.java)
            startActivity(intento1)
        }
    }
}

Ejecutamos en un emulador de Android y comprobamos que al pulsar el botón 'ENTRAR' de la actividad principal aparece la segunda ventana. Repetimos el mismo proceso en la segunda actividad para que al pulsar el botón 'CERRAR SESIÓN' volvamos a la actividad anterior, pero aunque podríamos pensar en este código:

button_cerrar.setOnClickListener {
    val intento2 = Intent(this, MainActivity::class.java)
    startActivity(intento2)
}

Y aunque parece funcionar, resulta mejor así:

button_cerrar.setOnClickListener {
    finish()
}

El método finish() tiene por objetivo liberar el espacio de memoria de esta actividad y pedir que se muestre la actividad anterior. El archivo LoginCheck.kt queda así:

package com.android.controlacceso

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_login_check.*

class LoginCheck : AppCompatActivity() {

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

        button_cerrar.setOnClickListener {
            finish()
        }
    }
}

Pero la aplicación todavía no es funcional. En este momento le faltan, al menos, tres cosas importantes a la aplicación:

Comprobar que los campos de usuario y contraseña no están vacíos (en próximas entradas perfecionaremos la aplicación permitiendo el registro de usuarios y verificando los datos de acceso).
Pasar el nombre de usuario a la segunda actividad.
Después de cerrar sesión y volver a la primera actividad, limpiar los datos introducidos (medida elemental de seguridad para que después de cerrar sesión no permanezcan los datos en la primera actividad y alguién pueda acceder simplemente pulsando el botón de ENTRAR).

Vamos con ellas. Para la primera tarea vamos a utilizar lo visto en la entrada Programa para verificar si un String está vacío o es nulo, de esta manera:

package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        entrar_btn.setOnClickListener {
            if (!esNuloVacio(user_input.text.toString()) && !esNuloVacio(pass_input.text.toString())) {
                val intento1 = Intent(this, LoginCheck::class.java)
                startActivity(intento1)
            } else {
                Toast.makeText(
                    this, "ERROR: Usuario y contraseña requeridos.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun esNuloVacio(str: String?): Boolean {
        return if (str != null && !str.trim().isEmpty()) false else true
        // más elegante así:
        // return !(str != null && !str.trim().isEmpty())
    }
}

Primer objetivo conseguido: si cualquiera de los campos de usuario o contraseña están vacíos (o solo contienen espacios en blanco) aparece un mensaje de advertencia del error y no pasa a la actividad de acceso.

Segunda tarea: pasar el nombre del usuario a la segunda actividad. Esto lo podemos hacer llamando al método putExtra de la clase Intent con dos parámetros de tipo String: el nombre del dato y el valor de ese dato:

val intento1 = Intent(this, LoginCheck::class.java)
intento1.putExtra("usuario", user_input.text.toString())
startActivity(intento1)

Y para recuperar ese valor desde la otra actividad definimos una variable de tipo Bundle que obtiene el String a partir del nombre del dato que envió la primera actividad:

val bundle = intent.extras
val user = bundle?.getString("usuario")

Otra opción es:

val user = intent.getStringExtra("usuario")

Y después utilizamos el valor obtenido para mostrarlo en la actividad:

login_txt.text = getString(R.string.bienvenido, user)

Para poder utilizar de esta manera el TextView 'login_txt' hemos creado el recurso de texto 'bienvenido' en values/strings.xml de esta manera:

<string name="bienvenido">Bienvenido %1$s</string>

Esta solución utiliza el formato %1$s y lo sustituye por el dato obtenido y guardado en la variable user. Los especificadores de este formato se basan en la sintaxis %[argument_index$]format_specifier donde argument_index indica el orden del argumento especificado en la lista de argumentos y format_specifier indica cómo debe formatearse según el tipo de dato (s: String, d: Int, f: Float...). Como el primer argumento es opcional y solo usamos uno, en nuestro caso podemos escribir el recurso de texto así:

<string name="bienvenido">Bienvenido %s</string>

Objetivo conseguido: ahora cuando se entra a la segunda actividad ésta recupera el nombre de usuario que se ha enviado desde la primera actividad y lo muestra en el mensaje de bienvenida. En posteriores entradas veremos otras maneras para enviar varios datos a la vez con Bundle.

Siguiente tarea: limpiar datos al cerrar sesión. Para ello, después de obtener el valor de los campos, los vaciamos:

val intento1 = Intent(this, LoginCheck::class.java)
intento1.putExtra("usuario", user_input.text.toString())
user_input.setText("")
pass_input.setText("")
startActivity(intento1)

A continuación los códigos de ambas actividades:

package com.android.controlacceso

import android.content.Intent
import android.os.Bundle
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        entrar_btn.setOnClickListener {
            if (!esNuloVacio(user_input.text.toString()) && !esNuloVacio(pass_input.text.toString())) {
                val intento1 = Intent(this, LoginCheck::class.java)
                intento1.putExtra("usuario", user_input.text.toString())
                user_input.setText("")
                pass_input.setText("")
                startActivity(intento1)
            } else {
                Toast.makeText(
                    this, "ERROR: Usuario y contraseña requeridos.",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun esNuloVacio(str: String?): Boolean {
        return !(str != null && !str.trim().isEmpty())
    }
}

package com.android.controlacceso

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_login_check.*

class LoginCheck : AppCompatActivity() {

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

        val bundle = intent.extras
        val user = bundle?.getString("usuario")

        login_txt.text = getString(R.string.bienvenido, user)

        button_cerrar.setOnClickListener {
            finish()
        }
    }
}