sio2:premiere_application_android_studio

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
sio2:premiere_application_android_studio [2024/11/25 16:39] – [3. Modification de l’interface graphique de l’application créée par défaut] dthevenotsio2:premiere_application_android_studio [2024/12/02 16:58] (Version actuelle) – [Etape 2 : création de l’interface graphique] dthevenot
Ligne 1: Ligne 1:
-====== Première application Android ======+====== Android(2)-Première application ======
 ===== 1. Création du projet avec Android Studio ===== ===== 1. Création du projet avec Android Studio =====
    
Ligne 36: Ligne 36:
 Pour exécuter l’application, sélectionner le type d'émulateur, puis cliquer sur le triangle vert :  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 ====+===== 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|}} __Maquette de l’application à réaliser__ : {{ :promo_2025:slam:maquetteappli1.png?200|}}
  
Ligne 46: Ligne 46:
 |message |TextView tvMessage| |message |TextView tvMessage|
  
-Un **popup** s’affiche en bas de l’écran avec le "Coucou  prenomSaisi !" ++ Un **popup** s’affiche en bas de l’écran avec le "Coucou  prenomSaisi !" 
  
 3 étapes seront nécessaires 3 étapes seront nécessaires
    
-=== Etape 1 : création des fichiers ressources ===+==== Etape 1 : création des fichiers ressources ====
    
 Le dossier **res** Le dossier **res**
Ligne 79: Ligne 79:
   - dans themes.xml, liez cette couleur au thème : <item name="colorAccent">@color/colorAccent</item>   - dans themes.xml, liez cette couleur au thème : <item name="colorAccent">@color/colorAccent</item>
  
-===  Etape 2 : création de l’interface graphique ===+====  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|}} 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|}}
Ligne 89: Ligne 89:
  
 Supprimer le Text View "Hello word!".  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 à 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.
Ligne 95: Ligne 94:
 <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> <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 pallette, sélectionner **Text et TextView**. Le positionner dans le layout créé précedemment. +Dans la palette, sélectionner **Text et TextView**. Le positionner dans le layout créé précedemment. 
  
 Adapter ses propriétés(//Attributes//) :  Adapter ses propriétés(//Attributes//) : 
Ligne 116: Ligne 115:
   * Text = @string/libBtEnvoyer    * Text = @string/libBtEnvoyer 
  
-Ajouter le textView pour le message, il devra s'afficher en rouge (textColor).+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é.  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.  Exécuter l’application, saisir un prénom, puis cliquer sur le bouton Envoyer. 
  
-Il ne se passe rien, c'est normal puisque nos n'avons pas encore géré le comportement de l'interface. +Il ne se passe rien, c'est normal puisque nous n'avons pas encore géré le comportement de l'interface. 
  
-==== 4. Programmation java ====+===== 4. Programmation java =====
      
 La gestion des évènements se fait en java dans le programme **MainActivity.java**.  La gestion des évènements se fait en java dans le programme **MainActivity.java**. 
Ligne 157: Ligne 157:
                 tvMessage.setText("Hello " + prenom + "!");                 tvMessage.setText("Hello " + prenom + "!");
                 // Affichage d'un message qui s'affiche quelques secondes                 // Affichage d'un message qui s'affiche quelques secondes
-                DeToast.makeText(getApplicationContext(), "Coucou " + prenom + " !",  Toast.LENGTH_LONG).show();+                Toast.makeText(getApplicationContext(), "Coucou " + prenom + " !",  Toast.LENGTH_LONG).show();
             }             }
         });         });
Ligne 167: Ligne 167:
 Tester  Tester 
  
-==== 5. Modification à effectuer ====+===== 5. Modifications/évolutions à effectuer =====
    
 Ajouter la saisie du nom.  Ajouter la saisie du nom. 
Ligne 173: Ligne 173:
 Afficher le message « Hello prenom nom ! » Afficher le message « Hello prenom nom ! »
  
-==== 6. Répondre aux questions suivantes  ====+<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. +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    - 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 la notion d'activité, présenter les 2 fichiers essentiels qui la composent. 
Ligne 187: Ligne 188:
   - Pourquoi doit-on préciser le type de contrôle graphique devant la méthode findViewById ?    - Pourquoi doit-on préciser le type de contrôle graphique devant la méthode findViewById ? 
   - Qu'est-ce qu'un Toast ?   - Qu'est-ce qu'un Toast ?
 +<badge>Jalon2 : Document à montrer à Mme Thevenot</badge>
  
  
  • sio2/premiere_application_android_studio.1732549188.txt.gz
  • Dernière modification : 2024/11/25 16:39
  • de dthevenot