JETPACK - COMPOSE Themes, Material Design & State 

Facundo Rodríguez Arceri ➢ Organizador en Android Devs Buenos Aires y GDG Buenos Aires ➢ Android Developer en Ring (Amazon) ➢ Docente e instructor ➢ Experiencia con Android desde 2011 ➢ @facundomr 

¡Hoy programemos! ❖ Bienvenidos al día 2 del workshop. ❖ Vamos con manos a la obra. ❖ Repasemos algunos @Composables usados hasta ahora. ➢ Surface ➢ Scaffold ➢ TopAppBar ➢ Text ➢ IconButton ➢ Icon ➢ Column ➢ Divider ➢ Card ➢ Row ➢ Image ➢ ... 

Otro repaso: Modifiers ❖ Se utilizan en casi todos los @Composables como forma de establecer una manera estándar de darles “estilo”. ❖ Por convención, debe ser el primer parámetro no-obligatorio de las @Composable, y tener por default el valor del object Modifier. ❖ El orden es importante: las llamadas encadenadas son aplicadas en el mismo orden en el que se llaman, y pueden modificar el resultado final. 

❖ Todo nuevo proyecto creado con Compose ya tiene un Theme. En nuestro caso SouthAmericanQualifiersTheme. ❖ Jetpack Compose implementa Material Design a través de MaterialTheme, el cual es una librería “extra” a las mínimas e indispensables para utilizar Compose. ❖ MaterialTheme es un @Composable, y recibe colores, tipografías y formas. ❖ ¿Cómo agregar colores? Con extension propertys a Colors ❖ Para utilizar y modificar las tipografías del proyecto lo haremos a través de las clases Typography y TextSyle. Nuevo tema: ¡Themes! 

❖ La anotación @Preview tiene algunos superpoderes… veamos su definición. ❖ name, group ❖ showBackground, backgroundColor ❖ widthDp, heightDp ❖ uiMode ❖ showDecoration, device @Preview 

❖ @Composables que vienen en el paquete androidx.compose.material.* ❖ Resulta muy interesante, por ejemplo Scaffold. ❖ De manera sencilla nos permite, por ejemplo, definir bottomBar, topBar, floatingActionButtons, drawers, etc. @Composables de Material Design 

❖ ¿Preguntas? ❖ ¿Dudas? ❖ ¿Algo que quieran profundizar de lo visto hasta acá? ¡Hagamos una pausa! 

❖ ¿De qué hablamos cuando hablamos del Estado de la aplicación? ❖ Flujo de datos unidireccional ➢ Simplifican la arquitectura. ➢ Top-down: Los @Composables reciben los objetos que renderizan. ➢ Bottom-up: Los eventos que ocurren en un @Composable son delegados a quien los invocó. ❖ Single source of truth. ❖ Estos patrones/soluciones atacan problemas complejos: facilidad para probar los componentes, encapsulamiento del estado, consistencia. ❖ ViewModels y LiveData: observeAsState Nuevo tema: ¡State! 

Referencias ❖ https://developer.android.com/jetpack/compose/themes ❖ https://developer.android.com/jetpack/compose/state ❖ https://joebirch.co/android/exploring-jetpack-compose-preview-annotation/ 

https://www.facebook.com/escueladevhack/ Escuela de Hackers www.devhack.co https://github.com/escueladevhack