Composants d'interaction de base (points d'entrée pour les actions utilisateur)

1. Boutons (Button)

Rôle : Permettre aux utilisateurs de déclencher des actions immédiates comme "soumettre", "enregistrer" ou "navigeur". C'est le contrôle interactif le plus fondamental.

• Bouton rempli (Filled Button) : Fond coloré (défini par colorPrimary), texte en contraste, utilisé pour les actions principales.
• Bouton contourné (Outlined Button) : Contour coloré sans fond, adapté aux actions secondaires.
• Bouton textuel (Text Button) : Aucun fond ni contour, uniquement du texte, idéal pour les actions annexes.

Exemple en XML :

<!-- Bouton rempli -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Valider"
    style="@style/Widget.MaterialComponents.Button" />

<!-- Bouton textuel -->
<com.google.android.material.button.MaterialButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Annuler"
    style="@style/Widget.MaterialComponents.Button.TextButton" />

2. Bouton flottant d'action (FloatingActionButton, FAB)

Rôle : Mettre en avant les opérations les plus importantes et fréquentes dans une application (par exemple "ajouter", "créer", "partager"). Il est généralement placé au-dessus des autres éléments graphiques pour attirer l'attention.

Exemple en XML :

<com.google.android.material.floatingactionbutton.FloatingActionButton
    android:id="@+id/fab_add"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    app:srcCompat="@drawable/ic_add"
    app:layout_anchor="@id/recyclerView"
    app:layout_anchorGravity="bottom|end" />

3. Champs de saisie de texte (TextInputLayout + TextInputEditText)

Rôle : Permettre aux utilisateurs de saisir du texte, comme un identifiant, un mot de passe ou un terme de recherche, avec validation automatique et animations de texte indicatif.

Exemple en XML :

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Numéro de téléphone"
    app:counterEnabled="true"
    app:counterMaxLength="10">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="phone" />
</com.google.android.material.textfield.TextInputLayout>

Composants de navigation (commutation entre les pages)

1. Barre d'application supérieure (Top App Bar)

Rôle : Situé en haut de l'écran, il affiche le titre de l'application, les boutons de navigation et les menus d'actions secondaires.

Exemple en XML :

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:title="Accueil"
    app:navigationIcon="@drawable/ic_menu"
    app:menu="@menu/toolbar_menu" />

2. Barre de navigation inférieure (Bottom Navigation)

Rôle : Placée en bas de l'écran, elle permet de naviguer rapidement entre 3 à 5 pages principales.

Exemple en XML :

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_nav"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/bottom_nav_menu"
    app:labelVisibilityMode="labeled" />

Composants d'affichage d'informations (présentation du contenu)

1. Cartes (Card)

Rôle : Encapsule des informations liées (texte, images, boutons) dans un conteneur arrondi avec ombre pour mettre en évidence leur indépendance.

Exemple en XML :

<com.google.android.material.card.MaterialCardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="160dp"
            android:src="@drawable/product_img" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nom du produit"
            android:textSize="16sp" />

        <com.google.android.material.button.MaterialButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Ajouter au panier" />
    </LinearLayout>
</com.google.android.material.card.MaterialCardView>

Composants de retour d'information (indication des résultats d'actions)

1. Snackbar

Rôle : Affiche un message temporaire en bas de l'écran pour informer l'utilisateur sur l'état d'une action, avec la possibilité d'inclure un bouton d'action.

Exemple en Kotlin :

Snackbar.make(view, "Fichier supprimé", Snackbar.LENGTH_LONG)
    .setAction("Annuler") { 
        // Logique d'annulation
    }
    .show()

2. Dialogues (Dialog)

Rôle : Fenêtre modale pour demander confirmation ou fournir des informations détaillées.

Exemple en Kotlin :

MaterialAlertDialogBuilder(context)
    .setTitle("Suppression")
    .setMessage("Voulez-vous vraiment supprimer cette donnée ? Cette action est irréversible.")
    .setPositiveButton("Supprimer") { dialog, _ -> 
        // Logique de suppression
        dialog.dismiss()
    }
    .setNegativeButton("Annuler") { dialog, _ -> 
        dialog.dismiss()
    }
    .show()

Principes de conception et bonnes pratiques

1. Consistance : Les couleurs, typographies et formes doivent être uniformes tout au long de l'application pour éviter toute confusion utilisateur.
2. Démarcation des priorités : Différencier les actions selon leur importance via les types de boutons (remplis > contournés > textuels).
3. Retour interactif : Toutes les actions doivent avoir un retour clair (animation de clic, Snackbar, barres de progression).
4. Adaptabilité : Les composants doivent s'adapter aux différentes tailles d'écran et aux préférences utilisateur (par exemple, zoom de police avec sp).