Niveau Débutant
1. RelativeLayout simple – Formulaire de connexion
Énoncé :
Crée un RelativeLayout.
Ajouter un TextView centré en haut : "Connexion".
Deux EditText l’un sous l’autre pour le nom d’utilisateur et le mot de passe.
Un Button centré sous les EditText avec le texte "Se connecter".
Code XML :
<RelativeLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/tvConnexion"
android:text="Connexion"
android:textSize="24sp"
android:layout_centerHorizontal="true"
android:layout_alignParentTop="true"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/etNom"
android:hint="Nom d'utilisateur"
android:layout_below="@id/tvConnexion"
android:layout_marginTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<EditText
android:id="@+id/etMotDePasse"
android:hint="Mot de passe"
android:inputType="textPassword"
android:layout_below="@id/etNom"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<Button
android:id="@+id/btnConnexion"
android:text="Se connecter"
android:layout_below="@id/etMotDePasse"
android:layout_centerHorizontal="true"
android:layout_marginTop="20dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
2. ConstraintLayout simple – Profil utilisateur
Énoncé :
Crée un ConstraintLayout.
Ajouter une ImageView centrée horizontalement en haut.
Ajouter un TextView sous l’image avec le nom de l’utilisateur.
Ajouter un Button "Modifier Profil" aligné sous le TextView et centré.
Code XML :
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<ImageView
android:id="@+id/imgProfile"
android:src="@android:drawable/sym_def_app_icon"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"/>
<TextView
android:id="@+id/tvNom"
android:text="Nom Utilisateur"
android:textSize="20sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/imgProfile"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"/>
<Button
android:id="@+id/btnModifier"
android:text="Modifier Profil"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tvNom"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"/>
</[Link]>
🟡 Niveau Intermédiaire
3. RelativeLayout intermédiaire – Liste avec description
Énoncé :
Crée un RelativeLayout pour afficher un avatar, un nom et une description.
ImageView à gauche pour l’avatar.
TextView à droite pour le nom.
TextView sous le nom pour la description.
Code XML :
<RelativeLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<ImageView
android:id="@+id/imgAvatar"
android:src="@android:drawable/sym_def_app_icon"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true" />
<TextView
android:id="@+id/tvNom"
android:text="Nom de l'utilisateur"
android:textSize="18sp"
android:layout_toEndOf="@id/imgAvatar"
android:layout_alignTop="@id/imgAvatar"
android:layout_marginStart="10dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/tvDescription"
android:text="Description courte de l'utilisateur."
android:layout_below="@id/tvNom"
android:layout_alignStart="@id/tvNom"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</RelativeLayout>
4. ConstraintLayout intermédiaire – Dashboard
Énoncé :
Crée un ConstraintLayout.
Ajouter 3 boutons en ligne horizontale avec espace égal.
Ajouter un TextView centré verticalement en haut.
Ajouter une ImageView centrée sous le TextView.
Code XML :
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<TextView
android:id="@+id/tvDashboard"
android:text="Dashboard"
android:textSize="22sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<ImageView
android:id="@+id/imgDashboard"
android:src="@android:drawable/sym_def_app_icon"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintTop_toBottomOf="@id/tvDashboard"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="20dp"/>
<Button
android:id="@+id/btn1"
android:text="Bouton 1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/btn2"
app:layout_constraintTop_toBottomOf="@id/imgDashboard"
app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
android:id="@+id/btn2"
android:text="Bouton 2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/btn1"
app:layout_constraintEnd_toStartOf="@id/btn3"
app:layout_constraintTop_toBottomOf="@id/imgDashboard"/>
<Button
android:id="@+id/btn3"
android:text="Bouton 3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/imgDashboard"/>
</[Link]>
5. FragmentLayout – Interface multi-fragment
Énoncé :
Crée une MainActivity avec un FragmentContainerView.
Ajouter deux fragments :
o FragmentA avec un TextView "Fragment A".
o FragmentB avec un TextView "Fragment B" et un Button pour naviguer vers
A.
Code XML (MainActivity) :
<[Link]
xmlns:android="[Link]
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
FragmentA XML :
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:text="Fragment A"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
FragmentB XML :
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:text="Fragment B"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/btnGoToA"
android:text="Aller à Fragment A"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"/>
</LinearLayout>
Niveau Avancé
6. RelativeLayout avancé – Carte produit
Énoncé :
Crée un RelativeLayout pour afficher une carte produit.
Ajouter :
o ImageView en haut à gauche pour le produit.
o TextView à droite de l’image pour le nom du produit.
o TextView sous le nom pour le prix.
o Button "Ajouter au panier" aligné en bas à droite.
Gérer marges et alignements.
Code XML :
<RelativeLayout xmlns:android="[Link]
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
android:background="#FFF">
<ImageView
android:id="@+id/imgProduit"
android:src="@android:drawable/ic_menu_gallery"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_alignParentStart="true"
android:layout_marginEnd="10dp"/>
<TextView
android:id="@+id/tvNomProduit"
android:text="Nom du produit"
android:textSize="18sp"
android:layout_toEndOf="@id/imgProduit"
android:layout_alignTop="@id/imgProduit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tvPrix"
android:text="Prix: 50€"
android:layout_below="@id/tvNomProduit"
android:layout_alignStart="@id/tvNomProduit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<Button
android:id="@+id/btnAjouter"
android:text="Ajouter au panier"
android:layout_alignParentEnd="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</RelativeLayout>
7. ConstraintLayout avancé – Page responsive
Énoncé :
Crée un ConstraintLayout.
Ajouter :
o ImageView avec ratio 16:9 en haut, centrée horizontalement.
o Deux TextView sous l’image, centrés et espacés verticalement.
o Trois boutons répartis en chaîne horizontale en bas.
Utiliser Guidelines pour positionner de manière responsive.
Code XML :
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp">
<[Link]
android:id="@+id/guidelineTop"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.2"/>
<ImageView
android:id="@+id/imgResponsive"
android:src="@android:drawable/sym_def_app_icon"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintDimensionRatio="16:9"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<TextView
android:id="@+id/tvTitre"
android:text="Titre Responsive"
android:textSize="20sp"
app:layout_constraintTop_toBottomOf="@id/imgResponsive"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="10dp"/>
<TextView
android:id="@+id/tvDescription"
android:text="Description détaillée."
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/tvTitre"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginTop="5dp"/>
<Button
android:id="@+id/btn1"
android:text="Bouton 1"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/btn2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_chainStyle="spread"/>
<Button
android:id="@+id/btn2"
android:text="Bouton 2"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/btn1"
app:layout_constraintEnd_toStartOf="@id/btn3"
app:layout_constraintBottom_toBottomOf="parent"/>
<Button
android:id="@+id/btn3"
android:text="Bouton 3"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/btn2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"/>
</[Link]>
8. FragmentLayout avancé – Dashboard avec BottomNavigation
Énoncé :
Crée une activité principale avec BottomNavigationView.
Ajouter trois fragments :
o HomeFragment : TextView "Accueil".
o ProfileFragment : TextView "Profil" + ImageView.
o SettingsFragment : Plusieurs boutons.
Implémenter la navigation entre fragments via BottomNavigationView.
Code XML (MainActivity) :
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent">
<[Link]
android:id="@+id/fragmentContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<[Link]
android:id="@+id/bottomNavigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:menu="@menu/bottom_nav_menu"/>
</[Link]>
Exemple Fragment – HomeFragment :
<LinearLayout xmlns:android="[Link]
android:orientation="vertical"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="Accueil"
android:textSize="24sp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>