Android(2)-Première application

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.

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.

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 :

Maquette de l’application à réaliser :

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

3 étapes seront nécessaires

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.

• 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

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

Le nouveau fichier string.xml doit ressembler à ceci :

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.

1. rajouter la définition de l'attribut colorAccent dans colors.xml : <color name=“colorAccent”>#FF5722</color>
2. dans themes.xml, liez cette couleur au thème : <item name=“colorAccent”>@color/colorAccent</item>

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.

À 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.

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).

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.

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 :

private EditText etPrenom; 
private Button btValider; 
private TextView tvMessage; 
private String prenom; 

Ajouter la méthode initialisation() après la méthode onCreate :

/** 
* 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();
            }
        });
    }

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

Tester

Ajouter la saisie du nom.

Afficher le message « Hello prenom nom ! »

Jalon1 : Montrer l'application à Mme Thevenot

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) :

1. Présenter en quelques mots le travail réalisé et les éventuelles difficultés rencontrées
2. Expliquer la notion d'activité, présenter les 2 fichiers essentiels qui la composent.
3. Expliquer l'intérêt des fichiers de ressources tels string.xml, ou colors.xml
4. Expliquer comment créer les composants de l'interface graphique.
5. Quelle méthode s'exécute systématiquement dès le lancement de l'activité ?
6. Comment faire pour rendre les objets graphiques accessibles au niveau du programme java ?
7. Comment récupérer le contenu d'un champ saisi ?
8. Comment afficher un texte dans un contrôle graphique ?
9. Que signifie le R dans l'instruction : etPrenom = (EditText) findViewById(R.id.etPrenom);
10. Pourquoi doit-on préciser le type de contrôle graphique devant la méthode findViewById ?
11. Qu'est-ce qu'un Toast ?

Jalon2 : Document à montrer à Mme Thevenot