Mi primer aplicación Android con Kotlin

Curso de Bases Técnicas de Android

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Programar puede parecer complicado, pero eso está muy lejos de la verdad.

Hay muchas herramientas para el desarrollo de aplicaciones móviles, pero en este tutorial vamos a utilizar Android Studio, el entorno de desarrollo integrado (Integrated Development Environment) oficial para el desarrollo de aplicaciones Android.

Sólo descargar el IDE puede tomar unos minutos, así que en este tutorial asumiré que ya lo tienes instalado.

En este tutorial utilizaremos varias palabras claves de mundo Android que no son fácil de entender para principiantes. Al final de este articulo te dejaré enlaces a algunos recursos que te ayudarán a familiarizarte más con estos conceptos.

Requerimientos

En este tutorial utilizaremos la versión 3.6.3 de Android Studio, pero tu puedes utilizar la más reciente.

Descripción de la aplicación de ejemplo

La aplicación que utilizaremos de ejemplo creará un tablero con dos botones para competir. Presionando uno de los dos botones nos aparecerá un mensaje indicando cuál fue el botón que se presionó primero. Para reiniciar la aplicación, sólo debemos presionar dos veces la pantalla.

the winner is blue.png
start state.png
the winner is red.png

Configuración - Creando el proyecto

Para crear un nuevo proyecto, abrimos Android Studio. En el panel de inicio seleccionamos la opción “Start a new Android Studio project” (Iniciar un nuevo proyecto de Android Studio).

Configuración - Elige el tipo del proyecto

Ahora nos preguntará qué tipo de proyecto queremos. Nosotros utilizaremos “Empty Activity” (Actividad vacía). De esta manera no se generará nada innecesario para nuestra aplicación.

Configuración - Configuración del proyecto

Para configurar el proyecto, sólo selecciona los elementos que te indica la imagen.

Nombre del proyecto: Aquí lo nombraremos Button Contest, aunque podría llevar cualquier nombre.
Nombre del paquete: Este es el identificador de cada aplicación. Debe de ser único en la Play Store. Nuestro paquete se llamará com.mupper.buttoncontest.
Lugar de guardado: Elijamos un lugar seguro para guardar nuestro proyecto.
Lenguaje: En Android, podemos crear nuestro proyecto en Java o Kotlin. Nosotros utilizaremos Kotlin porque, además de las ventajas que ofrece, es más fácil de aprender.
Mínima versión de Android: Para este proyecto utilizaremos API 15.
Configuración adicional: Esta sección la dejaremos así como está.

Proyecto creado

Al finalizar, veremos algunas secciones muy importantes:

Del lado izquierdo tendremos el explorador de archivos.
Del lado derecho, el editor de archivos.

Por defecto, cuando creamos un proyecto nuevo, aparecerán dos archivos abiertos:

MainActivity.kt
Y activity_main.xml

Toda nuestra aplicación estará escrita dentro de estos dos archivos.

A codificar - La interfaz de usuario (User Interface)

Para crear la IU, Android utiliza un lenguaje llamado XML.

Nuestra aplicación sólo tendrá una pantalla:


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

--Estalíneanospermiteusarandroidenestearchivo.-->
    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"

    tools:context=".MainActivity">

    "match_parent"
        android:layout_height="match_parent"
        --Permitamosquenuestrosbotonesseposicionesdemaneravertical.-->
        android:orientation="vertical">

        --ElidentificadorparaaccedernuestrobotóndesdeKotlin.-->
            android:id="@+id/btnRed"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="#FF0000" />

A codificar - La lógica de nuestra aplicación con Kotlin

Para crear la lógica de nuestra aplicación utilizaremos Kotlin.

Lo único que modificaremos será el archivo MainActivity.kt.

Copia y pega el siguiente código y pégalo en MainActivity.kt:

// El nombre de nuestro paquete.
package com.mupper.buttoncontest

// Las herramientas necesarias para nuestro MainActivity.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

// La clase que contiene al ganador actual.
classContestController{
    varwinner: Player = Player.Nobody
}

// Esta clase agrupo los posibles ganadores.
sealed classPlayer(val color: String) {
    object Red : Player("Red")
    object Blue : Player("Blue")    
    // Utilizaremos este objeto para cuando nadie a ganado. Este es el estado inicial.
    object Nobody : Player("Nobody")
}
// La actividad principal (MainActivity) contiene la lógica de nuestra pantalla.
classMainActivity : AppCompatActivity() {

    // Nuestra actividad necesitará este controlador para almacenar al ganador actual.
    lateinit varcontestController: ContestController

    // Esta bandera indica si el concurso puede comenzar
    privatevar readyToStart = false

    overridefunonCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Con "setContentView" enlazamos la lógica con nuestra IU
        setContentView(R.layout.activity_main)

        // Creamos nuestro controlador.
        contestController = ContestController()

        // Esto preparará las acciones de los botones
        initListeners()
    }

    privatefuninitListeners() {
        btnBlue.setOnClickListener {
            setAsWinner(Player.Blue)
        }
        btnRed.setOnClickListener {
            setAsWinner(Player.Red)
        }
        relWinnerBoard.setOnClickListener {
            readyToStart = if (readyToStart) {
                hideWinnerBoard()
                false
            } elsetrue
        }
    }

    // Nuestros botones llamarán esta función para seleccionar al ganador actual.
    privatefunsetAsWinner(winner: Player) {
        contestController.winner = winner
        showWinnerBoardWith(winner)
        enableButtonContest(false)
    }

    // Esta función habilita o deshabilita los botones dependiendo del valor de "enable".
    // Un botón habilitado es un botón que puede ser presionado.
    // Un botón deshabilitado es lo opuesto.
    privatefunenableButtonContest(enable: Boolean) {
        btnRed.isEnabled = enable
        btnBlue.isEnabled = enable
    }

    // Esta función hace dos cosas.
    privatefunshowWinnerBoardWith(winner: Player) {
        // Vuelve visible el tablero con el ganador.
        relWinnerBoard.visibility = View.VISIBLE
        // Y asigna el nombre del ganador en el tablero.
        txvValueWinner.text = winner.color
    }

    // Finalmente, esta función hace dos cosas.
    privatefunhideWinnerBoard() {
        // Desaparece el tablero con el ganador.
        relWinnerBoard.visibility = View.GONE
        // Habilita los botones.
        enableButtonContest(true)
    }
}