The Navigation component provides support for Jetpack Compose applications. You can navigate between composables while taking advantage of the Navigation component’s infrastructure and features.

Create a Detail screen that displays de Details of a given pokemon. The composable function needs to take the pokemon name as parameter to know which one's details to display.

This is a mere example, don't let it limit your design.

• Detail screen will contain (in order)
  • The pokemon image (default sprite) taking half of the screen.
  • Name in bold and 40sp, horizontally centered, 5dp margin to the image.
  • Type(s): Some pokemon have 1 type, others have 2. If it's dual, separate them with a /
  • Weight and Height need to be recalculated from hectograms to kg, and from decimeters to cm.
  • Stats: they're six, the value is between 1 and 255. LinearProgressIndicator could be used for this.
• Set up a simple NavHost so that the app will start in the PokemonList screen and add a route to pokemonDetail screen, which will need a parameter (the name of the pokemon).

Trying to keep coding all in MainActivity will result in a mess, so create the following packages

/ui/screens/pokemonlist/ 
/ui/screens/pokemondetail/ 

Add the composable function of each screen in its own file to its package.

At this point, you'll have several data classes. To avoid mess, create a data package and move them to it

 /data/ 

• The detail screen can get a bit complex. It's better to get a ui/ structure of packages and create there separate files to hold each composable.

• You should notice that you repeat some elements (mostly Text) with the exact same configuration (font size, font weight, padding, etc). You can create a reusable composable in a separate package like

/ui/common/

 LabelText (usually in bold)
 ValueText (default font weight)
 etc. 

• Place all navigation code in the MainActivity - though this will change in future lessons.

• You'll need to propagate the NavHost to the PokemonList screen in order to use it to navigate when the user clicks on one of the list elements. This will "break" your previews, comment them out for this lesson.

By now, you can leave the detail screen via "back button".

Hardcode the following data to feed the list in a separate class called DataSource to keep the Activity code a bit cleaner.

• NavHostController
• NavHost
• Passing arguments between destinations
• LinearProgressIndicator (optional, just for looks)

• implementation("androidx.navigation:navigation-compose:2.4.0")

Use the following Json to create one Pokemon Detail. You can create the data class with the Android Studio plugin "Json to Kotlin Class", but you'll need to hardocde the values manually.

{ "base_experience": 101, "height": 3, "name": "ditto", "types": ["normal"], "sprites": { "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/132.png", "back_female": null, "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/132.png", "back_shiny_female": null, "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/132.png", "front_female": null, "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/132.png", "front_shiny_female": null }, "stats": { "hp": {"value": 68}, "attack":{"value": 38}, "defense": {"value": 58}, "special-attack": {"value": 45}, "special-defense": {"value": 58}, "speed": {"value": 48} }, "weight": 40 }