Capítulo 13 – Desarrollando nuestra primera app en Kotlin [Segunda parte]

curso android en kotlin

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.

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.

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.

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í.

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.

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

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

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.

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

Comparte 🙂
0

7 comentarios sobre “Capítulo 13 – Desarrollando nuestra primera app en Kotlin [Segunda parte]

  1. Cyberius Contestar

    Hola! intento usar la funcion checkValue pero kotlin no la reconoce, cual seria la otra manera de validar que mis editText no esten vacios?

    • Aris Autor del artículoContestar

      La función checkValue no la reconoce porque la tenemos que crear nosotros. Si te fijas en el código anterior está hecha.

      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)
      }
      }

  2. Oscar Contestar

    Como haria para que en lugar de tener un boton “Volver” este Activity tenga un contador interno que a los “x” segundos regrese automaticamente a la pantalla anterior?

    • Aris Autor del artículoContestar

      Buenas, sería tan sencillo como crear una variable del objeto countDownTimer

      var countdown = object: CountDownTimer(1000, 100) {
      override fun onTick(l: Long) {
      }

      override fun onFinish() {
      finish()
      }
      }

      Donde 1000 son los milisegundos para que pase por el método onFinish() y 100 son los milisegundos que tardará cada vez en pasar por el método onTick().

      Eso irá en la parte superior junto a las variables (fíjate que dentro del onFinish está puesto que se cierre la activity).

      Para terminar en la función onCreate de dicha activity solo tenemos que llamar a la variable e inicializarla.

      countdown.start()

      Saludos

  3. Pablo Contestar

    Hola Aris, llevo un buen rato intentando, si éxito, utilizar el código para iniciar una nueva Activity pero desde una nueva clase, no desde la principal.
    El editor me marca un error en el comando Intent y startActivity.

    package com.example.pablo.myapplication
    import android.content.Intent

    class justaclass {

    fun Start_Activity() {

    val intent = Intent(this, Main2Activity::class.java)
    startActivity(intent)
    }
    }

    Tengo entendido que se debe a que mi clase no implementa un contexto ¿a que se refiere?

    Gracias por tu tiempo!

    • Aris Autor del artículoContestar

      Buenos días! Parece que lo que has creado es una clase y no una activity. Recuerda que una activity después del nombre de la clase extiende de AppCompatActivity así que deberías cambiar “class justaclass {” por “class justaclass : AppCompatActivity(){”

      Y recuerda que tendrás que meter el método onCreate.

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

      }

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *