• 20 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 07/12/2020

Personnalisez votre barre d’outils

Dans ce chapitre, nous allons voir comment modifier l'apparence visuelle de notre fantastique Toolbar. Puis nous verrons également le moyen de naviguer intelligemment en l'utilisant, à travers la création d'une seconde activité.

Nous allons donc poursuivre le développement de notre mini-application ToolMyBar disponible à ce lien.

Modifier le style de notre Toolbar

Notre app' ToolMyBar est plutôt sympa visuellement parlant. Cependant, nous aimerions améliorer l'apparence de notre Toolbar, afin de la rendre... un chouïa plus sexy !

                        

Pour cela, nous allons créer un style visuel que nous appliquerons à notre Toolbar, le tout directement depuis notre fichier styles.xml. Nous allons aussi modifier notre fichier colors.xml (qui gère l'ensemble des couleurs de notre application) afin d'y ajouter notre propre palette de couleurs.

Enfin, nous appliquerons ce style visuel à notre Toolbar depuis le layout de notre activité (activity_main.xml).

1 - Modification du fichier /res/values/colors.xml (Modification des couleurs principales de notre application)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#98A9AB</color>
    <color name="colorPrimaryDark">#798788</color>
    <color name="colorAccent">#F4F7F8</color>
</resources>

 2 - Modification du fichier /res/values/styles.xml (Ajout d'un nouveau style visuel)

<resources>

    ....
    
    <!-- TOOLBAR THEME -->
    <style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <!-- Color of the title text in the Toolbar -->
        <item name="android:textColorPrimary">@color/colorAccent</item>
    </style>
    
    <!-- TOOLBAR TITLE THEME -->
    <style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">21sp</item>
        <item name="android:textStyle">italic</item>
    </style>

</resources>

Explications : Nous créons ici un style personnalisé pour notre Toolbar (grâce aux balises <style> ) qui hérite d'un style parent déjà défini dans Android. Nous avons décidé dans notre cas de seulement modifier la couleur du titre (textColorPrimary). Comme vous vous en doutez, il existe également beaucoup d'autres propriétés pour modifier l'apparence de notre Toolbar.

3 - Modification du layout /res/layout/activity_main.xml (Application du style visuel) 

<android.support.v7.widget.Toolbar
    android:id="@+id/activity_main_toolbar"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    
    android:theme="@style/ToolbarTheme"
    app:titleTextAppearance="@style/Toolbar.TitleText"/>

Explications : Nous appliquons notre style visuel à la Toolbar grâce à la balise android:theme et celui du texte grâce à la balise app:titleTextAppearance.

Voici le résultat qu'engendre cette modification. Cool non ?

Et si je veux modifier les couleurs de mes icônes ?

Bonne question ! Généralement, les icônes d'une Toolbar sont plutôt blanches, mais rien ne vous empêche de modifier la couleur... en important des icônes d'une autre couleur, tout simplement ! Vous pouvez également le faire via des lignes de code, mais je vous le déconseille (sauf cas spéciaux) : restons simples !

Simplifier l'utilisation de notre Toolbar

Notre Toolbar est vraiment top, mais nous sommes tout de même très feignants (comme tout bon développeur qui se respecte :)). Cela nous embête vraiment de copier/coller à chaque fois le code de notre Toolbar dans tous les layouts que nous utilisons...

Pas de panique ! Nous allons simplement ajouter notre Toolbar dans un fichier à part, que nous importerons par la suite directement dans nos layouts.

Pour cela, nous allons créer un fichier appelé toolbar.xml dans le répertoire /res/layout qui contiendra notre Toolbar déjà créée :

Fichier /res/layout/toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- Déclaration de notre Toolbar -->
<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/toolbar"
    android:minHeight="?attr/actionBarSize"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"

    android:theme="@style/ToolbarTheme"
    app:titleTextAppearance="@style/Toolbar.TitleText"/>

Puis, nous allons importer ce fichier dans les layouts des activités concernées (dans notre cas /res/layout/activity_main.xml et /res/layout-land/activity_main.xml) en supprimant bien évidemment l'ancienne déclaration de notre Toolbar.

Aperçu de notre fichier activity_main.xml :

...
    <!-- Importation de notre Toolbar -->
    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
...

Explications : Le mot-clé include va nous permettre d'inclure un fichier layout déjà existant à notre layout actuel.

N'oublions pas non plus de modifier le fichier MainActivity suite à la re-déclaration de l'identifiant de notre Toolbar (l'ancien étant activity_main_toolbar et le nouveau toolbar).

Aperçu de notre fichier MainActivity.java :

public class MainActivity extends AppCompatActivity {
    
    ...
    
    private void configureToolbar(){
        // Get the toolbar view inside the activity layout
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        // Set the Toolbar
        setSupportActionBar(toolbar);
    }
    
    ...
    
}

Implémenter la navigation

Tout cela est bien sympa, mais il serait tout de même très intéressant d'implémenter une certaine navigation impactant visuellement notre Toolbar, non ? :D

                                           

Rien de plus simple. Nous allons créer une nouvelle activité (DetailActivity) et la définir comme "enfant" de notre activité principale (qui elle sera "parente"). Cette nouvelle activité aura également une Toolbar, ainsi qu'un bouton Up pour gérer le retour en arrière.

 1 - Création de notre Activité "DetailActivity.java" :

public class DetailActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        //1 - Configuring Toolbar
        this.configureToolbar();
    }

    private void configureToolbar(){
        //Get the toolbar (Serialise)
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        //Set the toolbar
        setSupportActionBar(toolbar);
        // Get a support ActionBar corresponding to this toolbar
        ActionBar ab = getSupportActionBar();
        // Enable the Up button
        ab.setDisplayHomeAsUpEnabled(true);
    }
}

Explications : Nous avons créé la méthode configureToolbar() dans le but de paramétrer notre Toolbar et activer par défaut (grâce à la méthode setDisplayHomeAsUpEnabled) le bouton Up (qui servira à revenir en arrière).

2 - Création du layout de notre activité "activity_detail.xml "

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!-- Importation de notre Toolbar -->
    <include
        layout="@layout/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center">

        <ImageView
            android:id="@+id/activity_detail_imageView"
            android:layout_width="@dimen/size_image_width"
            android:layout_height="@dimen/size_image_height"
            android:src="@drawable/ic_openclassrooms" />

    </LinearLayout>

</LinearLayout>

3 - Modification du Manifest de notre application "AndroidManifest.xml "

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.openclassrooms.toolmybar">
    
        ...
        
        <!-- A child of the main activity -->
        <activity
            android:name=".DetailActivity"
            android:label="Detail"
            android:parentActivityName=".MainActivity" >

            <!-- Parent activity meta-data to support 4.0 and lower -->
            <meta-data
                android:name="android.support.PARENT_ACTIVITY"
                android:value=".MainActivity" />
        </activity>
        
        ...
        
</manifest>

Explications : C'est ici que tout se joue, puisque nous allons dire à Android que DetailActivity est un enfant de MainActivity. Cela semble anodin, mais c'est ce qui va permettre l'affichage automatique du bouton Up (via la méthode setDisplayHomeAsUpEnabled) et gérer une certaine hiérarchie dans notre application.

Enfin, nous allons également modifier notre activité MainActivity afin de lancer cette seconde activité (DetailActivity) lorsque l'utilisateur clique sur l'image OpenClassrooms :

public class MainActivity extends AppCompatActivity {

    private ImageView imageViewOC;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //1 - Configure Toolbar
        this.configureToolbar();
        //2 - Serialise & confige imageView
        this.configureImageView();
    }
    
    ... 
    
    private void configureImageView(){
        // Serialise ImageView
        this.imageViewOC = (ImageView) this.findViewById(R.id.imageView);
        // Set OnClick Listener on it
        imageViewOC.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v) {
                //Launch Detail Activity
                launchDetailActivity();
            }
        });
    }

    // ----

    private void launchDetailActivity(){
        Intent myIntent = new Intent(MainActivity.this, DetailActivity.class);
        this.startActivity(myIntent);
    }
    
}

Explications : Dans la méthode configureImageView(), nous avons créé un listener qui va être appelé dès que l'utilisateur appuiera sur l'image, ce qui déclenchera ensuite la méthode launchDetailActivity() qui elle lancera notre seconde activité.

Conclusion

Et voilà ! Cette partie est terminée. Vous connaissez maintenant les différents moyens de naviguer au sein d'une application Android, ainsi que les bases pour adapter votre application sur différents types d'écrans.

Vous avez également pu implémenter votre première Toolbar et l'utiliser à travers une stratégie de navigation.

L'application terminée à l'issue de cette partie est disponible à ce lien

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite