JETPACK COMPOSE desde CERO: Modificadores | #2

MoureDev by Brais Moure
3 Oct 202111:34

Summary

TLDREn esta segunda lección del curso de Jetpack Compose, el instructor Moure de Buy Fries Moure guía a los estudiantes en la creación de interfaces de usuario nativas para Android. Se revisan los conceptos básicos y se profundiza en el uso de modificadores para cambiar la apariencia de los elementos visuales, como tamaños, distancias y colores. Se introduce el concepto de temas y se muestra cómo integrarlos en la jerarquía de vistas para aprovechar los estilos definidos por Material Design. El video también cubre cómo personalizar y reutilizar componentes, así como trabajar con diferentes configuraciones de modo oscuro y claro. El instructor anima a suscriptores a participar en la comunidad y a colaborar en el desarrollo de contenido.

Takeaways

  • 😀 El curso de Moure de Djerba es una lección avanzada sobre el framework para crear interfaces de usuario nativas en Android.
  • 👋 Bienvenida a la segunda lección del curso, donde se asume que ya se conocen los conceptos básicos introducidos en la primera lección.
  • 📝 Se enfatiza la importancia de comprender los fundamentos vistos en la primera lección para entender mejor las explicaciones futuras.
  • 🔧 Se introduce el concepto de 'modificadores' en Jetpack Compose, que permiten cambiar la apariencia visual de los elementos.
  • 🎨 Los modificadores se aplican de forma funcional y se concatenan para modificar elementos visuales como tamaño, distancia y color.
  • 📐 Se muestra cómo aplicar modificadores específicos, como 'padding', 'clip' y 'size', para ajustar la apariencia de componentes.
  • 🖼️ Se explica cómo utilizar modificadores para cambiar la apariencia de imágenes, como agregar un fondo circular o un color de fondo.
  • 🎨 Se menciona la importancia de la programación funcional en Jetpack Compose y cómo los modificadores se ejecutan en orden.
  • 🌗 Se discute el uso de temas en la jerarquía de vistas y cómo se pueden utilizar para establecer propiedades como colores y tipografías.
  • 🌙 Se muestra cómo cambiar la configuración de la vista para adaptarse a diferentes temas, como el modo oscuro y claro.
  • 💬 Se invita a la comunidad a participar activamente, suscribirse al canal, compartir los videos y seguir en redes sociales.

Q & A

  • ¿Qué es Moure y para qué sirve?

    -Moure es un framework para crear interfaces de usuario nativas en Android, actualmente uno de los más modernos y potentes para el desarrollo de aplicaciones móviles.

  • ¿Qué se aprendió en la primera lección del curso de Moure?

    -En la primera lección se aprendió a crear un proyecto desde cero utilizando Moure y se hizo un 'Hola Mundo' para entender los principales conceptos fundamentales de Moure.

  • ¿Qué es un 'Preview' en el contexto de Moure y cómo se utiliza?

    -Un 'Preview' en Moure es una herramienta que permite ver el código en tiempo de desarrollo y ejecutar directamente en el emulador sin necesidad de iniciar el contexto completo de la aplicación.

  • ¿Qué son los 'modificadores' en Moure y cómo funcionan?

    -Los 'modificadores' en Moure son funciones que permiten cambiar la apariencia de los elementos visuales, como tamaños, distancias, colores, fuentes, etc. Se aplican mediante programación funcional y se concatenan para modificar visualmente los elementos.

  • ¿Cómo se crea un padding en un elemento 'Row' en Moure?

    -Para crear un padding en un elemento 'Row' en Moure, se utiliza el modificador 'padding' y se especifica el valor deseado, por ejemplo, '8.dp' para aplicar un padding de 8 puntos en todas las direcciones.

  • ¿Qué es 'Space' en Moure y cómo se utiliza para crear separación entre elementos?

    -En Moure, 'Space' es un elemento que se utiliza para crear una separación entre otros elementos. Se crea con un modificador que hace referencia a su altura o anchura para definir la cantidad de espacio que debe ocupar.

  • ¿Cómo se aplican los modificadores de color y forma a una imagen en Moure?

    -Para aplicar un color de fondo a una imagen en Moure, se utiliza el modificador 'background' seguido del color. Para hacer que la imagen sea circular, se utiliza el modificador 'clip' con el argumento 'Circle'. Es importante tener en cuenta el orden de los modificadores para que la imagen se muestre correctamente.

  • ¿Qué es un 'tema' en Moure y cómo se utiliza en la jerarquía de vistas?

    -Un 'tema' en Moure es un elemento compositivo que define el aspecto general de la aplicación, como colores, tipografías y formas. Se coloca dentro de la jerarquía de vistas y permite utilizar todas las propiedades definidas en él en otros componentes.

  • ¿Cómo se modifica el color de un texto en Moure utilizando los temas?

    -Para modificar el color de un texto en Moure, se puede utilizar la propiedad 'color' y establecerlo con un color definido en el tema, como 'MaterialTheme.colors.primary', o crear nuevos colores y utilizarlos en la propiedad 'color' del constructor del texto.

  • ¿Cómo se cambia la tipografía de un texto en Moure?

    -Para cambiar la tipografía de un texto en Moure, se utiliza el parámetro 'style' en el constructor del texto y se establece con un valor de 'TextStyle', el cual se puede obtener de 'MaterialTheme.typography' con los estilos predefinidos como 'title1' o 'subtitle2'.

  • ¿Cómo se configura una vista para que se muestre en modo oscuro en Moure?

    -Para configurar una vista en modo oscuro en Moure, se utiliza el parámetro 'darkMode' en la función 'Preview' y se establece en 'true'. Esto permite que los elementos utilicen los colores y estilos definidos para el modo oscuro.

Outlines

00:00

😀 Introducción a Jetpack Compose y conceptos básicos

El primer párrafo presenta la segunda lección de un curso sobre Jetpack Compose, el framework para crear interfaces de usuario nativas en Android. Se menciona la importancia de comprender los fundamentos y se hace referencia a la primera lección donde se creó un proyecto básico. Se enfatiza la necesidad de entender los conceptos básicos, como la estructura de la jerarquía en Compose y cómo utilizar previews para visualizar el código en tiempo real. Además, se invita a los espectadores a suscribirse al canal y a seguir en redes sociales para recibir tutoriales de programación y desarrollo de iOS y Android.

05:01

🛠️ Uso de modificadores y temas en Jetpack Compose

En el segundo párrafo se profundiza en el uso de modificadores en Jetpack Compose, que permiten cambiar la apariencia visual de los elementos. Se explica cómo aplicar modificadores como padding, tamaño fijo y color de fondo a filas, columnas e imágenes. También se menciona el uso de 'Space' para crear separaciones entre elementos. Se discute la programación funcional y cómo los modificadores se concatenan para aplicar cambios visuales. Se da un ejemplo de cómo hacer que una imagen sea circular y se ajusta su tamaño. Finalmente, se introduce el concepto de temas en Compose, explicando cómo se pueden utilizar como elementos compositivos y cómo se accede a las propiedades de los mismos para modificar aspectos visuales como colores y tipografía.

10:01

🌗 Adaptación a temas oscuros y claros en la interfaz

El tercer párrafo se enfoca en cómo se pueden adaptar los elementos de la interfaz para trabajar con temas oscuros y claros. Se muestra cómo cambiar los colores de los elementos para que se ajusten a los temas, utilizando constantes como 'white' y 'black' para referenciar colores específicos. Se discute la herencia de colores de Material Design y cómo se pueden modificar los colores de los textos y fondos. Además, se habla sobre la personalización de la tipografía y cómo se puede cambiar el estilo de los textos utilizando 'TextStyle'. Se menciona cómo ejecutar la preview en modo oscuro y cómo se pueden comparar visualmente los cambios entre los modos claro y oscuro. El párrafo concluye con una reflexión sobre la potencia y claridad del enfoque funcional y declarativo de Compose y se invita a los espectadores a compartir sus opiniones y a seguir en redes sociales y el servidor de Discord para una mayor interacción con la comunidad.

Mindmap

Keywords

💡Djerba

Djerba es mencionado como el framework más actual para crear interfaces de usuario nativas en Android. Es el núcleo del contenido del video, ya que el tutorial se centra en enseñar cómo utilizarlo para desarrollar vistas. Por ejemplo, se menciona que en la primera lección se aprendió a crear un proyecto con Djerba desde cero.

💡Jetpack Compose

Jetpack Compose es el toolkit oficial de Android para crear interfaces de usuario de manera declarativa y funcional. El video ofrece una introducción a sus fundamentos y cómo se integra en el desarrollo de aplicaciones Android. Se utiliza en el script para explicar cómo se estructuran y modifican los componentes visuales.

💡Modificadores

Los modificadores son una característica clave en Jetpack Compose que permiten cambiar la apariencia de los elementos visuales. En el video, se muestra cómo se pueden utilizar para aplicar estilos como tamaños, distancias y colores a los componentes, como se ejemplifica al crear un padding o cambiar el color de fondo de una imagen.

💡Programación funcional

La programación funcional es un paradigma de programación que se destaca en Jetpack Compose, permitiendo una construcción de interfaces más clara y predecible. En el script, se menciona como pilar importante dentro de Compose y se ilustra cómo los modificadores, siguiendo esta filosofía, realizan cambios en los elementos.

💡Preview

La función Preview en Jetpack Compose permite visualizar y probar componentes de la interfaz de usuario durante el desarrollo. En el video, se describe cómo se puede utilizar para obtener una vista previa de los cambios en tiempo real sin necesidad de ejecutar la aplicación completa.

💡Temas

Los temas en Compose son elementos que definen el aspecto de la aplicación, como colores, tipografías y formas. El video explica cómo se pueden utilizar temas dentro de la jerarquía de vistas y cómo se accede a las propiedades definidas en ellos, como se muestra al cambiar el color de un texto o la imagen de fondo.

💡Material Design

Material Design es un lenguaje de diseño de Google que se utiliza como base en Jetpack Compose para definir el estilo y la apariencia de las aplicaciones. En el script, se menciona cómo los temas heredan de Material Design y se pueden personalizar los colores y tipografías según esta guía de estilo.

💡Componentes

En el contexto de Compose, los componentes son bloques de construcción reutilizables de la interfaz de usuario. El video enseña cómo se crean y manipulan componentes como Text, Image y Box, y cómo se les aplican modificadores para definir su apariencia.

💡Propiedades

Las propiedades son atributos que se pueden cambiar en los componentes de Compose para personalizar su comportamiento y apariencia. En el script, se ejemplifican propiedades como el color, el padding y el estilo del texto, que se establecen para dar estilo a los elementos de la interfaz.

💡Modo Oscuro

El soporte para el modo oscuro es una funcionalidad que permite que las aplicaciones se adapten a diferentes entornos de iluminación. En el video, se muestra cómo se puede cambiar la configuración de una vista para visualizarla en modo oscuro, destacando la importancia de la accesibilidad y la personalización del usuario.

Highlights

Bienvenida a la segunda lección del curso de Djerba Túnez, un framework para crear interfaces de usuario nativas en Android.

En la primera lección, se creó un proyecto básico con Levy y se hizo un 'Hola Mundo' para entender los conceptos fundamentales.

Se enfatizó la importancia de comprender los conceptos básicos para entender las explicaciones futuras.

Se introdujo el concepto de 'previews' para visualizar el código en tiempo de desarrollo.

Se explicó cómo ejecutar una preview directamente desde el emulador sin iniciar el contexto completo de la app.

Se introdujo el concepto de 'modificadores' en Jetpack Compose para cambiar la apariencia visual de los elementos.

Se mostró cómo aplicar modificadores como tamaño, distancias y colores a elementos visuales.

Se explicó la importancia de la programación funcional en Jetpack Compose y cómo los modificadores se aplican en orden.

Se mostró cómo crear un padding y aplicarlo únicamente a una dirección específica.

Se introdujo el elemento 'Space' en Jetpack Compose para crear separaciones entre elementos.

Se explicó cómo aplicar modificadores de altura o anchura a imágenes y textos.

Se mostró cómo hacer que una imagen se vea circular utilizando el modificador 'clip'.

Se explicó cómo cambiar el tamaño de una imagen utilizando el modificador 'size'.

Se introdujo el concepto de 'temas' en Jetpack Compose y cómo utilizarlos como elementos compositivos.

Se mostró cómo acceder a los colores definidos en el tema utilizando 'MaterialTheme'.

Se explicó cómo modificar el color de los textos utilizando la propiedad 'color'.

Se mostró cómo utilizar la propiedad 'TextStyle' para cambiar la tipografía de los textos.

Se explicó cómo cambiar la apariencia de la vista para el modo oscuro utilizando 'LocalNightMode'.

Se mostró cómo comparar la vista en modo claro y oscuro para ajustar la visualización.

Se resaltó la capacidad de componer y reutilizar elementos en Jetpack Compose, siguiendo el paradigma de programación funcional y declarativa.

Se invitó a los espectadores a dejar comentarios, suscribirse, activar la campanita y compartir los videos.

Se ofreció información sobre cómo seguir el canal en redes sociales y cómo unirse a la comunidad.

Transcripts

play00:00

hola carmen qué tal estáis bienvenidos a

play00:02

moure de segunda lección del curso de

play00:04

djerba túnez el framework más actual

play00:06

para crear interfaces de usuario nativas

play00:08

en android quieres que continuemos

play00:09

conociendo sus fundamentos y

play00:11

familiarizándonos poco a poco con el

play00:12

entorno pues comenzamos a picar

play00:16

bienvenidos a moure de buy frys moure

play00:19

tutoriales de programación y desarrollo

play00:21

de ios y android

play00:23

en la primera lección aprendimos a crear

play00:25

nuestro proyecto conlleva con paul desde

play00:27

cero e hicimos una especie de hola mundo

play00:29

intentando enseñarte los principales

play00:31

conceptos que tenemos que empezar a

play00:32

tener claros para manejar ya para campus

play00:35

si no lo has visto te lo dejo por aquí

play00:36

arriba es esencial que comprendas los

play00:38

conceptos vistos en esa primera clase

play00:40

para entender todo lo que vamos a

play00:41

explicar en esta en futuras clases

play00:43

veremos conceptos mucho más definidos

play00:45

pero creo que en estas primeras

play00:46

lecciones es mejor trabajar con

play00:48

diferentes elementos ya que así

play00:49

tendremos una visión más amplia y

play00:51

general de lo que significa ya para con

play00:53

todos y sobre todo todo lo que nos puede

play00:55

aportar y cuál es la forma que tenemos

play00:56

de trabajar con él por supuesto como

play00:58

siempre que estamos desarrollando

play00:59

software lo principal es tener una buena

play01:01

base conocer cómo funcionan bien todas

play01:03

las piezas por separado que conforman

play01:05

este rompecabezas que es lleva campos

play01:07

para que una vez entendido nosotros

play01:08

podamos empezar a unirlas y antes de

play01:10

empezar decirte que si de verdad te

play01:11

parecen útiles estos tutoriales no te

play01:13

olvides de suscribirte al canal activar

play01:14

la campanita y seguirme redes y por

play01:16

supuesto de compartir estos vídeos dicho

play01:18

esto lo vamos a abrir nuestro proyecto

play01:20

andrés y estudio básicamente lo que

play01:21

teníamos hasta el momento era esta

play01:23

pequeña vista conformada por dos textos

play01:25

y una imagen que habíamos aprendido a

play01:27

componente zar y a estructurar dentro

play01:29

del siempre teniendo en cuenta cómo

play01:31

funcionaba la jerarquía en hierba

play01:33

compost y como cualquier elemento

play01:35

anotado con arroba com possible era

play01:37

susceptible de utilizar como vista por

play01:39

otra parte también aprendimos lo que son

play01:41

las previews básicamente para poder ir

play01:42

viendo nuestro código en tiempo de

play01:44

desarrollo te conté que también

play01:45

aparecería un icono en cada preview para

play01:47

directamente ejecutar esta preview en el

play01:49

emulador también sin necesidad de

play01:51

iniciar el contexto completo de la en

play01:53

algunos casos puede sernos útil este

play01:54

mismo botón también aparecerá en la

play01:56

parte visual en el propio lienzo de la

play01:58

preview y si nos encontramos en la vista

play02:00

dividida en la vista de script cuando

play02:02

hacemos clic en cada uno de los

play02:03

elementos se centrará su código en esa

play02:05

paz si hago clic en la imagen vemos cómo

play02:07

acaba de moverse el código y se ha

play02:09

centrado la parte donde tenemos definido

play02:11

el componente de imagen sigamos

play02:12

conociendo conceptos de lleva campos

play02:14

hasta ahora lo único que hemos hecho es

play02:16

pintar y recolocar componentes pero en

play02:18

ningún momento hemos modificado

play02:19

visualmente cada uno de los componentes

play02:21

algo por supuesto muy habitual en el

play02:23

desarrollo de interfaces gráficas aquí

play02:25

entra el concepto de modificador en

play02:28

cualquiera de los elementos visuales que

play02:29

nos aporta jetpack compose podremos

play02:31

utilizar modificadores que básicamente

play02:33

nos permiten cambiar la apariencia de

play02:35

cada uno de nuestros elementos que

play02:37

pueden ser estos modificadores por

play02:38

ejemplo tamaños distancias colores

play02:40

fuentes así que vamos a ir conociendo

play02:42

algunos de ellos para utilizar un

play02:44

modificador por ejemplo en row lo único

play02:46

que tendremos que hacer es la creación

play02:47

del elemento llamar a modify y para

play02:49

acceder a cada uno de los modificadores

play02:51

simplemente tendremos que llamar a

play02:53

modify al aire concatenando cada una de

play02:55

estas funciones que en realidad están

play02:57

modificando visualmente nuestro elemento

play02:58

la programación funcional es un pilar

play03:01

muy importante dentro del epa con box

play03:03

cada modificador realizará cambios sobre

play03:05

el elemento actual y lo devolverá

play03:06

modificado lo que devolverá es un nuevo

play03:09

modify al que podremos seguir aplicando

play03:11

nuevos modificadores ten en cuenta esto

play03:13

ya que estos modificadores se van a

play03:15

ejecutar en orden vamos a crear por

play03:16

ejemplo un padding un patín en todas las

play03:18

direcciones por ejemplo de 8 de pep por

play03:20

defecto se creará en todas las

play03:22

direcciones y si ahora revisamos nuestro

play03:24

layout vemos que tiene un margen en

play03:26

todas ellas un margen por supuesto de 8

play03:28

mp si quisiéramos aplicarlo únicamente

play03:30

al margen superior por ejemplo lo

play03:32

igualaríamos a top refrescamos nuestra

play03:34

preview y vemos como ahora únicamente

play03:36

aplica al margen superior en nuestro

play03:37

caso lo vamos dejar como estaba la

play03:39

inmensa mayoría de los modificadores son

play03:41

comunes a todos los elementos igual que

play03:43

estamos aplicando nuestra fila lo

play03:44

podríamos aplicar a nuestra columna por

play03:46

ejemplo en este caso le indicado que

play03:47

sólo actúe en el start es decir al

play03:49

principio apareciendo esta separación en

play03:52

el medio sigamos hablando de cómo crear

play03:53

separación es conociendo un nuevo

play03:55

elemento con possible llamado space yo

play03:57

en mi caso quiero crear una separación

play03:59

entre estos dos elementos así que entre

play04:02

ellos voy a crear un space en un space

play04:04

air con un modificador pero que en este

play04:06

caso haga referencia a su altura

play04:08

llamando a la propiedad height por

play04:09

ejemplo con 16 de que ocurriría

play04:11

aparecerá una separación entre los

play04:13

textos de 16 y los spitzer es muy

play04:15

habitual utilizar modificadores de

play04:17

altura o de anchura conozcamos

play04:19

modificadores de otro tipo esta vez

play04:21

aplicados a la imagen y a los textos el

play04:23

constructor de nuestra imagen tenía dos

play04:25

parámetros si queremos añadir el

play04:27

modificador únicamente escribimos una

play04:28

coma y llamamos a modify al igual que

play04:31

hemos hecho anteriormente que queremos

play04:32

aplicarle un color de fondo tan fácil

play04:34

como llamar a background pasándole un

play04:36

color queremos que nuestra imagen se vea

play04:38

circular pues aquí vamos a ver por

play04:40

primera vez cómo seguimos concatenando

play04:42

modificadores simplemente escribimos un

play04:44

punto y colocamos el siguiente

play04:45

modificador llamando a clip y pasándole

play04:47

un site en nuestro caso circle pero si

play04:50

refrescamos la preview vemos lo

play04:51

siguiente la imagen sigue siendo

play04:53

cuadrada esto hace referencia al orden

play04:55

en el que estamos ejecutando los

play04:56

modificadores ya que antes hemos pintado

play04:58

todo el fondo de color gris un fondo que

play05:01

ha actuado sobre un cuadrado en este

play05:02

caso tendremos que invertirlos antes

play05:04

tendremos que hacer que la imagen sea

play05:06

redonda y después aplicarle un color de

play05:09

fondo si ahora refrescamos vemos que en

play05:11

este caso sí que funciona la imagen

play05:13

parece que es muy grande vamos a darle

play05:15

un tamaño fijo para eso simplemente

play05:17

vamos a concatenar un nuevo modificado

play05:18

en este caso llamado size donde le

play05:20

podemos pasar un tamaño fijo o una

play05:22

altura y una anchura en nuestro caso

play05:24

como queremos que mantenga la proporción

play05:25

le vamos a dar a todos los lados el

play05:27

mismo tamaño por ejemplo 64 de p en este

play05:29

caso no tendríamos ningún problema en

play05:31

ponerlo al principio o al final ya que

play05:33

es un modificador que no importa el

play05:34

orden en el que se aplique por lo menos

play05:36

con los modificadores que tenemos hasta

play05:38

ahora que por cierto voy a formatear

play05:39

para dejar cada uno en una línea y que

play05:41

los veamos de una forma más simple el

play05:42

siguiente concepto del que quiero hablar

play05:44

es el concepto de tema decirte que en

play05:46

este caso los temas también funcionarán

play05:47

como elementos compositivos con lo cual

play05:49

los tendremos que colocar dentro de

play05:51

nuestra jerarquía de vistas en mi caso

play05:52

como elemento superior el tema principal

play05:54

de nuestra app se llamará como el propio

play05:56

en nuestro caso hierba compost tutorial

play05:59

fin que ha añadido en el set content y

play06:01

que dentro colocar en my component el

play06:02

elemento que estábamos pintando la raíz

play06:04

que en realidad se corresponde con toda

play06:06

nuestra vista haremos lo mismo también

play06:07

en la preview en este momento ya

play06:09

podríamos empezar a utilizar dentro de

play06:10

la jerarquía de vistas con possible los

play06:12

elementos de nuestro tema si no sabes de

play06:14

dónde sale este tema decirte que tendrás

play06:16

una carpeta dentro de la llamada fin con

play06:18

un fichero coaching de este mismo nombre

play06:20

aquí por defecto tendremos un elemento

play06:22

con possible que ha creado el sistema

play06:23

que básicamente se ha encargado de

play06:25

definir diferentes colores tanto en su

play06:27

modo claro como modo oscuro y utilizando

play06:29

como base material design dentro

play06:31

tendremos diferentes ficheros para

play06:33

definir los colores the shapes e incluso

play06:35

la tipografía por supuesto esto es

play06:37

totalmente configurable en nuestro caso

play06:39

lo dejaremos por defecto y empezaremos a

play06:41

ver cómo trabajar con temas dentro de

play06:43

nuestra vista como jerárquicamente el

play06:45

elemento superior es nuestro tema ya

play06:47

podremos empezar a utilizar todas las

play06:48

propiedades definidas dentro de vayamos

play06:50

al color de nuestra imagen como nuestro

play06:52

tema hereda de material design podremos

play06:54

acceder a material fin y a los colores

play06:57

que hemos definido por ejemplo llamando

play06:58

a prime ar y si nos vamos a nuestro tema

play07:00

por ejemplo a la paleta clara que

play07:02

estamos ahora veremos que como primary

play07:04

tenemos definido este color morado si

play07:06

queremos por ejemplo modificar el color

play07:08

de nuestros textos podremos utilizar la

play07:10

propiedad directamente color pero que en

play07:12

este caso vamos a aprovechar a pasársela

play07:14

como parámetro a nuestro elemento de

play07:16

vista a parte del texto le pasaremos un

play07:18

color que será de tipo color el

play07:19

constructor de texto admite una

play07:21

propiedad llamada color que igualaremos

play07:22

al color que le llega a nuestro

play07:24

componente my text en este momento

play07:26

nuestro programa va a mostrar un error a

play07:27

nuestro componente my text le falta

play07:29

pasar ese color por supuesto podemos

play07:31

seguir accediendo a material film ya los

play07:33

colores que hemos definido establece

play07:34

accediendo a primark iberia y en este

play07:37

caso vamos a definir un nuevo color en

play07:39

colores por ejemplo vamos a crear el

play07:40

color blanco y negro simplemente creando

play07:42

dos constantes que hagan referencia a

play07:44

esos colores y ya tenemos creados en el

play07:46

sistema en nuestro tema teníamos

play07:47

definida la paleta de colores clara y

play07:49

oscura pudiendo en cada una de las

play07:51

paletas establecer estos nuevos colores

play07:53

utilizando esos y las propiedades que

play07:55

podemos sobreescribir las propiedades

play07:57

que contienen la palabra on hace

play07:59

referencia a los textos que actúan sobre

play08:01

los colores de estos mismos valores por

play08:03

ejemplo un background por defecto es el

play08:06

color del texto dentro de los elementos

play08:08

con la propiedad así que es un buen

play08:10

sitio para utilizar nuestros nuevos

play08:12

colores por ejemplo en el background del

play08:14

modo oscuro diremos que el color del

play08:16

texto sea blanco y en el modo claro al

play08:18

contrario sea negro de todas formas si

play08:20

entramos en el código por defecto ya

play08:22

veremos que se comporta así pero así

play08:23

también vamos comprendiendo cómo

play08:25

funcionan los temas si ahora volvemos a

play08:27

nuestro componente voy a indicar que

play08:28

nuestro segundo texto tenga el color o

play08:30

bagram si refrescamos veremos cómo se

play08:32

han aplicado los dos colores y como para

play08:34

que se vea mejor a nuestra fila le vamos

play08:36

a dar un color de fondo y amanda bagram

play08:38

y al color que por defecto tenemos

play08:40

definido llamado background que es

play08:42

blanco en el modo claro y negro en el

play08:44

modo oscuro y ahora modificamos su orden

play08:46

aplicamos primero el background y

play08:48

después el padding lo que veremos es

play08:49

como el color de fondo también aplica el

play08:51

padre veamos una nueva propiedad y en el

play08:53

texto que hace referencia a su

play08:55

tipografía a nuestro texto le vamos a

play08:57

pasar un nuevo parámetro un parámetro

play08:58

llamado style que será el tipo text

play09:01

style también perteneciente con post la

play09:03

propiedad style la igual haremos al moho

play09:06

para mí y en la creación de nuestros

play09:07

textos le pasaremos el estilo del texto

play09:10

que queremos pintar también haremos

play09:11

referencia a material film en este caso

play09:13

a tipografía pudiendo acceder así a las

play09:15

diferente tipografías definidas por

play09:17

defecto en el sistema a las que le dado

play09:19

los valores title 1 y sub title 2

play09:21

viéndose de esta forma por supuesto

play09:23

también son valores que podemos

play09:24

redefinir último veamos cómo modificar

play09:26

nuestra preview para que se ejecute en

play09:28

modo oscuro simplemente en preview

play09:30

tendremos que pasarle un parámetro que

play09:32

se llama weymouth llamaremos a

play09:34

configuration y aymond night a yes

play09:37

acordándote siempre de importar la

play09:39

referencia correcta que ha pasado en

play09:41

este caso los colores han cambiado

play09:43

automáticamente utilizando el

play09:45

correspondiente definido en el modo

play09:46

oscuro que queremos estar comparando

play09:48

continuamente como se vería en modo

play09:50

claro oscuro pues simplemente en nuestro

play09:52

elemento compositivo el que hace

play09:53

referencia a la preview loa notaremos de

play09:55

nuevo con preview pero este caso sin

play09:58

configurar le nada es decir como lo

play09:59

teníamos al principio pasando a ver

play10:01

directamente una preview en modo claro y

play10:03

una preview configurada como modos en la

play10:05

que detectamos por ejemplo que el texto

play10:07

de título no se ve muy bien así que voy

play10:09

a modificar para utilizar prime are y en

play10:12

vez de prime ar hiparión ya que parece

play10:14

que en ese caso el color se adaptará

play10:15

mucho mejor espero que te haya parecido

play10:17

muy útil lo que hemos visto en esta

play10:19

segunda lección y que poco a poco el

play10:20

flujo de trabajo en hierba con posters

play10:23

así personalmente si lo comparamos con

play10:24

la forma a la que teníamos de elaborar

play10:26

vistas anteriormente esta es mucho más

play10:28

potente y por supuesto mucho más clara

play10:30

al verla directamente desde código y en

play10:32

las previews recuerda que el principio

play10:33

general de compost es la capacidad de

play10:36

componen tirar y reutilizar todo esto

play10:38

desde el paradigma de programación

play10:39

funcional y declarativo déjame en

play10:41

comentarios que te ha parecido la clase

play10:42

y si te ha gustado no te olvides de

play10:44

suscribirte activar la campanita dejar

play10:46

tu like y compartirlo también me puedes

play10:48

encontrar en redes sociales como arroba

play10:49

murete en twitter instagram 'tik tok' y

play10:52

sobre todo en tuits donde hacemos

play10:53

directos de lunes a viernes sobre

play10:55

programación y tecnología y si quieres

play10:57

colaborar aún más con la comunidad

play10:58

puedes unirte al servidor de disco y

play11:00

formar parte del programa de miembros

play11:02

del canal en youtube o de suscriptores

play11:04

en tweets como cada semana a muchísimas

play11:06

gracias por seguir ahí y por ayudarme a

play11:08

poder continuar a crear este tipo de

play11:10

contenido nos vemos muy pronto en la

play11:12

próxima elección hasta otra carmen

play11:15

[Música]

play11:27

[Música]

Rate This

5.0 / 5 (0 votes)

Related Tags
Jetpack ComposeInterfaces de UsuarioDesarrollo AndroidTemas y EstilosModificadores VisualesProgramación FuncionalTutoriales de ProgramaciónDiseño de Interfaz GráficaMaterial DesignDesarrollo de Software
Do you need a summary in English?