Android App Programming 2021-2022
Lab 8: Fragments and Navigation

In this lab, you will learn how to use Fragments and create Navigation in your apps.

Remember:

The proxy's address is proxy.iut-orsay.fr and its port number is 3128.

If ou get the error "Installed Build Tools Revision 31.0.0 is corrupted", go into the file Grardle Scripts > Build.gradle (module) and change 31 and replace it by 30 in the following 3 places: compileSdkVersion, buildToolsVersion, targetSdkVersion.

Exercise 1: Navigation

In this exercise we will create an app where we can navigate between two fragments. You can also follow the exercise in the class video.

Part 1: Create two Fragments
1. Create an empty activity project.
2. The goal is to create two fragments. In the first fragment you should have an EditText, a SeekBar and a Button. In the second fragment a TextView. Follow the tutorial from the book in chapter 30.1-30.5 to create two fragments (this assumes you have read Chapter 29). In 30.2 you do NOT need to use ebookfrenzy.com as the Company Domain (use whatever you want), but make sure your own package path on the top of your classes. Use 21 as the minimum Android sdk.
3. Read 30.7 up until page 318 (skip 30.6) so you can understand the listeners for the Seekbar.

Part 2: Navigation
1. we will follow the steps provided in the Getting Started Guide you had to read for today (guide) but we will adapt it to create our content.
2. Add the dependencies in your build.gridle Module (see the guide).
3. Create a navigation graph following the guide or the class video. Create a new destination, when it asks you for a fragment add the ToolbarFragment as your starting destination.
4. Go back to your main_activity.xml and add a FragmentContainerView - see the guide on "Adding a NavHostFragment in XML".
5. Using the navigation graph create a new destination, add here the TextFragment. See the guide in "Add destinations to the navigation graph", "Designate a screen as the start destination".
6. Connect your two fragments in the navigation graph, following the guide on "Connect destinations". Notice the name of your action that connects the two fragments in the navigation graph (mine is called action_toolbarFragment_to_textFragment).
7. In your fragments, in their onCreate method, instead of returning the View, keep it in a variable so you can edit the content and return it at the end.
8. In the first fragment add a listener to your Button. Inside it call Navigation.findNavController(view).navigate(R.id.action_toolbarFragment_to_textFragment) - you can now move between fragments !!!

Exercise 2: Navigation and Communication

In the second exercise our goal is to add communication. You can also follow the exercise in the class video.

Add the required declarations in build.gridle as suggested in the guide "Ensure type-safety by using Safe Args".
In your button listener on the ToolbarFragment create a Bundle (let's call it bun). You can use the methods putString and putInt to store the text and size of the font.
You can pass the bundle to the TextFragment throuth the Navigation Navigation.findNavController(view).navigate(R.id.action_toolbarFragment_to_textFragment, bun)
Use what you know from past lessons to read the bundle in the TextFragment on onCreate(). Android studio has already some placeholders for you - see the method getArguments() that helps you read the bundle.
In the TextFragment you can use the TextEdit methods setTextSize() and setTextSize() to change the size of your text based on the SeekBar from the ToolbarFragment.

Exercise 3: Going further. Other activity and app types

The goal of this class is to create a different activity type from the Android Studio examples.

Create a new project that is a BasicActivity, a BottomNavigation or a NavigationDrawer project and look at their structure. You should be able to see Bindings instead of "findViewBy" and a navigation model. In some you may see Fragments and their ViewModels.
Optional: Try to recreate some of your past exercises to one of these activities, such as the Image viewer app from Lab3-Ex3.
Optional: If you want to go even further and look at how ViewModels work, here is a starting point: ViewModels

Exercise 4 (optional): multiple Fragments

In this exercise we will create a UI interface with a single Activity that contains two Fragments. The Fragments will communicate with each other through the Activity that contains them.

Follow the tutorial from the book in chapter 30 (this assumes you have read Chapter 29). Run the program with each addition to see how your interfaces changes. See the notes bellow on issues with the tutorial.

Notes on issues in the book tutorial:
1. In 30.2 you do NOT need to use ebookfrenzy.com as the Company Domain (use whatever you want), but make sure your own package path on the top of your classes. In Use 21 as the minimum Android sdk.
2. In 30.6 as a layout use the FragmentContainerView from Common (instead of fragment) - you'll need to constraint the layout.
3. In 30.8 in the method findFragmentById the fragment you are looking for is in one of the FragmentContainerView you created, so you need to pass the id of the FragmeentContainerView that has the text_fragment inside.

back to the course web site

FR - FR - FR

Dans ce laboratoire, vous apprendrez à utiliser Fragments et Navigation.

Rappel :

L'adresse du proxy est proxy.iut-orsay.fr et numéro de port est 3128.

Si vous avez l'erreur "Installed Build Tools Revision 31.0.0 is corrupted", c'est un problème avec les build-tools les plus récents. Pour l'instant nous allons utiliser une version des outils plus vielle : allez dans le fichier Grardle Scripts > Build.gradle (module) et changez 31 et remplacez-le par 30 aux 3 endroits suivants : compileSdkVersion, buildToolsVersion, targetSdkVersion. Nous ferons cela à partir de maintenant dans tous nos projets.

Exercice 1 : Navigation

Dans cet exercice, nous allons créer une application où nous pouvons naviguer entre deux fragments. Vous pouvez également suivre l'exercice dans la vidéo du cours.

Partie 1 : Créer deux fragments
1. Créez un projet d'activité vide (Empty Activity).
2. Le but est de créer deux fragments, dans le premier fragment, vous devriez avoir un EditText, une SeekBar et un bouton. Dans le second fragment, un TextView. Suivez le tutoriel du livre au chapitre 30.1-30.5 pour créer deux fragments (cela suppose que vous ayez lu le chapitre 29). Dans 30.2, vous n'avez PAS besoin d'utiliser ebookfrenzy.com comme domaine de la société (utilisez ce que vous voulez), mais assurez-vous que votre propre chemin de package dans vos classes. Utilisez 21 comme sdk Android minimum.
3. Lisez 30.7 jusqu'à la page 318 (sautez 30.6) afin de comprendre les écouteurs (listeners) pour la Seekbar.

Partie 2 : Navigation
1. Nous allons suivre les étapes fournies dans le Starting Guide que vous avez dû lire pour aujourd'hui (guide) mais nous allons l'adapter pour créer notre contenu.
2. Ajoutez les dépendances dans votre module build.gridle (voir le guide).
3. Créez un navigation graph en suivant le guide ou le video. Créez une nouvelle destination, quand il vous demande un fragment, ajoutez le ToolbarFragment comme Start Destination.
4. Retournez dans votre main_activity.xml et ajoutez un FragmentContainerView - voir le guide sur "Adding a NavHostFragment in XML".
5. En utilisant le navigation graph, créez une nouvelle destination, ajoutez ici le TextFragment. Voir le guide dans "Add destinations to the navigation graph", "Designate a screen as the start destination".
6. Connectez vos deux fragments dans le graphe de navigation, en suivant le guide dans "Connect destinations". Remarquez le nom de votre action qui relie les deux fragments dans le graphe de navigation (la mienne dans le video s'appelle action_toolbarFragment_to_textFragment).
7. Dans vos fragments, dans leur méthode onCreate, au lieu de renvoyer la View, gardez-la dans une variable pour pouvoir modifier le contenu et la renvoyer à la fin.
8. Dans le premier fragment, ajoutez un écouteur à votre bouton. À l'intérieur de celui-ci, appelez Navigation.findNavController(view).navigate(R.id.action_toolbarFragment_to_textFragment) - vous pouvez maintenant vous déplacer entre les fragments ! !!

Exercice 2 : Navigation et communication

Dans le deuxième exercice, notre objectif est d'ajouter la communication. Vous pouvez également suivre l'exercice dans la vidéo du cours.

Ajoutez les déclarations requises dans build.gridle comme suggéré dans le guide "Ensure type-safety by using Safe Args".
Dans votre Listener de bouton sur le ToolbarFragment, créez un Bundle (appelons-le bun). Vous pouvez utiliser les méthodes putString et putInt pour stocker le texte et la taille de la police / font.
Vous pouvez passer le bundle au TextFragment par la navigation Navigation.findNavController(view).navigate(R.id.action_toolbarFragment_to_textFragment, bun)
Utilisez ce que vous savez des leçons passées pour lire le bundle dans le TextFragment onCreate(). Android studio a déjà quelques placeholders pour vous - voir la méthode getArguments() qui vous aide à lire le bundle.
Dans le TextFragment, vous pouvez utiliser les méthodes TextEdit setTextSize() et setTextSize() pour modifier la taille de votre texte en fonction de la SeekBar de ToolbarFragment.

Exercice 3 : aller plus loin. Autres types d'activités et d'applications

L'objectif est de créer un type d'activité différent des exemples d'Android Studio.

Créez un nouveau projet qui est un projet BasicActivity, un BottomNavigation ou un NavigationDrawer et regardez leur structure. Vous devriez pouvoir voir des Bindings à la place de "findViewBy" et un modèle de navigation. Dans certains, vous pouvez voir des Fragments et leurs ViewModels.
Optionnel : Essayez de recréer certains de vos exercices passés à l'une de ces activités, comme l'application Image viewer du Lab3-Ex3.
Optionnel : Si vous voulez aller encore plus loin, regardez comment fonctionnent les ViewModels, voici un point de départ : ViewModels

Exercice 4 (Optionnel) : Fragments multiples

Dans cet exercice, nous allons créer une interface utilisateur avec une seule Activity qui contient deux Fragments. Les Fragments communiqueront entre eux via l'Activité qui les contient.

Suivez le tutoriel du livre au chapitre 30 (cela suppose que vous ayez lu le chapitre 29). Exécutez le programme avec chaque ajout pour voir comment vos interfaces changent. Voir les notes ci-dessous sur les problèmes avec le tutoriel.

Notes sur les problèmes du tutoriel du livre :
1. En 30.2, vous n'avez PAS besoin d'utiliser ebookfrenzy.com comme domaine de la société (utilisez ce que vous voulez), mais assurez-vous que votre propre chemin de package est dans vos classes. Utilisez 21 comme le sdk Android minimum.
2. En 30.6 comme layout utilisez le FragmentContainerView dans Common (au lieu de fragment) - vous aurez besoin de contraindre le layout.
3. En 30.8 dans la méthode findFragmentById le fragment que vous recherchez est dans l'un des FragmentContainerView que vous avez créé, vous devez donc passer l'id du FragmeentContainerView qui a le text_fragment à l'intérieur.