App Bar Layout

Dans ce tutoriel,nous découvrir un autre widget appelé AppBarLayout utilisé pour animer la bar d’une application android.

Si c’est votre premier tutoriel sur la bar d’application android , vous pouvez commencer à lire le tutoriel sur la toolbar.

L’AppBarLayout est un linearLayout qui implémente plusieurs fonctionnalités du concept de barre d’application du material design.Vous devez utiliser un CoordinatoorLayout qui enveloppe l’AppBarLayout pour qu’il fonctionne.Si l’AppBarLayout n’est directement pas la vue enfant du CoordinatoorLayout, il ne fonctionnera pas correctement.

Le rôle de l’AppBarLayout est de savoir quand défiler lorsqu’une autre vue adjacente comme le recyclerview ou le nestescrollview défile. L’AppBarLayout est informé de quand il doit défiler à partir de la classe AppBarLayout.ScrollingViewBehavior. La Liaison entre l’AppBarLayout et le recyclerview ou le nestedscrollview est effectuée via la classe de comportement AppBarLayout.ScrollingViewBehavior .

C’est avec l’attribut app:layout_behavior que vous devez définir la classe qui notifie le comportement du recyclerview ou du nestedscrollview. Cet attribut à comme valeur une chaîne de caractère contenant le nom complet de la classe qui notifie le comportement de la vue défilante

Vous devez ensuit envelopper la Toolbar dans l’AppBarLayout. La toolbar doit ensuite dire comment elle souhaite se comporter lorsque l’AppBarlayout défile grâce à l’attribut app:layout_scrollFlags qui peut prendre plusieurs valeurs tels que scroll  , enterAlways  , enterAlwaysCollapsed  , exitUntilCollapsed  et snap .Ces différentes valeurs peuvent être combiner pour définir un autre comportement de la toolbar.

Il faut savoir que la barre de l’application peut être constituée de plusieurs éléments tel qu’ une toolbar , une image d’entête ,un Tablayout et bien d’autre.

Pour ce premier exemple nous allons voir comment utiliser uniquement l’AppBarLayout et la toolbar.

Lorsqu’on utilise l’AppBarLayout et la Toolbar comme bar d’application, on utilise généralement trois valeur pour l’attribut app:layout_scrollFlags pour définir le comportement de la toolbar au moment du défilement du contenu principale.Il s’agit des valeurs scroll  , enterAlways  et snap. 

• scroll :Cette valeur indique de défiler la barre d’application lorsque le contenu qui défile défilera
• enterAlways:  lorsque l’utilisateur défile le contenu du haut vers le bas il faut immédiatement afficher la barre de l’application
• snap :Cette valeur permet de rapidement cacher ou afficher la toolbar en fonction du niveau de défilement par rapport à la moitié de la hauteur de la toolbar. C’est à dire lorsque l’utilisateur défile à la moitié de la toolbar,et qu’il défile encore un peu plus haut,la bar d’application va rapidement se caché alors que lorsque qu’il défile un peu plus bas la barre d’application devient immédiatement visible.

Toutes les vues directement envelopper dans l’AppBarLayout doit définir l’attribut app:layout_scrollFlags pour dire comment elles souhaitent se comporter au moment du scroll

Nous allons voir dans un exemple comment afficher et cacher la toolbar lorsque l’AppBarLayout est uniquement constitué de la toolbar. Pour cela créer un nouveau projet.

Créer un nouveau projet.

Créez un nouveau projet dans android studio en cliquant sur File dans le menu principale d’android studio puis sur New->New Project.Dans la fenêtre qui s’affiche sélectionnez Empty Activity puis cliquez sur Next .Dans la nouvelle fenêtre qui apparaît, nommez le projet AppBarLayout, choisissez le langage de programmation avec lequel vous souhaitez travailler puis cliquez sur Finish.

Ajouter la librairie des composants material comme dépendance

L’AppBarLayout est disponible dans la librairie des composants material. Avant de pouvoir l’utiliser, vous devez ajouter la librairie des composant material comme dépendance dans votre projet.Pour cela ouvrez le fichier build.gradle(Module:app) de votre projet puis ajoutez la dépendance suivante

implementation 'com.google.android.material:material:1.1.0-alpha10'

Note:Pour utilisez la librairie des composants material, vous devez migrer vers AndroidX

Créer la vue

Pour commencer, votre application doit utiliser un thème sans ActionBar en héritant d’un thème sans ActionBar comme suit

Etape 1

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
     ...
     ...
     ...
    </style>

Etape 2

Ouvrez le fichier res/layout/main_activity.xml et ajoutez le bout de code suivant

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        
       <androidx.appcompat.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="?attr/colorPrimary"
           app:layout_scrollFlags="scroll|enterAlways|snap"
           android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <TextView
                android:padding="8dp"
                android:text="@string/str"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Etape 3

Vous devez ensuite définir la toolbar comme ActionBar comme suit

package com.example.appbarlayout

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar

class MainActivity : AppCompatActivity() {

    private lateinit var toolbar: Toolbar
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        toolbar=findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)
    }
}

package com.example.appbarlayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

Après exécution, vous devez avoir le résultat suivant

Autres ressources

https://material.io/components/app-bars-top/

https://material.io/components/app-bars-top/#behavior

https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/appbar/AppBarLayout.java

https://developer.android.com/reference/com/google/android/material/appbar/AppBarLayout

Conclusion

Nous sommes à la fin de ce tutoriel sur comment utiliser l’AppBarLayout pour animer une toolbar. J’espère que ce tutoriel vous aidera à utiliser l’AppBarLayout dans votre projet.A bientôt pour un nouveau tutoriel.