Capítulo 12 – Desarrollando nuestra primera app en Kotlin [Primera parte]

Nuestra primera App

Una vez configurado nuestro entorno, lo que vamos a hacer será un proyecto nuevo, para ello, abriremos Android Studio y haremos click en “Start a new Android Studio project”

Cuando lo hagamos, la siguiente pantalla nos pedirá una serie de datos, el primero será el nombre de la aplicación, que deberá ser claro y conciso. Como es tradición en el mundillo, nuestra primera app se llamará “Hello World”.

A continuación pondremos el “Company domain”, este campo se usa para generar un paquete, este es un identificador único para cuando publiquemos nuestra app en la store de Google Play. Para el dominio, la estructura básica que se suele usar es com.tunombre o com.nombredetucompañía, para que, junto a el nombre de la app terminen de generar nuestro identificador. Como podéis ver en el nombre del paquete, está todo en minúsculas, esto es así para evitar conflictos con clases e interfaces. Luego, seleccionamos el directorio donde guardaremos la aplicación, y para finalizar es imperativo marcar la opción «include Kotlin support«.

Al pulsar sobre next, nos saldrán unas nuevas opciones, que nos permitirán seleccionar para que dispositivo queremos desarrollar. En este curso os enseñaré para a programar para móviles y tablets, pero una vez lo hayáis terminado, tendréis conocimientos más que de sobra para hacer frente a las otras plataformas.

Para elegir en SDK mínimo (mínima versión en la que nuestra app funcionará), debemos pensar a cuanto público queremos llegar. Una app que se desarrolle en Android 6, solo podrá acceder a un 4’7% del sector total (para verlo haz click en “Help me choose”). Aunque cada uno usa sus truquitos, yo suelo empezar por  la API 15, que corresponde a más del 97% de los móviles que están funcionando a día de hoy, ya luego si por cualquier petición del cliente, hay que añadir una funcionalidad nueva no permitida en dicha versión, la subo.

A continuamos nos mostrará una pantalla con varias pantallas a elegir. Seleccionamos “Empty Activity” y continuamos a la última pantalla en la que podemos seleccionar los nombres de la Activity y el Layout, esto lo explicaré a continuación, así que por ahora dejaremos el nombre por defecto, con las casillas marcadas y pulsamos en “finish”.

¿Qué es una Activity?

Una vez generado el proyecto, estaremos delante de nuestra primera activity, llamada MainActivity. Una Activity es cada una de las pantallas que ve el usuario, en ellas se declaran los métodos (funciones) que se pueden hacer. Por ejemplo, imaginemos que la aplicación es de cocina, pues una activity sería cortar las verduras, hervir, freír, etc. Las activities tienen dos partes, la lógica y la visual (los layouts que veremos a continuación).

En la parte lógica, que la desarrollaremos en Kotlin, daremos respuesta a cada unas de las interacciones del usuario. Si seguimos con el ejemplo anterior, imaginemos que el usuario pulsa el botón de freír, este evento llegaría a nuestra clase y ahí ejecutamos la acción. No quiero entrar más en detalle, porque lo veremos más tarde.

La activity es básicamente una clase kotlin (.kt) que extiende de AppCompatActivity, que tiene los métodos necesarios para poder comunicarnos con Android. Así que por defecto siempre tendremos la función “OnCreate” que será el encargado de crear nuestra actividad y asignarle un layout.

¿Qué es un Layout?

El layout es la segunda parte de la actividad, la interfaz. En ella se agregarán los componentes como los botones, imágenes y demás. Estos archivos son muy simples y se pueden completar arrastrando los componentes o picándolos en XML.

Para acceder a él, debemos ir a la estructura del proyecto, que está en el lado izquierdo.

Con hacer doble click sobre el archivo se nos abrirá y veremos algo así.

Parece un poquito complicado al principio, pero una vez se explique se irá toda la dificultad. Lo primero que tenemos es el código en XML que nos genera por defecto, como podemos ver, está anidado. Tenemos un padre “android.support.constraint.ConstraintLayout” y dentro un “TextView” que es un componente muy básico para mostrar texto no editable en la pantalla. A la derecha, en las pestañas del lateral, hay una llamada “preview”, que si la pulsamos nos mostrará a tiempo real el diseño de la vista.

Antes de continuar, vamos a cambiar a el padre para usar un layout más sencillo, así que simplemente cambiamos “android.support.constraint.ConstraintLayout” por “RelativeLayout”. Como podéis ver, la etiqueta que cierra la anidación también ha cambiado, porque hace referencia al RelativeLayout. Así que nuestra vista quedaría así (he quitado varias líneas que hacían referencia al constrainLayout, en un futuro lo veremos más a fondo).

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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="com.cursokotlin.helloworld.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</RelativeLayout>

Ahora vamos a ver la parte más visual del layout, para ello, en la parte inferior izquierda, veremos dos pestañas “Design” y “Text”, desde aquí podemos cambiar la forma de trabajar con las vistas. Si nos vamos a Design, veremos que el código cambia por la vista y han aparecido nuevas columnas.

Desde aquí, si podemos manipular los componentes que están dentro de la vista, e incluso añadir nuevos. Para ello vamos a coger un botón de la caja de componentes que está en la esquina superior izquierda.

Simplemente pulsamos en el botón y lo arrastramos a la parte de la vista que queramos, por ejemplo abajo del todo.

Una vez lo hagamos, y mientras lo tengamos fijado, nos aparecerán una serie de campos en el lateral derecho, estos, son los atributos del botón. Los podemos editar desde aquí o desde el XML. Como esta es la primera práctica, lo haremos desde aquí, pero en las siguientes lo haremos desde el código, pues es la forma más óptima para dejar nuestras vistas impolutas.

Los tres atributos básicos que debemos añadir:

• ID: Es el identificador único del componente, con él, podremos definir en nuestra activity dicho componente para poder trabajar con él. Como es un botón que nos hará cambiar de activity, lo llamaré “btnChangeActivity”.
• layout_width: Este campo hace referencia a la anchura del componente, con este campo (que es obligatorio), podemos fijar la anchura a través de dos opciones. “Wrap_content” que añadirá una anchura lo suficientemente grande para incluir todo el contenido (en este caso el texto “BUTTON”) y “Mach_parent” que cogerá todo el espacio que su padre (en este caso el RelativeLayout) le permita.
• layout_height: Permite asignarle la altura a cada componente. Sigue el mismo comportamiento que el “layout_width”.

Para este ejercicio dejaremos los dos con “wrap_content” pero os animo a probar a añadirle el “match_parent” a algunos de los componentes para que vayáis entendiendo el comportamiento.

Componentes básicos

Ahora que ya sabemos lo básico, vamos a añadir 2 componentes más. Un TextView y un EditText. No deberíais tener problema en hacerlo. La idea es un TextView que te pregunte el nombre y un EditText donde poder escribirlo. Simplemente debemos arrastar los dos componentes al centro de la pantalla (uno debajo de otro) y le asignaremos un ID. Los componentes se llaman «TextView» y «Plain Text» en la columna. Deberíamos tener algo así al acabar.

Un poquillo feo ¿No? Lo arreglaremos yendo a el XML y asignando algunos atributos.

Lo primero que haremos será añadir los atributos a los dos nuevos componentes, pero esta vez desde el código, empezaremos por el TextView. Para ello simplemente hay que añadir la siguiente línea:

android:id="@+id/tvName"

La explicación es muy simple, lo primero que hacemos es llamar a Android, accediendo a la propiedad ID. Acto seguido, con el @+id estamos creando una referencia del componente en el archivo R.java de android (Lo expliquaré en el siguiente punto) y para acabar le damos el nombre que queramos, en este caso, al TextView que nos preguntará el nombre, lo llamaremos tvName. Aunque se puede añadir en cualquier parte del XML, la línea del ID como norma general en las prácticas del buen uso, suele ir la primera.

Seguramente cuando cambiaste el nombre del id, el TextView se fue para arriba del todo y se marcó una línea roja en el otro componente ¿Verdad? en la línea “android:layout_below=»@+id/textView»” esto se debe a que al estar en un RelativeLayout, debemos indicarle a cada componente donde va a estar. El layout_below lo que hace es decir que dicho componente estará justo debajo del que tenga la ID llamada “textView”, pero como ahora acabamos de renombrar el TextView a tvName, el EditText no encuentra ningún id con dicha referencia, así que cambiaremos  android:layout_below=»@+id/textView» por android:layout_below=»@+id/tvName» y todo volverá a su sitio.

Ahora habrá que cambiar el texto que trae por defecto por el que queremos. Así que localizamos la línea “android:text=»TextView” y cambiamos el texto a “¿Cómo te llamas?”.

Ahora ya lo tendríamos listo, pero en comparación con el EditText, se ve bastante pequeño, así que accederemos a un atributo más.

android:textAppearance="@style/TextAppearance.AppCompat.Title

Es muy parecida a las anteriores, textAppearance lo único que hace es decirle al componente que su apariencia será controlada a través de un estilo. Un style o estilo es simplemente una serie de atributos reutilizables, imaginemos que tenemos una App que tiene varios textos iguales (fondo de un color, un tamaño de texto predefinido, etc), podemos añadir los mismos atributos a cada uno de ellos, con los riesgos que conlleva (si luego hay que cambiar el color del texto, habría que ir a todas las pantallas que llevasen textos y cambiarlos uno a uno) o podemos asignarles un mismo estilo al que todos accederán, así si se cambia algo, automáticamente todos los textos lo harían.

Así que lo único que hacemos es referencia al archivo style con el “@style” y luego el nombre de dicho estilo. Nos habrá quedado algo así.

<TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:text="¿Cómo te llamas?" />

Ahora nos toca el EditText que sería hacer básicamente lo mismo, añadir un ID y listo. Este se llamará etName. Y de paso comentaré un par de atributos que seguramente se nos habrán generado automáticamente.

• android:layout_below: Explicado anteriormente, cabe destacar que este atributo es solo para los RelativeLayout y los que hereden de él. Además del below tenemos algunos muy parecidos como layout_above, que haría lo mismo pero en vez de ponerse debajo, se pondría encima.
• android:layout_centerHorizontal=»true»: Nos pondrá siempre el componente en el centro de la vista en el eje horizontal. Así aunque el móvil sea muy grande o muy pequeño siempre se mantendrá centrado.
• android:ems=»10”: Añade una anchura al EditText suficiente para que se vean X caracteres en la pantalla. Por ejemplo ahora tenemos puesto 10, si se añaden más, irán desapareciendo de la vista, probad a cambiar el número para que no os quede duda alguna.
• android:inputType=»textPersonName»: El atributo inputType nos permite que una vez hagamos click en el editText, el teclado que se muestre, esté adecuado al tipo de información que veremos. Os pongo un pequeño ejemplo para entenderlo más fácil. Con textPersonName el teclado que se mostraría sería así.

Pero si ahora cambiamos el valor a textWebEmailAddress se vería así.

La diferencia es casi ínfima, aquí se vería el @ y en el anterior no. Aunque sea un cambio tan pequeño, estos pequeños detalles hacen que el usuario se sienta cómodo con nuestra app, así que hay que cuidarlos.

Por último tenemos un text en el EditText. El problema de dicho atributo en este tipo de componentes es que cuando hagamos click en él, ese texto tendremos que borrarlo para añadir nuestro nombre por ejemplo, por eso los chicos de Google crearon un atributo muy cómodo, android:hint=»Name» que hace básicamente lo mismo, pero cuando el usuario escriba, el texto desaparecerá y no habrá que borrarlo primero. Así que nuestro XML una vez terminado se verá así.

<?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.MainActivity">

    <Button
        android:id="@+id/btnChangeActivity"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Enviar" />

    <TextView
        android:id="@+id/tvName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:textAppearance="@style/TextAppearance.AppCompat.Title"
        android:text="¿Cómo te llamas?" />

    <EditText
        android:id="@+id/etName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tvName"
        android:layout_centerHorizontal="true"
        android:ems="10"
        android:inputType="textWebEmailAddress"
        android:hint="Name" />

</RelativeLayout>

Continúa con el curso: Capítulo 13 – Desarrollando nuestra primera app en Kotlin [Segunda parte]