Android App Programming 2021-2022
Lab 7: Dynamic Interfaces and Event Programming

In this lab, you will learn how to create and edit your User Interface programmatically.

Remember:

Exercise 1: Draw your interface programmatically

In the first exercise we will create a UI interface dynamically.

  1. Follow the tutorial from the book chapter 23. Run the program with each addition to see how your interfaces changes. Customize the look of your interface (eg change the button or background color to something you like).

  2. In your code from Ex 1, turn your your EditText into a TextView in the code and give it a default text to say "Hello World". Look at the available methods to find setText().

  3. We will now add a listener to our button so that it reacts to a click. Use the setOnClickListener method for your button (look at slides and also Ch. 25). When the button is clicked it should change the TextView to say "Button click".

  4. Add to your button another listener for a long button click with OnLongClickListener and when this event is registered change the TextView to say "Long Button click".

Exercise 2: A grid with images

In the second exercise we will extend our interface to show a list of images.

  1. From your Ex1 make sure your button is at the bottom right of your window. Consider only constraining it programmatically on RIGHT and BOTTOM, and adding a small margin (eg 50). Also make sure your TextView is just to the LEFT of your button (give it a margin of 50 as well), but they are aligned at the bottom.

  2. Add a GridLayout using the constructor GridLayout group = new GridLayout(this) and setting the number of columns, for example to 3 group.setColumnCount(3). Inside a FOR loop, add 10 buttons to this layout using the method group.addView(b) where b is a button. Add an setOnClickListener to each of these buttons that changes the TextEdit field to say "Grid Button Click". Add this group layout to your main layout myLayout.addView(group)

  3. Replace the buttons with images. Instead of creating a button inside the FOR loop, create an ImageView. Download a small image and add it under res > drawable (make sure its name is all lower case, for example "sample.jpg") Use the methods ImageView imageView = new ImageView(this); and imageView.setImageResource(R.drawable.sample); . Evertything else remains the same (even the setOnClickListener).

  4. Create a ScrollView ScrollView scroll_group = new ScrollView(this) and then add the GridLayout inside it using scroll_group.addView(group). Instead of adding the group (GridLayout) to the main constraint layout, now add the ScrollView myLayout.addView(scroll_group).

Exercise 3: A GridView with images

In this third exercise we will redo our interface from the begining using a GridView. We will start from a clean project to focus on the GridView class. We will be following this tutorial.

  1. Create a new project with an Empty activity. And add in the XML layout a GridView (under legacy) and give it a name in XML (eg. grid_view).

  2. Get some images. If you want, you can download these images (open access from the National Galery of Art) or use your own. Add them under res > drawable.

  3. Create a class that extends BaseAdapter (eg. public class ImageAdapter extends BaseAdapter ) and follow the steps 4-6 suggested in the tutorial (AndroidStudio will create containters for the methods, you can look at the tutorial for the code to add). Also look at the explanation in the slides.

  4. In your MainActivity.java get your GridView from the XML layout and add to it your ImageAdapter. Follow the step 6 suggested in the tutorial and run your program.

  5. Follow steps 7-10 in the tutorial to add a listener to your GridView so that each time the user clicks on an image in the GridView a new window opens that shows that image in larger size.

back to the course web site




FR - FR - FR



Dans ce laboratoire, vous apprendrez à créer et à modifier votre interface utilisateur de manière programmatique.

Rappel :

Exercice 1 : Dessinez votre interface en code java

. Dans le premier exercice, nous allons créer une interface graphique de manière dynamique.

  1. Suivez le tutoriel du livre chapitre 23. Exécutez le programme avec chaque ajout pour voir comment votre interface change. Personnalisez l'aspect de votre interface (par exemple, changez la couleur du bouton ou du fond en utilisant un couleur qui vous plaît).

  2. Dans votre code de l'Ex 1, transformez votre EditText en TextView et donnez-lui un texte par défaut, par example "Hello World". Regardez les méthodes disponibles pour trouver setText().

  3. Nous allons maintenant ajouter un Listener à notre bouton pour qu'il réagisse à un clic. Utilisez la méthode setOnClickListener pour votre bouton (regardez les diapositives et aussi le Ch. 25). Lorsque le bouton est cliqué, il devrait changer le TextView pour dire "Bouton cliqué".

  4. Ajoutez à votre bouton un autre Listener pour un long clic de bouton avec OnLongClickListener et lorsque cet événement est enregistré, il faut changer la TextView pour dire "Long Button click".

Exercice 2 : Une grille avec des images

Dans le deuxième exercice, nous allons étendre notre interface pour afficher une liste d'images.

  1. A partir de votre Ex1 assurez-vous que votre bouton est en bas à droite de votre fenêtre. Envisagez de ne le contraindre programmatiquement que sur RIGHT et BOTTOM, et ajoutez une petite margin (marge), par exemple 50 pixels. Assurez-vous également que votre TextView est juste à la GAUCHE de votre bouton (donnez-lui une marge de 50 également), mais ils sont alignés en bas.

  2. Ajoutez un GridLayout en utilisant le constructeur GridLayout group = new GridLayout(this) et en définissant le nombre de colonnes, par exemple à 3 group.setColumnCount(3). À l'intérieur d'une boucle FOR, ajoutez 10 boutons à ce layout en utilisant la méthode group.addView(b) où b est un bouton. Ajoutez un setOnClickListener à chacun de ces boutons qui modifie le champ TextEdit pour dire "clic sur le bouton de la grille". Ajoutez cette layout de grille à votre layout principale myLayout.addView(group) .

  3. Remplacez les boutons par des images. Au lieu de créer un bouton à l'intérieur de la boucle FOR, créez une ImageView. Téléchargez une petite image et ajoutez-la sous res > drawable (assurez-vous que son nom est en minuscules, par exemple "sample.jpg"). Utilisez les méthodes ImageView imageView = new ImageView(this) ; et imageView.setImageResource(R.drawable.sample) . Tout le reste reste identique (même le setOnClickListener).

  4. Créez un ScrollView ScrollView scroll_group = new ScrollView(this) et ajoutez ensuite le GridLayout à l'intérieur de celui-ci en utilisant scroll_group.addView(group). Au lieu d'ajouter le groupe (GridLayout) au layout principale, ajoutez maintenant le ScrollView myLayout.addView(scroll_group)..

Exercice 3 : Un GridView avec des images

Dans ce troisième exercice, nous allons refaire notre interface depuis le début en utilisant un GridView. Nous allons partir d'un projet propre pour nous concentrer sur la classe GridView. Nous allons suivre ce tutoriel.

  1. Créez un nouveau projet avec une activité vide. Et ajoutez dans le layout XML un GridView (sous legacy) et donnez-lui un nom en XML (par exemple grid_view).

  2. Obtenez quelques images. Si vous voulez, vous pouvez télécharger ces images (en accès libre depuis la National Galery of Art) ou utiliser les vôtres. Ajoutez-les sous res > drawable.

  3. Créez une classe qui extends BaseAdapter (par exemple, public class ImageAdapter extends BaseAdapter ) et suivez les étapes 4-6 suggérées dans le tutoriel (AndroidStudio créera des conteneurs pour les méthodes, vous pouvez regarder le tutoriel pour le code à ajouter). Regardez également l'explication dans les diapositives du cours.

  4. Dans votre MainActivity.java récupérez votre GridView à partir du layout XML et lui ajoutez votre ImageAdapter. Suivez l'étape 6 proposée dans le tutoriel et exécutez votre programme.

  5. Suivez les étapes 7 à 10 du tutoriel pour ajouter un Listener à votre GridView afin que chaque fois que l'utilisateur clique sur une image dans le GridView, une nouvelle fenêtre s'ouvre et affiche cette image en plus grand format.

back to the course web site