I implement in this demo app all concepets I've learned in google codelabs such as:
- creating a low-fidelity prototype
- composition & recomposition
- state hoisting
- basic compose layouts
- buttons click behavior.
- Use Lazy Columns to make a list.
- Add animations.
The main resource to get started with this project:
It's recommended to have these prerequisites for completing this project:
- Ability to create and run a project in Android Studio.
- Experience with Kotlin syntax, collections, and classes.
- Ability to apply basic Jetpack Compose concepts.
- Experience with composable functions, which includes Card, Text, Image, and Button composables.
![low_fi](https://private-user-images.githubusercontent.com/139881384/301236279-d841b844-018d-4bf0-b191-50551dbe6d38.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjYxMTQzNTUsIm5iZiI6MTcyNjExNDA1NSwicGF0aCI6Ii8xMzk4ODEzODQvMzAxMjM2Mjc5LWQ4NDFiODQ0LTAxOGQtNGJmMC1iMTkxLTUwNTUxZGJlNmQzOC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTEyJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkxMlQwNDA3MzVaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02ZWJhZGE4NzkxNTU2MWZjNmIwMjA1NzA3YzkzNTdlYWVmOGY0NjQ4ZDMwOTkwMTVjODJmZjFiZWI0OTE2ZGQxJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.dVjO17hMudlW2TofUjDbY9nTkkavmAUOXPNtdhx7B0c)
-
I made a simple model that provides me a basic idea of what the app looks like. Then, I divide this drawing into sections to identify which composables I'll use.
-
Later on, I design the UI on how the app will look like using Figma.
-
Finally, I make the logic and layout of the app using Kotlin and Jetpack Compose library.
recipe_demo.mp4
- I made this app for educational purposes only & all content can be found in this article.
- I supposed to add 30 meals here. However, since I accomplish the required UI and logic, there's no need to add more...