- Create an application Fetch recipes from an API call and caches them to Room DB locally
- Also allow user to view Recipes and ingredients through the app
Combine cached + network data
- Open the app click on a dish
- Details screen should display dish ingredients and image
- Data should be able to view the data offline
- Store recipe title + cuisine + image in Room
- MVVM + StateFlow
- Screen 1: List of recipes
- Screen 2: Detail screen (ingredients list)
- How to add data from API call to Room Database
- Allow data to be viewed offline while internet is down
- Passing params of type list to another screen
- How to properly use Top App Bar for creating back arrow for navigation
- How to create Entity tables and Database for storage
candidate.mov
- When working with navigation ensure that AppNavHost is in MainActivity and you pass navController to it
- When you get error like this(below) the first thing to check is your navController.navigate method and params that you pass to it to ensure names are proper and no mistakes in param values
java.lang.IllegalArgumentException: Cannot navigate to NavDeepLinkRequest{ uri=android-app://androidx.navigation/ recipeDetailsScreen?nameOfDish=Classic Margherita Pizza&ingredients=Pizza dough,Tomato sauce,Fresh mozzarella cheese,Fresh basil leaves,Olive oil,Salt and pepper to taste&imageURL=https://cdn.dummyjson.com/recipe-images/1.webp }
When passing arguments to another screen like this(below) make sure passing valid param structure to the Screen you're navigating to.
- Ultimately these are equivalent:
- nameOfDish={nameOfDish} - AppNavGraph
- nameOfDish=$nameOfDish - UI Screen
composable(
route = Route.RECIPE_DETAILS_SCREEN + "?nameOfDish={nameOfDish}&ingredients={ingredients}&imageURL={imageURL}",
arguments = listOf(
navArgument("nameOfDish") { type = NavType.StringType },
navArgument("ingredients") { type = NavType.StringType },
navArgument("imageURL") { type = NavType.StringType }
)
){
//Screen containing the navigate method will only contain the values them selves not the curly braces("{}")
navController.navigate(
Route.RECIPE_DETAILS_SCREEN +
//nameOfDish, ingredients, imageURL
"?nameOfDish=$nameOfDish" // the value only
+"&ingredients=$ingredientsListAsString" // the value only
+"&imageURL=$imageURL" // the value only
)
...