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.
