• 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

Ajoutez un Floating Action Button

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

Afin d'améliorer les interactions de notre application avec nos utilisateurs, nous allons ajouter un bouton flottant à notre écran affichant les détails d'un projet "design".

Aperçu d'un bouton flottant (Floating Action Button)
Aperçu d'un bouton flottant (Floating Action Button)

Cependant, avant de réaliser cela, nous allons améliorer le positionnement des vues sur l'écran de notre fragment  FragmentDetail. D'ailleurs, nous allons déporter ces vues dans un layout à part, que nous ré-importerons par la suite. Ainsi, créez dans le dossier  layout/  le fichier suivant.

Fichier social_view.xml :

<LinearLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1">

    <!-- Views Row -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_remove_red_eye_black_24px"/>

        <com.openclassrooms.wonder.views.WonderTextView
            android:id="@+id/social_view_views"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fontName="Roboto_Light"/>

    </LinearLayout>

    <!-- Likes Row -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:orientation="vertical">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_favorite_black_24px"/>

        <com.openclassrooms.wonder.views.WonderTextView
            android:id="@+id/social_view_likes"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fontName="Roboto_Light"/>

    </LinearLayout>

    <!-- Comments Row -->
    <LinearLayout
        android:id="@+id/social_view_comments_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:orientation="vertical"
        android:background="?android:attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_chat_black_24px"/>

        <com.openclassrooms.wonder.views.WonderTextView
            android:id="@+id/social_view_comments"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:fontName="Roboto_Light"/>

    </LinearLayout>

</LinearLayout>

Explications : Nous avons créé un simple fichier XML regroupant les différents TextView de notre écran FragmentDetail. Nous avons également ajouté quelques images Material Design dans le but d'ajouter une description supplémentaire en "imageant" le rôle de chaque TextView.

Maintenant, nous allons modifier le layout de  FragmentDetail  en important le précédent fichier contenant nos vues, et en déclarant également un bouton flottant de type "Floating Action Button".

Fichier fragment_detail.xml :

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/fragment_detail_root_view"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.openclassrooms.wonder.controllers.activities.DetailActivity">

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

        <ImageView
            android:id="@+id/fragment_detail_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_weight="0.5"
            android:scaleType="centerCrop"/>

        <LinearLayout
            android:id="@+id/fragment_detail_layout_detail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="0.5">

            <com.openclassrooms.wonder.views.WonderTextView
                android:id="@+id/fragment_detail_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginRight="@dimen/margin_huge"
                style="@style/WonderText.Title"
                app:fontName="Roboto_Medium"/>

            <com.openclassrooms.wonder.views.WonderTextView
                android:id="@+id/fragment_detail_description"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:maxLines="3"
                android:layout_weight="1"
                android:ellipsize="end"
                app:fontName="Roboto_Medium"/>

            <!-- SOCIAL VIEW IMPORT -->
            <include layout="@layout/social_view"/>

            <Button
                android:id="@+id/fragment_detail_share"
                android:layout_gravity="bottom"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Share"/>

        </LinearLayout>

    </LinearLayout>

    <!-- DECLARING FLOATING ACTION BUTTON -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fragment_detail_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:clickable="true"
        app:backgroundTint="@color/button_favorite"
        android:src="@drawable/ic_favorite_border_white_24dp"
        app:layout_anchor="@id/fragment_detail_image"
        app:layout_anchorGravity="bottom|right|end"/>


</android.support.design.widget.CoordinatorLayout>

Explications : Nous avons modifié assez largement le layout de notre fragment. Pour commencer, nous avons remplacé notre vue racine  LinearLayout  par un CoordinatorLayout. Ce dernier, apparu avec le support du Material Design sur Android, permet de gérer plus facilement les interactions entre les différentes vues qu'il contient. 

Nous avons également importé, grâce au mot clé  <include>, le layout que nous avons précédemment créé. Pratique n'est-ce pas ? Cela nous permettra de ré-utiliser dans d'autres layouts le contenu de  social_view  ! Top... :D 

Et enfin, nous avons ajouté un bouton FloatingActionButton  que nous placerons en bas à droite de l'ImageView. Cela est notamment possible grâce aux attributs  app:layout_anchor  et  app:layout_anchorGravity.

Modifions pour terminer le fragment FragmentDetail afin de mettre à jour les identifiants des TextView que nous avons précédemment modifiés, ainsi que de déclarer notre  FloatingActionButton. Nous en profiterons également pour afficher une Snackbar à la place d'un Toast, plus "Material Design"... ;)

Extrait de DetailFragment.java :

public class DetailFragment extends BaseFragment {

    ...

    // FOR DESIGN
    ...
    @BindView(R.id.social_view_views) TextView viewsProject;
    @BindView(R.id.social_view_likes) TextView likesProject;
    @BindView(R.id.social_view_comments) TextView commentsProject;
    @BindView(R.id.fragment_detail_root_view) CoordinatorLayout rootView;
    @BindView(R.id.fragment_detail_fab) FloatingActionButton fabButton;

    ...
    
    private void showMessage(){
        Snackbar snackbar = Snackbar.make(rootView, "Fonctionnalité en cours de développement, veuillez patienter !", Snackbar.LENGTH_SHORT);
        View sbView = snackbar.getView();
        TextView textView = (TextView) sbView.findViewById(android.support.design.R.id.snackbar_text);
        textView.setTextColor(Color.WHITE);
        snackbar.show();
    }

    ...
}

Explications : Nous avons renommé nos différents TextView et importé le  CoordinatorLayout  ainsi que le  FloatingActionButton. Puis, nous avons modifié la méthode  showMessage()  afin de pouvoir afficher une  SnackBar  à la place du précédent Toast.

Et c'est tout ! :) Lancez maintenant votre application. Le résultat suivant devrait s'afficher.

Aperçu du résultat
Aperçu du résultat
Exemple de certificat de réussite
Exemple de certificat de réussite