En esta página:
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:
- Que es Android y tu Primera aplicación Hola Mundo
- Como Leer un archivo JSON en Android (Android Studio 3.6.1 + Java) – Parte 1
- Que es Kotlin y otros detalles
- Tipos de Variables en Kotlin
- Que es la Inteligencia Artificial y otros Detalles
- Que es Machine Learning, Historia y otros detalles
- Las Novedades más Destacadas que trae Android Studio 4.0
- Puedes leer más artículos en la categoría Android
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── activity_main.xml // Abre este Archivo ├── /mipmap ├── /values /Gradle Scripts |
Abrimos el archivo activity_main.xml y comenzaré agregando un RelativeLayout.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Acá van los elementos de la interface --> </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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/contenedor" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/blanco" android:gravity="bottom" android:paddingBottom="9dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="8dp"> <ImageView android:id="@+id/enviar" android:layout_width="42dp" android:layout_height="42dp" android:layout_alignParentEnd="true" android:paddingTop="4dp" android:paddingRight="4dp" android:scaleType="centerInside" android:paddingBottom="4dp" app:srcCompat="@drawable/btn_enviar" android:layout_alignParentRight="true" /> <ImageView android:id="@+id/microfono" android:layout_width="42dp" android:layout_height="42dp" android:padding="4dp" android:scaleType="centerInside" android:layout_toLeftOf="@+id/enviar" app:srcCompat="@drawable/btn_microfono" /> <EditText android:id="@+id/cajadetexto" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentStart="true" android:imeOptions="actionSend" android:inputType="text" android:textColor="@color/negro" android:hint="@string/placeholder" android:background="@drawable/cajatxt" android:layout_toLeftOf="@id/microfono" android:padding="10dp" android:textSize="20sp" android:layout_alignParentLeft="true" /> </RelativeLayout> </RelativeLayout> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<?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" android:layout_width="match_parent" android:layout_height="match_parent"> <RelativeLayout android:id="@+id/contenedor" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@color/blanco" android:gravity="bottom" android:paddingBottom="9dp" android:paddingEnd="8dp" android:paddingStart="8dp" android:paddingTop="8dp"> <ImageView android:id="@+id/enviar" android:layout_width="42dp" android:layout_height="42dp" android:layout_alignParentEnd="true" android:paddingTop="4dp" android:paddingRight="4dp" android:scaleType="centerInside" android:paddingBottom="4dp" app:srcCompat="@drawable/btn_enviar" android:layout_alignParentRight="true" /> <ImageView android:id="@+id/microfono" android:layout_width="42dp" android:layout_height="42dp" android:padding="4dp" android:scaleType="centerInside" android:layout_toLeftOf="@+id/enviar" app:srcCompat="@drawable/btn_microfono" /> <EditText android:id="@+id/cajadetexto" android:layout_width="match_parent" android:layout_height="50dp" android:layout_alignParentStart="true" android:imeOptions="actionSend" android:inputType="text" android:textColor="#000000" android:hint="@string/placeholder" android:background="@drawable/cajatxt" android:layout_toLeftOf="@id/microfono" android:padding="10dp" android:textSize="20sp" android:layout_alignParentLeft="true" /> </RelativeLayout> <ScrollView android:id="@+id/scroll_chat" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_above="@+id/contenedor"> <LinearLayout android:id="@+id/linear_chat" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </ScrollView> </RelativeLayout> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable // Directorio en donde coloco los Archivos ├── btn_enviar.png ├── btn_microfono.png ├── ic_launcher_background.xml ├── ic_launcher_foreground.xml (v24) ├── /layout ├── /mipmap ├── /values /Gradle Scripts |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── /mipmap ├── /values ├── colors.xml ├── strings.xml // Abro este Archivo ├── styles.xml /Gradle Scripts |
Abro el archivo strings.xml y agrego el string con el nombre placeholder.
|
1 2 3 4 5 6 |
<resources> <string name="app_name">TiendaPostresBot</string> <string name="placeholder">Ingresa tu mensaje ...</string> </resources> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── btn_enviar.png ├── btn_microfono.png ├── cajatxt.xml // Abro este archivo ├── ic_launcher_background.xml ├── ic_launcher_foreground.xml (v24) ├── /layout ├── /mipmap ├── /values /Gradle Scripts |
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.
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0" encoding="utf-8"?> <shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <corners android:radius="8dp"/> <stroke android:color="@color/rosado" android:width="3dp"/> <solid android:color="@color/blanco"/> </shape> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
/app ├── /manifests ├── /java ├── /java (generated) ├── /res ├── /drawable ├── /layout ├── /mipmap ├── /values ├── colors.xml // Abro este Archivo ├── strings.xml ├── styles.xml /Gradle Scripts |
En el archivo colors.xml defino los colores de todos los elementos mencionados anteriormente y los que desee crear.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <resources> <color name="colorPrimary">#6200EE</color> <color name="colorPrimaryDark">#3700B3</color> <color name="colorAccent">#03DAC5</color> <color name="blanco">#ffffff</color> <color name="negro">#000000</color> <color name="rosado">#E91E63</color> </resources> |
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.