Philosophie et historique d’Android Histoire
• 2003. Objectif initial : un SE pour téléphone mobile permettant de faire plus que d’envoyer des SMS. Permettant d’interagir avec l’environnement, de connaître son emplacement géographique. C’est la préhistoire d’Android.
• Janvier 2007 : sortie du premier Iphone.
• Novembre 2007 : création de l'Open Handset Alliance, OHA (35 entreprises dont Google) dont le but est de développer un SE mobile open source : Android.
• 4ème trimestre 2010 : Android est le SE le plus utilisé au monde.
Philosophie
• Open Source
• Bibliothèque open source puissantes : SQLite, OpenGL, …
• Gratuit : 25$ à vie pour déposer une ou des applications sur le Play Store.
• Beaucoup d’API qui facilitent la tâche.
• Facile à vendre : sur le Play Store.
• Multi-supports : téléphone, tablette, domotique, etc.
Langage
• Les applications Android sont codées en Java (et Kotlin depuis 2017, recommandé par Google depuis 2019).
• Une bonne connaissance du Java est nécessaire pour faire de l’Android.
Installation
Conditions initiales
• 2GO de RAM. Mais 8, c’est mieux !
• 1,5GO de DD pour l’installation.
• Un processeur rapide, c’est mieux !
• Windows Vista et suivant, MacOS 10.8.5 et suivant, Ubuntu 14.04 et suivant.
Installation
• JDK : https://www.oracle.com/java/technologies/javase-downloads.html
• Android Studio : https://developer.android.com/studio/index.html
• Pour les détails, voir ici :
https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2023748-installation-et-configuration-des-outils
Créer un premier projet
• New Project
• Application Name : le nom de l’application sur Google Play ! Ne pas se tromper ne nom ! (Exemple : TopQuiz : Maj1, camelCase)
• Package Name : nom du dossier dans lequel sera rangé l’application. On met : com.urlentreprise.applicationName
• Project Location : là où se trouve les fichiers sur le disque dur.
• Equipements : phone and tablet (wear : objet connecté)
• Minimum SDK : 15 c''est suffisant. Ca donne plus ou moins accès à des API qui réduisent plus ou moins le nombre de téléphone à jour.
• Modèle prédéfini : on démarre avec un écran vide : empty activity (activity=écran)
• Détails : http://bliaudet.free.fr/IMG/txt/4517166-0-0-TP-1-complet.js : cf. 1-2-1 ou http://bliaudet.free.fr/IMG/txt/4517166-0-0-TP-1-complet.js : cf. 1-2-1 Se familiariser avec l’environnement de l’IDE Android
• http://bliaudet.free.fr/IMG/txt/4517166-0-0-TP-1-complet.js : cf. 1-2-2 Configuration du terminal (le téléphone)
• https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2023748-installation-et-configuration-des-outils#/id/r-2875421
• On ne traite pas ici.
Création d’un téléphone virtuel
• https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2023968-votre-premiere-application#/id/r-2815772
Application, fenêtre, activité – notion d’état Fenêtre et activity
• Une application affiche une fenêtre qui permet de passer à d’autres fenêtres (1 seule à la fois). Chaque fenêtre permet de passer à d’autres fenêtres (1 seule à la fois).
• Une application est un assemblage de fenêtre dans lesquelles on circule.
• Chaque fenêtre est appelée : activity (activité).
• Pour l’utilisateur, la fenêtre en cours, ou activité en cours, c’est l’application.
Application en parallèle : notion d’état
• On peut écouter de la musique et circuler sur internet : ce sont deux applications qui fonctionnent en même temps.
• Mais une seule application est affichée à la fois, et une seule fenêtre (une seule activité).
• L’application ne s’occupe pas de son propre affichage : c’est le SE Android qui gère ça. Une application est un conteneur qui contient son état (on parle de contexte) et son interface graphique.
• L’état de l’application est contrôlé par le SE Android. Par exemple : l’application musique est stoppée si un appel téléphonique arrive.
Notion d’état et de pile des activités
• Une application existe dans plusieurs états au cours de sa vie : particulièrement les états « actif », « en pause », et « stoppé ».
• L’état concerne une activité en cours de l’application.
• « actif » : l’activité est sur le dessus de la pile des activités gérées par le SE. Elle a le focus. Elle est utilisable intégralement.
• « en pause » : l’activité n’est pas sur le dessus de la pile. Elle n’a pas le focus. Elle est partiellement visible mais ce n’est pas celle utilisée par l’utilisateur. C’est le cas de l’application en cours quand le SE démarre une activité prioritaire.
• « arrêté » : l’activité n’est pas sur le dessus de la pile. Elle n’a pas le focus. Elle n’est pas visible. Toutefois, elle peut rendue de nouveau active.
• Remarque : certains système Android permette de montrer deux applications en même temps : c’est un artifice à oublier !
Cycle de vie d’une activité Notion d’état
• Une application existe dans plusieurs états au cours de sa vie : particulièrement les états « actif », « en pause », et « stoppé ».
• « actif » : l’activité est sur le dessus de la pile des activités gérées par le SE. Elle a le focus. Elle est utilisable intégralement.
Bilan des états :
Méthodes associées « montantes » :
• onCreate() : cette méthode permet de : 1) mettre en place l'interface graphique, 2)initialiser les variables, 3) configurer les listeners, 4) se connecter au modèle. La méthode prend en paramètre une variable savedInstanceState de type Bundle qui contient le dernier état sauvegardé de l'activité.
• onStart() : cette méthode est appelée par le système quand le onCreate() est fini ou quand un onRestart() est fini (quand une activité qui était dans l’état Stopped est repassée sur le dessus de la pile des activités). L'activité passe alors dans l'état Started. L'interface graphique devient visible, mais l'utilisateur ne peut pas encore interagir.
• onResume() : cette méthode est appelée par le système quand le onStart() est fini ou quand une activité qui était dans l’état Paused passe sur le dessus de la pile des activités. L’activité passe alors dans l'état Resumed. L'activité devient entièrement opérationnelle. L'utilisateur peut utiliser l'application. L'application reste dans cet état tant qu'il n'y a pas d'interruption, comme par exemple, un appel téléphonique.
Méthodes associées « descendantes » :
• onPause() : cette méthode est appelée quand une activité prioritaire passe sur le dessus de la pile des activités et « prend la main » sur l’activité en cours ou quand l’utilisateur change d’activité. L’activité en cours passe alors dans l'état Paused. Tout ce qui est initié dans onResume() doit être mis en pause dans cette méthode : par exemple une animation démarrée dans onResume() est stoppée dans onPause(). Les traitements effectués dans la méthode onPause() doivent être les plus courts
possibles.
• onStop() : cette méthode est appelée quand l’utilisateur change d’activité. Dans ce cas, l’activité est d’abord passée dans l’état Paused. Ensuite la méthode onStop() est appelée et l'activité passe dans l'état Stopped. L’activité n’est plus visible mais peut- être re-startée. Certaines valeurs peuvent être sauvegardées dans les
SharedPreferences par exemple.
• onRestart() : cette méthode est appelée quand l’utilisateur redémarre une activité qui était dans l’état Stopped. L’activité passe sur le dessus de la pile des activité. A la fin du onRestart(), le système appelle le onStart().
• onDestroy() : cette méthode est appelée quand l’utilisateur arrête l’application.
L’activité n’a plus d’état : elle n’existe plus !
Autre schéma classique :
https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2023968-votre-premiere-application#/id/r-2023830
TP 1 : test des états d’une activité 1- Préparez le code
1) Chargez un projet Android
2) Dans la méthode onCreate de l’activité principale, ajoutez un System.out.println() :
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
System.out.println("MainActivity :: onCreate()");
3) Faites la même chose dans la 2ème autre activité
2- Testez le code 1) Exécutez le code
2) Dans la fenêtre de Debug d’Android (fenêtre du bas), sélectionnez : « 6 :Logcat » 3) Il y a beaucoup de messages.
4) Dans le champ de recherche, tapez : system.out.
5) Testez le code en utilisant l’application. Passez d’une fenêtre à une autre.
3- Généralisez
1) Après la méthode onCreate, ajoutez :
@Override
protected void onStart() { super.onStart();
System.out.println("MainActivity :: onStart()");
}
2) Faites de même pour onPause(), onResume(), onRestart(), onStop(), onDestroy() 3) Faites de même dans la deuxième activité.
4- Testez le code et les états sur une seule activité
Il faut tester le code en effectuant toutes les opérations possibles qui permettent de visualiser les différents états, d’abord sur une seule activité :
1) Au démarrage, on observe :
System.out: MainActivity :: onCreate() System.out: MainActivity :: onStart() System.out: MainActivity :: onResume() 2) Si on change d’application, on observe :
System.out: MainActivity :: onPause() System.out: MainActivity :: onStop() 3) Si on revient sur l’application, on observe :
System.out: MainActivity :: onRestart() System.out: MainActivity :: onStart() System.out: MainActivity :: onResume()
4) Si on ferme l’application (on change d’application et on la ferme) System.out: MainActivity :: onPause()
System.out: MainActivity :: onStop() System.out: MainActivity :: onDestroy()
5 - Testez le code et les états sur plusieurs activités
Il faut tester le code en effectuant toutes les opérations possibles qui permettent de visualiser les différents états, en passant d’une fenêtre à l’autre dans l’activité.
1) Au démarrage, on observe :
System.out: MainActivity :: onCreate() System.out: MainActivity :: onStart() System.out: MainActivity :: onResume()
2) Si on passe sur la deuxième activité, on observe : System.out: MainActivity :: onPause()
System.out: Page2 :: onCreate() System.out: Page2:: onStart() System.out: Page2:: onResume() System.out: MainActivity :: onStop()
3) Si on revient sur la première activité, on observe : System.out: Page2:: onPause()
System.out: MainActivity:: onRestart () System.out: MainActivity:: onStart () System.out: MainActivity:: onResume () System.out: Page2:: onStop ()
System.out: Page2:: onDestroy()
Interface graphique avancée
1 : éditeur Android : https://openclassrooms.com/fr/courses/2023346-creez-des-applications- pour-android/2024435-constitution-des-interfaces-graphiques
2 : widget : https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024698-les-widgets-les-plus-simples
3 : layout : https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024892-organiser-son-interface-avec-des-layouts
Responsive design
• Il faudra prendre en compte la taille des écrans : téléphone ou tablette.
Editeur de mise en page (Layout editor)
• Quand on ouvre un fichier XML d’activité dans Android
(res/layout/activity_main.xml), on a une fenêtre avec 2 onglets en bas à gauche : Design et Text
• L’onglet Text donne accès au code.
• L’onglet Design donne accès à l’éditeur de mise en page.
Editeur vs XML
• L’éditeur est pratique pour une première approche rapide.
• Le XML permet de s’assurer que le code est propre.
Canvas
• Le « canvas » (toile en français), c’est la fenêtre centrale de prévisualisation.
Le tableau de bord
• C’est l’ensemble des boutons de la fenêtre sur la ligne du haut qui permet de : 1) Changer de terminal (type de téléphone, tablette, etc.)
2) Changer de ressources : de langue, de format d’affichage.
3) Quand on ouvre un fichier xml d’activité dans Android
(res/layout/activity_main.xml), on a une fenêtre avec 2 onglets en bas à gauche : Design et Text.
• L’onglet AppTheme sera abordé plus tard La palette : fenêtre de gauche
• La fenêtre de gauche permet de sélectionner les éléments graphiques qu’on va mettre dans le Canvas.
• On peut modifier la position et la dimension des éléments dans le Canvas Fenêtre de droite
• Quand on sélectionne un élément du Canvas, on fait apparaître ses caractéristiques, qui sont modifiables dans la fenêtre de droite.
Onglet Text
• On peut toujours afficher le code XML correspondant.
Détails
• Il faut noter que la présentation OCR traite d’une ancienne version d’Android Studio.
La version 2020 propose en particulier la fenêtre de droite en plus.
• https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024435-constitution-des-interfaces-graphiques#/id/r-2024351
Rappels des principales caractéristiques des éléments d’écran en XML
• Éléments de l’écran :
o TextView : pour éditer un texte o EditView : pour saisir un texte o CheckBox : une case à cocher o Spinner : liste de choix o Button : bouton à cliquer o Etc.
• Position des éléments dans un écran :
o Linéaire : les éléments sont les uns à la suite des autres, horizontalement ou verticalement : <LinearLayout android :orientation=« vertical »>
o Absolue : chaque éléments est positionné avec ses coordonnées.
o Relative : les éléments sont disposées les uns par rapport aux autres.
o En bordure : les éléments sont disposées par rapport aux bordures de l’écran, comme s’ils étaient aimantés.
o En grille : l’écran est découpé par une grille et les éléments sont positionnés dans la grille.
• Taille des éléments :
o Largeur : android:layout_width : pour la largeur d’un élément.
« wrap_content » : espace minimum. « match_content » : largeur du parent.
« 10 dp » : taille fixe.
o Hauteur : android:layout_height :pour la hauteur d’un élément.
o Gravity : android:layout_gravity : positionnement par rapport à son parent.
« center_horizontal », « center_vertical » : centré par rapport au parent.
« left », « right », « top », « end » : calé à gauche, à droite, en haut, en bas.
« start » : au début, top ou left selon les cas.
TP 2 : création de vues avec l’éditeur de mise en page Créer un nouveau projet
• Créer un nouveau projet.
• Créer, à partir du nouveau projet, les écrans correspondant au corrigé de l’évaluation qui est en ligne.
Balise <Layout>
https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024435-constitution-des-interfaces-graphiques#/id/r-2024390
• La racine de l’ecran XML est une balise <Layout>
• Ca peut être <RelativeLayout> ou <ConstraintLayout>
• A noter que c’est préfixée : <androidx.constraintlayout.widget.ConstraintLayout
• Le layout contient les balises à afficher : une balise qui ne peut pas en contenir d’autres est appelée : « widget » ou « composant ».
• Le layout contient aussi des attributs.
• Les 3 premiers précise que le code XML est pour Android Autres caractéristiques des éléments d’écran en XML
• padding, paddingTop, paddingBottom, paddingRight, paddingLeft
• en java : public void setPadding (int left, int top, int right, int bottom)
• identifiant : @X/Y. Les identifians sont utilisés pour accéder aux ressource.Le @ signifie qu’on va parler d’un identifiant. Le X est la classe où se situe l’identifiant dans R.java. Y est le nom de l’identifiant.
• Par exemple : android:text="@string/hello_world" veut dire qu’on récupère
l’identifiant hello_world dans la classe string qui se trouve dans res/values (il faut la créer et y mettre hello_world avec une valeur.
• Identifiant de vue : @+X/Y. Sert à faire le lien entre la vue et le java. S’applique à l’attribut « id ». Traditionnellement, X vaut « id »
• Par exemple : android:id="@+id/text"
•
• Quand on sauvegarde, ça met à jour le fichier R
•
SUITE :
https://openclassrooms.com/fr/courses/2023346-creez-des-applications-pour- android/2024435-constitution-des-interfaces-graphiques#/id/r-2030472
