Desarrollo Móvil con Android Studio

Android studio

Kotlin: App Delivery con NodeJS, SQL, Mercado pago y Paypal.

Android Studio. Servicio Nacional de Aprendizaje SENA.

"La pasión es el inicio del éxito no te compares con nadie, compárate con ti misma, no contra otros."

Sophia Amoruso - Rovert Kiyosaki

Contenido de la seSIón 1

05. Instalando NodeJs.

09. Postman.

01. Saludo y bienvenida.

10. ¿Qué me llevo?

06. Visual Studio Code.

02. Activándonos.

07. Instalando Git.

03. Instalando Android.

04. Plugin Material UI.

08. PostgreSql

01. Saludo y bienvenida

¿Te gusta el desarrollo movil?

¿Qué te gustaría desarrollar para la Play Store?¿Cómo se llamaría tu Sturtup? ¿Qué te motiva a crear productos para móviles?

Continuar

02. Activador

Águila o sol

Leer más

03. Instalando Android Studio

Hola, mundo

Descargando Android Studio https://developer.android.com/studio

Revisa la guía de aprendizaje para ver los detalles de instalación.

Menú.

Paso 1

developer.android.com

Ingresa a la dirección developer.android.com

Menú.

Paso 2

Dowload Android Studio

Hacemos clic en Dowload Android Studio

Menú.

Paso 3

Dowload Android

Hacemos clic en aceptar y en el botón verde

Menú.

Paso 3

La velocidad de la descarga dependerá de tu velocidad de internet.

Esperamos ...

Menú.

Paso 4

Hacemos clic en Next

Abrimos el archivo que se ha descargado

Menú.

Paso 5

Android Virtual Device es la opción que nos permitirá emular el código que estamos programando en dispositivos virtuales

Y hacemos clic en Next

Menú.

Paso 5

Hacemos clic en Next

Menú.

Paso 6

Y hacemos clic Install

Menú.

Paso 7

Hacemos clic en Next

Menú.

Paso 8

Hacemos clic en Finish

Menú.

Paso 9

Hacemos clic en Ok

Menú.

Paso 10

Hacemos clic en Don´t send

Menú.

Paso 11

Hacemos clic en Next

Menú.

Paso 12

Hacemos clic en Standard y Next

Menú.

Paso 13

Yo escogeré el tema Darcula

Menú.

Paso 14

Haremos clic en el botón Next

Menú.

Paso 15

Haremos clic en el botón Next

Menú.

Paso 16

Aceptamos y hacemos clic en Finish

Menú.

Paso 17

Esperamos que se complete el proceso

Menú.

Paso 18

Hacemos clic en Finish

Menú.

Paso 19

Hacemos clic en New Project

Menú.

Paso 20

Activity significa ventana

Hacemos clic en Empty Activity o actividad vacía

Menú.

Paso 21

El nombre del proyecto será introduccionkotlin sin tildes

Menú.

Paso 22

Haremos clic en Finish

Menú.

Creando un dispositivo

Haremos clic en el botón Device Mager

Menú.

Haremos clic en Create Virtual Device

Menú.

Haremos clic en phone y Pixel 3a

Menú.

Instalaremos Nougat y luego clic en Next

Menú.

Haremos clic en Finalizar

Menú.

Haremos clic en Finalizar

Menú.

Ejecutamos el emulador:

Menú.

04. Instalando plugin Material UI

Pasos TEÓRICOS:

PASOS TÉCNICOS:

1. Hacemos clic en File.2. Hacemos clic en settings. 3. Posteriormente nos ubicamos en plugins. 4. Dentro de plugins vamos a buscar algo llamado Material UI. 5. El resultado que necesitamos obtener es Material Theme UI.

1. Le damos clic en instalar, aceptamos.2. Damos clic en re iniciar el IDE que vendría siendo nuestro Android Studio.

Ejemplo

Oceanic theme

Instalando el plugin

Una vez que termine de re iniciar nuestro Android Studio vamos a ir a la parte de Tools y veremos en la parte inferior una opci´ón llamada Material Theme.

Instalación de node js

Se recomienda

Buscamos node js

No instalar la última versión porque puede tener fallos sino que instalar la recomendada.

InstalandoPostgress sql

Vamos a la página oficial

Seleccionamos el s.o.

08.Desarrollo

SELECCIONA LA OPCIÓN

DOWLOAD DE INSTALLER

dESCARGAMOS LA ÚLTIMA VERSIÓN DISPONIBLE

eSPERAMOS QUE SE TERMINE EL PROCESO

eJECUTAMOS EL INSTALADOR Y SIGUIENTE

Dejamos marcadas las 4 opciones y siguiente

hacemos clic en siguiente

Pondremos una contraseña a recordar

sELECCIONAMOS CONF POR DEFECTO

Hacemos clic en el botón siguiente

hACEMOS CLIC EN EL BOTÓN SIGUIENTE

ESPERAMOS QUE SE INSTALE

Desmarcamos y hacemos clic en terminar

buscamos PGADMIN4 Y ABRIMOS

pONDREMOS LA CONTRASEÑA *****

para explorar las bases de datos nos pedirá nuevamente la contraseña

instalación de

POSTMAN

EN GOOGLE ESCRIBIMOS POSTMAN

NOS DIRIGIMOS A LA PÁGINA OFICIAL.

SELECCIONAMOS DOWLOAD

SELECCIONAMOS DOWLOAD

Sesión 2

Kotlin: App Delivery con NodeJS, SQL, Mercado pago y Paypal.

Android Studio. Servicio Nacional de Aprendizaje SENA.

Sesión 2 PARTE 1 android studio

03. Creando el proyecto

02. Activándonos

01. Saludo y bienvenida

06. Asistencia

05. Diseño de pantalla

04. Correr la APP

07. ¿Que me llevo?

01. saludo y bienvenida

25 DATOS CURIOSOS

En este vídeo tutorial observaremos 25 datos curiosos acerca de Kotlin, el lenguaje de programación para dispositivos móviles que llegó para quedarse.

Leer más

02ACTIVÁNDONOS

dAR UN CUMPLIDO

En esta dinámica daremos un dulce y un abrazo a un compañero o compañera previo a un cumplido exaltando una cualidad o fortaleza que él o ella tenga.

Leer más

Creando

el proyecto

Creando el proyecto

paso 1

Nos dirigimos a Android Studio y hacemos clic en FILE , NEW FILE y posteriormente en el botón EMPY ACTIVITY

Creando el proyecto

paso 2

Al darle siguiente nos va a pedir los siguientes datos, en nombre le escribiré KotlinClotesSENA

Creando el proyecto

paso 3

En el nombre del paquete, verás que por defecto este inicia con la palabra reservada com pero en donde dice example vamos a inventarnos el nombre de nuestra sturtup tecnológica, por ejemplo en la Play Store mi sturtup se llama A&MSTARTED

Creando el proyecto

paso 4

A continuación vendría la carpeta donde queremos guardar el proyecto, yo voy a dejar por defecto la ruta sugerida así lo dejo tal cual.

Creando el proyecto

paso 5

El lenguaje de programación será kotlin.

Creando el proyecto

paso 6

El SDK mínimo será API 32 para que no haya problemas al subirlo a la play store de acuerdo a sus nuevas políticas de SDK.

Creando el proyecto

paso 7

Como ves yo tengo un error porque no puedo usar el caracter & en el paquete del proyecto así que lo corregiré.

Creando el proyecto

paso 8

Y hacemos clic en FINISH.

Creando el proyecto

paso 9

Debemos esperar un momento a que terminen de cargar las librerías. Como ves tenemos dos archivos uno llamado MainActivity.kt que es el archivo de kotlin y un archivo llamado activiy_main.xml entonces, en el MainActivity.kt tendremos la lógica

Creando el proyecto

paso 10

En el activity_main.xml tendremos laparte de diseño de la pantalla.

Creando el proyecto

paso 11

Haremos clic en el botón split

Creando el proyecto

paso 12

Con esto tendremos ahora tanto el código de ese archivo XML como la pantalla con el contenido que estamos estableciendo en este código que en este caso simplemente es un texto que dice hola mundo.

Correr la aplicación

En un emulador o dispositivo físico real

¿Qué haremos?

Ahora veremos como podemos crear un emulador que nos permita correr nuestra primera aplicación hola mundo.

Paso 13

Para crear el emulador haremos clic en la parte superior derecha donde dice device manager

Paso 14

Nos va a abrir esta ventana en la parte izquierda, en mi caso notarás que tengo creados dos emuladores te invito a que des clic en create device.

Paso 15

Como puedes observar aparece un listado de dispositivos con los cuales podemos trabajar. Pero es muy importante que el dispositivo que seleccionemos tenga el ícono de la play store ya que vamos a necesitar de los servicios de google para probar algunas funcionalidades. Por ejemplo la parte de notificaciones push, mapas de google, etc. Todo esto funciona con los servicios de google.

Paso 16

Yo seleccionaré Pixel 3a , le damos siguiente y nos va a llevar a esta pantalla:

Aquí vamos a tener un listado de los APIS disponibles hasta el momento

Paso 17

Te recomiendo descargar la última versión que es la API 33 y luego haremos clic en siguiente.En caso de que la tengas instalada debes seleccionarlo y seguir los pasos de instalación los cuales son muy fáciles solo dar clic en siguiente.

Paso 18

En el AVD Name se indicará el nombre con el que se creará el emulador. Yo suelo dejar ese nombre siempre por defecto y simplemente paso a la opción de finalizar.

Paso 19

Vamos a correr nuestro emulador a través del botón de play

Paso 20 (opcional)

Para mostrar nuestro emulador como una pantalla independiente haremos clic en:File Settings Tools Emulator Desmarcamos la opción Launch in a tool window

Paso 21

Para configurar nuestro dispositivo desplegaremos la parte de notifiaciones.

Paso 22

Ahora seleccionaremos la parte de la notificación azul. Esto puede tardar ya que va a empezar a descargar ciertas configuraciones y haremos clic en el botón start.

Paso 23

Vamos a pulsar en dont copy

Paso 24

Nos pedirá un correo, en este caso yo pondré una cuenta de pruebas que es la que suelo utilizar para estos emuladores.

Paso 25

Al hacer clic en el botón siguiente se nos pedirá un password.

Paso 26

Si nos pide agregar un teléfono haremos clic en omitir o skip.

Paso 27

Aceptamos ahora los terminos y condiciones.

Paso 28

Aceptamos los términos de Google Service.

Paso 29

Esto lo omitimos con la opción skyp

Paso 30

Nuevamente marcamos la opción skyp

Paso 31

Nuevamente marcamos la opción skyp

Paso 32

Aquí seleccionamos No Thanks

Paso 34

Y ya tenemos listo nuestro emulador configurado al 100%

Paso 35

Ahora vamos a correr nuestro emulador, verificamos que esté seleccionado el PIXEL 4 API 32 y el botón APP así:

Debemos ser un poco pacientes y esperar que la APP termine de compilar:

Paso 35

Ahora vamos a correr nuestro emulador, verificamos que esté seleccionado el PIXEL 4 API 32 y el botón APP así:

Debemos ser un poco pacientes y esperar que la APP termine de compilar:

Paso 36

Como puedes ver nuestra APP sólamente nos mostrará el Hola mundo

y tenemos en la parte de arriba algo que nosotros dentro de las APP de Android llamamos tool bar

Paso 37

Es tool bar lo único que contiene es el valor que tenemos dentro de string.xml que es el nombre de nuestro proyecto:

Diseño de nuestra pantalla principal

Paso 38

Nos vamos a dirijir a la parte de Split para mostrar el código que tenemos.

Paso 39

Nosotros no vamos a utilizar como etiqueta principal el constrintlayout sino que lo vamos a cambiar por otro layout que se llama Coordinatorlayout

Paso 40

Si nosotros escribimos Coord la primera en mayúsculas, nos va a aparecer en el asistente la ayuda para auto completar la etiqueta que necesitamos.

Paso 41

Recuerda que tanto en el inicio como en el cierre debe de estar igual.

Paso 42

Ahora tenemos que borrar el código que no es CoordinatorLayout sino ConstraintLayout.

Vamos a borrar de la línea 9 a la 16.

Paso 43

Paso 44

Empezaremos a incluir nuestros views. Lo primero serían dos textos, uno que dice Login y otro que dice Ingresa con tu correo y contraseña.

Paso 45

Vamos a tratar de posicionar los elementos de manera vertical y esto lo haremos utilizando la etiqueta LinearLayout que traduce linea layout.

Paso 46

Como puedes ver, linea layout nos ha pedido dos campos obligatorios que son el width y el height. Entonces en el width que sería el ancho vamos a pedirle que ocupe todo el ancho de la pantalla con match_parent y en el height también le vamos a decir que ocupe todo el alto de la pantalla con match_parent.

Paso 47

Siempre a las líneas layout les debemos asignar una propiedad llamada android:orientation y esta la dejaremos asignada de manera vertical ya que queremos que los elementos se posicionen uno debajo del otro.

Paso 48

Ahora pulsamos el símbolo de mayor y automáticamente el IDE de Android Studio nos cerrará la etiqueta. Los cierres siempre los debemos manejar así, el símbolo < el slash, el mismo nombre y nuevamente el símbolo menor, como en html.

Paso 49

Dentro de esta etiqueta vamos a poner los elementos que necesitamos mostrar. En primer lugar vamos a empezar con el texto que dice Login. Por lo tanto, vamos a escribir una etiqueta llamada <TextView

Paso 50

Casi todas las etiquetas o de hecho todas, necesitan recibir lo que es el width y el height es decir, el alto y el ancho que va a ocupar en la pantalla. En este caso vamos a decirle que el ancho es simplemente un wrap_content es decir, que debe ocupar simplemente el espacio que tenga el texto, por ejemplo en el caso del login va a ocupar solamente un pequeño espacio más no todo el ancho de la pantalla.

Paso 51

En la altura también lo vamos a definir como wrap_content es decir, que ocupe solo el alto que debe ocupar el texto cuando se muestre en la pantalla.

Paso 52

Escribamos android:text ="Login" e intenta verlo en la pantalla.

Paso 53

Le vamos a decir ahora que el tamaño del texto con textSize sea de 50sp (sp son pixels de escala independiente (scaleable pixels).)

Paso 54

Como puedes observar ya tenemos muy visible el texto pero ahora está muy pegado de la esquina superior izquierda de la pantalla.

Paso 55

Para corregir esto, usaremos una propiedad llamada android:layout_marginTop a 60dp. Notarás entonces que para establecer un margen no utilizamos sp sino dp que significa densidad por pixeles.

Paso 55

Entonces, en los textos utilizaremos sp y en las demás propiedades como márgenes o tamaños de imágenes podemos utilizar dp.

Paso 56

Vamos a separar el texto Login de la parte izquierda de la pantalla utilizando marginLeft a más o menos unos 25dp

Paso 57

Vamos a cerrar la etiqueta <TextView con el símbolo />

Paso 58

Y si te das cuenta, el cierre de esta etiqueta TextView es diferente al cierre de LinearLayout.

Paso 58

LinearLayout tiene un símbolo mayor y al final se vuelve y se nombra la etiqueta LinearLayout pero con el menor slash para indicar el cierre.

Paso 58

Nosotros también podríamos hacer esto con el TextView , si yo por ejemplo defino en la línea de código 20 un símbolo de mayor, automáticamente automáticamente el IDE de Android Studio me va a autocompletar el cierre de esta manera.

Paso 58

Pero, en este caso, este tipo de cierres como para TextView como para LinearLayout como para nuestra etiqueta principal Coordinator sólo se utilizan si dentro de las etiquetas vamos a tener etiquetas hijo, es decir... dentro de LinearLayout estamos usando un TextView , es decir, este TextView sería prácticamente un hijo de LinearLayout y LinearLayout vendría siendo prácticamente un hijo de coordinatorLayout pero dentro de TextView no vamos a insertar nada. Por lo tanto los cierres para estos TextView serán de esta manera:

Paso 58

En conclusión LinearLoyout no va a tener nada dentro al contrario de LinearLayout que si tiene un hijo el cual es TextView.

Paso 59

Después de este TextView tenemos otro texto que dice Ingresa con tu correo y contraseña. Por lo tanto vamos a crearnos otro TextView.

Paso 60

Recuerda la identación, es decir, llevar un orden en la estructura del código sino nos vamos a confundir mucho y no vamos a saber que etiqueta es hijo de cual. Recuerda que wrap_content significa que solo va a ocupar el espacio que debe ocupar.

Paso 61

Es decir, como al login le dimos la propiedad wrap_content significa que sólamente el login va a ocupar ese espacio.

Paso 62

Haremos un experimento y en el login vamos a cambiar el ancho por match_parent y veremos que ocupará todo el ancho de la pantalla dibujado en azul.

Paso 63

Vamos a volver a corregir esa linea de código y escribamos de nuevo wrap_content

Paso 65

Después, en la línea de código 25 (en el nuevo TextView voy a definir el texto que este caso es android:text="Ingresa con tu correo y contraseña" y vamos a hubicar nuevamente con marginleft ese texto separandolo de la parte izquierda de la pantalla con 25dp

Paso 66

Ahora, voy a separar un poco el texto Login del párrafo y para ello ubicaremos el margintop para generar margen hacia arriba. Aquí le voy a decir que tenga 5dp de esta manera va a bajar un poco este texto.

Después

Antes

Paso 67

Vamos a cerrar la etiqueta TextView con este tipo de cierre /> ya que no tendrá más elementos dentro.

Paso 68

Continuaremos con el desarrollo de nuestro Login y veremos que ahora hay que diseñar dos campos de texto uno es es el email y el otro es el password.

Entonces, si te das cuenta, todos lo elementos que estamos hubicando de Linear Layout se estan poniendo de forma vertical por lo tanto, podemos continuar despúes del último TextView para el generar el siguiente elemento. Para ello pondremos un campo llamado EditText

Paso 69

En la línea de código 27 voy a generar un <EdiText

Paso 70

A este le diremos que en el ancho ocupe todo el ancho de la pantalla con un match_parent y en el alto le daremos un alto fijo de 50dp así:

Recuerda que los dp se utilizan para definir altura, márgenes, etc y los sp simplemente para los text size.

Paso 70

Como puedes observar, hasta el momento sólo se ha generado una línea negra por lo cual vamos a darle una propiedad llamada android:hint=""

Paso 71

Aquí le daremos una ayuda al usuario diciéndole que ponga su correo electrónico, entonces dentro de android:hint="Email" escribiremos email

Paso 72

Vamos a darle un poco de márgenes ya está muy pegado a las esquinas para ello utilizaremos android:Layout_marginLeft para poner margen a la izquierda de unos 20dp

Paso 73

También utilizaremos android:Layout_marginRight="20dp" para separar este campo de las esquinas. Nota, procura utilizar el asistente para no equivocarte.

Paso 74

Lo que quiero ahora es separar el Email del párrafo que dice ingresa con tu correo. Para ello usaré un android:Layout_marginTop="50dp"

Paso 75

Ahora le vamos a asignar una propiedad muy importante llamada android:inputType en esta propiedad nosotros le decimos al campo de texto, que tipo de caracteres va a recibir.

Paso 75

En este caso, como es un correo electrónico, vamos a definirle que recibirá el tipo de dato textEmailAddress con esto, cuando nosotros abramos el teclado vamos a tener el arroba disponible.

Paso 76

El textSize también lo vamos a cambiar y lo pondremos de 15sp y cerraremos la etiqueta de esta manera /> recuerda que lo cerramos así porque no va a contener ningún otro elemento dentro.

Paso 77

Ahora, continuemos con el password. Para hacerlo simplemente voy a duplicar todo el EditText con ctl c + ctl v y lo pego debajo

Paso 78

Haremos los respectivmos cambios que necesitemos, por ejemplo en lugar de email pondremos password.

Paso 79

El marginLeft y el marginRight se seguirán dejando de 20dp pero, el marginTop será sólo de 10dp.

Paso 80

En el inputType ya no vamos a utilizar un textEmailAddress sino que emplearemos un textPassword para indicar que el usuario va a ingresar una contraseña-

Continuemos con el diseño de nuestro Login y notarás que tanto el botón iniciar sesión como el botón de Registrate aquí están ubicados en la parte inferior de la pantalla ¿Cómo hacemos para ubicarlos en la parte inferior de la pantalla?

Paso 81

Empecemos creando el botón con la etiqueta <Button

Paso 82

Aquí le vamos a decir que el ancho del botón sea de toda la pantalla es decir match_parent y el alto del botón será wrap_content

Paso 83

Le vamos a establecer el texto que en este caso sería INICIAR SESIÓN esto lo haremos con android:text="INICIAR SESIÓN"

Paso 84

Le vamos a aplicar también un poco de márgenes a la izquierda con: android:Layout_marginRight="20dp"

Paso 84

Le vamos a aplicar también un poco de márgenes a la izquierda con: android:Layout_marginRight="20dp"

Paso 85

También le aplicaremos márgenes a la derecha con:android:Layout_marginLeft="20dp"

A diferencia de CSS que es una hoja de estilos en cascada, en Android Studio no importa el orden con que nosotros designamos algunas propiedades lo que si se recomienda es que siempre sus dos primeras etiquetas sean el android:Layout_width y el android:Layout_height lo demás puede ir en desorden

Paso 86

Finalmente, vamos a cerrar la etiqueta button así: /> ya ésta no tendrá ningún elemento dentro.

Paso 87

Vamos a utilizar una manera más técnica, para ello, necesitamos sacar el componente <Button del coordinatorLayout y pegarlo por fuera así:

Como puedes observar, el botón se ha ubicado ahora sobre el Password

Después

Antes

Paso 88

A este botón le vamos a agregar una propiedad llamada android:Layout_gravity y luego le decimos que queremos ubicar ese botón en la parte inferior con la propiedad bottom así:

Paso 89

Además del botón ahora necesitamos estos elementos:

Como puedes observar es símplemente un ícono con una flecha y otro texto.

Paso 90

Lo que vamos a hacer ahora es que al botón lo envolvemos con un <LinearLayout así:

Este LinearLayout tendrá un width (ancho) match_parent para que ocupe todo el ancho y el height (alto) será en este caso wrap_content para que sólo ocupe el espacio que debe ocupar. Veamos como se vería en el siguiente paso.

Paso 91

También, usaremos android:orientation="vertical" ya que los elementos están de esta forma, vertical.

Paso 92

Como puedes ver, nos falta cerrar el nuevo LinearLayout así que lo cerraremos:

Después

Antes

Paso 93

Daremos una orientación vertical al componente LinearLayout así:

Paso 94

Después

Ahora, la propiedad android:Layout_gravity="bottom" ya no se la voy a aplicar al botón sino al LinearLayout asÍ:

Antes

Paso 95

Debajo del botón vamos a definir éste ícono:

Entonces para ello nos vamos a traerun <ImageView así:

Paso 96

Aquí si le vamos a definir un ancho fijo, en este caso le vamos a decir que el ancho sea de unos 30dp y el alto del mismo valor, así:

Paso 97

Para invocar una imágen vamos a poner la propiedad android: src = " "

En este caso la imágen que queremos mostrar es esta pequeña flecha que tenemos por aquí:

Paso 98

Esa flecha no la tenemos aún en nuestro proyecto por lo tanto necesitamos importarla de algún lugar y lo haremos de la siguiente manera:1. Vamos a desplegar la carpeta res 2. Ubiquemonos en la carpeta drawable 3. Clic derecho y vamos a irnos a la parte que dice New. 4. Aquí busquemos Vector Asset 5. Dentro del clip art vamos a buscar ese ícono

Paso 99

Buscaremos arrow y el ícono se llamaarrow forward ios

Y hacemos clic en el botón ok

Paso 100

Yo lo voy a renombrar simplemente como ic_arrow_right

Haré clic en color para personalizary cambiar el color de la flechita

Paso 101

El color en hexadecimal será 06CF67

En el size le vamos a decir que tenga un tamañomás o menos de 50 x 50 dp así:

Paso 102

Si lo deseas, puedes jugar con la opacidad pero yo la dejaré al 100% y dejaré desmarcada la opción Enable auto lo seleccionamos como Clip Art así:

Haremos clic en NEXT (siguiente) y luego en FINISH (Finalizar). Si desplegamos el drawable podremos ver ahora nuestro componente para así llamarlo con el nombre que le pusimos:

Paso 103

Paso 104

Vamos a cerrar el <ImageView ya que no va a contener elementos dentro y ya tendríamos en la parte inferior de la pantalla nuestro ícono:

Paso 105

Vamos a ubicar nuestra flechita al centro, para ello al <LinearLayout vamos a ponerle una propiedad llamada android:gravity y aquí asignarle como valor center así:

De esta manera todos lo elementos que estén dentro del <LinearLayout se van a ubicar en el centro tanto el botón como en este caso nuestro ImageView

Paso 106

Al botón también le vamos a cambiar el botón y lo haremos usando la propiedad android:backgroundTint=""

En este caso, yo quiero el color de mi botonsito sea del mismo color verde de mi flechita. Para ello hacemos clic en la parte izquierda donde dice values y luego en colors.xml

Paso 107

Aquí voy a presionar CTL + D en la linea de código 9 para que se duplique a la 10 así:

aNTES

dESPUÉS

Paso 108

Voy a definir el hexadecimal que había puesto previamante y el nombre será green así:

Paso 109

Listo, volvamos ahora al activity_main.xml así:

Aquí utilicemos @color/green así:

Paso 110

Ya tenemos nuestro botón y nuestro ícono, sólo nos falta el texto que dice Registrate aquí

Para generar el texto vamos a crearnos una etiqueta <TextView así:

Paso 111

La vamos a dejar como wrap_content en el ancho y en el alto y el texto diría en este caso Registrate aquí

Vamos a aplicar a este <TextView un marginBottom de unos 20dp para que no quede ubicado tan abajo del borde de la pantalla del teléfono:

Paso 112

También vamos a separar este ImageView del bot´ón de inicio de sesión así:

Ahora que ya tenemos la pantalla de Login completa, vamos a ver como se miraría este código corriendo en nuestro emulador:

Paso 113

Ponemos a correr el emulador con el AVD MANAGER

Paso 114

Todavía nos faltan algunos detalles, por ejemplo cambiar el estilo de los campos de texto, y aplicarles bordes redondeados. Además de que no tenemos la barra superior que se llama action bar pero ya nos vamos acercando al diseño que necesitamos y prácticamente ya sabemos como ubicar los elementos además de manejar algunas propiedades que iremos poniendo mucho en práctica a lo largo del proyecto.

Paso 115

ASISTENCIA

¿Qué me llevo?

Sesión 2 PARTE 2 android studio

05. Asistencia

01. Saludo y bienvenida

06. ¿Que me llevo?

02. Activándonos

03. Kahoot

04. Fuentes de google

Saludo y bienvenida

ACTIVÁNDONOS

Fuentes personalizadas, botón personalizado

y definición de colores

Paso 1

Dentro de values vamos a abrir la carpeta themes que te estoy señalando en pantalla y se mostrará algo así:

Paso 2

En la línea de código número 3 vamos a definir el siguiente parent. En vez de que diga Theme.MaterialComponents.DayNight le vamos a definir NoActionBar así:

Antes

Después

Paso 3

Vamos a correr nuevamente el emulador para notar el siguiente cambio:

Esperaremos que termine de correr y como vemos ya no tenemos ese action bar en la parte de arriba.

Paso 4

Ahora, necesito cambiarle el color a toda la aplicación. Como vez, en la línea de código número 5 vemos que dice @color/purple es decir, está ocupando el color morado.

Y eso está definido en el archivo xml que también lo tenemos por aquí:

Paso 5

Entonces, en este caso voy a crear un color nuevo dirigíendome a colors.xml así

Con CTL + D duplicaré la línea de código 10 a la 11 así:

Paso 6

En la línea de código 11 reemplazaré green por orangle

Y haré clic en el picker (cuadrito que acompaña la numeración de la línea de código) para buscar el color naranja

Paso 7

Crearé entonces un nuevo color , duplicaré la última línea de código y mi nuevo color se llamará green_accent es decir, verde acentuado y el color hexadecimal lo pondré directamente el cual será 05CA355 así:

No es mucho el cambio pero esto nos va a acentuar con el otro color verde que es mucho más fuerte.

Paso 8

Listo, regresaremos a themes.xml

En la línea de código 5 cambiaremos purple500 por green así:

Paso 9

y en la línea de código 6 cambiaremos el color purple_700 por el color green_accent así:

Antes

Después

Paso 10

Regresemos a colors para crear un nuevo color el cual será gray cuyo hexadecimal será #B5B5B5

Paso 11

nuevamente duplicaré esa líena de código y nombraré al siguiente color gray_light que será un gris mucho más claro y su hexadecimal será #CFCFCF así:

Paso 12

Regresaré a themes.xml y en la línea de código 9 en vez de teal_200 voy a poner gray_light

Antes

después

Paso 13

En la línea de código 10 lo mismo, en vez de utilizar teal_700 utilizaré gray así:

Antes

después

Paso 14

Si ahora corremos la aplicación podremos ver que ahora en la barra de estado o status bar ya no tenemos el color morado sino que tenemos el colorPrimaryVariant en mi caso, es un color verde más oscuro que el verde principal.

Paso 15

Vamos a continuar con nuestro diseño. Por ejemplo en el Login tenemos un tipo de fuente personalizado y de hecho también tenemos otro tipo de fuente para el texto que dice ingresa con tu correo y contraseña.

Paso 16

Para utilizar fuentes externas lo vamos a hacer de la siguiente manera: Vamos a crearnos dentro de la carpeta res con clic derecho un nuevo Android Resource Directory

Paso 17

El nombre será font todo en minúsculas y le daremos clic en ok así:

Paso 18

En la parte izquierda se creará una carpeta llamada font

Paso 19

En un navegador buscaremos google fonts e ingresaremos al sitio oficial:

Paso 20

En un navegador buscaremos google fonts e ingresaremos al sitio oficial, luego daremos clic en la tipografía que nos guste:

Paso 21

Ahora, haremos clic en Dowload Family para generar la descarga de la tipografía.

Paso 22

Se generará una descarga con un archivo .RAR que contiene todas las sub tipografías de ROBOTO

Paso 23

Descomprimimos el archivo en una carpeta de Mis Documentos que nombrarás como tipografías

Paso 24

Ingresaremos a la carpeta de ROBOTO y buscaremos el archivo Roboto-Regular.ttf

Paso 25

Para saber dónde está guardado nuestro proyecto haremos clic en FILE y luego en OPEN así:

Paso 26

Copiaremos y pegaremos esa ruta en un explorador de archivos así:

Paso 27

Luego seguiremos esta ruta manualmente y pegaremos la tipografía Roboto-Regular.ttf así:

Paso 28

Reto. Haz el mismo proceso con la tipografía Satisfy o una similar

Paso 29

Reto. Haz el mismo proceso con la tipografía Satisfy o una similar, además de google fonts también puedes bucar en frefonts e intenta descargar de allí la tipografía indigo_daisy https://www.1001freefonts.com/

Paso 30

Dentro del main activity dirígete al login y debajo invoca la fuente así:

Paso 31

Dentro del main activity dirígete al párrafo y debajo invoca la fuente así:

Nota: debes renombrar la tipografía con guión al piso o onder scor para poder llamarla

Paso 32

Vamos a poner el botoón redondeado. Para ello, Iremos a la carpeta drawable , haremos clic derecho , NEW, y luego escogeremos la opción DRAWABLE RESOURCE FILE así:

Paso 33

Aquí vamos a crearnos un nuevo archivo llamado rounded_button

Paso 34

Android Studio nos dirigirá a esta nueva ventana:

Paso 35

Vamos a reemplazar la etiqueta selector por shape así:

Paso 36

Pondremos estos valores:

Paso 37

Regresaré al activity_maian y pulsaré el botón para ver rápidamente sus propiedades.

Paso 38

Pondre la propiedad background y ahí llamaré al archivo que está dentro de drawable.

Paso 38

Como podemos notar, tenemos el botón Email con bordes redondeados y el color también tiene un pequeño fondo gris. Lo mismo para el Password.

Paso 39

Para ello, Iremos a la carpeta drawable , haremos clic derecho , NEW, y luego escogeremos la opción DRAWABLE RESOURCE FILE así:

Paso 40

El nombre será edittext_custom así:

Paso 41

El nombre será edittext_custom y finalmente haremos clic en ok:

Paso 42

Nuevamente pondremos shape en lugar de selector así:

Paso 43

Vamos a definirle nuevamente las propiedades android:shape="rectangle" android:padding="10dp" Así:

Paso 44

En la siguiente línea de código vamos a definir el color que quiero que tenga. En este caso será sólido gris claro así: Nota, no olvides cerrar la etiqueta.

Paso 45

Usaremos una nueva etiqueta llamada stroke que sirve para acentuar las lineas que tiene el campo email y password. Si te das cuenta, hay unas líneas más pronunciadas en la parte de las esquinas:

Paso 46

Así aplicamos stroke:

Paso 47

Ahora aplicaremos la funcionalidad cornes para poner los bordes redondeados:

Paso 48

Vamos al main activity y aplicamos esa propiedad en el campo email.

Paso 49

Lo mismo para el password.

Paso 50

Incluyamos padding de 15 do para separar los textos en cada campo:

Paso 51

Editaré la opacidad del gris ya que está muy oscuro

Paso 52

Notaremos que nuestro proyecto ahora se vé así:

ASISTENCIA

¿Qué me llevo?

Sesión 2 PARTE 3 android studio

05. Asistencia

01. Saludo y bienvenida

06. ¿Que me llevo?

02. Activándonos

03. Kahoot

04. Navegando de una pantalla a otra

Saludo y bienvenida

ACTIVÁNDONOS

Fuentes personalizadas, botón personalizado

y definición de colores

Paso 1

En la parte superior izquierda desplegamos la carpeta Java y dentro de nuestro paquete principal que es donde tenemos el MainActivity vamos a crearnos un nuevo paquete, en mi caso haré anticlic en com.aymstarted.repasito, luego clic en new y finalmente clic en package así:

Paso 2

El nombre del paquete será activities así:

Posteriormente, haremos enter.

Paso 3

El nombre del paquete será activities así:

El nombre del paquete será activities así:

Paso 4

Ahora, el main activity lo debemos arrastrar al nuevo paquete que se llama activities así:

Antes

Hacemos clic en Refactor

Solucionar error mainactivity.kt

Si te sale un error en el MainActivity.kt copia y pega este código que lo puedes generar también creando una nueva actividad:

package com.aymstarted.repasito.activities import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import com.aymstarted.repasito.R class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_jniun255) } }

Solucionar error mainactivity.kt

Si te sale un error en el MainActivity.kt copia y pega este código que lo puedes generar también creando una nueva actividad:

Paso 5

Crearemos una nueva actividad en el paquete así:

Paso 6

El nombre será RegisterActivity y el lenguaje kotlin

Paso 6

El nombre será RegisterActivity

Paso 7

Nos saldrá un error. Debemos pararnos en la tecla R y presionar alt + enter

Paso 8

Vamos a la carpeta Manifest y entraremos al archivo androidmanifest.xml notaremos algunos errores:

Paso 8

Vamos a la carpeta Manifest y entraremos al archivo androidmanifest.xml notaremos algunos errores:

Paso 9

Debemos indicar la ruta donde encuentra ese activity pues android la obvia así:

Paso 10

Vamos a instanciar la vista que utilizaremos para pasar a la pantalla de registo. En este caso será el botón > que reposa en la pantalla de Login.

Paso 11

Entonce, al ImageView que és ese ícono le vamos a agregar una propiedad llamada android:id la cual va a recibir @+id/ y le vamos a establecer un id en este caso será imageview_go_to_register

Paso 12

Nos vamos para la ventana MainActivity.kt y debajo de la clase MainActivity llamamos la variable imageViewGoToRegister que contenga la clase imageView revisa que se haya importado la clase como se vé en la línea 5

Paso 13

Vamos a agregar el símbolo ? = null para inicializar la variable a nula.

Paso 14

Diremos que imageViewGoToRegister será igual a findViewById y entre paréntesis pasaremos la clase (R.id.imageview_go_to_register) para instanciar la vista:

Paso 15

A ese ícono llamado imageViewGoToRegister le voy a establecer el método onclic lo haremos dicíendole imageViewGoToRegister?.setOnClickListener{} nota, reemplaza los paréntesis por corchetes así:

Paso 15

En conclusión, si este imageView de la línea de código 18 viene en nulo, no va a ejecutar el método setOnClickListener. Ahora que ya tenemos esa validación, crearemos una función en el paso 16.

Paso 16

private fun será nuestra función y la llamaremos goToRegister que será nuestro método así:

Paso 17

Ahora, crearemos una constante llama i que será igual a Intent {} la cual pedirá importar la clase Intent con ALT + ENTER y lo que hará será importar la clase android.content.Intent veamos todo así:

Paso 18

Lo que esto recibe en primer lugar, es el contexto donde nos encontramos es decir this, y luego hacia dónde queremos ir en este caso queremos dirigirnos a la pantalla de registro que sería RegisterActivity::class.java así:

Paso 19

Vamos a ejecutar el métido startActivity y le pasamos el método que es la constante (i) así:

Paso 20

Para ejecutar esto, llamaremos el método dentro del imageViewGoToRegister? así:

Paso 21

Si presentaste alguna dificultad aquí te dejo el código:

package com.aymstarted.prueba27.activities import android.content.Intent import androidx.appcompat.app.AppCompatActivity import android.os.Bundle import android.widget.ImageView import com.aymstarted.prueba27.R class MainActivity : AppCompatActivity() { var imageViewGoToRegister: ImageView? = null override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) imageViewGoToRegister = findViewById(R.id.imageview_go_to_register) imageViewGoToRegister?.setOnClickListener{ goToRegister() } } private fun goToRegister(){ val i = Intent(this, RegisterActivity::class.java) startActivity(i) } }

Paso 22

Al correr nuestra app notaremos que al pulsar el botón nos lleva a una pantalla en blanco pues aún no se ha construido.

ASISTENCIA

¿Qué me llevo?

¿Qué me llevo?

Sesión 3

PARTE 1

Contenido

Saludo y bienvenida

Activándonos

Diseño de la pantalla de registro

¿Qué me llevo?

Bienvenida

Activador

Diseño de la pantalla de registro

Paso 1

Paso 1

Ingresa a la opción de activity_register.xml y en la línea de código 1 en lugar de constraintlayout reemplaza por coordinatorlayout

Antes

Después

Paso 2

Paso 2

Definiremos el linear layout para posicionar los elementos uno debajo del otro.

Paso 3

Paso 3

Este LinearLayout será match parent en el width es decir, para que ocupe todo el ancho de la pantalla y también, match parent en el height para que ocupe todo el alto, así:

Paso 4

Paso 5

La horientación debe ser verical y posteriormente cerraremos con llave así:

Paso 4

Paso 6

Vamos a continuar creándo un TextView que sea wrap_content en el ancho y en el alto (es decir, sólo va a ocupar el espacio que va a contener el texto). En este caso el texto dirá simplemente Registro así:

Paso 4

Paso 7

El tamaño del texto Registro lo aumentaremos a 50dp es decir, pondremos android:textSize="50dp"

Paso 4

Paso 8

El tamaño del texto Registro lo aumentaremos a 50dp es decir, pondremos android:textSize="50dp"