Curso Android Studio con Kotlin

Google ha anunciado que Kotlin será el lenguaje de programación de primer nivel OFICIAL para el desarrollo de aplicaciones Inteligentes para Android OS.
Por lo que hemos decidido actualizarnos e impartir este curso. Ya que, seguramente, de ahora en adelante, estaremos programando todas las aplicaciones con Kotlin.
Así que comencemos este curso.

Secciones principales de Android Studio

En esta primer clase, conoceremos un poco sobre las secciones principales que maneja Android Studio. Aquellas que son vitales identificar en cualquier proyecto, así como de los tecnicismos o lenguaje usado.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Constraint Layout

En esta clase te enseñaremos el funcionamiento adecuado de este nuevo Layout de Android Studio.

Dispone de:

• Inspector de vista: Podemos cambiar entre la vista de uso común, las propiedades y la lista completa de las mismas.
• Paleta de herramientas (Palette): Botones, Widgets, Layouts, Cuadros de texto, etc.
• Esquema de Componentes (Component Tree): Muestra los elementos que conforman la interfaz.
• Constraint Widget: Esquema que permite determinar los dp’s

El constraint Layout nos sirve para comodar diferentes objetos de la barra de palette para ubicarlos con restricciones o sin restricciones en posiciones relativas a los bloques que nos acompañan en la pantalla, es decir, a cuánto queremos que se “repele” de los márgenes de pantalla u otro bloque, de si movemos unos que el otro dependa de la posición, etc, basta con arrastrar las líneas y hacerlo de forma “magnética” o “polo opuesto” escogiendo como “repelente” a la cantidad de dpi.

Lo que detecté es que es muy útil, porque si queremos hacer una app que entre en juego con botones y elementos que mantengan una “comunicación” de coordenadas entre sí, es esta la herramienta perfecta para mantener las posiciones relativas con sus elementos con la pantalla, de manera que se ajusten correctamente independientemente del tamaño de la pantalla del dispositivo.

Características:

• Las restricciones que se usan en el Constraint Layout funcionan como imanes.
• Permite establecer relaciones entre todos los elementos y la propia vista padre.
• Constraint Layout nos permite trabajar de una forma más flexible.
• Cada Constraint Layout define la posición de la vista, esto es gracias a la función de los ejes verticales y horizontales.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Linear Layout

En esta clase te mostraré como funciona el LinearLayout y como puedes hacer una combinación entre varios Layouts, tanto verticales como horizontales, de tal manera que, puedas obtener como resultado aquel diseño de activity que tienes en mente.

Un Constraint Layout, son restricciones, las cuales nos permiten acomodar los elementos de la aplicación en base a líneas las cuales pueden servir de guías para brindar un mejor acomodo.  Los Constraint Layout permiten crear diseños grandes y complejos con una jerarquía de vista plana.

En cuanto a las características, es que los un Constraintlayout deben contar con al menos una restricción horizontal y una vertical. Cada restricción representa una conexión o alineación con otra vista, el diseño superior o una guía invisible. Cada restricción define la posición de la vista a lo largo del eje vertical u horizontal, por lo que cada vista debe tener un mínimo de una restricción para cada eje, aunque en ocasiones se necesitan más.

Así mismo existen varios tipos de constraint ya sea de rechazo o acercamiento, o bien se puede decir que uno es de magneto, en cuanto a dichas restricciones tu puedes colocar los dp que quieras ya sea mediante el código o desde la barra lateral que nos sale de lado derecho.

Otra característica importante es que, con los ConstraintLayout, puedes diseñar libremente tu interfaz de usuario, es decir puedes escoger los parámetros que quieras  y moverlos a tu gusto. Estos porcentajes (y fracciones) ofrecen un posicionamiento simple y transparente de la vista a través de diferentes densidades y tamaños de pantalla.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Relative Layout

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Diferencia entre Constraintlayout y Relativelayout

La diferencia entre estos 2 layouts es de que el primero trata de optimizar y aplanar la jerarquía de vistas de sus diseños aplicando algunas reglas a cada vista para evitar el anidamiento, ya que  podemos posicionar una vista en términos de 0% y 100% de desplazamiento horizontal y vertical con respecto a los círculos que rodean el objeto, haciendo que se acoplen a cada pantalla, en cambio el relativelayout requiere de pantallas grandes o espacios no muy reducidos en los que al mover una pieza la otra salga de un margen.

Las diferencias que detecto en cuanto a ConstraintLayout y RelativeLayout son las siguientes:

El ConstraintLayout puedo observar que nos permite crear mejor diseños con una jerarquía de vista plana, al utilizar ConstraintLayout vamos a depender de menos Layouts por ejemplo LinearLayuot. El ConstraintLayout ofrece bias valor que ayudan a posicionar mucho mejor la vista, en cuanto al desplazamiento horizontal y vertical que existe los controles marcan el uso de las restricciones y los elementos pueden estar juntos sin tener una distancia determinada. Una diferencia que tiene ConstraintLayout es que respeta las restricciones

El RelativeLayout a diferencia del ConstraintLayout es que el Relative más que nada es de posición, de una posición que va a depender de otro objeto o de otro elemento en Android. Al mover un elemento se mueven los demás ya que están conectados entre si y se desplazan todos en el mismo sentido con el que se mueve un elemento. Los elementos que utilizamos en RelativeLayout sufren las mismas conversiones debido a su conexión.

Otra diferencia es que ConstraintLayout los elementos tienen sus propias restricciones, en cambio en RelativeLayout solo un elemento tiene restricciones y los demás funcionan con las restricciones que se declararon en el elemento principal por llamarlo así.

En conclusión

ConstraintLayout: Se puede anclar de diferentes puntos ya sea el borde de la pantalla o de otros elementos, y tiene diferentes tipos de conexiones y limitaciones.

RelativeLayout: Toma la escala y la posición a partir de un elemento, de esta forma solo se debe anclar un elemento y darle la relatividad o la posición a partir de uno.

SDK

1.- ¿Cuál es el significado de las siglas SDK? (inglés y español)

SDK (ingles): “Software Development Kit”

SDK (español): “Kit de desarrollo de software”

2.- Que es un SDK

Es el lenguaje de programación de Android, y nos sirve para emular diferentes software desarrollados para las plataformas de Android en distintos dispositivos, por lo que es el desarrollo de un app en un dispositivo a través de un emulador.

SDK MANAGER.-

Es un conjunto de librerías y paquetes que permiten desarrollar en Android.

Incorpora las herramientas necesarias para la gestión de los emuladores (dispositivos virtuales Android o AVD).

3.- Las tres pestañas principales de actualización del SDK Manager en Android Studio

• SDK platforms
• SDK tools
• SDK Update Sites.

4.-  3 opciones de personalización de un emulador de Android

• Size
• Ratio
• Density

• Pixel XL de 5.5″ con resolución de 1440×2560 y 560dpi
• Pixel 2 de 5″ con resolución de 1080×1920 y 420dpi
• Pixel 3a de 5.6″ con resolución de 1080×2220 y 440dpi

Esto nos llevaría a una personalización así:

• / Tipo: Tablet / Nombre: Pixel API 26 / Resolución: 1080 * 1020: xxhdpi / Versión: Android 8.0 /
• / Tipo: Wear OS / Nombre: Android wear square / Resolución: 280 *280 mdpi / Versión: Android 6.0 /
• / Tipo: Tv / Nombre: Android TV (1080) / Resolución: 1920 * 1080 xhdpi / Versión: Android 9.0 /

Al hacer un AVD (Android Virtual Develop) podemos configurar de muchas maneras para probar los desarrollos o las aplicaciones.

Dispositivo (Smartphone, Auto,Watch)

Versión de Android y Api´s

Orientación del dispositivo (Vertical u Horizontal, según nuestra app )

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

APK

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Ajustar anchura y altura

• Match parent: Atributo que permite abarcar un objeto de acuerdo a los límites del contenedor (o GUI), ya sea de ancho o altura.
• Wrap content: Atributo que se adapta de acuerdo al contenido interno del objeto. Si en un Layout horizontal colocamos 3 botones, éste atributo ajusta el espacio disponible en base a lo que contiene cada botón.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Personalizando elementos

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Elementos y atributos

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Recurso Colores

Uso de colors.xml:

Es un recurso que se encuentra en el apartado de “res” en la carpeta “values” , en el cual vienen códigos acerca de los colores, así mismo en ese apartado podemos ir creando nuestros propios códigos de colores, asignándole el nombre que queramos, una vez que se tiene la línea de código creada, la podemos colocar de una manera fácil dentro de los códigos que vienen en el activity_main.xml para que de esta forma cambiemos los colores a cada elemento, prácticamente este apartado de colors.xml es de gran ayuda ya que podemos tener una gran lista de colores, e ir generándola, para que en determinado momento si deseamos cambiarle el color a algo simplemente se copea el código que viene ahí dependiendo del color que gustes y así te ahorras mucho trabajo. En pocas palabras colors.xml te permite hacer una lista enorme de tus propios colores, permitiendo identificarlos fácilmente.

Uso de Material.io:

En cuanto a esta página, es una gran herramienta ya que en ella podemos encontrar gran variedad de elementos enfocados al diseño, en especial nos sirve de mucho el apartado del sistema de colores, ya que cuenta con una paleta completa de colores y sus respectivas combinaciones, desde colores claros a más obscuros, y simplemente es copiar el código del color y pegarlo en el apartado de recursos que vimos en colors.xml.

También nos muestra una simulación de una aplicación en la cual podrás seleccionar el color que gustes y dentro de esta simulación se hace la muestra de cómo se pude llegar a ver el color que seleccionaste con sus posibles combinaciones.

Te ahorra mucho trabajo ya que simplemente es copiar el código y como lo mencione anteriormente, nos da más opciones para combinar.

• Color Tool muestra una paleta (Material Palette) con una gran de variedad de colores, la cual muestra el código de colores primarios: primary, primary-dark, primary-light y colores secundarios: secondary, secondary-dark, secondary-light; así como opciones para el color del texto (Accessibility).
• Además, da a conocer sugerencias en el diseño de la interfaz de la app (User interfaces).
• Una vez obtenido el código del color podemos copiarlo a los atributos individuales de cada objeto o preferentemente en colors.xml.

En lo particular está muy padre ya que muchas veces tenemos que estar buscando códigos en internet o inventarlos y pues ya con esta herramienta solo es ingresar a la página y listo ya tendrás la variedad de cosas para diseñar tu página web y una cantidad enorme de colores.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Recurso Strings

Sirve para mandar llamar esa cadena de texto, se puede hacer referencia desde la aplicación o desde otros archivos de recursos dependiendo del texto que queramos poner en pantalla, por lo que si queremos que la app repita ese texto o vuelva a mostrarlo dependiendo de dónde lo coloquemos, se mostrará y será fácil de mandarlo llamar con el nombre que le establecimos.

Facilita las cosas cuando lo queramos llamar e interpretar, ya que sólo basta con poner el nombre del string.

Muestra la declaración de las strings, también llamadas cadenas de texto, mediante la etiqueta <string>. Mientras que en los atributos del objeto se manda llamar con “@string/nombre del string”.

Se puede usar cuando queramos un mensaje diferente en la pantalla principal de la app, o cuando cambiemos de interfaz en la app.

Ejemplos de usos:

• Texto de bienvenida
• Información para dudas y/o comentarios
• Términos y condiciones
• Calificar la aplicación
• Instrucciones de uso
• Promociones

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Recurso Styles

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Estilos y temas:

 Como lo hemos visto anteriormente, la hoja de estilos permite al usuario tener un control más adecuado de la página, como, por ejemplo, especificar el tamaño de la fuente, el color del título, subtítulo y texto normal, si tiene alguna característica como es cursiva, resaltado o subrayado, etc. Ayuda a que la personalización sea más fácil para el programador, en otras palabras, son atributos que realizan la apariencia de éste.

Los temas, en su caso, es una plantilla predefinida que ayuda a estilizar la página en concreto. Estas dos opciones se ponen en el apartado styles.xml

¿Cómo los agrego?

1. Agrega el comando <style>
2. Agrega un elemento <item>

Dentro de este, insertarás otro comando <name> que especifica el atributo que quieras utilizar.

Para poder extender el estilo que acabas de crear, necesitas tener una compatibilidad con los estilos de la plataforma, entonces se requiere el atributo parent para heredar la apariencia predeterminada en la aplicación y después modificarla a tu gusto.

También existe la posibilidad de crear un tema, en vez de aplicar el atributo style, se requiere el Android:theme en la etiqueta de application o una activity en el archivo AndroidManifiest.xml.

Ejemplo:

                    <manifest ... >
        <application ... >
            <activity android:theme="@style/Theme.AppCompat.Light" ... >
            </activity>
        </application>
    </manifest>

Puedes personalizar los atributos directamente en un diseño, estilos en una vista, un tema a un diseño o solo aplicar diseños programática, pero aquí se necesita tener en cuenta la jerarquía de estilos. Se necesita ser muy específico al momento de diseñar la aplicación, para que tenga una armonía y coherencia entre sí, así estos los puntos más importantes para ello:

1. Aplicación de estilo a nivel de carácter o párrafo a través de intervalos de texto a clases derivadas de TextView
2. Aplicación de atributos de forma programática
3. Aplicación de atributos individuales directamente a una vista
4. Aplicación de un estilo a una vista
5. Estilo predeterminado
6. Aplicación de un tema a una colección de vistas, una actividad o toda tu app
7. Aplicación de un estilo determinado específico de la vista, como la configuración de un TextAppearance en un TextView

Una herramienta que acabamos de mencionar en el TextAppearance es que te permite definir y personalizar el texto y dejar disponible el término View para otras funciones. Algunos atributos que se pueden utilizar son: n lineHeight[Multiplier|Extra], lines, breakStrategy y hyphenationFrequency

Finalmente, como hemos dicho anteriormente, se necesita ser muy específico en cada atributo y personalizar cada tema a nuestro gusto, pero teniendo algunas restricciones como en el estilo de AppTheme se extiende a la compatibilidad e incluye anulaciones para los atributos de color, éste se debe editar directamente en colors.xml.

Tema Oscuro:

Se encuentra disponible en Android 10, tiene algunos beneficios ya que ahorra la batería, mejora la visibilidad para el usuario y facilita el uso del dispositivo en sitios con muy poca luz.

¿Cómo habilitar este tema?

Es muy fácil y práctico en tres sencillos modos.

1. Utiliza la configuración del sistema.
2. Utiliza el mosaico de configuración rápida para cambiar el tema.
3. En los dispositivos Píxel, en el modo ahorro de batería.

En la aplicación es un poco diferente, ya que se debe de admitir en res/values/styles.xml para que se herede el tema DaiNight. Esto vincula a la aplicación con los modos nocturnos controlados en el sistema.

En el caso de temas y estilos debes evitar el uso de colores o íconos específicamente diseñados para el tema claro:

• ?android:attr/textColorPrimary Este es un color de texto de uso general. Es casi negro en el tema claro y casi blanco en los temas oscuros. Contiene un estado inhabilitado.
• ?attr/colorControlNormal Este es un color de ícono de uso general. Contiene un estado inhabilitado.

Para cambiar temas desde la aplicación puedes dejar que los usuarios decidan si quieren ese tema. Tenemos tres opciones de temas:

• Claro
• Oscuro
• Establecer ahorro de energía

¿Podemos forzar oscuro?

En este caso la herramienta analiza la vista de la aplicación para aplicar automáticamente el tema osucro. Se debe de establecer este comando android:forceDarkAllowed=”true”.

Si la app utiliza un tema oscuro (como Theme.Material), no se aplicará Forzar oscuro. De forma similar, si el tema de la app hereda de un tema DayNight, no se aplicará Forzar oscuro debido al cambio automático de tema.

MVC y Archivo R

Descripción

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Generar APK

En esta ocasión veremos como generar nuestra APK en Android Studio con Kotlin

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Toast con Kotlin

En esta ocasión veremos las notificaciones con Toast

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Instalación de APK en Smartphone

Descripción

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Boolean y listener

Proceso :
Para hacer la esta aplicación primero colocamos los elementos que necesitamos para el funcionamiento de la app. Se cambió el nombre del id para poder hacer más fácil la programación de cada elemento.

En la programación se declararon las variables, esto para que los datos ingresados se puedan procesar y mostrar en el Toast, con ciclos for, para cada caso. Se implementó una función al botón de enviar.

Los datos se validan con el For Boolean

Boolean:
Sirve para validar los datos ingresados ingresados en el editText, es un for que valida si se ha ingresado un valor dentro de la app de lo contrario nos manda un valor nulo o vacío, eso con el else dentro del botón de enviar nos pide que coloquemos un valor

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Pasemos a la segunda parte de la práctica de Boolean y listener

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Intent

Aprenderemos en que consiste el Intent

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Las intents funcionan como intento de mensajería para componentes de las apps.

Entre los tipos podemos encontrar:

• Explícitas: le dicen exactamente que aplicación las administrará.
• Implícitas: a diferencia de la anterior, en esta se puede elegir que aplicación la administrará.

Como crear una intent:

Para crear una intent, se necesita una serie de pasos que a continuación se muestran:

• Nombre del componente.
• Acción: Se divide en dos (Action View y Action Send).
• Datos.
• Categoría.
• Extras.
• Indicadores.

En mi opinión, una intent puede ser de gran ayuda en una aplicación, ya que gracias a los tipos que hay, nos es más fácil seleccionar que tipo de aplicación podemos usar y así darle mejor apariencia  a nuestra aplicación.

Creación de activities y Manifest

Primeramente, creamos un archivo Empty de la nueva aplicación, seguido a esto, agregamos una nueva actividad, igualmente vacío, y comenzamos a editar desde la ventana de Activity_Main2, cambiamos la orientación de la aplicación a vertical. Agregamos dos botones y les cambiamos el texto (Museo1, Museo2) y el id (bmuseo2, bmuseo2) respectivamente. Después, nos dirigimos a Strings para crear los textos, escribimos las líneas de código de cada uno de los botones

<string name=”museo1″> Museo 1</string>
<string name=”museo2″> Museo 2</string>

En cada botón le agregamos en el apartado Text los Strings creados anteriormente. Finalmente, nos vamos a la sección de Manifest e identificamos cuál activity queremos que se muestre primero en la pantalla.

Después me voy al archivo de AndroidManifest.xml voy a realizar el siguiente cambio <activity android:name=”.Main2Activity”></activity> por <activity android:name=”.MainActivity”></activity>.

Luego en la siguiente línea de código cambio lo siguiente: <activity android:name=”.MainActivity”> por <activity android:name=”.Main2Activity”>.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Programando botones antes de intent

Primero, se programarán los botones anteriormente creados (Museo1, Museo2), para lograr esto nos dirigimos al archivo Main2Activity.kt

Agregamos las variables (bmuseo1, bmuseo2)

val bmuseo1 = findViewById<Button>(R.id.bmuseo1)
val bmuseo2 = findViewById<Button>(R.id.bmuseo2)

Después, escribimos las líneas de código para que arroje un mensaje con el uso de Toast.

bmuseo1.setOnClickListener(View.OnClickListener {
    Toast.makeText(this, "Museo 1", Toast.LENGTH_SHORT).show()
})
bmuseo2.setOnClickListener(View.OnClickListener {
    Toast.makeText(this, "Museo 1", Toast.LENGTH_SHORT).show()
})

Finalmente, corremos la aplicación en el emulador y observamos su funcionamiento

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Intent y Activities

En esta tercer practica seguir trabajando con el proceso que lleve en la práctica anterior en donde utilizaremos el archivo de Main2Activity.kt y lo que hago es borrar parte del código que agregue en la practica anterior y sustituirlo por un nuevo código el cual contendrá el intent. Lo que tenemos que hacer es borrar las siguientes líneas de código:

Toast.makeText(content this, text”Museo 1″, Toast.LENGTH_SHORT).show()

Toast.makeText(content this, text”Museo 2″, Toast.LENGTH_SHORT).show()

Ya que serán remplazadas para colocar las variables que contendrán el intent, lo cual ingresamos el siguiente código que lo coloque dos veces ya que anteriormente borre los toast:

val intent = Intent(this,MainActivity::class.java)
startActivity(intent)

Después corro el emulador y me muestra la aplicación en donde al presionar un botón me manda a la otra activity y podemos regresar a la activity2 que contiene los botones. Y puedo observar que la aplicación funciona de manera correcta.

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.

Publicidad Móvil y geolocalización

Descripción

Contenido disponible sólo para miembros

Te invitamos a suscribirte ó iniciar sesión.