Le document explique comment créer une interface utilisateur dans une application Android en utilisant un LinearLayout et divers composants graphiques. Il décrit la structure XML pour la création de layouts et l'utilisation de Java pour manipuler ces éléments, ainsi que l'ajout d'interactions utilisateur avec des cases à cocher et des groupes de boutons radio. Le processus inclut des modifications de l'apparence et de l'orientation basées sur les entrées de l'utilisateur.

1. Conteneurs
Creer une activité principale avec un gabarit de type LinearLayout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:id="@+id/accueil"
>
</LinearLayout>
Rappel
• android:layout_width et android:layout_height:
• ="fill_parent": l'élément remplit tout l'élément parent
• ="wrap_content": prend la place minimum nécessaire à l'affichage
• android:orientation: définit l'orientation d'empilement
• android:gravity: définit l'alignement des éléments
Pour associer la première vue graphique à l'activité principale de l'application, il faut faire:
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.acceuil);
}
Le layout reste modifiable au travers du code, comme tous les autres objets graphiques. Pour cela, il
est important de spécifier un id dans la définition XML du gabarit (android:id="@+id/accueilid").
Cette remarque est aussi valable pour tous les autres objets graphiques. Ainsi, on peut accéder à cet
élément par son id et agir dessus au travers du code Java:
LinearLayout l = (LinearLayout)findViewById(R.id.accueilid);
l.setBackgroundColor(Color.BLACK);
Tester votre programme.
Un gabarit peut contenir des éléments graphiques, ou d'autres gabarits. On retrouve le même
principe que les tableaux imbriqués de l'HTML.
Les interfaces peuvent aussi inclure d'autres interfaces, permettant de factoriser des morceaux
d'interface. On utilise dans ce cas le mot clef include:
TP N°2

2. <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<include android:id="@+id/include01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
layout="@layout/acceuil"
></include>
</LinearLayout>
Ajouter un fichier acceuil.xml dans le répertoire layouts contenant par exemple :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/icon"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:adjustViewBounds="true"
android:src="@drawable/helloAndroid"
/>
</LinearLayout>
Tester votre programme.
Remplacer l'image par un chechbox et un groupe de radiobox
<?xml version="1.0" encoding="utf-8"?>
<CheckBox xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cette case est : decochee" />
<?xml version="1.0" encoding="utf-8"?>
<RadioGroup
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<RadioButton android:id="@+id/radio1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Caillou" />
<RadioButton android:id="@+id/radio2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

3. android:text="Ciseaux" />
<RadioButton android:id="@+id/radio3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Papier" />
</RadioGroup>
Le code pour gérer les evenement :
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
cb=(CheckBox)findViewById(R.id.check);
cb.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(CompoundButton buttonView,
boolean isChecked) {
if (isChecked) {
cb.setText("Cette case est cochee");
}
else {
cb.setText("Cette case est decochee");
}
}
Tester votre programme.
Pour configurer un LinearLayout, vous pouvez agir sur cinq paramètres : l’orientation, le
modèle de remplissage, le poids, la gravité et le remplissage (voir support de cours)
Remplacer le gabarit acceuil par :
<RadioGroup android:id="@+id/orientation"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton
android:id="@+id/horizontal"
android:text="horizontal" />
<RadioButton
android:id="@+id/vertical"
android:text="vertical" />
</RadioGroup>
<RadioGroup android:id="@+id/gravity"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="5px">
<RadioButton

4. android:id="@+id/left"
android:text="gauche" />
<RadioButton
android:id="@+id/center"
android:text="centre" />
<RadioButton
android:id="@+id/right"
android:text="droite" />
</RadioGroup>
Vous remarquerez que le conteneur LinearLayoutenveloppe deux RadioGroup. Radio-Groupétant
une sous-classe de LinearLayout, notre exemple revient donc à imbriquer
des conteneurs LinearLayout.
Pour ajuster ces valeurs en cours d’exécution en fonction de la saisie de l’utilisateur, il faut
utiliser un peu de code Java :
package com.commonsware.android.containers;
import android.app.Activity;
import android.os.Bundle;
import android.view.Gravity;
import android.text.TextWatcher;
import android.widget.LinearLayout;
import android.widget.RadioGroup;
import android.widget.EditText;
public class LinearLayoutDemo extends Activity
implements RadioGroup.OnCheckedChangeListener {
RadioGroup orientation;
RadioGroup gravity;
@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
orientation=(RadioGroup)findViewById(R.id.orientation);
orientation.setOnCheckedChangeListener(this);
gravity=(RadioGroup)findViewById(R.id.gravity);
gravity.setOnCheckedChangeListener(this);
}
public void onCheckedChanged(RadioGroup group, int checkedId) {
if (group==orientation) {
if (checkedId==R.id.horizontal) {
orientation.setOrientation(LinearLayout.HORIZONTAL);
}
else {
orientation.setOrientation(LinearLayout.VERTICAL);
}
}
else if (group==gravity) {
if (checkedId==R.id.left) {
gravity.setGravity(Gravity.LEFT);
}

5. else if (checkedId==R.id.center) {
gravity.setGravity(Gravity.CENTER_HORIZONTAL);
}
else if (checkedId==R.id.right) {
gravity.setGravity(Gravity.RIGHT);
}
}
}
}