sio2:premiere_application_android_studio [SIO Wiki]

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== Android(2)-Première application ======
===== 1. Création du projet avec Android Studio =====
 
Dans Android Studio → clic sur **File → New → New Project, puis Empty Views Activity** et **Next** 

Il sera ensuite nécessaire de renseigner : 
  * le nom de l'application (**HelloMoi**),  
  * le dossier de sauvegarde, 
  * le langage (Java)  
  * et le SDK minimum : API 24: Android 7.0 (Nougat) 
 
Une fois ces données saisies, cliquez sur le bouton Finish.
  
Une première application a été créée, elle est composée d'une activité permettant l'affichage de "Hello word!"(testée lors de l'installation). 

Une activité est ce qui permet de gérer une fenêtre, elle est notamment composée ici : 
  * d'une **interface graphique** (onglet **activity_main.xml**)qui peut être gérée en mode **graphique, textuelle ou mixte** (boutons à droite) - Le fichier activity_main.xml est contenu dans le  dossier **res/layout**. C'est dans ce fichier (ou à travers cette interface) que l'on pourra définir les  différents contrôles graphiques nécessaires. 
  * d'une classe java **MainActivity.java** qui permet de gérer le comportement de l'interface. 

===== 2. Exécution de l’application =====
 
L'application peut être exécutée sur un périphérique Android connecté ou sur un simulateur. Le SDK correspondant à la version du périphérique doit être installée. 

==== Exécution sur un périphérique Android connecté ====
 
Le lancement d'un simulateur est souvent très lent, l'exécution sur un périphérique Android sera donc à  privilégier si elle est possible.  

Nous verrons donc plus tard comment exécuter sur un périphérique Android.

** Exécution sur le simulateur** 
Pour exécuter l’application via le simulateur, il faut d’abord lancer le simulateur (AVD). 
Sélectionner le Pixel 5 paramétré précédemment, puis cliquer sur le triangle vert dans la colonne Actions. Ce qui peut prendre un certain temps… Patience … 
Vous pouvez alors fermer la fenêtre « Android Virtual Device Manager ».

Quand le téléphone apparaît, l’émulateur est lancé, il faut le mettre en marche. Pour les tests de l’application il doit toujours rester ouvert. 
Pour exécuter l’application, sélectionner le type d'émulateur, puis cliquer sur le triangle vert : 

===== 3. Modification de l’interface graphique de l’application créée par défaut =====
__Maquette de l’application à réaliser__ : {{ :promo_2025:slam:maquetteappli1.png?200|}}

|HelloMoi | Titre de l’application |
|Entrez votre prénom : Saisir votre prénom ici |TextView tvPrenom : « Entrez votre prénom : » et EditText etPrenom|
|Entrez votre nom : |TextView tvNom : « Entrez votre nom : » |
|Saisir votre nom ici |EditText etNom| 
|Envoyer |Button btEnvoyer « Envoyer » : en cliquant sur le bouton : un message s’affiche dans le TextView tvMessage → « Bonjour prenomSaisi nomSaisi » |
|message |TextView tvMessage|

+ Un **popup** s’affiche en bas de l’écran avec le "Coucou  prenomSaisi !" 

3 étapes seront nécessaires
 
==== Etape 1 : création des fichiers ressources ====
 
Le dossier **res**
 contient les ressources nécessaires à l'application.

__Accès au fichier contenant les chaines de caractères utiles à l’application :__
 
Double clic sur **res / values / string.xml** → cliquer sur le lien **Open editor** à droite pour créer les libellés.

{{:promo_2025:slam:resvaluesstringxmlttext.png?400|}} 

  * Chaque libellé utilisé sera créé dans ce fichier, sous la forme d'une entrée clé (nom du libellé) /valeur (Texte à  afficher).
  * Un clic sur le signe + à gauche permet d'ajouter de nouveaux libellés, les 3 libellés suivants seront créés :  
    * Key = libPrenom Value = Entrez votre prénom 
    * Key = libSaisiePrenom Value = Votre prénom 
    * Key = libBtEnvoyer Value = Envoyer

{{:promo_2025:slam:addkey.png?400|}}

Après la saisie des 3 nouvelles entrées, fermer la fenêtre //Translations editor//. 

Le nouveau fichier **string.xml** doit ressembler à ceci : {{:promo_2025:slam:stringxml.png?400|}}

**__Fichier colors.xml__**
 
Le dossier res contient également un fichier colors.xml permettant de gérer les couleurs des affichages. Il est  possible d'ajouter des couleurs supplémentaires. Nous nous servirons de la couleur "colorAccent" pour  afficher notre message. 
  - rajouter la définition de l'attribut colorAccent dans colors.xml : <color name="colorAccent">#FF5722</color>
  - dans themes.xml, liez cette couleur au thème : <item name="colorAccent">@color/colorAccent</item>

====  Etape 2 : création de l’interface graphique ====
 
Nous allons travailler sur le fichier **activity_main.xml** qui contient la description de l’interface graphique. L'onglet **Design** permet une première approche du résultat de la présentation, l'onglet **Text** montre la  correspondance générée en xml. Sélectionner l'onglet **Design**. {{ :promo_2025:slam:modeaffichage.png?200|}}

**À gauche**, vous retrouvez une palette graphique proposant les différents contrôles graphiques disponibles. L'écran de résultat est proposé **au centre**, il est possible de zoomer sur cette partie graphique afin de  travailler plus précisémment.
 
**À gauche**, la partie //Component Tree// présente la hiérarchie des controles graphiques. On peut ainsi voir les  propriétés des contrôles graphiques et les modifier. 


Supprimer le Text View "Hello word!". 

Dans la palette à gauche, sélectionner le groupe **Layouts**, choisir **LinearLayout (vertical)**, puis clic droit et //'Add to design'//, ensuite définir ses propriétés (**Attributes**, à droite). Au niveau de //Constraint Widget//, vous pouvez modifier les 4 marges  définies.

<alert type="info">LinearLayout (vertical) : composant de mise en page qui permet d'organiser ses éléments enfants (views) dans une colonne, c'est-à-dire verticalement. Les éléments s'alignent les uns en dessous des autres dans l'ordre dans lequel ils sont déclarés dans le fichier XML.</alert>

Dans la palette, sélectionner **Text et TextView**. Le positionner dans le layout créé précedemment. 

Adapter ses propriétés(//Attributes//) : 
  * modifier son nom, Id : @+id/tvPrenom (puis refactoriser)
  * modifier le texte, Text : @string/libPrenom (Ressource libPrenom définie dans le fichier string)  

Dans la palette, sélectionner **Text**, puis **Plain Text**. Le positionner dans le layout sous le TextView. 

Adapter ses propriétés : 
  * modifier son nom, id : @+id/etPrenom 
  * modifier le texte qui devra disparaître lors de la saisie, Hint : @string/libSaisiePrenom  
  * modifier la largeur, le champ de saisie s'adaptera à la taille de son parent (layout_width : match_parent)

Dans la palette, sélectionner **Buttons**, puis **Button**. Le placer sous le layout.

Définir ses propriétés 
  * Id = btEnvoyer 
  * Layout width = wrap_content (ajuster la largeur du layout au contenu) 
  * Layout height = wrap_content 
  * Text = @string/libBtEnvoyer 

Ajouter le textView pour le message, il devra s'afficher en //rouge// (textColor).
 
====  Etape 3 : Exécuter l'application ====
Une fois les objets placés, l’onglet **Code** permet de vérifier le codage de ce que nous avons ajouté. 

Exécuter l’application, saisir un prénom, puis cliquer sur le bouton Envoyer. 

Il ne se passe rien, c'est normal puisque nous n'avons pas encore géré le comportement de l'interface. 

===== 4. Programmation java =====
  
La gestion des évènements se fait en java dans le programme **MainActivity.java**. 

Pour faire apparaître les no de ligne, clic droit dans la marge à gauche, puis show lines numbers (Des importations seront nécessaires : Alt Entrée) 

Déclarer les nouvelles variables membres suivantes : 
<code>
private EditText etPrenom; 
private Button btValider; 
private TextView tvMessage; 
private String prenom; 
</code>

Ajouter la méthode initialisation() après la méthode onCreate : 
<code>
/** 
* Initialisations des contrôles graphiques 
*/ 
private void initialisations() {
        // Liens entre programme et objets graphiques
        etPrenom = (EditText) findViewById(R.id.etPrenom);
        btValider = (Button) findViewById(R.id.btEnvoyer);
        tvMessage = (TextView) findViewById(R.id.tvMessage);
        // Association d'un écouteur d'événement à l'événement Clic sur le bouton Envoyer
        btValider.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // Récupération du prénom saisi
                String prenom = etPrenom.getText().toString();
                // Affichage du prénom dans l'objet tvMessage
                tvMessage.setText("Hello " + prenom + "!");
                // Affichage d'un message qui s'affiche quelques secondes
                Toast.makeText(getApplicationContext(), "Coucou " + prenom + " !",  Toast.LENGTH_LONG).show();
            }
        });
    }
</code>

Ajouter l'appel à cette méthode à la fin de la méthode onCreate. 

Tester 

===== 5. Modifications/évolutions à effectuer =====
 
Ajouter la saisie du nom. 

Afficher le message « Hello prenom nom ! »

<badge>Jalon1 : Montrer l'application à Mme Thevenot</badge>
===== 6. Répondre aux questions suivantes  =====
 
Ces réponses feront d'un document publié sur le drive, **qui sera ramassé le vendredi des vacances de Noël à midi et évalué sur le fond et la forme (veillez à rendre un document bien présenté, avec des explications que vous devez comprendre)** : 
  - Présenter en quelques mots le travail réalisé et les éventuelles difficultés rencontrées 
  - Expliquer la notion d'activité, présenter les 2 fichiers essentiels qui la composent. 
  - Expliquer l'intérêt des fichiers de ressources tels string.xml, ou colors.xml 
  - Expliquer comment créer les composants de l'interface graphique. 
  - Quelle méthode s'exécute systématiquement dès le lancement de l'activité ?
  - Comment faire pour rendre les objets graphiques accessibles au niveau du programme java ?
  - Comment récupérer le contenu d'un champ saisi ? 
  - Comment afficher un texte dans un contrôle graphique ? 
  - Que signifie le R dans l'instruction : etPrenom = (EditText) findViewById(R.id.etPrenom); 
  - Pourquoi doit-on préciser le type de contrôle graphique devant la méthode findViewById ? 
  - Qu'est-ce qu'un Toast ?
<badge>Jalon2 : Document à montrer à Mme Thevenot</badge>