Tutoriel Android : apprendre à utiliser la Toolbar d'Android

Android2ee

Mathias Seguy

Alors aujourd'hui on migre l'ActionBar et on la remplace par la ToolBar en quelques lignes de code.

Pour réagir à ce tutoriel, un espace de dialogue vous est proposé sur le forum : Commentez

- Titre : Tutoriel Android : apprendre à utiliser la Toolbar d'Android

- Auteur : Mathias Seguy

- Parution : 29 février 2016

- Licence : Copyright ® 2016 MathiasSeguy. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Migrer son ActionBar vers la ToolBar

- I-A. Mise en place du style

- I-B. Modification du layout de l'activité

- I-C. Mise à jour du fichier Java de l'activité (ou du fragment)

- I-D. Vérification de la version de la Support Library

- I-E. Rappel sur votre fichier XML de menus

- II. Action Mode

- II-A. Fichiers XML des menus

- II-B. Fichier du layout

- II-C. Code Java

- III. Gestion du style

- IV. Remarques concernant la Support Library et l'ActionBarCompat

- V. ActionView

- V-A. Le fichier de Menu

- V-B. Les fichiers de layout

- V-C. Le code Java

- V-D. Ajouter des animations

- VI. ToolBar et TabLayout

- VI-A. Le fichier de Layout

- VI-B. Le code Java

- VI-C. Gestion des couleurs des onglets

- VII. ToolBar et ViewPager

- VII-A. Le fichier de Layout

- VII-B. Le code Java

- VIII. Conclusion et remerciements

- IX. Le tutoriel

I - Migrer son ActionBar vers la ToolBar

I-A - Mise en place du style

Tout d'abord, il suffit de définir votre style dans le fichier res/values/styles.xml (ci-dessous). Il hérite de Theme.AppCompat et affecte la valeur true à la balise windowNoTitle et false à la valeur windowActionBar, ce qui signifie que je ne souhaite ni la barre de titre ni l'ActionBar pour mon activité.

1. <resources>

2. <style name="AppBlankTheme" parent="Theme.AppCompat.Light.DarkActionBar">

3. <!-- Main theme colors -->

4. <!--   your app branding color for the app bar -->

5. <item name="colorPrimary">@color/primary</item>

6. <!--   darker variant for the status bar and contextual app bars -->

7. <item name="colorPrimaryDark">@color/primary_dark</item>

8. <!--   theme UI controls like checkboxes and text fields -->

9. <item name="colorAccent">@color/accent</item>

10. </style>

11. <!--Both themes below are those accepted to make the ToolBar works-->

12. <!-- Base application thème. -->

13. <style name="AppTheme" parent="AppBlankTheme">

14. <!-- Customize your theme here. -->

15. <!-- Base application thème. -->

16. <item name="windowNoTitle">true</item>

17. <item name="windowActionBar">false</item>

18. <item name="spinnerDropDownItemStyle">@style/mydropdown</item>

19. </style>

20. </resources>

J'ai défini aussi les couleurs de mon activité. Cela vient de la version Lollipop de la Support Library qui (grâce à Chris Banes) nous permet simplement de définir un jeu de couleur uni pour notre activité. Ces couleurs seront automatiquement utilisées par le Theme.AppCompat au niveau de votre application de manière à avoir une charte colorimétrique uniforme. Vous pouvez aller vous faire plaisir ici pour choisir vos couleurs et voir l'effet que cela produit : http://www.materialpalette.com/.

Maintenant que nous avons défini notre style, appliquons-le. Comme d'habitude cela s'effectue au niveau du fichier Manifest :

1. <?xml version="1.0" encoding="utf-8"?>

2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"

3. package="com.android2ee.formation.lollipop.toolbar" >

4. <application

5. android:allowBackup="true"

6. android:icon="@mipmap/ic_launcher"

7. android:label="@string/app_name"

8. android:theme="@style/AppTheme" >

I-B - Modification du layout de l'activité

C'est ici que tout se joue (oui, tout, la survie de l'univers, l'existence de Dieu, tout) dans votre layout. L'ActionBar n'est plus ajouté par défaut par le framework (on a demandé explicitement d'utiliser un thème pour notre application qui n'a pas l'ActionBar), c'est nous qui la positionnons dans notre layout. C'est un changement profond dans la philosophie de l'ActionBar, sommes-nous suffisamment matures pour la positionner où il se doit, en respect des nouvelles règles de Design ?

Pour les règles de Design, c'est ici : http://www.google.com/design/spec/material-design/introduction.html.

Et puis le site est tellement bien fait, tellement riche que ce serait du gâchis de ne pas l'utiliser.

Donc tout ça, pour vous dire de mettre à jour votre layout comme suit :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:tools="http://schemas.android.com/tools"

3. android:layout_width="match_parent"

4. android:layout_height="match_parent"

5. android:orientation="vertical"

6. tools:context=".MainActivity" >

7. <android.support.v7.widget.Toolbar

8. android:id="@+id/toolbar"

9. android:minHeight="?attr/actionBarSize"

10. android:background="#2196F3"

11. android:layout_width="match_parent"

12. android:layout_height="wrap_content">

13. </android.support.v7.widget.Toolbar>

14. <TextView android:layout_width="wrap_content"

15. android:layout_height="wrap_content"

16. android:text="@string/hello_world">

17. </TextView>

18. <ListView android:id="@+id/sampleList"

19. android:layout_width="match_parent"

20. android:layout_height="wrap_content"

21. android:layout_margin="5dp"

22. android:animateLayoutChanges="true"

23. android:drawSelectorOnTop="true">

24. </ListView>

25. </LinearLayout>

Alors clairement, je vous montre le layout du tutoriel, la chose importante ici est le linearLayout de premier niveau suivi directement par la ToolBar, puis le contenu réel de votre activité.

La seule chose qui diffère d'un composant normal est le minHeight qui récupère la taille de l'ActionBar du thème habituel.

I-C - Mise à jour du fichier Java de l'activité (ou du fragment)

Vous avez quasiment fini de migrer votre application, il ne vous reste que deux petites choses à faire :

1. Votre activité hérite d'AppCompatActivity.

2. Définir la ToolBar comme étant l'ActionBar de l'activité.

Et cela s'effectue tout simplement :

1. public class MainActivityextends AppCompatActivity {

2. ListView sampleList;

4. @Override

5. protected void onCreate(Bundle savedInstanceState) {

6. super.onCreate(savedInstanceState);

7. setContentView(R.layout.activity_main);

8. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

9. setSupportActionBar(toolbar);

10. getSupportActionBar().setSubtitle("Using ToolBar");

I-D - Vérification de la version de la Support Library

Pour que votre code s'exécute proprement, vous devez utiliser la Support Library de niveau (au moins) 22.2.0 :

compile 'com.android.support:appcompat-v7:22.2.0'

I-E - Rappel sur votre fichier XML de menus

Depuis que vous utilisez l'appCompat (et avant cela la SherlockBar), vos fichiers de menus définissent un nouveau namespace pour être interprétables par la Support Library, sinon la balise showAsAction est juste ignorée et vos icônes absentes.

Il vous faut donc définir ce namespace et l'utiliser pour toutes les balises qui n'appartiennent pas aux vieilles versions :

1. <menu xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:actionbarcompat_mse="http://schemas.android.com/apk/res-auto" >

3. <item

4. android:id="@+id/action_one"

5. android:icon="@drawable/ic_action_one"

6. android:orderInCategory="0"

7. actionbarcompat_mse:showAsAction="always"

8. android:title="One">

9. </item>

10. <item

11. android:id="@+id/action_two"

12. android:icon="@drawable/ic_action_two"

13. android:orderInCategory="1"

14. actionbarcompat_mse:showAsAction="always"

15. android:title="Two">

16. </item>

17. <item

18. android:id="@+id/action_one_duplicate"

19. android:icon="@drawable/ic_action_one"

20. android:orderInCategory="0"

21. actionbarcompat_mse:showAsAction="always"

22. android:title="One2">

23. </item>

24. <item

25. android:id="@+id/action_two_duplicate"

26. android:icon="@drawable/ic_action_two"

27. android:orderInCategory="0"

28. actionbarcompat_mse:showAsAction="ifRoom"

29. android:title="Two2">

30. </item>

31. <item

32. android:id="@+id/action_settings"

33. android:orderInCategory="100"

34. actionbarcompat_mse:showAsAction="never"

35. android:title="@string/action_settings">

36. </item>

37. </menu>

II - Action Mode

Continuons notre découverte de la ToolBar et en particulier regardons comment mettre l'ActionMode en place.

Tout d'abord qu'est-ce que l'ActionMode ? C'est la capacité de changer notre ToolBar pour n'afficher que des actions lors d'un événement utilisateur particulier. L'exemple compréhensible est quand je sélectionne un mail, la ToolBar affiche de nouvelles actions.

C'est ce changement que l'on nomme l'ActionMode et grosso modo, cela correspond juste à demander à notre ToolBar d'afficher un nouveau fichier XML de menus. Oui, en fait c'est trivial. Avant ça l'était vraiment, maintenant à deux ou trois petits détails près, ça l'est toujours. Regardons comment le mettre en place :

Le code Java et la définition des menus n'ont pas changé (non, toi non plus tout n'a pas changé - Julio Iglesias )

II-A - Fichiers XML des menus

Comme vous l'avez compris, il nous faut deux menus XML pour mettre en place l'ActionMode. Le premier est l'OptionMenu naturel de votre activité (fragment) et le second celui que vous souhaitez afficher lorsque l'ActionMode est activé.

Il est évident que c'est vos menus, vous mettez les items que vous souhaitez afficher, mes fichiers sont des fichiers d'exemples :

res\menu\main_menu.XML (Votre menu normal)

1. <menu xmlns:android="http://schemas.android.com/apk/res/android" >

2. <item

3. android:id="@+id/action_settings"

4. android:orderInCategory="100"

5. actionbarcompat:showAsAction="never"

6. android:title="@string/action_settings">

7. </item>

res\menu\action_mode.XML (Votre menu lorsque l'ActionMode est activé)

1. <menu xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:actionbarcompat_mse="http://schemas.android.com/apk/res-auto" >

3. <item

4. android:id="@+id/action_one"

5. android:icon="@drawable/ic_action_one"

6. android:orderInCategory="0"

7. actionbarcompat_mse:showAsAction="always"

8. android:title="One">

9. </item>

10. <item

11. android:id="@+id/action_two"

12. android:icon="@drawable/ic_action_two"

13. android:orderInCategory="1"

14. actionbarcompat_mse:showAsAction="always"

15. android:title="Two">

16. </item>

17. <item

18. android:id="@+id/action_one_duplicate"

19. android:icon="@drawable/ic_action_one"

20. android:orderInCategory="0"

21. actionbarcompat_mse:showAsAction="always"

22. android:title="One2">

23. </item>

24. <item

25. android:id="@+id/action_two_duplicate"

26. android:icon="@drawable/ic_action_two"

27. android:orderInCategory="0"

28. actionbarcompat_mse:showAsAction="ifRoom"

29. android:title="Two2">

30. </item>

31. <item

32. android:id="@+id/action_settings"

33. android:orderInCategory="100"

34. actionbarcompat_mse:showAsAction="never"

35. android:title="@string/action_settings">

36. </item>

37. </menu>

Comme vous le constatez, il n'y a aucun changement dans ces fichiers XML par rapport aux fichiers XML que nous utilisions pour l'ActionBarCompat.

II-B - Fichier du layout

Comme expliqué dans le chapitre précédent, il faut que vous déclariez votre ToolBar dans le fichier de layout de votre activité pour que celle-ci apparaisse :

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:tools="http://schemas.android.com/tools"

3. android:layout_width="match_parent"

4. android:layout_height="match_parent"

5. android:orientation="vertical"

6. tools:context=".ActionModeActivity" >

8. <include layout="@layout/my_toolbar"></include>

10. <LinearLayout

11. android:layout_width="match_parent"

12. android:layout_height="match_parent"

13. android:orientation="vertical"

14. android:paddingBottom="@dimen/activity_vertical_margin"

15. android:paddingLeft="@dimen/activity_horizontal_margin"

16. android:paddingRight="@dimen/activity_horizontal_margin"

17. android:paddingTop="@dimen/activity_vertical_margin">

où le fichier res\layout\my_toolbar.XML est :

res\layout\my_toolbar.XML

1. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/toolbar"

3. android:minHeight="?attr/actionBarSize"

4. android:background="?attr/colorPrimary"

5. android:layout_width="match_parent"

6. android:layout_height="wrap_content">

7. </android.support.v7.widget.Toolbar>

II-C - Code Java

Comme toujours avec la ToolBar, vous devez étendre l'AppCompatActivity et définir votre ToolBar comme étant l'ActionBar de votre activité :

1. public class ActionModeActivity extends AppCompatActivity {

3. /**

4. * The actionMode

5. */

6. ActionMode mMode;

8. /**

9. * The action Bar

10. */

11. private ActionBar actionBar;

13. /**

14. * The ToolBar

15. */

16. private Toolbar toolbar;

18. /***

19. * The ActionMode callBack

20. */

21. Callback actionModeCallBack;

23. /***

24. * Boolean to know which version is running

25. */

26. private boolean postICS,postLollipop;

27. @Override

28. protected void onCreate(Bundle savedInstanceState) {

29. super.onCreate(savedInstanceState);

30. setContentView(R.layout.activity_action_mode);

32. // Find the toolbar

33. toolbar = (Toolbar) findViewById(R.id.toolbar);

35. // Cstomize the toolbar

36. toolbar.setNavigationIcon(R.drawable.ic_action_custom_up);

37. postICS =getResources().getBoolean(R.bool.postICS);

38. postLollipop =getResources().getBoolean(R.bool.postLollipop);

40. if(postLollipop) {

41. toolbar.setElevation(15);

42. }

44. // Define the toolbar as the ActionBar

45. setSupportActionBar(toolbar);

46. actionBar=getSupportActionBar();

48. // You could also hide the action Bar

49. // getSupportActionBar().hide();

51. // Show the Up button in the action bar.

52. actionBar.setDisplayUseLogoEnabled(false);

53. actionBar.setDisplayHomeAsUpEnabled(true);

54. setListeners();

56. // Initialize the actionMode callback

57. initializeActionModeCallBack();

58. }

Ensuite il vous faut initialiser votre ActionModeCallBack qui est le callback du cycle de vie de l'ActionMode :

1. private void initializeActionModeCallBack() {

2. actionModeCallBack = new android.support.v7.view.ActionMode.Callback() {

4. @Override

5. public boolean onPrepareActionMode(ActionMode mode, Menu menu) {

6. return false;

7. }

9. @Override

10. public void onDestroyActionMode(ActionMode mode) {

11. }

13. @Override

14. public boolean onCreateActionMode(ActionMode mode, Menu menu) {

15. getMenuInflater().inflate(R.menu.action_mode, menu);

16. return true;

17. }

19. @Override

20. public boolean onActionItemClicked(ActionMode mode, MenuItem item) {

21. Toast.makeText(ActionModeActivity.this, "Got click: " + item, Toast.LENGTH_SHORT).show();

22. mode.finish();

23. return true;

24. }

25. };

26. }

Ce callback possède quatre méthodes :

- la méthode onCreateActionMode qui permet de créer le menu de l'ActionMode. Il suffit ainsi d'inflater le fichier XML que l'on souhaite ;

- la méthode onPrepareActionMode qui nous permet de mettre à jour le menu avant que celui-ci soit affiché ;

- la méthode onDestroyActionMode qui nous permet de faire le ménage si besoin est ;

- la méthode onActionItemClicked qui nous permet de savoir qu'un menu item du menu de l'ActionMode à été cliqué et lequel.

Il ne nous reste plus qu'à savoir activer ou désactiver ce mode :

Pour l'activation (remarquez que mMode est une variable de classe) :

1. mMode = startSupportActionMode(actionModeCallBack);

Pour la désactivation :

1. mMode.finish();

Et voilà, c'est tout, vous pouvez activer ou désactiver l'ActionMode quand bon vous semble maintenant.

III - Gestion du style

Il faut spécifiquement rajouter au style de la ToolBar les valeurs suivantes :

res\values\myStyles.xml

1. <!-- The Theme for the Actvity that have actionMode -->

2. <style name="ActionModeAppTheme" parent="AppTheme">

3. <item name="windowActionModeOverlay">true</item>

4. <item name="actionModeBackground">@color/primary_dark</item>

5. </style>

C'est-à-dire, je ne souhaite pas voir l'ActionMode usuel (parce que sinon il apparaît au-dessus de votre ToolBar et c'est très laid), je souhaite avoir une couleur particulière de fond pour ma ToolBar quand l'ActionMode est activé et j'utilise le Theme.Light pour surcharger mon thème actuel. D'où le style de la ToolBar qui ressemble à :

res\values\myStyles.xml

1. <style name="AppBlankTheme" parent="Theme.AppCompat.Light.DarkActionBar">

2. <!-- Main theme colors -->

3. <!-- Your app branding color for the app bar -->

4. <item name="colorPrimary">@color/primary</item>

5. <!-- Darker variant for the status bar and contextual app bars -->

6. <item name="colorPrimaryDark">@color/primary_dark</item>

7. <!-- Theme UI controls like checkboxes and text fields -->

8. <item name="colorAccent">@color/accent</item>

9. </style>

11. <!-- Both themes below are those accepted to make the ToolBar works -->

12. <!-- Base application thème. -->

13. <style name="AppTheme" parent="AppBlankTheme">

14. <!-- Customize your theme here. -->

15. <!-- Base application thème. -->

16. <item name="windowNoTitle">true</item>

17. <item name="windowActionBar">false</item>

18. <item name="spinnerDropDownItemStyle">@style/mydropdown</item>

19. </style>

qu'il faut appliquer à votre activité (dans votre Manifest) :

manifest.xml

1. <activity

2. android:name=".sample.ActionModeActivity"

3. android:label="@string/title_activity_actionmode"

4. android:parentActivityName=".MainActivity"

5. android:theme="@style/ActionModeAppTheme" >

6. <meta-data

7. android:name="android.support.PARENT_ACTIVITY"

8. android:value="com.android2ee.formation.lollipop.toolbar.MainActivity" >

9. </meta-data>

10. <intent-filter>

11. <action android:name="android.intent.action.MAIN" />

12. <category android:name="com.android2ee.formation.lollipop.toolbar.EXAMPLE" />

13. </intent-filter>

14. </activity>

IV - Remarques concernant la Support Library et l'ActionBarCompat

Si vous pensez que vous pouvez encore utiliser l'ActionBarCompat, vous faites une erreur, il vous faut migrer.

Pourquoi ? Pour ça :

1. compileSdkVersion 21

2. ...

3. defaultConfig {

4. applicationId "com.android2ee.formation.librairies.actionbar.compat"

5. minSdkVersion 9

6. targetSdkVersion 21

7. ...

8. }

9. dependencies {

10. compile 'com.android.support:appcompat-v7:20.0.0'

11. }

Si vous souhaitez que l'ActionBar marche, il vous faut figer le compileSdk, le TargetSdk et la SupportLib à 21.

Mais si vous souhaitez que l'Overlay (votre contenu passe sous l'Action), que le SplitWhenNarrow ou que les ProgressBar marchent encore, vous devez figer tout ce petit monde à 20.

Ce qui veut dire qu'en fait, vous devez migrer

V - ActionView

Alors pour continuer à visiter l'ActionBar… euh non, la ToolBar, je vous propose d'apprendre à afficher une vue dans votre ToolBar. L'exemple que j'utilise souvent pour ça est de mettre une zone de recherche, même si ce n'est pas très pertinent, car la SearchWidget est un peu là pour ça.

Mais, ce n'est pas grave, je le fais quand même pour vous expliquer le comportement.

Tout d'abord, à quoi cela ressemble-t-il ?

Lorsque j'appuie sur l'icône (le MenuItem) "<" dans la ToolBar, celui-ci se déplie et affiche une vue avec une fléche <-, une EditText et une ImageButton qui montre une loupe. Lorsque j'appuie sur le bouton loupe, cela replie la vue et récupère la valeur contenue dans l'EditText. Dans mon exemple, je l'affiche dans un Toast.

La flèche "<-" est nativement ajoutée par le système, elle ne dépend pas de vous.

Dans les copies d'écrans ci-dessous, je vous montre le résultat sur un émulateur avec GingerBread.

Ce principe est le principe de base de l'ActionView : il remplace une icône de la ToolBar par un layout.

V-A - Le fichier de Menu

Commençons par examiner le fichier de menu (car c'est lui qui porte l'information principale) :

res\menu\menu_action_view.XML

1. <menu xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:actionbarcompat_mse="http://schemas.android.com/apk/res-auto" >

3. <item

4. android:id="@+id/menu_item_actionview"

5. actionbarcompat_mse:actionLayout="@layout/actionview_view"

6. actionbarcompat_mse:showAsAction="always|collapseActionView"

7. android:icon="@drawable/ic_action_provider_extends"

8. android:title="ActionView">

9. </item>

10. <item

11. android:id="@+id/action_one"

12. actionbarcompat_mse:showAsAction="always"

13. android:icon="@drawable/ic_action_one"

14. android:orderInCategory="0"

15. android:title="One">

16. </item>

17. </menu>

Comme d'habitude, je définis mon propre namespace XML pour que le système ne zappe pas purement et simplement les balises de la Support Library et je l'utilise pour ajouter deux propriétés à mon MenuItem menu_item_actionview qui sont :

- actionLayout qui me permet de définir quel est le layout qui sera affiché à la place de l'item lorsque celui-ci sera déplié ;

- showAsAction qui me permet de définir le comportement de mon MenuItem, à savoir, toujours visible et au démarrage affiche l'item et non pas le layout.

V-B - Les fichiers de layout

Le layout qui remplacera le MenuItem est un layout rien de plus normal. Il faut quand même faire attention à un truc important, ce n'est pas lui qui définit la taille de la ToolBar. C'est-à-dire que s'il doit s'afficher avec 128 dp de haut, il vous faudra changer la hauteur de la ToolBar vous-même lors de l'inflation du menu (quand on affichera le layout) dans le code Java (n'oubliez pas de rétablir cette taille lors du collapse du layout).

res\layout\actionview_view.XML

1. <?xml version="1.0" encoding="utf-8"?>

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. android:layout_width="match_parent"

4. android:layout_height="match_parent"

5. android:layout_gravity="center"

6. android:focusable="true">

7. <EditText

8. android:id="@+id/edtActionView"

9. android:layout_width="wrap_content"

10. android:layout_height="wrap_content"

11. android:ems="12"

12. android:hint="I am an EditText but I could be whatever"

13. android:textSize="12sp" >

14. </EditText>

16. <ImageButton

17. android:id="@+id/btnActionView"

18. android:layout_width="32dip"

19. android:layout_height="32dip"

20. android:layout_gravity="center"

21. android:adjustViewBounds="true"

22. android:background="@drawable/ic_action_search"

23. android:scaleType="fitCenter" >

24. </ImageButton>

25. </LinearLayout>

Le fichier de layout de l'activité est toujours le même, en particulier, il n'oublie pas de déclarer la ToolBar :

res\layout\activity_action_view.XML

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"

3. android:layout_height="match_parent"

4. tools:context="com.android2ee.formation.lollipop.toolbar.sample.ActionViewActivity">

6. <include layout="@layout/my_toolbar"/>

8. <TextView android:text="@string/hello_world"

9. android:layout_width="wrap_content"

10. android:layout_height="wrap_content" />

11. </RelativeLayout>

res\layout\my_toolbar.XML

1. <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"

2. android:id="@+id/toolbar"

3. android:minHeight="?attr/actionBarSize"

4. android:background="?attr/colorPrimary"

5. android:layout_width="match_parent"

6. android:layout_height="wrap_content">

7. </android.support.v7.widget.Toolbar>

V-C - Le code Java

Le code Java de l'activité est assez simple. Il y a trois étapes auxquelles il faut faire attention :

- instancier la ToolBar dans la méthode onCreate ;

- récupérer les pointeurs vers les composants graphiques qui seront affichés dans la ToolBar quand l'ActionView s'affiche (pour les mettre à jour, rajouter des listeners…) ;

- écouter dans le onOptionItemSelected, le menuItem de votre ActionView et le laisser être traité par le système.

Ainsi, comme d'habitude, dans la méthode onCreate, on instancie la ToolBar :

1. protected void onCreate(Bundle savedInstanceState) {

2. super.onCreate(savedInstanceState);

3. setContentView(R.layout.activity_action_view);

5. // Find the toolbar

6. toolbar = (Toolbar) findViewById(R.id.toolbar);

7. postICS =getResources().getBoolean(R.bool.postICS);

8. postLollipop =getResources().getBoolean(R.bool.postLollipop);

10. if(postLollipop) {

11. toolbar.setElevation(15);

12. }

14. // Define the toolbar as the ActionBar

15. setSupportActionBar(toolbar);

16. actionBar=getSupportActionBar();

17. }

Ensuite dans la onCreateOptionsMenu, on instancie le menu et on met en place l'ActionView, en particulier on récupère les pointeurs vers les composants graphiques qui nous intéressent, on leur rajoute des listeners au besoin :

1. public boolean onCreateOptionsMenu(Menu menu) {

2. // Inflate the menu; this adds items to the action bar if it is present.

3. getMenuInflater().inflate(R.menu.menu_action_view, menu);

5. // Find your menuItem that handles your actionView

6. menuItemActionView = menu.findItem(R.id.menu_item_actionview);

8. // Find the root layout encapsulated by the MenuItem

9. lilActionView = (LinearLayout) MenuItemCompat.getActionView(menuItemActionView);

11. // Then find your graphical elements

12. edtActionView = (EditText) lilActionView.findViewById(R.id.edtActionView);

13. btnActionView = (ImageButton) lilActionView.findViewById(R.id.btnActionView);

14. btnActionView.setOnClickListener(new View.OnClickListener() {

15. public void onClick(View v) {

16. actionOfTheActionView();

17. }

18. });

Où la méthode actionOfTheActionView est assez triviale, elle affiche un Toast et ferme l'ActionView :

1. /**

2. * Handling Action from the btnActionView contained by the ActionView

3. */

4. private void actionOfTheActionView() {

5. Log.e("ActionViewActivity", "ActionView edt " + edtActionView.getText().toString());

6. Toast.makeText(this, "ActionView edt = " + edtActionView.getText().toString(), Toast.LENGTH_SHORT).show();

7. MenuItemCompat.collapseActionView(menuItemActionView);

9. // What ever is the version, hide the keyboard:

10. InputMethodManager imm = (InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE);

11. imm.hideSoftInputFromWindow(edtActionView.getWindowToken(), 0);

12. }

Et enfin, dans la méthode onOptionItemSelected, on ne gère pas le MenuItem qui porte l'ActionView (mais on gère le up, ce qui n'a rien à voir avec notre exemple) :

1. public boolean onOptionsItemSelected(MenuItem item) {

2. switch (item.getItemId()) {

3. case android.R.id.home:

4. // This ID represents the Home or Up button. In the case of this

5. // activity, the Up button is shown. Use NavUtils to allow users

6. // to navigate up one level in the application structure. For

7. // more details, see the Navigation pattern on Android Design:

8. //

9. // http://developer.android.com/design/patterns/navigation.html#up-vs-back

10. //

11. NavUtils.navigateUpFromSameTask(this);

12. return true;

13. case R.id.menu_item_actionview:

14. // Because the system expands the action view when the user selects the action, you do

15. // not need to respond to the item in the onOptionsItemSelected() callback. The system

16. // still calls onOptionsItemSelected(), but if you return true (indicating you've

17. // handled the event instead), then the action view will not expand.

18. Log.e("ActionViewActivity", "menu_item_actionview get");

19. return false;

20. }

21. return super.onOptionsItemSelected(item);

22. }

Et voilà, c'est tout, en fait, ce n'était pas compliqué.

Ah oui, j'oubliais, dans les tutoriels, les gars qui oublient de déclarer leurs attributs de classes, c'est assez embêtant car tu ne sais jamais ce qu'il a déclaré (je vous mets aussi les imports qui utilisent la Support Library, pas les autres) :

1. import android.support.v4.app.NavUtils;

2. import android.support.v4.view.MenuItemCompat;

3. import android.support.v7.app.ActionBar;

4. import android.support.v7.app.AppCompatActivity;

5. import android.support.v7.widget.Toolbar;

7. public class ActionViewActivity extends AppCompatActivity {

9. // The action Bar

10. private ActionBar actionBar;

12. // The ToolBar

13. private Toolbar toolbar;

15. // The menuItem that handles the ActionView

16. MenuItem menuItemActionView;

18. // The root Layout of the View of the ActionView

19. LinearLayout lilActionView;

21. // The EditText to listen for the user input

22. EditText edtActionView;

24. // The searchButton

25. ImageButton btnActionView;

27. // Boolean to know which version is running

28. private boolean postICS,postLollipop;

29. }

V-D - Ajouter des animations

J'avais envie d'ajouter quelques animations quand l'ActionView s'affiche pour les versions sorties depuis HoneyComb (nommée également Android 3). J'aurais pu le faire pour les versions précédentes, mais quand je l'ai fait, j'ai trouvé ça trop laid. Parfois, il faut savoir s'abstenir.

Donc, pour ça, la première chose à faire est de savoir sur quelle version on se trouve. Et comme je n'aime pas le BuildConfig et que je préfère les booléens, je me fais mon petit fichier de versions.

values\versions.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <bool name="postICS">false</bool>

4. <bool name="postLollipop">false</bool>

5. </resources>

values-v14\versions.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <bool name="postICS">true</bool>

4. <bool name="postLollipop">false</bool>

5. </resources>

values-v21\versions.xml

1. <?xml version="1.0" encoding="utf-8"?>

2. <resources>

3. <bool name="postICS">true</bool>

4. <bool name="postLollipop">true</bool>

5. </resources>

Et donc, dans mon code Java, je fais :

1. postICS =getResources().getBoolean(R.bool.postICS);

2. postLollipop =getResources().getBoolean(R.bool.postLollipop);

Et voilà, j'ai mes beaux booléens. Je n'ai pas inventé cette technique, j'ai regardé la conférence suivante : https://www.youtube.com/watch?v=amZM8oZBgfk (GoogleIo 2012, MultiVersionning par Bruno Oliveira, Adam Powell). [Alors surtout dans cette conférence ils vous disent d'utiliser le parrallel activity pattern, NE LE FAITES PAS, avec les fragments, utilisez toujours la Support Library si vous codez pour Gingerbread. Pas de duplication de code, surtout pas de duplication de code.]

Et maintenant, à moi les animations. Pour ce faire, je souhaite les lancer :

- quand l'ActionView s'affiche ;

- quand j'appuie sur l'ImageButton search (la loupe).

Ainsi, je rajoute un listener pour écouter l'ouverture de l'ActionView au moment de la création du menu :

1. @Override

2. public boolean onCreateOptionsMenu(Menu menu) {

3. // Inflate the menu; this adds items to the action bar if it is present.

4. getMenuInflater().inflate(R.menu.menu_action_view, menu);

6. // Find your menuItem that handles your actionView

7. menuItemActionView = menu.findItem(R.id.menu_item_actionview);

9. // Find the root layout encapsulated by the MenuItem

10. lilActionView = (LinearLayout) MenuItemCompat.getActionView(menuItemActionView);

12. // Then find your graphical elements

13. edtActionView = (EditText) lilActionView.findViewById(R.id.edtActionView);

14. btnActionView = (ImageButton) lilActionView.findViewById(R.id.btnActionView);

15. btnActionView.setOnClickListener(new View.OnClickListener() {

16. public void onClick(View v) {

17. actionOfTheActionView();

18. }

19. });

21. // When using the support library, the setOnActionExpandListener() method is

22. // static and accepts the MenuItem object as an argument

23. MenuItemCompat.setOnActionExpandListener(menuItemActionView, new MenuItemCompat.OnActionExpandListener() {

24. @Override

25. public boolean onMenuItemActionCollapse(MenuItem item) {

26. // Do something when collapsed, it's too late for animation

27. Log.e("ActionViewActivity", "menu_item_actionview collapsing");

28. return true; // Return true to collapse action view

29. }

31. @SuppressLint("NewApi")

32. @Override

33. public boolean onMenuItemActionExpand(MenuItem item) {

34. //the first time, elements are not expanded, It's too soon to have their size

35. if(postICS) {

36. btnActionView.animate().rotationBy(360f).alpha(1f).setDuration(300);

37. edtActionView.animate().rotationBy(360f).alpha(1f).y(0).setDuration(300);

38. }

39. // Do something when expanded

40. return true; // Return true to expand action view

41. }

42. });

43. return super.onCreateOptionsMenu(menu);

44. }

Et quand l'ActionView est affichée, j'anime mon ImageButton de loupe et mon EditText en les faisant tourner et bouger.

L'autre lancement s'effectue sur le clic de l'ImageButton :

1. /**

2. * Handling Action from the btnActionView contained by the ActionView

3. */@SuppressLint("NewApi")

4. private void actionOfTheActionView() {

5. Log.e("ActionViewActivity", "ActionView edt " + edtActionView.getText().toString());

6. Toast.makeText(this, "ActionView edt = " + edtActionView.getText().toString(), Toast.LENGTH_SHORT).show();

7. collapsing=true;

8. if(postICS) {

9. // This is called when the user press the search icon, so the

10. edtActionView.animate().alpha(0).rotationBy(-360f).setDuration(300);

11. btnActionView.animate().alpha(0).rotationBy(-360f).setDuration(300).setListener(new Animator.AnimatorListener() {

12. // The listener is set for all the animations (further animations)

13. @Override

14. public void onAnimationStart(Animator animation) {

15. }

17. @Override

18. public void onAnimationEnd(Animator animation) {

19. if (collapsing) {

20. MenuItemCompat.collapseActionView(menuItemActionView);

21. collapsing = false;

22. }

23. }

25. @Override

26. public void onAnimationCancel(Animator animation) {

27. if (collapsing) {

28. MenuItemCompat.collapseActionView(menuItemActionView);

29. collapsing = false;

30. }

31. }

33. @Override

34. public void onAnimationRepeat(Animator animation) {

35. }

36. });

37. } else {

38. MenuItemCompat.collapseActionView(menuItemActionView);

39. collapsing = false;

40. }

42. // What ever is the version, hide the keyboard:

43. InputMethodManager imm = (InputMethodManager)getSystemService(

44. Context.INPUT_METHOD_SERVICE);

45. imm.hideSoftInputFromWindow(edtActionView.getWindowToken(), 0);

46. }

Et là, je fais pareil, j'anime mon ImageButton et mon EditText. Mais surtout, ce qui est important ici, c'est que j'écoute l'animation afin de, quand elle se termine, mettre à jour mon IHM, à savoir fermer l'ActionView.

Ce qui complexifie un peu quand même ma méthode, mais est nettement plus agréable pour mon utilisateur.

VI - ToolBar et TabLayout

Pour finir cette série sur la ToolBar, il ne nous reste plus qu'à mettre en place la ToolBar avec une ligne d'onglets et/ou avec un ViewPager.

Commençons par la ligne d'onglets.

Nous voulons simplement avoir une activité avec des onglets et la ToolBar :

Pour ajouter cette ligne d'onglets, rien de plus facile, il faut tout d'abord définir en XML sa ligne d'onglets et construire ceux-ci côté Java. Aucune surprise ne vous attend. Nous utilisons uniquement les composants de la DesignLibrary pour la mise en place des onglets et tout se déroule alors facilement.

Il y a deux paramètres que nous pouvons modifier pour le comportement de la ToolBar : la notion de gravité et la notion de mode.

La gravité possède deux valeurs Center ou Fill. Center rassemble les onglets au centre de l'écran en mode wrapContent alors que Fill répartit uniformément l'espace disponible pour chaque onglet.

Le mode permet simplement de dire si vous souhaitez que vos onglets soient déroulants ou pas. S'ils ne sont pas déroulants, ils s'affichent tous dans l'espace disponible, ce qui veut dire qu'ils sont compressés et peuvent ne pas avoir la place de s'afficher complètement.

VI-A - Le fichier de Layout

Commençons par examiner le fichier de layout :

res\layout\activity_activity_with_tabs_nav.XML

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. xmlns:tools="http://schemas.android.com/tools"

3. android:layout_width="match_parent"

4. android:layout_height="match_parent"

5. android:orientation="vertical"

6. tools:context=".ActivityWithTabsNav">

8. <android.support.v7.widget.Toolbar

9. android:id="@+id/toolbar"

10. android:layout_width="match_parent"

11. android:layout_height="wrap_content"

12. android:background="?attr/colorPrimary"

13. android:minHeight="?attr/actionBarSize">

14. </android.support.v7.widget.Toolbar>

15. <android.support.design.widget.TabLayout

16. android:id="@+id/tabLayout"

17. android:layout_width="match_parent"

18. android:layout_height="wrap_content"

19. android:background="#FF00FF"

20. android:fillViewport="true" >

21. </android.support.design.widget.TabLayout>

22. <TextView

23. android:id="@+id/txvState"

24. android:layout_width="wrap_content"

25. android:layout_height="wrap_content"

26. android:text="@string/hello_world" >

27. </TextView>

28. <Button

29. android:id="@+id/btnChangeMode"

30. android:layout_width="wrap_content"

31. android:layout_height="wrap_content"

32. android:text="@string/btnChangeTabMode">

33. </Button>

34. <Button

35. android:id="@+id/btnChangeGravity"

36. android:layout_width="wrap_content"

37. android:layout_height="wrap_content"

38. android:text="@string/btnChangeGravity">

39. </Button>

40. <Button

41. android:id="@+id/btnAddTab"

42. android:layout_width="wrap_content"

43. android:layout_height="wrap_content"

44. android:text="@string/btnAddTab">

45. </Button>

46. </LinearLayout>

Il n'y a pas grand-chose à dire, si ce n'est que TabLayout appartient à la DesignLibrary et la ToolBar au niveau de la version 7.

VI-B - Le code Java

Le code Java de l'activité est assez simple. Il y a trois étapes auxquelles il faut faire attention :

- instancier la ToolBar et le TabLayout ;

- construire les onglets du TabLayout ;

- ajouter un listener au TabLayout pour être averti des changements d'onglets.

Tout se fait dans la méthode onCreate de votre activité (ou dans la méthode onCreateView de votre fragment).

Ainsi, comme d'habitude, dans la méthode onCreate, on instancie la ToolBar :

1. protected void onCreate(Bundle savedInstanceState) {

2. super.onCreate(savedInstanceState);

4. // Set your view

5. setContentView(R.layout.activity_activity_with_tabs_nav);

7. // Find the Toolbar

8. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

10. // Use it as your action bar

11. setSupportActionBar(toolbar);

13. // Add subtitle

14. getSupportActionBar().setSubtitle("Using ToolBar");

16. // Find the Tab Layout

17. tabLayout = (TabLayout) findViewById(R.id.tabLayout);

19. // Define its gravity and its mode

20. tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

21. tabLayout.setTabMode(TabLayout.MODE_FIXED);

23. // Define the color to use (depending on the state a different color should be disaplyed)

24. // Works only if done before adding tabs

25. tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector_color));

27. // Populate your TabLayout

28. tabLayout.addTab(tabLayout.newTab().setText("Tab 1").setIcon(R.drawable.ic_tab));

29. tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));

30. tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

32. // Add a listener

33. tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

34. @Override

35. public void onTabSelected(TabLayout.Tab tab) {/*do your navigation*/}

36. @Override

37. public void onTabUnselected(TabLayout.Tab tab) {/*do nothing*/}

38. @Override

39. public void onTabReselected(TabLayout.Tab tab) {/*do nothing*/}

40. });

41. ...

42. }

Comme d'habitude, on récupère la ToolBar et on l'affecte à l'activité comme étant son ActionBar.

Puis on s'occupe du TabLayout. Ici, il n'y a plus besoin d'appeler la méthode setup sur le TabLayout, l'initialisation est automatique. Il vous suffit de le récupérer (findViewById), de lui affecter son mode et sa gravité, puis de lui ajouter ses onglets via la méthode addTab, en fournissant pour chaque onglet un texte ainsi qu'une icône optionnelle.

Enfin, il ne vous reste plus qu'à ajouter le TabListener pour interagir avec l'utilisateur et changer le fragment affiché dans l'onglet. Vous pouvez aussi mettre des vues en utilisant la méthode addView(View view, int index, LayoutParameter layoutParam).

Mais attention, la philosophie à changé, il n'y a plus besoin que votre TabLayout contienne les vues pour chaque onglet. Il n'est qu'un conteneur d'onglets ; uniquement une ligne qui affiche les boutons, à vous de gérer la mise à jour de la vue / du fragment sous cette ligne. Je pense que c'est la bonne manière d'aborder ce composant avec les fragments en utilisant ces derniers de manière dynamique.

Et voilà, c'est tout, en fait, ce n'était pas compliqué.

Ah oui, j'oubliais, les imports utilisés pour cette activité sont :

1. import android.support.design.widget.TabLayout;

2. import android.support.v7.app.AppCompatActivity;

3. import android.support.v7.widget.Toolbar;

VI-C - Gestion des couleurs des onglets

Une dernière précision sur l'affectation des couleurs à vos boutons d'onglets. Pour effectuer cela, on s'appuie sur un fichier de couleurs un peu particulier, un SelectorColor (identique à un SelectorDrawable dans l'idée). Un SelectorColor est une couleur qui en fonction de l'état du composant (enabled/selected/hover…) possède une valeur spécifique :

1. <selector xmlns:android="http://schemas.android.com/apk/res/android">

2. <item android:state_enabled="false" android:color="@color/testcolor2" />

3. <item android:state_selected="true" android:color="@color/testcolor3" />

4. <item android:color="@color/testcolor5"/>

5. <selector>

Il ne reste plus qu'à affecter cette couleur à nos onglets qui automatiquement (s'ils sont sélectionnés ou pas) s'afficheront de manière différente (avec une couleur différente).

1. tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector_color));

Vous devez affecter les couleurs à vos onglets AVANT d'ajouter des boutons à votre ligne d'onglets (bref avant d'appeler la méthode addTab).

VII - ToolBar et ViewPager

Ces composants sont faits pour simplement pour fonctionner ensemble. Il suffit de déclarer la TabLayout, le ViewPager et la ToolBar dans votre fichier de layout, puis côté Java, d'ajouter la TabLayout comme précédemment et de lier le ViewPager au TabLayout.

VII-A - Le fichier de Layout

Commençons par examiner le fichier de layout :

res\layout\activity_tabs_view_pager.XML

1. <!--XML version="1.0" encoding="utf-8"-->

2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

3. xmlns:tools="http://schemas.android.com/tools"

4. android:layout_width="match_parent"

5. android:layout_height="match_parent"

6. android:orientation="vertical"

7. tools:context="com.android2ee.formation.lollipop.toolbar.tabsnav.ActivityTabsNavViewPager">

8. <android.support.v7.widget.Toolbar

9. android:id="@+id/toolbar"

10. android:layout_width="match_parent"

11. android:layout_height="wrap_content"

12. android:background="?attr/colorPrimary"

13. android:minHeight="?attr/actionBarSize">

14. </android.support.v7.widget.Toolbar>

15. <android.support.design.widget.TabLayout

16. android:id="@+id/tabLayout"

17. android:layout_width="match_parent"

18. android:layout_height="wrap_content"

19. android:background="#FF00FF"

20. android:fillViewport="true" >

21. </android.support.design.widget.TabLayout>

22. <android.support.v4.view.ViewPager

23. android:layout_width="fill_parent"

24. android:layout_height="fill_parent"

25. android:id="@+id/viewpager"

26. android:background="#FF00F0F0"

27. android:fillViewport="true">

28. </android.support.v4.view.ViewPager>

29. </LinearLayout>

Il n'y a pas grand-chose à dire, si ce n'est que TabLayout appartient à la DesignLibrary, la ToolBar au support V7 et le ViewPager au support V4 (inclus dans le support V7).

VII-B - Le code Java

Le code Java de l'activité est assez simple. Il y a quatre étapes auxquelles il faut faire attention :

- instancier la ToolBar, le ViewPager et le TabLayout ;

- construire les onglets du TabLayout ;

- ajouter un listener au TabLayout pour être averti des changements d'onglets (ce n'est ici pas obligatoire, je le conseille pour la restauration de l'onglet courant quand l'utilisateur revient dans votre activité) ;

- lier le ViewPager au TabLayout.

Tout se fait dans la méthode onCreate de votre activité (ou dans la méthode onCreateView de votre fragment).

Ainsi, comme d'habitude, dans la méthode onCreate, on instancie la ToolBar :

1. @Override

2. protected void onCreate(Bundle savedInstanceState) {

3. super.onCreate(savedInstanceState);

4. setContentView(R.layout.activity_tabs_nav_view_pager);

6. // Find the Toolbar

7. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

9. // Use it as your action bar

10. setSupportActionBar(toolbar);

12. // Add subtitle

13. getSupportActionBar().setSubtitle("Using ToolBar");

15. // Find the Tab Layout

16. tabLayout = (TabLayout) findViewById(R.id.tabLayout);

18. // Define its gravity and its mode

19. tabLayout.setTabGravity(TabLayout.GRAVITY_CENTER);

20. tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

22. // Instanciate the PageAdapter

23. pagerAdapter=new MyPagerAdapter(this);

25. // Define the color to use (depending on the state a different color should be disaplyed)

26. // Works only if done before adding tabs

27. tabLayout.setTabTextColors(getResources().getColorStateList(R.color.tab_selector_color));

29. // Find the viewPager

30. viewPager = (ViewPager) super.findViewById(R.id.viewpager);

32. // Affectation de l'adapter au ViewPager

33. viewPager.setAdapter(pagerAdapter);

34. viewPager.setClipToPadding(false);

35. viewPager.setPageMargin(12);

37. // Add animation when the page are swiped

38. // this instanciation only works with honeyComb and more

39. // if you want it all version use AnimatorProxy of the nineoldAndroid lib

40. // @see:http://stackoverflow.com/questions/15767729/backwards-compatible-pagetransformer

41. if(Build.VERSION.SDK_INT>=Build.VERSION_CODES.HONEYCOMB){

42. viewPager.setPageTransformer(true, new MyPageTransformer(this));

43. }

44. // AND CLUE TABLAYOUT AND VIEWPAGER

45. tabLayout.setupWithViewPager(viewPager);

46. }

Comme d'habitude, on récupère la ToolBar et on l'affecte à l'activité comme étant son ActionBar.

Puis on s'occupe du TabLayout (voir paragraphe précédent).

Enfin, il ne vous reste plus qu'à ajouter le TabListener pour vous souvenir de l'onglet dans lequel est l'utilisateur. Ainsi, quand l'utilisateur revient dans votre activité, si elle est encore dans la liste des applications récentes (dans votre LRUCach pour être exact), vous pouvez alors le replacer dans l'onglet qu'il vient de quitter.

Enfin, pour rappel, le code du ViewPager est le suivant :

1. public class MyPagerAdapter extends FragmentPagerAdapter {

3. // The list of ordered fragments

4. private final ArrayList fragments;

6. /***

7. * The constructor

8. *

9. * @param ctx

10. *            The Context

11. */

12. public MyPagerAdapter(ActivityTabsNavViewPager ctx) {

13. super(ctx.getSupportFragmentManager());

14. fragments = new ArrayList();

15. // A stuff I never did before, instanciate my fragment

16. Fragment frag = new MyFragment1();

17. fragments.add(frag);

18. frag = new MyFragment2();

19. fragments.add(frag);

20. frag = new MyFragment3();

21. fragments.add(frag);

22. frag = new MyFragment4();

23. fragments.add(frag);

24. frag = new MyFragment5();

25. fragments.add(frag);

26. }

28. /**

29. * This method may be called by the ViewPager to obtain a title string to

30. * describe the specified page. This method may return null indicating no

31. * title for this page. The default implementation returns null.

32. *

33. * @param position

34. *            The position of the title requested

35. * @return A title for the requested page

36. */

37. @Override

38. public CharSequence getPageTitle(int position) {

39. return "This is the Page " + position;

40. }

42. @Override

43. public Fragment getItem(int position) {

44. return fragments.get(position);

45. }

47. @Override

48. public int getCount() {

49. return 5;

50. }

51. }

Ah oui, j'oubliais, les imports utilisés pour cette activité sont :

1. import android.support.design.widget.TabLayout;

2. import android.support.v4.view.ViewPager;

3. import android.support.v7.app.AppCompatActivity;

4. import android.support.v7.widget.Toolbar;

VIII - Conclusion et remerciements

Je finis cet article, concernant la ToolBar, en remerciant Chris Banes (@chrisbanes), car c'est à lui que l'on doit cette simplification et surtout cette libération de l'ActionBar,

so Thanks a billion Mr Banes.

Nous tenons à remercier Jacques Jean pour la relecture de cet article puis milkoseck et Mickael Baron pour la mise au gabarit.

IX - Le tutoriel

Comme tous mes articles, celui-ci est associé à un code source, vous le trouverez ici :https://github.com/MathiasSeguy-Android2EE/ToolBar4Github.