Atelier 2

Composants Graphiques Android :

GUI
Walid ZEDDINI
www.zeddini.com
Activité 1 : Se Familiariser au Composants : Texte, Bouton Radio,..

1 : Créer les différents composants graphiques ci-bas. Les interfaces utilisateurs devraient ressembler
aux captures d'écran suivantes :
 Projet Android Studio:
1. Le nom du projet : ComposantGUI,
2. Plateforme Android à utiliser : si PC performant 8.0 ou 7.0 sinon 6.0 ou 4.0
3. Package : tn.rnu.isi
 Fichier java de l'activite: ComosantGUI.java
 Fichier layout de l'UI : activity_comosant_gui.xml
 Eventuellement Fichier de ressources : res/values/string.xml
 Remplacer à chaque fois le code XML (et éventuellement Java) nécessaire en gardant le même projet, la même
activité (Classe Java) et même layout (XML) .

TextView

EditText
CheckBox

ToggleButton

RadioGroup
Button

Spinner
DatePicker
TimePicker

ProgressBar
Activité 2 : Se Familiariser au Composants : listView & LinearLayout

1 : Créer la listView avec le layout LinearLayout. L’interface utilisateur devrait ressembler à la capture
d'écran suivante.
 Créer une nouvelle activité (Bouton droit->New->Activity->Empty Activity) :
 Fichier java de l'activite: ListeViewGui.java
 Fichier layout de l'UI : activity_liste_view_gui.xml
 Eventuellement Fichier de ressources : res/values/string.xml
 Cocher Launcher Activity
 Décocher Backward (AppCompact)

CODE SOURCE
Le code source du projet ComposantGUI.rar est téléchargeable à partir du lien:
https://drive.google.com/open?id=1bM--D2QubCyK07fXMcJk4j_SV1Ur08DA

REFERENCES
[1] Android Developer’s Guide – http://developer.android.com/
[2] Les Tutoriels de Victor Matos :http://grail.cba.csuohio.edu/~matos/notes/cis-493/
[3] Le livre écrit par Florent Garin « Android »
[4] Le livre de Mark Murphy chez Pearson
Help Activité 1: Texte, Bouton Radio,..

TextView
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Plain" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Serif"
android:typeface="serif" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bold"
android:textStyle="bold" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Italic"
android:textStyle="italic" />
</LinearLayout>

EditText

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<EditText
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Développez des applications Android" />

<EditText
android:id="@+id/phoneNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
 android:inputType="phone"
android:text="05 12 34 56 78"
android:typeface="serif" />

<EditText
android:id="@+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:text="monPassword" />

</LinearLayout>

CheckBox

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<CheckBox
android:id="@+id/plain_cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Plain" />

<CheckBox
android:id="@+id/serif_cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Serif"
android:typeface="serif" />

<CheckBox
android:id="@+id/bold_cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bold"
android:textStyle="bold" />

<CheckBox
android:id="@+id/italic_cb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Italic"
android:textStyle="italic" />

</LinearLayout>
ToggleButton

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<ToggleButton
android:id="@+id/toggle1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Eteint"
android:textOn="Allumé" />

<ToggleButton
android:id="@+id/toggle2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Off"
android:textOn="On" />
</LinearLayout>

RadioGroup

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<RadioButton
android:id="@+id/option1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:checked="false"
android:text="Noir" >
</RadioButton>

<RadioButton
android:id="@+id/option2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:checked="false"
android:text="Rouge" >
</RadioButton>

<RadioButton
android:id="@+id/option3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:checked="false"
 android:text="Jaune" >
</RadioButton>

<RadioButton
android:id="@+id/option4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:checked="false"
android:text="Vert" >
</RadioButton>
</LinearLayout>

Button
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="horizontal"
tools:context=".ComposantGUI">
<Button
android:id="@+id/okButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="OK" />

<Button
android:id="@+id/CancelButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Annuler" />
</LinearLayout>

Spinner
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<Spinner
android:id="@+id/saisons"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:entries="@array/saisons"
android:prompt="@string/prompt" />
</LinearLayout>

Le fichier de ressource:
<resources>
<string name="app_name">ComposantGUI</string>
<string name="prompt">Choisir La saison</string>
<array name="saisons">
 <item>printemps</item>
<item>été</item>
<item>automne</item>
<item>hiver</item>
</array>
</resources>

DatePicker
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<DatePicker
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

TimePicker
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<TimePicker
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>

ProgressBar
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ComposantGUI">
<ProgressBar
android:id="@+id/progress"
style="?android:attr/progressBarStyleHorizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
Code Java de l’activité relative au ProgressBar

package tn.rnu.isi.composantgui;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;

public class ComposantGUI extends AppCompatActivity {

int progress = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_composant_gui);

final ProgressBar bar = (ProgressBar) findViewById(R.id.progress);

final Handler handler = new Handler();
Thread worker = new Thread(new Runnable() {
public void run() {

while (progress < 100) {

try {
// simule un traitement long
Thread.sleep(200);
} catch (InterruptedException e) {
e.printStackTrace();
}
handler.post(new Runnable() {
public void run() {
bar.setProgress(++progress);
}
});
}
}
});
worker.start();

}
}
Help Activité 2: listView avec le layout LinearLayout
activity_liste_view_gui.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
tools:context=".ListeViewGui">
<ListView
android:id="@+id/list_view_animals"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:choiceMode="singleChoice"
android:entries="@array/animaux" />
</LinearLayout>

On crée res/values/animaux.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="animaux">
<item>Chat</item>
<item>Guépard</item>
<item>Puma</item>
<item>Panthère</item>
</array>
</resources>

Ou bien dans res/values/strings.xml, on ajoute:

<array name="animaux">
<item>Chat</item>
<item>Guépard</item>
<item>Puma</item>
<item>Panthère</item>
</array>