Creando una Aplicación Android que responda ante comandos de Voz mediante Inteligencia Artificial y Machine Learning – Parte 2

En este Post continuaremos con el capitulo anterior llamado Creando una Aplicación Android que responda ante comandos de Voz mediante Inteligencia Artificial y Machine Learning – Parte 1 en donde compartí una imagen con la idea de la interface de la aplicación, así mismo creamos la aplicación para este proyecto y le di de nombre IA Postres APP, en este Post continuaremos con la creación de este proyecto, vamos con el Post.

Durante las semanas en que hacia este tutorial se lanzo la versión de Android Studio 3.5 y no veo que haya afectado el desarrollo y creación de este proyecto, así que no te vayas a complicar, es como si estuviera usando la versión de Android Studio 3.4 que es la versión con la que se inicia este Tutorial.

Actividad Principal

Empezaré creando el código Kotlin para la vista principal de la aplicación, abro el archivo MainActivity.kt que se ha creado automáticamente al momento de crear mi Proyecto en Android Studio, agrego lo siguiente

Lo que hago es llamar a mi layout llamado activity_main.xml, este Layout lo vamos a crear a continuación

Layouts

Voy a crear 2 layouts o diseños, al primer layout se creó por defecto al crea el proyecto en Android Studio, a este layout le asignó automáticamente el nombre activity_main.xml en donde van a ir los elementos que componen el chat, abro este archivo y agrego primero un RelativeLayout que será el contenedor principal de los elementos de la interface del Chat

Dentro del RelativeLayout voy a colocar un RecyclerView que es en donde se listarán los mensajes del Cliente y la Inteligencia Artificial

Ahora voy a crear otro RelativeLayout y dentro de el voy a colocar otros Relative Layout para la caja de texto en donde el Cliente escribirá los mensajes y al lado derecho de la caja de texto colocaré el botón Enviar para enviar los textos y al lado derecho de este otro botón con el icono de un micrófono que servirá para que el Cliente envíe mensajes de audio por el Chat hacia la Inteligencia Artificial, en el código he colocado comentarios para describir cada elemento

A continuación todo el código completo de mi layout activity_main.xml

El diseño de mi layout activity_main.xml se ve de la siguiente manera hasta ahora

Bien creo un Segundo layout y le pondré de nombre mensaje_chat.xml, este layout servirá para mostrar cada mensaje independiente en la interface de mensajes del Chat.

Abro el archivo mensaje_chat.xml y agrego un RelativeLayout, dentro de el colocaré los elementos correspondientes

Los elementos correspondientes que mencione son 2 TextView, uno es para mostrar el mensaje de la Inteligencia Artificial y otro es para mostrar el mensaje del Cliente, en la interface de mensajes del Chat, agrego estos 2 TextView dentro del RelativeLayout

A continuación el código completo del layout mensaje_chat.xml

El diseño de mi layout mensaje_chat.xml se debe ver de la siguiente manera

Excelente, hasta aquí ya tengo la interface del Chat con los elementos necesarios para que la comunicación entre el Cliente y la Inteligencia Artificial se lleve acabo sin problemas.

Ten Paciencia, lo que quiero es que entiendas todo el proceso de como crear la aplicación y no llenarte el capitulo de mucho contenido porque te puedes marear y no tendrás un óptimo aprendizaje. 

Nota

  • En el siguiente capitulo trabajaremos con los drawables, strings y demás elementos necesarios para que la Aplicación funcione sin problemas.

 

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

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required