Mobile Application Development 2022/23 fall

Recipe browser app with Fragments

In this homework, you need to finish the Fragment-based version of recipe browser app from Lab3 , adding the rating part. The app allows listing of recipes and opening the detailed contents of individual recipes. Giving a rating to a recipe will update its appearance in the list.

The app should:

• Initially display a list of recipe titles in one Fragment (filling the entire screen) (1 pt)
• Clicking on a recipe in the list should navigate to a corresponding "recipe details" fragment, replacing the "recipe list" fragment (2 pt)
  • The details fragment should display the title and full content of a recipe.
  • Use Fragment arguments to pass data to the fragment here.
• The "recipe details" Fragment should allow user to enter a rating and save the rating (Just like we did in lab 3). (1.5 pts)
  • Clicking "save" should navigate the user back to the list and the recipe's appearance in the list should reflect the rating (with setBackgroundColor)
    • NB! You don't need to worry about losing previous rating colors in ListFragment as the user rates several recipes, only showing the latest rating is OK!

In lecture 5 we will learn how to achieve this, for now let's focus on learning about navigation, passing data between UI views and not worry about state storing.

• Note: The user should also be able to go back to the list without entering any rating.

• Use the Navigation Component and Navigation Graph.
  • You will have 2 navigation graph actions:
    • One for opening a recipe's details
    • One for giving a rating for a recipe
  • Use Fragment arguments
• The recipe titles and contents should be loaded from a .json file, you can re-use .json solution from Lab 3.
  • Similar to lab3, each view component (e.g. Details Fragment) should load the necessary data from the .json file by itself. Use Recipe ID-s to keep the data passed to Fragments via arguments light. (0.5 pts)

Additional requirements:

• You should have exactly 2 Fragment Kotlin classes, (DetailsFragment, ListFragment) and 1 Activity class (MainActivity)

Feel free to be creative with the design of the app. If you make some additional assumptions, it's recommended to document them.

Bonus task 1 - landscape mode (2 pts)

In landscape mode, the app should:

• show 2 fragments side-by-side
  • The left fragment should be narrower, and show the same "recipe list"
  • The right fragment should initially be empty (not displaying any recipe contents)
• Clicking on a recipe should display the recipe title + contents in the same "recipe details" fragment as above, except this fragment is now visible simultaneously with the recipe list fragment
  • Clicking on a recipe should fully replace any existing "recipe details" fragment with a new one.
• Note: the rest of the behaviour (in portrait mode) should still remain the same as before

Bonus task 2 - Add a Bottom Navigation and Help Fragment ( 1 pt)

(For portrait mode, if you did the other bonus task ):

• Add another Destination (Fragment) to your Navigation, called HelpFragment.
  • This view will show helpful information to the user how to use this app.
• Make a Global Action to HelpFragment, set its id to action_open_help
• Add a 2nd Global Action to ListFragment, set its id to action_open_recipe_list
• Add a Bottom Navigation Bar to Main Activity.
  • Create two menu items for the bar: "Recipes" and "Help"
    • Make the id-s of these items identical to the 2 actions defined above!
• Initialize the Bottom Navigation bar in MainActivity
  • Use setupWithNavController(), as described here https://developer.android.com/guide/navigation/navigation-ui#bottom_navigation