Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 2

5 minuto(s)

Demo

En el capitulo anterior llamado Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 1 iniciamos la creación de nuestra aplicación en Android Studio, probamos si se creo correctamente, también hicimos una configuración mínima en el archivo AndroidManifest.xml e instalamos las dependencias necesarias para el Bot, en esta parte 2 continuaremos con la creación del proyecto, crearemos la interface visual para el aplicativo (UI), vamos con ello.

Partes

Antes de continuar te invito a leer los siguientes artículos:

Asimismo te invito a escuchar el Podcast: “Si No Tienes Experiencia Para Un Puesto De Trabajo, Créala !”:

Spotify SoundCloud

Bien ahora continuemos con el Post: Creando un Bot (Android) para una tienda de Postres (Dialogflow V2 + Kotlin 1.3.72) – Parte 2. 

Layout Principal

Cuando hice la creación de un nuevo proyecto en Android Studio, este me generó un layout por defecto llamado activity_main.xml el cual se encuentra en la carpeta res (resources), es decir en app > res > layout > activity_main.xml


Abrimos el archivo activity_main.xml y comenzaré agregando un RelativeLayout.


Dentro del RelativeLayout agrego otro RelativeLayout en donde colocaré una caja de texto, un botón que al pulsar el usuario podrá enviar mensajes de audio al Bot y un botón para enviar los mensajes que el usuario escriba en la caja de texto.


Ahora dentro del segundo RelativeLayout y después de la caja de texto, agregaré un ScrollView en donde aparecerán los mensajes de la conversación entre el usuario y el bot, dentro de este ScrollView agregaré un LinearLayout para orientar de manera vertical los mensajes.


Bien con esto ya tenemos los elementos del layout activity_main.xml, en el hay varios elementos que crearemos más adelante, hasta este punto la interface de la aplicación se debe de ver de la siguiente manera.

En la imagen anterior puedes ver que al lado derecho de la caja de texto hay 2 botones, un micrófono y un botón apuntado hacia la derecha en forma de cabeza de una flecha, estos 2 botones son dos imágenes en formato PNG (Transparente), tu puedes usar las imágenes que desees, yo usaré esos dos archivos, estos los descargue de Internet y con el programa Photoshop les edite las medidas y las hice proporcionales con 35 px (ancho) y 35px (alto), estos archivos los coloco dentro del directorio drawable que se encuentra en app > res > drawable

A los archivos les he puesto de nombre btn_enviar.png y btn_microfono.png y cada uno lo he colocado en un ImageView dentro del layout activity_main.xml


Ahora en la caja de texto en donde el usuario escribirá sus mensajes, he colocado un mensaje de ayuda (hint) que dice Ingresa tu mensaje …, este texto lo llamo con android:hint=”@string/placeholder”, lo he definido en el archivo strings.xml que se encuentra en app > res > values > strings.xml


Abro el archivo strings.xml y agrego el string con el nombre placeholder.


También estoy estilizando algunos elementos, en el RelativeLayout interno he definido el color blanco con android:background=”@color/blanco” y en el EditText he definido el color negro con android:textColor=”@color/negro” para los mensajes que se escribirán en la caja de texto.

A la caja de texto le daré un fondo de color blanco con un borde rosado de 3dp, esto lo defino con android:background=”@drawable/cajatxt”, dentro del archivo cajatxt.xml, el cual lo creo manualmente en app > res > drawable > cajatxt.xml


En el archivo cajatxt.xml mediante un shape le doy bordes redondeados a la caja de texto, su borde tendrá un color rosado y color de fondo blanco.


Ahora los colores de los elementos mencionados los he definido en el archivo colors.xml el cual se encuentra en app > res > values > colors.xml


En el archivo colors.xml defino los colores de todos los elementos mencionados anteriormente y los que desee crear.


Entonces ahora la interface visual de la aplicación se ve diferente con los cambios que he realizado, específicamente ha cambiado el aspecto de la caja de texto.

Bueno hasta aquí la segunda parte del tutorial en donde creamos los elementos del layout o de la interface de la aplicación con sus recursos respectivos (drawables y values).

Ten Paciencia, lo que quiero es que entiendas todo el proceso para Crear este Proyecto y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota (s)

  • En el siguiente capitulo trabajaremos en el código Kotlin de la aplicación.
  • El código de los elementos mencionadas en este capitulo del tutorial pueden cambiar, esto no depende de nosotros, si no de la empresa que dan soporte a Android Studio, que suele cambiar sus elementos en futuras versiones.
  • No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo. 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.