Filière : LFSIM - 3

Institut Supérieur
AU : 2020/2021
d’Informatique et de Multimédia
Matière : Développement d’applications
de Gabès
mobile
(ISIMG)
Enseignante : Fatma Achour

TP2
Les ressources

AVANT DE COMMENCER

On va partir d’un projet minimal, type "Empty Activity", nommez-le TP2. Le résultat de la création de
ce projet l’interface présenté dans la figure suivante :

Figure 7.B – Vue de résultat

Figure 7.A – Vue de code Java. d’exécution.
Figure 7 – Vue de l’activité principale.

LES RESSOURCES

Ce sont les fichiers XML qui sont dans projet/src/main/res.

— res/layout : ce sont les définitions d’écrans des activités, par exemple activity_main.xml. Les balises
XML et leurs attributs définissent les éléments affichés : boutons, zones de saisie, etc. Dans les classes
Java, ce layout sera désigné par R.layout.activity_main.
— res/values : le fichier strings.xml contient les textes de votre application : labels, messages, etc.
Ces textes sont identifiés par l’attribut name et référencés dans les layouts par @string/nom, et par
R.string.nom dans les sources Java. Si vous voulez traduire ces textes en allemand, faites une copie
du dossier values en values-de et traduisez tous les textes sans changer les attributs name.
— res/mipmap-*dpi et res/drawable-*dpi : vous y trouverez les icônes dans différentes tailles.
Chaque image PNG devient une ressource identifiée par R.drawable.son_nom en Java et @dra-

1
 wable/son_nom dans un layout. C’est le système qui choisit automatiquement, selon la densité de
votre écran, celle qu’il faut afficher.
Les fichiers XML peuvent être affichés soit sous forme d’un formulaire ou de manière graphique, soit sous
forme XML brute. Voyez l’onglet juste en bas de l’éditeur, ex : Design ou Text. Le mode XML offre un
contrôle total, mais il faut savoir ce qu’on fait.

EXERCICES

Exercice 1 : Modifiez l’activité Android créée et les fichiers de ressource en répondant aux questions
suivantes :
1. Prenez le code Java de l’activité principale et changer le texte "Hello world !" par " Prenez soin de
vous-même" (utilisez le fichier "res/values/strings.xml" et changez dans le code de "res/layout/acti-
vity_main.xml).
2. Changez la couleur de texte en rouge foncé (code hexadécimale : 850606) et la couleur de l’arrière
plan en gris claire (code hexadécimale : CCCCCC) du textview affiché dans l’activité.
3. Changer le texte affiché dans le textview par une chaine de caractère avec trois paramètres : Salut
Je suis $param1 $param2 et je suis diplôme de $param. Avec :
— $param1 : "Mohamed".
— $param2 : "Ben Ali".
— $param3 : "ISIMG".
4. Changez la valeur de padding (32dp) de textview affiché (utilisez le fichier res/values/dimens.xml
et le code java de notre application).
Exercice 2 : Dans le même projet, créer une nouvelle activité ("Empty Activity") et changer dans le
fichier manifest de façon que cette activité sera exécute par defauts. Nommez cette activité "Pictu-
reActivity".
1. Importez dans le dossier res/drawable trois images : une première d’un ordinateur portable, une
deuxième d’une tablette et une dernière image d’un téléphone mobile.
2. Utilisez la partie design de fichier xml de disposition des objets, supprimez le textview crée
automatiquement et créez trois ImageView.
3. Affichez dans chaque ImageView une image de façon obtenir une interface comme présentée dans
la figure suivante :

Figure 8 – Interface images.

2
 4. Modifiez les propriétés de chaque image (maxHeight et maxWidth). Changer les positions des
images.
Exercice 3 : Créez un nouveau projet nommé animation. Dans ce projet, créez un nouveau répertoire
nommé anim dans le répertoire res . Cliquez-droit dessus et créez un nouveau fichier de ressources
d’animation nommé fade.xml :

Figure 9 – Projet animation.

Ensuite, placez le code suivant dans le fichier fade.xml :

< ?xml version="1.0" encoding="utf-8" ?>
<set xmlns :android="http ://schemas.android.com/apk/res/android"
android :interpolator="@android :anim/accelerate_interpolator">
<alpha
android :fromAlpha="0"
android :toAlpha="1"
android :duration="2000" >
</alpha>
<alpha
android :startOffset="2000"
android :fromAlpha="1"
android :toAlpha="0"
android :duration="2000" >
</alpha>
</set>

Dans l’activité créée automatiquement dans le projet, placez le code java suivant :
import android.os.Bundle ;
import android.app.Activity ;
import android.view.View ;
import android.view.animation.Animation ;
import android.view.animation.AnimationUtils ;
import android.widget.ImageView ;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState) ;
setContentView(R.layout.activity_main) ;
}

3
 public void fade(View view){
ImageView image = (ImageView)findViewById(R.id.imageView) ;
Animation animation1 = AnimationUtils.loadAnimation(getApplicationContext(),
R.anim.fade) ;
image.startAnimation(animation1) ;
}
}

Ensuite, placez le code suivant dans le fichier de mise en page :

< ?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout
xmlns :android="http ://schemas.android.com/apk/res/android"
xmlns :tools="http ://schemas.android.com/tools"
android :layout_width="match_parent"
android :layout_height="match_parent"
android :paddingLeft="@dimen/activity_horizontal_margin"
android :paddingRight="@dimen/activity_horizontal_margin"
android :paddingTop="@dimen/activity_vertical_margin"
android :paddingBottom="@dimen/activity_vertical_margin"
tools :context=".MainActivity">
<ImageView
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :id="@+id/imageView"
android :src="@drawable/logo"
android :layout_alignParentTop="true"
android :layout_centerHorizontal="true"/>
<Button
android :layout_width="wrap_content"
android :layout_height="wrap_content"
android :text="fade"
android :id="@+id/button3"
android :layout_below="@+id/imageView"
android :layout_alignParentRight="true"
android :layout_alignParentEnd="true"
android :onClick="fade"/>
</RelativeLayout>

Figure 10 – Interface animation.

4
Ajoutez trois fonctions et trois fichiers d’animation pour agrandir, déplacer et clignoter l’image affi-
chée.
1. Pour agrandir utiliser les paramètres suivantes :
— Le premier point de "rotate" est :
— fromDegrees : 0
— toDegrees : 360
— pivotX : 50%
— pivotY : 50%
— duration : 5000
— Le deuxième point de "rotate" est :
— startOffset : 5000
— fromDegrees : 360
— toDegrees : 0
— pivotX : 50%
— pivotY : 50%
— duration : 5000
2. Pour déplacer utiliser les paramètres suivantes :
— fromXDelta : 0%p
— toXDelta : 75%p
— duration : 800
3. Pour clignoter utiliser les paramètres suivantes :
— fromAlpha : 0.0
— toAlpha : 1.0
— interpolator : @android :anim/accelerate_interpolator
— duration : 600
— repeatMode : reverse
— repeatCount : infinite