En la primera parte de este artículo terminamos de explicar un poquillo por encima las activities y los layouts y terminamos de maquetar nuestra primera pantalla. Ahora es el momento de conectar dicha interfaz con nuestra clase.


Conectando la vista al código

Lo primero que haremos será referencias nuestros componentes (en este caso el editText y el botón) en el código. Para ello, Kotlin lo hace de un modo muy sencillo, simplemente tenemos que usar la id que le asignamos a cada uno de los componentes en el capítulo anterior.

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

fun checkValue(){
    if(etName.text.toString().isEmpty()){
        Toast.makeText(this, "El nombre no puede estar vacío", Toast.LENGTH_SHORT).show()
    }else{
        //Iremos a otra pantalla
    }
}

Lo primero que hemos hecho ha sido llamar al botón, y diciéndole que cuando se produzca el evento del pulsado sobre él que lance el método checkValue(). Esto lo hemos hecho con la función setOnClickListener que es el encargado de estar «escuchando» hasta que el botón haya sido pulsado.

El método checkValue() será el encargado de comprobar si el campo nombre está vacío. Si lo está, lanzará un toast diciendo que no debe estar vació, sino iremos a la nueva pantalla, pasándole el nombre, pero primero crearemos dicha pantalla.

Generando nuestra segunda activity

Ahora vamos a generar una segunda pantalla que será la que se abrirá cuando hayamos escrito un nombre. Podríamos hacerlo en la misma pantalla, pero quiero hablaros de como pasar información entre activities así que manos a la obra.

Para ello vamos a la ruta app/nombreDelPaquete/ y hacemos click derecho sobre él. New/Activity/Empty Activity.

curso kotlin android

Nos saldrá una pantalla igual a la imagen y la dejaremos así, le hemos cambiado el nombre, tenemos marcado que nos genere el layout y seleccionando el lenguaje Kotlin. Pulsamos en Finish.

Una vez creada vamos a empezar maquetando la pantalla. Esta será muy sencilla para no alargar mucho la entrada.

Lo primero que vamos a hacer será cambiar el ConstrantLayout por un RelativeLayout como hicimos con la otra vista, le pondremos un fondo y en el centro habrá un texto dándonos la bienvenida. En la parte inferior un botón para volver a la otra pantalla.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="com.cursokotlin.helloworld.ShowNameActivity"
    android:background="@color/dark_blue">

    <TextView
        android:id="@+id/tvGreeting"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:text="@string/welcome"
        android:layout_centerInParent="true"
        android:textSize="30sp"/>

    <Button
        android:id="@+id/btnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/back"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>

</RelativeLayout>

Aunque sea muy sencillo, he añadido algunas cositas que quiero comentar. Para empezar, el padre tiene un atributo android:background=»@Color/dark_blue» que si lo ponéis os va a dar error. Eso se debe a que el color «dark_blue» lo he creado en el archivo colors, y será lo que tengáis que hacer ahora, porque aunque se pueda meter el color ahí directamente (en código hexadecimal) lo correcto es hacerlo en dicho fichero por si un día tenemos que cambiar el color base de una app no tengamos que hacerlo en cada una de las pantallas, sino cambiando solo el color desde ahí. Así que vamos a app/res/values/colors y añadimos los dos colores que he creado.

<color name="dark_blue">#dc3157ff</color>
<color name="white">#ffffff</color>

Para poder cambiar el color solo hay que cambiar el código hexadecimal, la forma más fácil es haciendo click en el cuadradito del lateral izquierdo que contiene cada recurso, y desde ahí seleccionar el nuevo color.

curso kotlin para android

Y al igual que ha pasado con los colores los textos están referenciados en el archivo String, de esto hablaremos más adelante, pero voy a explicar lo básico.

Vamos a app/res/values/strings.xml y tendremos que añadir cada uno de los textos que usemos con una etiqueta que será la referencia. Quedaría así.

<string name="welcome">welcome %s</string>
<string name="back">volver</string>

Os estaréis preguntando que significa el %s que hay en la string «welcome». Ese parámetro vale para que Android entienda que el %s será sustituido por un texto que todavía desconocemos. Así que cuando estemos en la segunda pantalla y se esté creando la vista, se lo tenemos que pasar.

Comunicación entre pantallas

Ahora volvamos a la clase MainActivity.kt

En el método checkValue(), en la condición else, iremos a nuestra nueva actividad y para ello usaremos un Intent. Un Intent es un objeto que contiene instrucciones con las cuales android se comunica.

fun checkValue(){
       if(etName.text.toString().isEmpty()){
           Toast.makeText(this, "El nombre no puede estar vacío", Toast.LENGTH_SHORT).show()
       }else{
           val intent = Intent(this, ShowNameActivity::class.java)
           intent.putExtra("name", etName.text.toString())
           startActivity(intent)
       }
   }

Vamos a explicar un poquito más a fondo que hemos

val intent = Intent(this, ShowNameActivity::class.java)

Aquí creamos el intent, le tenemos que pasar el contexto (this) y luego la pantalla a la que queremos ir, en este caso ShowNameActivity.

intent.putExtra("name", etName.text.toString())

El intent tiene la posibilidad de añadirle «extras», que no son más que datos para recuperar en otra parte de la aplicación. Para poder recuperarlos hay que ponerles una clave a dichos datos. En este caso estoy pasando el nombre que el usuario escribió ( etName.text.toString() ) y lo estoy pasando con la clave name. con esto hacemos que cuando llegue el intent a la otra pantalla, solo tenga que buscar si hay algún valor con la clave name, y nos devolverá el nombre.

Para finalizar llamamos a la función starActivity(intent) que nos lanzará la actividad declarada en el intent que le pasamos.

Recuperando valores del intent

Ya tenemos casi acabada nuestra aplicación, ahora debemos ir a ShowNameActivity.kt, recuperar el nombre y pintarlo.

class ShowNameActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_show_name)
        getAndShowName()
        btnBack.setOnClickListener { onBackPressed() }
    }

    fun getAndShowName(){
        val bundle = intent.extras
        val name = bundle.get("name")
        tvGreeting.text = getString(R.string.welcome, name)
    }
}

Cuando se lanza esta actividad hará dos cosas, la primera será llamar al método que hemos creado getAndshowName() que sacará del bundle (un objeto dentro del intent donde almacena la información) el nombre a través de la clave «name«.

Ahora que tenemos el nombre, accedemos al TextView y le ponemos el texto que deseamos, en este caso, como es una String necesitaremos la función getString(R.string.nombreDeNuestraString) y recordad que tenía el %s por lo que añadimos una coma y el valor por el que queremos sustituirlo, en este caso el nombre.

Para finalizar al botón le hemos añadido otro listener que ejecutará la función onBackPresses() cuando se pulse, que lo que hace es volver a la actividad anterior.

Ahora basta con ir a run/run ‘app’ para lanzar nuestra aplicación. Nos saldrá una imagen similar a esta, donde podremos seleccionar un emulador (trae alguno por defecto, sino lo crearemos) o algún móvil si lo tenemos configurado y conectado.

 Seleccionamos el que queremos y ya tendremos nuestra primera aplicación lista.

curso programación kotlin para android en español

curso programación kotlin para android en español curso programación kotlin para android en español

Continúa con el curso: Capítulo 14 – Data classes en Kotlin