• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Ce cours est en vidéo.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Mis à jour le 04/05/2018

Embellissez vos RecyclerView grâce aux Material Card

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans cette deuxième partie, nous allons nous concentrer sur la manière d'améliorer l'apparence de nos interfaces graphiques grâce au Material Design... :)

Sur Android, le Material Design est apparu dès la version 5 (Lollipop) du système d'exploitation. Afin d'aider les développeurs à implémenter correctement ces nouvelles règles de design, les équipes de Google ont ajouté différentes classes dans la librairie de support  android.support.design

Et comme vous vous en doutez, nous allons en implémenter quelques-unes tout au long de cette partie... ;)

Les Material Card

Aperçu des Material Card
Aperçu des Material Card

Les Material Card sont un moyen de présenter du contenu composé de différents éléments d'UI. Ce composant graphique est généralement utilisé à travers des listes comme la RecyclerView.

Nous commencerons donc par implémenter ce premier concept ensemble ! :D Reprenez ainsi votre mini-application Wonder et ajoutez à votre fichier  build.gradle  la dépendance suivante qui nous permettra d'utiliser la classe CardView représentant une Material Card :

Extrait de build.gradle :

dependencies {
    ...
    // CARD VIEW
    implementation 'com.android.support:cardview-v7:27.1.0'
}

Synchronisez votre projet, puis modifiez le layout correspondant à chaque élément (item) de la RecyclerView de notre écran principal.

Fichier fragment_main_item.xml :

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/margin_small"
    android:layout_marginTop="@dimen/margin_small"
    android:layout_marginRight="@dimen/margin_small"
    card_view:cardUseCompatPadding="true"
    card_view:cardElevation="@dimen/margin_small"
    card_view:cardCornerRadius="@dimen/margin_small">

    <ImageView
        android:id="@+id/fragment_main_item_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"/>

</android.support.v7.widget.CardView>

Explications : Nous avons remplacé le LinearLayout par une CardView afin d'appliquer automatiquement l'apparence d'une CardView à chaque élément de notre RecyclerView. Nous utilisons également les différentes propriétés de la CardView afin de la personnaliser un peu plus.

Exécutez maintenant votre application... :)

Aperçu du résultat
Aperçu du résultat

Super, on commence petit à petit à se rapprocher de notre objectif !

Les listes sous forme de grille

Maintenant, nous allons améliorer la manière dont notre RecyclerView affiche ses éléments. Pour cela, nous utiliserons le GridLayoutManager permettant d'appliquer le concept de "Grid List" du Material Design.

Ainsi, modifiez le fragment MainFragment de la manière suivante.

Extrait de MainFragment.java :

public class MainFragment extends BaseFragment {
    
    ...

    private void configureRecyclerView(){
        ...
        this.recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), 2));
        ...
    }   
    ...
}

Explications : Nous modifions le LayoutManager de la RecyclerView en définissant simplement un  GridLayoutManager  permettant d'afficher les données sur 2 colonnes.

Et voilà ! Avant d'exécuter notre application pour visualiser le résultat, nous allons ajouter une animation à notre RecyclerView lorsque celle-ci se lance. L'expérience utilisateur (UX) n'en sera qu'améliorée... :soleil:

Pour cela, créez un dossier dans votre répertoire de ressources que vous appellerez   res/anim/  et qui contiendra le fichier suivant.

Fichier item_animation_fall_down.xml :

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/anim_duration_medium">

    <translate
        android:fromYDelta="-20%"
        android:toYDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

    <scale
        android:fromXScale="105%"
        android:fromYScale="105%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:interpolator="@android:anim/decelerate_interpolator"
        />

</set>

Explications : Nous avons créé ici un fichier XML définissant une animation qui sera appliquée à une vue. Si vous souhaitez en savoir un peu plus sur les ressources de type animation, je vous invite fortement à lire la documentation d'Android correspondante.

Vous remarquez également que nous appelons une ressource de type  @Integer  à la deuxième ligne de ce fichier. Créons ainsi le fichier de ressource correspondant dans le dossier  values  de notre application.

Fichier integers.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="anim_duration_medium">300</integer>
</resources>

Explications : Dans ce fichier, nous indiquerons et regrouperons toutes les valeurs numériques que nous utilisons dans notre application.

Pour terminer, nous allons créer un layout appelant cette animation. Ainsi, créez le fichier suivant dans le dossier  anim/  de votre application.

Fichier layout_animation_fall_down.xml :

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/item_animation_fall_down"
    android:delay="15%"
    android:animationOrder="normal"
    />

Explications : Nous appelons ici notre animation précédemment créée afin de l'appliquer à chaque futur élément d'une vue. N'hésitez pas à jeter un coup d'œil à la documentation Android si vous souhaitez en savoir plus sur les différentes propriétés XML disponibles.

Et c'est tout côté configuration... :D Il ne nous reste plus qu'à définir cette animation quand notre RecyclerView recharge ses données. Modifiez ainsi le fragment MainFragment comme ce qui suit :

Extrait de MainFragment.java :

public class MainFragment extends BaseFragment {

    ...

    // -------------------
    // UI
    // -------------------

    private void updateDesign(ApiResponse projectResponse){

        this.swipeRefreshLayout.setRefreshing(false);

        LayoutAnimationController controller = AnimationUtils.loadLayoutAnimation(getActivity(), R.anim.layout_animation_fall_down);

        this.recyclerView.setLayoutAnimation(controller);
        this.projectAdapter.update(projectResponse.getProjects());
        this.recyclerView.scheduleLayoutAnimation();
    }
    ...
}

Explications : Nous avons modifié notre méthode  updateDesign()  et ajouté une animation à notre RecyclerView grâce aux classes LayoutAnimationManager et AnimationUtils. La méthode scheduleLayoutAnimation()  permet de lancer l'animation précédemment chargée.

Lancez maintenant votre application et appréciez le résultat.

Exemple de certificat de réussite
Exemple de certificat de réussite