• Improvements to the ActionBar
• New “applying” system
• Bugs fixed

Improvements to the ActionBar

With the first release of GD[Tab|List]Activity it wasn’t possible to create “non regular” items. This release introduces ActionBarItem. An ActionBarItem is an object representing a single action button in the ActionBar. It may act differently depending on its purpose. For instance, a LoaderActionBarItem switches from a regular button to a circular ProgressBar once pressed. A NormalActionBarItem displays a simple Drawable.

/*
 * This will add a "refresh" button that switches from button with two rounded arrows
 * to an indeterminate ProgressBar
 */
addActionBarItem(Type.Refresh);

To prevent developers from designing icons, GreenDroid also includes several base items … (Refresh, Export, Locate, etc.). Do not hesitate to use it as it makes ActionBar development easier and increases consistency through Android applications.

/*
 * Here is a sample that show how to create a NormalActionBarItem with custom Drawable
 * and content description.
 */
ActionBarItem item = getActionBar().newActionBarItem(NormalActionBarItem.class);
item.setDrawable(R.drawable.ic_title_export).setContentDescription(R.string.gd_export);
addActionBarItem(item);

Note: The ActionBarItem icons I’ve included to GreenDroid are those that are, to my mind, essential to Android applications. If you think some other icons are essential, fill free to contribute. Just make sure they are in accordance with Android guidelines (shape, colors, size, etc.).

New “applying” system

When I created GreenDroid it wasn’t possible to use projects as “libraries”. Fortunately, the latest release of ADT includes a brand new amazing feature: library projects. A complete description is given on the Android Developers Website so I won’t spend time describing it here.

Thanks to that feature, I’ve removed the previous Python script that were used to copy files from the GreenDroid library to your own projects. To apply GreenDroid to your projects, simply follow the process detailed here. The main advantage of this modification is GreenDroid is now more user-friendly and way easier to use. It is also fully compatible with Windows, Mac OS X or Linux.

I hope you’ll have a lot of fun with this new GreenDroid release. As usual, feel free to leave a comment here if you have a GreenDroid-remated question or if you simply want to thank me! Happy coding!

MetroMap

Certains l’auront probablement remarqué … MetroMap n’est plus disponible sur l’Android Market ou même l’Appslib. Cette absence est entièrement voulue et est la conséquence directe d’une mise en demeure que j’ai reçue il y a maintenant environ 2 semaines.

Reçue via courriel et courrier postal recommandé, cette mise en demeure, envoyée par la RATP elle-même, me donnait deux semaines pour retirer mon application des différents markets Android. La raison de cette demande était simple : la RATP interdit totalement l’utilisation de leurs cartes, logos, etc. sans autorisation préalable. Dans mon cas, le problème venait de l’utilisation inautorisée de la carte du métro parisien.

Un peu enragé par la large base d’utilisateurs ainsi que par le temps passé à réaliser cette application, j’ai décidé de demander une autorisation qu’on m’a gentiment refusé en affirmant qu’aucune autorisation d’utilisation de fond de carte ou de logo n’était donnée pour les applications sur terminaux mobiles. J’ai même essayé de me battre jusqu’à la mort pour ma cause en affirmant que l’application MetroMap s’incrivait parfaitement en complément des applications Android RATP (ce que je pense réellement). La cause s’est malheureusement avéré veine …

Aujourd’hui je suis donc face à diverses options :

• Laisser tomber purement et simplement (et donc dire adieu à des heures de travail et m’excuser auprès d’utilisateurs fidèles) : ça n’est pas du tout mon genre !
• Mettre le code source à disposition de tous pour que chacun puisse utiliser/recompiler MetroMap Paris comme il le souhaite : je ne trouve malheureusement pas ça très user-friendly (surtout pour Mme Michu qui a déjà du mal à utiliser l’application “Android Market”) et donc absolument pas viable.
• Vendre le code au plus offrant : N’ayant toujours pas trouvé d’application “carte de métro” aussi fluide et facile d’utilisation … pourquoi pas ^^
• Rebondir en utilisant un autre fond de carte du métro parisien : Cela me semble la piste la plus logique … il me faut simplement du temps pour reprendre le code et intégrer une carte dont la license m’autorise son utilisation. Cela peut, tout de même, engendrer certains problèmes. En effet, actuellement les possesseurs de MetroMap disposent encore et toujours du fond de carte RATP (je n’ai pas le pouvoir de forcer la suppression des applications déjà installées). Forcer une mise à jour impliquera un changement forcé du fond de carte et donc une perte probable d’utilisateurs qui se sentiront “brusqué” par ce changement. Pour contrer ce genre de problématique je pense qu’il n’y a qu’une seule et unique possibilité : améliorer MetroMap Paris (fond de carte sur la SD-card, rapatriement des fonds de carte à la première utilisation, amélioration des performances, améliorations de la qualité des images, etc.).

GreenDroid

GreenDroid est un projet que j’ai débuté il y a maintenant 2 ou 3 mois. C’est une librairie dont la vocation principale est de simplifier le développement sur Android tout en uniformisant les interfaces graphiques (à mon goût pas assez consistantes et ergonomiques actuellement sur Android). Cette librairie contient ainsi diverses fonctionnalités pour gérer facilement des ListViews, créer des SegmentedBars ou des ActionBars.

Assez étonné par l’intérêt porté par les développeurs (que je remercie) sur GreenDroid (notamment depuis l’intégration de l’ActionBar), je continue à travailler sur ce projet qui me tient à coeur. L’avenir proche de GreenDroid s’oriente donc vers une modification du système “d’application” de la librairie aux projets l’utilisant ainsi qu’un ajout de plusieurs fonctionnalités (ActionBarItem prédéfinis, ActionBarItem gérant l’état “loading”, etc.)’.

Il est clair que ce genre de projet prend énormément de temps mais c’est une expérience vraiment enrichissante. GreenDroid est né d’une idée simple et évolue au grès de son utilisation dans divers projets. Si vous utilisez GreenDroid, n’hésitez donc pas à remonter vos différentes impressions ou ressentiments sur la philosophie sous-jacente, la facilité d’utilisation, etc. Si vous ne l’utilisez pas encore … je ne pourrais que vous conseiller de sauter le pas !

Après un blog … un livre !?!

Je suis resté extrêmement discret sur le point depuis le début et je pense qu’il devient de plus en plus acceptable de traiter de ce sujet maintenant. Lorsque j’ai créé ce blog, mon objectif était principalement de partager sur un système encore méconnu. Aujourd’hui Android est devenu un acteur incontournable du monde mobile et il est encore amené à évoluer énormément.

C’est donc face à cette certitude que j’ai décidé de pousser l’expérience du blog un peu plus loin … J’ai le plaisir de vous annoncer que j’ai entrepris de rédiger un livre sur le développement sur Android. Ce livre, co-écrit avec Ludovic Perrier (co-fondateur de la société Diotasoft et également co-vainqueur du concours SFR Jeunes Talents Développeur grâce à l’application Didunozat) sera disponible en français et, je l’espère, dans le courant d’octobre.

L’ouvrage abordera le développement sur la plateforme Android en suivant une démarche très pédagogique (truffées d’exemples réutilisables) et complète. Destiné aussi bien aux débutants (explication des concepts élémentaires) qu’aux expérimentés (optimisations diverses), le livre traite de sujets divers et inédits.

Je ne vais pas trop m’étendre sur ce sujet car je pense que la meilleure des options qui s’offrent à vous sera de télécharger la version électronique du livre ou tout simplement d’acheter la version papier. C’est aussi l’occasion pour vous de me remercier pour ce blog ou tout simplement de mon investissement vis à vis d’Android et de la communauté !. Je donnerais bien sûr plus d’infos sur ce super ouvrage dans les mois prochains.

Pour finir, j’aimerai profiter de ce post un peu particulier pour remercier tous les lecteurs de ce blog. En effet, écrire est un plaisir mais se savoir lu et encore plus plaisant et entrainant ! Merci à vous tous. La communauté Android et le système Android tout entier repose sur vos épaules et sur les applications que vous développez. Depuis mes débuts sur Android, j’ai eu l’occasion de voir des choses vraiment innovantes et j’espère sincèrement que ce n’était que le début !!!

Je ne vais rien vous apprendre en affirmant que le développement sous Android repose principalement sur 2 entités distinctes :

• Le code source (contenu dans le répertoire src sous Eclipse) écrit en Java et intégrant la logique sous-jacente d’une application
• Les ressources (contenues dans le répertoire res dans une arborescence classique) qui ont des formes variées (XML, images, etc.). Les ressources n’ont pas de notion de logique mais représentent plus le contenu et la “forme” de l’application

Il existe un très grand nombre de ressources disponibles sous Android. J’ai déjà largement traité de nombreuses d’entre-elles comme les Drawables (dans une présentation que j’ai donné aux Android Developers Labs de Paris - présentation disponible sur SlideShare et code source téléchargeable sur GitHub) ou les layouts (dans presque tous les articles de ce blog : si vous n’avez jamais remarqué, honte à vous !). Il existe énormément d’autres types de ressources sur Android (couleurs, styles, thèmes, etc.) mais nous allons ici nous attarder sur une ressource rarement abordée mais pourtant essentielle : les chaines de caractères et le fichier strings.xml.

Les chaines de caractères simples

Lorsqu’on souhaite utiliser des chaines de caractères dans une application, il suffit d’inclure la chaine dans les ressources de type “string” comme montré ci-dessous :

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="application_name">My Application</string>
    <string name="application_description">This is my first Android application!</string>    
</resources>

La récupération d’une chaine de caractères s’effectue ensuite grâce à son nom (ou name). Le code ci-dessous est extrait d’une Activity (et donc d’un Context) et montre comment récupérer de façon efficace et rapide la valeur d’une chaine de caractères :

final String appName = getString(R.string.application_name);

Lorsque vous ne disposez que du Context (dans une View par exemple), il est nécessaire de d’abord récupérer les ressources :

final String appName = context.getResources().getString(R.string.application_name);

Les chaines de caractères formatées

Il est parfois utile de créer des chaines un peu plus développées que de simple chaines fixes. Imaginons par exemple que nous souhaitions avoir une chaine de caractères décrivant un album de musique et contenant le nombre de chansons ainsi que le titre de l’album. Concaténer manuellement les différentes parties de la chaine de caractères est un travail long est inutile. En effet, Android gère parfaitement les chaines formatées et autorise donc une syntaxe comme montré ci-dessous. Pour une documentation complète sur les possibilités des chaines de caractère formatées, n’hésitez pas à vous reporter à la documentation de Formatter

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="album_description">%1$s contains %2$d songs</string>
</resources>

Pour utiliser la chaine de caractères, il suffit alors d’utiliser le code suivant (dans le contexte d’une Activity):

final String albumDescription = String.format(getString(R.string.album_description), albumName, songCount);

C’est simple non ? Eh bien, comme à son habitude, le framework Android vous facilite encore plus la vie ! La méthode getString(int) a, en effet, été surchargée et accepte un nombre illimité de paramètres :

final String albumDescription = getString(R.string.album_description, albumName, songCount);

Le type plurals

Dans l’exemple précédent, il est possible de rencontrer un problème assez gênant. Lorsque qu’il n’y a qu’une seule chanson dans l’album, l’application va bêtement afficher “Banana contains 1 songs”. Dommage … mais cela peut être géré assez facilement grâce à Android et l’utilisation du type de ressource “plurals” !

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <plurals name="album_description">
        <item quantity="one">%1$s contains %2$d song</item>
        <item quantity="other">%1$s contains %2$d songs</item>
    </plurals>
</resources>

Grâce au fichier ressource ci dessous, nous venons de déclarer une chaine formatée qui se comporte différemment suivant que la quantité affichée a une valeur de un (one) ou plus (other). Dans votre code, rien de plus simple :

final String albumDescription = getQuantityString(R.plurals.album_description, songCount, albumName, songCount);

Note : Mon seul regret avec l’utilisation des ressources de type “plurals” et l’absence d’un item de quantité “zero”. Dans de tel cas, le framework utilise la valeur de other et affiche donc “0 songs”. Je ne comprends pas pourquoi cette valeur a été évincée du framework par Google. Un oubli (j’en doute), une raison particulière (surement mais laquelle ???) ? Vous devrez donc gérer ce cas à la main.

L’internationalisation des chaines de caractères - i18n

Regrouper l’intégralité des chaines de caractères dans les fichiers ressources permet de séparer efficacement le code source et le design des ressources textuelles. Ainsi, lorsque vous devez traduire ou faire traduire votre application, il vous suffit simplement de dupliquer le fichier strings.xml original et de modifier les valeurs de chaque chaines. L’externalisation de l’intégralité des chaines présentes dans votre application (layouts, code source, etc.) et donc vital à l’évolution de votre application. Le code suivant est donc totalement à proscrire de vos applications :

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="This is a TextView" />

Pour finir, il est également possible de faciliter le travail des traducteurs en utilisant le format XLIFF dans vos chaines de caractères. Cette spécification dont la description détaillée est disponible ici permet de laisser le traducteur se concentrer sur le texte à traduire. Personnellement, je trouve cette spécification sympa mais je doute de son utilité dans une application à taille réduite comme c’est le cas pour beaucoup d’applications mobiles.

<plurals name="found_contact">
    <item quantity="one">Found 1 contact</item>
    <item quantity="other">Found <xliff:g id="count">%1$d</xliff:g> contacts</item>
</plurals>

Some of you may know, I’m strongly attached to make Android a great mobile platform. In order to that, I think it is compulsory to create user-friendly UIs. I really believe a great Android UI have to be be clear, need to focus on content and should be VERY easy to use … even if the user is my grandfather!

The concept of ActionBar has been introduced with the Twitter application for Android. More recently, we have seen this widget in the Google I/O 2010 schedule application. To sum up, an ActionBar can be considered as an advanced title bar that is capable of:

• containing several ActionBaritems (similar to buttons)
• being styled so that the general look’n'feel of the application is in accordance with the underlying brand/visual identity
• containing a title to show the user a summary of the screen content
• featuring several user interaction pattern.

Google recently explained everything about the advantages of using ActionBar in your applications so I won’t spend a lot of time here talking about those key features. If you’re interested in knowing more about the ActionBar UI design pattern, watch the talk given at Google I/O 2010.

Note :As usual, snippets of code below are all extracted from the GDCatolog and GreenDroid projects. Those projects are available on GitHub at the following address: http://github.com/cyrilmottier/GreenDroid

The ActionBar and ActionBarHost classes

As we have previously seen, the ActionBar class represents an enhanced title bar that can be included in your layouts. It supports a large set of features described below:

• greendroid:title: This is the text that will be used as ActionBar’s title
• greendroid:type: An ActionBar can be of type normal (the default type) or of type dashboard. A normal ActionBar looks like the picture above. A dashboard ActionBar doesn’t have a “home” button and display an icon that describes the application : the application drawable. Usually, the dashboard type is used only on the main screen of your application
• greendroid:dividerDrawable: This is the Drawable that is used to divide items. By default, the divider is a 1-pixel width translucent white ColorDrawable

Clickable items can be added to the ActionBar using the addItem(Drawable) or addItem(int) method. Clicks are handled via the ActionBar.OnActionBarListener interface and its onActionBarItemClicked(int) method.

The ActionBarHost is a simple wrapper containing a upper ActionBar (id gd_action_bar) and a lower FrameLayout content view (of id gd_action_bar_content_view).

The GD[List/Tab]Activity

Including ActionBar manually in your layout is a boring task and may be time consuming. To prevent you from doing the same actions over and over again, GreenDroid includes several useful Activitys:

• GDActivity: Hosts an ActionBarHost
• GDListActivity: Hosts an ActionBarHost and a ListView.
• GDTabActivity: Hosts an ActionBarHost and a TabHost as shown below.

How to use the GD-classes

As usual, the GD-classes has been designed focusing on GreenDroid’s development principles: improving easiness, fastness and efficiency!

Applying GreenDroid to your project

I won’t explain how to apply GreenDroid to your project. Indeed, I’ve discussed about that in a very long post that you can find here. Installation instructions are also available in the project’s readme

Make sure you application is a GDApplication

GreenDroid uses information that must be available through the entire application. Some of those information are the application Intent (the Intent that is used when the user pressed the application drawable) or the home Activity class (the class of your main Activity). As a result you need to force your application to be a GDApplication. Simply add android:name="greendroid.app.GDApplication" to the application tag in your AndroidManifest.xml:

The default implementation of GDApplication always returns null values. Changing those values can be done by extending the GDApplication:

package com.cyrilmottier.android.gdcatalog;
 
import greendroid.app.GDApplication;
 
public class CatalogApplication extends GDApplication {
    @Override
    public Class getHomeActivityClass() {
        return CatalogActivity.class;
    }
}

You can now change the class of your application:

<application
    android:icon="@drawable/greendroid_icon"
    android:label="@string/app_name"
    android:theme="@style/Theme.GDCatalog"
    android:name=".CatalogApplication">

Uses the GreenDroid’s base theme

GreenDroid heavily relies on XML resources and especially on styles and themes. In order to use GreenDroid, make sure your application theme inherits from the GreenDroid base theme: @style/Theme.GreenDroid

Create your first GDActivity

When using a GDActivity you don’t need to manually add an ActionBar to your layout. The setActionBarContentView(...) methods take your layout and insert it in an ActionBarHost.

Setting the title of the GDActivity can be done using several ways:

• Using one of the setTitle methods
• Adding an extra String with the key ActionBarActivity.GD_ACTION_BAR_TITLE to the Intent that launches your GDActivity
• Setting a label to the Activity in your AndroidManifest.xml

Your application is notified everytime the user clicked on an ActionBar item via the onHandleActionBarItemClick(int) method.

Let’s start with an example. The following code is a very simple layout composed of a single TextView that will be used as the content of our GDActivity:

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center"
    android:textSize="14sp"
    android:textStyle="bold" />

The GDActivity code is given below:

package com.cyrilmottier.android.gdcatalog;
 
import greendroid.app.GDActivity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.TextView;
import android.widget.Toast;
 
public class ActionBarActivity extends GDActivity {
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        setActionBarContentView(R.layout.text);
        ((TextView) findViewById(R.id.text)).setText("Screen 1");
 
        getActionBar().addItem(R.drawable.ic_title_export);
        getActionBar().addItem(R.drawable.ic_title_search);
    }
 
    @Override
    public boolean onHandleActionBarItemClick(int position) {
 
        switch (position) {
            case 0:
                Intent intent = new Intent(this, TabbedActionBarActivity.class);
                startActivity(intent);
                return true;
 
            case 1:
                Toast.makeText(this, "Fake feature. Click on the other item instead", Toast.LENGTH_SHORT).show();
                return true;
 
            default:
                return super.onHandleActionBarItemClick(position);
        }
    }
}

The result displayed an screen is shown below

Easily create tabs with GDTabActivity

One of the most useful new GreenDroid’s feature is the ability to rapidly create fancy tabs. The following code shows a demonstration screen containing three tabs:

package com.cyrilmottier.android.gdcatalog;
 
import com.cyrilmottier.android.gdcatalog.util.ColorUtils;
 
import android.app.Activity;
import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.widget.TextView;
import greendroid.app.GDTabActivity;
 
public class TabbedActionBarActivity extends GDTabActivity {
 
    private static final String TAB1 = "tab_one";
    private static final String TAB2 = "tab_two";
    private static final String TAB3 = "tab_three";
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        setTitle("Screen 2");
 
        Intent intent = new Intent(this, FakeActivity.class);
        intent.putExtra(FakeActivity.EXTRA_COLOR, Color.RED);
        intent.putExtra(FakeActivity.EXTRA_TEXT, "Content of tab #1");
        addTab(TAB1, "Tab One", intent);
 
        intent = new Intent(this, FakeActivity.class);
        intent.putExtra(FakeActivity.EXTRA_COLOR, Color.GREEN);
        intent.putExtra(FakeActivity.EXTRA_TEXT, "Content of tab #2");
        addTab(TAB2, "Tab Two", intent);
 
        intent = new Intent(this, FakeActivity.class);
        intent.putExtra(FakeActivity.EXTRA_COLOR, Color.BLUE);
        intent.putExtra(FakeActivity.EXTRA_TEXT, "Content of tab #3");
        addTab(TAB3, "Tab Three", intent);
    }
 
    public static class FakeActivity extends Activity {
 
        public static final String EXTRA_COLOR = "com.cyrilmottier.android.gdcatalog.TabbedActionBarActivity$FakeActivity.extraColor";
        public static final String EXTRA_TEXT = "com.cyrilmottier.android.gdcatalog.TabbedActionBarActivity$FakeActivity.extraText";
 
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
 
            final Intent intent = getIntent();
 
            if (intent != null) {
                setContentView(R.layout.text);
 
                TextView textView = (TextView) findViewById(R.id.text);
                textView.setText(intent.getStringExtra(EXTRA_TEXT));
 
                int color = intent.getIntExtra(EXTRA_COLOR, Color.BLACK);
                textView.setBackgroundColor(color);
                textView.setTextColor(ColorUtils.negativeColor(color));
            }
        }
 
    }
 
}

Conclusion

One of the biggest problem with previous releases of Android was the lack of great UI/UXs … I know/think Google is working hard on that right now to help developers creating consistent applications. I hope, GreenDroid will be a great solution to that problem and I strongly encourage you to use it as soon as possible : just keep in mind this is a work in progress that may need to be enhanced by developers like you! Happy coding!

The first release of GreenDroid focused on creating and populating ListView in a very simple manner. This time, I’ve included a new widget that can be very helpful when designing applications: SegmentedBar. Used with its associated SegmentedHost and SegmentedAdapter classes, a SegmentedBar is really similar to a TabWidget. The main difference relie in the fact a SegmentedBar only uses views and look different:

As you may have noticed, a SegmentedBar looks like the widget that were previously (prior to Froyo) used in the Android Market application to switch between applications types. A SegmentedBar is a bunch of segments. Each segment has an indicator that can be on or off depending on its current state (checked or not). Once you’re tapping a segment, the associated view is displayed.

Note :The snippets of code below are all extracted from the GDCatolog and GreenDroid projects. Those projects are all available on GitHub at the following address: http://github.com/cyrilmottier/GreenDroid

As a developer, you probably prefer reading code than explainations … I’ve implementing a really tiny application available in the GDCatalog application that uses the 3 classes given above. The first thing to do is to created our layout:

<?xml version="1.0" encoding="utf-8"?>
<greendroid.widget.SegmentedHost
    xmlns:greendroid="http://schemas.android.com/apk/res/com.cyrilmottier.android.gdcatalog"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/segmentedHost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    greendroid:segmentedBar="@+id/segmentedBar"
    greendroid:segmentedContentView="@+id/segmentedContentView">
 
    <greendroid.widget.SegmentedBar
        android:id="@+id/segmentedBar"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />
 
    <FrameLayout
        android:id="@+id/segmentedContentView"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:foreground="@drawable/gd_shadow_top" />
 
</greendroid.widget.SegmentedHost>

This layout is composed of a root SegmentedHost element that fills (or match according to the brand new match_parent value) the size of the screen. A SegmentedHost is a wrapper that contains a SegmentedBar and a content view (FrameLayout). This two elements will be filled with the data provided by a SegmentedAdapter. The XML attributes greendroid:segmentedBar and greendroid:segmentedContentView are mandatory and must be used to inform the SegmentedHost which subview must be used. I assume the rest is pretty clear so I won’t explain anything else but the android:foreground attribute. Android often uses shadows to separate two main areas on screen. The GreenDroid library includes shadows (named gd_shadow_top and gd_shadow_bottom) that can be reused easily to enhance your UIs.

Now our layout is ready, the only thing we have to do is to fill the SegmentedHost with the appropriate data. Data are provided through a SegmentedAdapter as shown below:

package com.cyrilmottier.android.gdcatalog;
 
import com.cyrilmottier.android.gdcatalog.util.ColorUtils;
 
import greendroid.widget.SegmentedAdapter;
import greendroid.widget.SegmentedHost;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.TextView;
 
public class SegmentedActivity extends Activity {
 
    private final Handler mHandler = new Handler();
    private PeopleSegmentedAdapter mAdapter;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.segmented_controls);
 
        SegmentedHost segmentedHost = (SegmentedHost) findViewById(R.id.segmentedHost);
 
        mAdapter = new PeopleSegmentedAdapter();
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                mAdapter.mReverse = true;
                mAdapter.notifyDataSetChanged();
            }
        }, 4000);
 
        segmentedHost.setAdapter(mAdapter);
    }
 
    private class PeopleSegmentedAdapter extends SegmentedAdapter {
 
        public boolean mReverse = false;
 
        @Override
        public View getView(int position, ViewGroup parent) {
 
            TextView textView = new TextView(SegmentedActivity.this);
            textView.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
            textView.setGravity(Gravity.CENTER);
 
            final int color = getColor(mReverse ? ((getCount() - 1) - position) : position);
            textView.setBackgroundColor(color);
            textView.setTextColor(ColorUtils.negativeColor(color));
            // It's not necessary to compute the "reversed" position as the
            // getSegmentTitle will do it automatically
            textView.setText(getSegmentTitle(position));
 
            return textView;
        }
 
        @Override
        public int getCount() {
            return 4;
        }
 
        @Override
        public String getSegmentTitle(int position) {
 
            switch (mReverse ? ((getCount() - 1) - position) : position) {
                case 0:
                    return getString(R.string.segment_1);
                case 1:
                    return getString(R.string.segment_2);
                case 2:
                    return getString(R.string.segment_3);
                case 3:
                    return getString(R.string.segment_4);
            }
 
            return null;
        }
 
        private int getColor(int position) {
            switch (position) {
                case 0:
                    return Color.RED;
                case 1:
                    return Color.GREEN;
                case 2:
                    return Color.BLUE;
                case 3:
                    return Color.CYAN;
            }
            return Color.TRANSPARENT;
        }
    }
 
}

In order to create your own SegmentedAdapter, you simply need to extend the SegmentedAdapter and override the three following methods:

• int getCount(): This method must return the number of segments your SegmentedBar will contain.
• String getSegmentTitle(int position): Returns the title for the segment at the given position
• View getView(int position, ViewGroup parent): This method is very similar to the traditionnal getView method. The only difference is there is no convertView parameter. Actually this method will be called only once in the lifetime of your SegmentedHost. Once created, The SegmentedHost will automatically keep a reference on the generated view. Hence, there is no need to recycle views. If you want to reorganize your segments, simply call notifyDataSetChanged() as shown in the exemple above

Using a SegmentedBar is very useful when your screen have a lot of information that can be split in several pieces. A great sample would be an “About” screen : you can now split the developer information from the legal or partners information. I hope you’ll use this new widget as well as all other cool features integrated to the GreenDroid library. Happy coding and see you soon for new amazing GreenDroid features!

La programmation sur terminaux mobile est contrainte par un nombre importants de facteurs. L’objectif n’est pas ici de faire une liste exhaustive de tous ces facteurs car je pense l’avoir fait dans de nombreux précédents posts. Nous allons simplement traiter ici d’une des contrainte majeure : la gestion de la mémoire.

La gestion de la mémoire étant omniprésente dans tous systèmes informatique, les plateformes offrents des systèmes de gestion tous plus différents les uns que les autres. Certains environnement sont “garbage collectés” (c’est le cas d’Android) alors que d’autres offrent une gestion de la mémoire manuelle (c’est le cas de l’iPhone par exemple : lorsque vous créer un objet - message alloc - vous devez explicitement mentionner que vous ne l’utilisez plus - message release - pour que le système le supprime). Je ne vais pas rentrer dans un débat sans fin pour dire quel modèle est vraiment le plus avantageux car je pense qu’aucun n’est parfait … tout dépend du contexte dans lequel on les utilise.

En Java, lorsque vous créer un objet, vous créer en réalité une référence vers cet objet. La durée de vie d’un objet Java décrit souvent le schéma suivant :

• L’objet O est créé et le développeur dispose d’une référence A sur ce dernier
• L’objet O commence à “vivre” : il est référencé par d’autres objets B, C et D
• Les objets B, C et D n’utilise plus 0 est donc le compte de référence sur O repasse à 1 (référence A)
• La référence A n’est plus utilisée et l’objet O devient donc “non référencé” : c’est à ce moment là que le garbage collector considère qu’il est possible de supprimer l’objet de la mémoire.

Laisser le garbage collector gérer lui-même la mémoire facilite grandement le développeur. Malheureusement il arrive parfois que ce dernier prenne ses aises et qu’il utilise trop de mémoire. Le résultat est souvent impitoyable et se résume en une unique Exception que nous devrions tous essayer d’éviter : OutOfMemoryException. Comme son nom l’indique, cette Exception indique qu’il n’y a plus assez de mémoire pour créer l’objet.

Avant d’introduire la solution à ce problème j’aimerai donner la philosophie qui a été choisie sur l’iPhone SDK pour permettre de résoudre ce problème. Le SDK fournit un réalité un centre de notifications : le NSNotificationCenter. Il est possible de s’enregistrer auprès de ce centre de notification et ainsi être notifié de possibles messages du système. Dans notre cas, il suffit d’écouter le message UIApplicationDidReceiveMemoryWarningNotification (oui je sais il est long ce nom … vive l’autocomplétion !) afin de savoir quand il devient urgent de supprimer des objets inutiles/recréables de la mémoire (caches, objets inutilisé, etc.)

Java n’inclut pas ce genre de système. Néanmoins il est possible de gérer la mémoire de façon plus précise en utilisant un des 3 types de référence présentés ci-dessous :

• Reference : C’est la référence classique. C’est le type de référence par défaut utilisée partout dans Java. La durée de vie d’un objet rattaché par une Reference a été expliqué précédemment
• WeakReference : C’est une référence qui indique au GC que l’objet référencé peut être supprimé si et seulement si il est référencé uniquement par une ou plusieurs WeakReferences.
• SoftReference : Un objet référencé par une ou plusieurs SoftReference sera supprimé de la mémoire lorsque le GC va considérer que le système manque de mémoire. C’est donc la référence parfaite pour émuler le comportement décrit ci-dessus. C’est pourquoi on utilise souvent cette référence lors de l’élaboration de caches par exemple.

Il existe encore un autre type de référence nommé PhantomReference mais je ne pense pas qu’elle est une utilité dans vos développements Android. Vous voilà maintenant fin prêt pour parfaire la gestion mémoire de votre application !

Note : Before starting with this post I’d like to explain myself about the fact this article has been written in English. Indeed, I have proclaimed, quite a few times, this blog was intended to French speakers only. Actually I have recently changed my mind and here is a brief explanation. When I created this blog I was trying to explain to French speakers how to use and code properly for the Android platform. It had been a truly difficult choice for me because I was and I’m still a big fan of English speeches/talks. Nevertheless, the main reason that pushed me to start writing in French was the fact French documentation dealing with Android was/is very poor. For more than a year, I have written several articles and I really hope you have appreciated all of them. Nowadays, I want to talk about innovative concepts and/or technologies which, I think, will be useful to many users/developers all around the world. As a result, I have to write my posts using the most common language on Earth: English. I’m sure, French speakers will succeed in reading this blog and I’d like to warn them: “Je n’ai pas prévu d’arrêter d’écrire des posts en français !”.

I’m really glad to introduce you to my first attempt of a “true” development library for Android! As you may have noticed it is named “GreenDroid” and is intended to help people in designing Android applications. Keep in mind, it is still a work in progress! Let’s explain everything about GreenDroid before diving into it!

The main purpose of GreenDroid

As some of you may know, I’m a mobile software engineer and I’ve already developed on many constrained platforms. Each platform I have used have inherent advantages or disadvantages. For instance, Android development rocks because it is based on the Java programming language which is easy to use. On the other hand, I’ve also heavily used the iPhone SDK and I’m a huge fan of its simplicity - it looks like the Mac OS X user environment: simple and efficient - and most of all, the fact you can create your own libraries.

For a long time I have coded on the Android platform by doing the same things over and over again. To prevent me from doing mistakes and copy&pastes I’ve decided to initiate a personal project called GreenDroid. Here are the main purposes of this project:

• Prevent loosing time at copying the same snippets of code over and over again.
• Try to make Android applications alike. The openness of the Android operating system makes it less coherent. Seing so many applications that use totally different ergonomics or designs drives me mad. Indeed, I truly think, Android applications need coherency in order to get more and more users around the world. GreenDroid is kinda of a try to bring coherency to your applications and therefore to the Android environment. Google recently tried to show a path to “great UX and UI” with the Twitter and Google I/O applications - A talk about Android UIs will be given at Google I/O 2010 and I’m looking forward to watch it; I would like to see if Google has understood Android developers need help creating simple and smart interfaces!
• Help developers to code highly functional applications. The Android framework may look like “over-engineered” sometimes. Actually, I believe this is a direct consequence of the fact you can do almost everything you want. Unfortunatly, this openness (again!) makes it harder to apprehend. Let’s say for instance, you are a beginner and wants to develop your own application. You’ll have to read a lot of documentation in order to be “up and ready”. GreenDroid makes development a lot easier without dicreasing the powerfulness of the amazing Android framework!
• Leverage the power of the Android framework. Developing on the Android platform may be pretty easy if you’re not taking care of the resources you’re using. Trying to optimize your application is quite hard sometimes and is a very demanding task. GreenDroid has been developed to be as efficient as possible by integrating basic optimizations.
• Use as much XML as possible. It’s not a mystery to anybody. Android UI development is based on amazing techniques. Layouts and views are defined in XML and automatically inflated by the system. Being an “easy-to-read-for-humans” format, XML is very used among Android developers. GreenDroid puts XML in the middle of the library and takes advantage of all amazing possibilities offered by Android XML files.

Why have I chosen the “GreenDroid” name?

When I started this project, I have spent a few minutes to think about an appropriate name. At the first glance, I was like “Who cares? It’s a personal project and I will never share it!” but once I realized this project could be useful for a lot of people I decided to think about a clear and smart name. The thought ended up on the name GreenDroid which can be seen as a contraction of the “green” color and the name “Android”. I suppose I don’t need to explain why the library name contains an occurence to Android … so I’ll explain what the “green” word stands for:

• Green because it’s an “ecological” library. One of the main purpose of this library, as said previously, is to be as efficient as possible by helping developers to optimize their applications. The green color refers to ecology and I thought using it was a good explanation to the library: develop preserving all resources that are available to you!
• Green because Android is nothing without green Come on guys! You all know the Android mascot is always green. Seeing it wearing other colors makes all of us sad. I couldn’t name my library using another color!
• Green because I like being green!

How hard it is to create an Android library

The answer is quite simple and straight forward; it’s impossible! Why? Because it is impossible to bundle R.java in external jars … :(. This R.java file contains a set of references to external resources as simple integers int. The only external R.java available in your application is the one bundled with the Android framework.

Here are some ways I know that try to overcome that R.java problem:

• Using no resource. The problem with that method is it very painful to code without XML. Being convinced Android developers enjoy XML, I’m sure there are just a few people creating their GUI using Java code. Personally, I love the LayoutInflater and its simplicity.
• Using methods such as Resources.getIdentifier(String name, String defType, String defPackage). Unfortunaty those methods are quite slow to execute which is the opposite of GreenDroid’s main purpose. It’s a great alternative but makes the Java almost unreadable and still force the developer to manually copy resources from the library to his/her project.
• Copying manually all resources from a project to another. This is basically the method I decided to use. The only difference with the “dumb way” is I created a Python (I’m still a newbie with Python - but I really like it) script that applies the GreenDroid library to your application by switching automatically to the project package name. Developing a graphical library being impossible, I have developed many features that will “fake” GreenDroid is a library. This is an approach I have designed alone and I’m still listening to your ideas to overcome that R problem of the Android SDK

Note : I haven’t taken a look at the Maven Android plugin yet. If one of you think it could be a great way to overcome the R problem, feel free to reply

How to use GreenDroid ?

In order to use GreenDroid you have to do the following steps:

• 1. Download the GreenDroid library on your computer with a simple:

  git clone http://github.com/cyrilmottier/GreenDroid.git

• 2. Apply GreenDroid to your project: Go to the scripts/ folder of the GreenDroid folder. Run the script named “greendroid.py” (make sure you can run it - chmod +x greendroid.py) to apply the library to your project :

  ./greendroid.py apply <project_directory>

• 3. By default, the GreenDroid theme inherits from @android:style/Theme. If your project inherits from a different theme, you’ll have to modify the GreenDroid library on your own (and do that everytime you are updating GreenDroid as updating delete all of your changes). Open the res/values/gd_themes.xml and replace the parent theme @android:style/Theme with your own theme
• 4. You finally need to make your project use the GreenDroid base theme. In your Android Manifest, go to the application tag and add android:theme="@style/Theme.GreenDroid" as a new attribute (if this attribute already exist override it: if you processed the step 3 correctly, you will have a theme that inherits from this theme)

Hello GreenDroid !

As I said previously, GreenDroid is pretty much a work in progress. For now, it mostly enhances ListView and Adapters by helping the user creating advanced UIs. I have thousands of ideas about how to make Android development easier and how to create easier amazing UIs but I don’t have a lot of free time to develop those importants features…

Items-based ListViews

Creating ListView with various cells can be quite painful. You have to understand perfectly how an Adapter work. You also need to create layout for all of those cells and this is a very boring task. Creating advanced ListViews with GreenDroid is very simple and relies on a simple notion: the item. An item is a wrapper of data that contains everything that will be displayed in the associated item view. The following snippet of code shows you how to use an ItemAdapter:

package com.cyrilmottier.android.gdcatalog;
 
import greendroid.widget.ItemAdapter;
import greendroid.widget.item.DescriptionItem;
import greendroid.widget.item.DrawableItem;
import greendroid.widget.item.Item;
import greendroid.widget.item.ProgressItem;
import greendroid.widget.item.SeparatorItem;
import greendroid.widget.item.TextItem;
import greendroid.widget.item.ThumbnailItem;
 
import java.util.ArrayList;
import java.util.List;
 
import android.app.ListActivity;
import android.os.Bundle;
import android.os.Handler;
 
public class BasicItemActivity extends ListActivity {
 
    private final Handler mHandler = new Handler();
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        List<Item> items = new ArrayList<Item>();
 
        items.add(new SeparatorItem("Class 1"));
        items.add(new ThumbnailItem("Powered paragliding", "aka paramotoring", R.drawable.class1));
        items.add(new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."));
 
        items.add(new SeparatorItem("Class 2"));
        items.add(new DrawableItem("Trikes", R.drawable.class2));
        items.add(new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."));
 
        items.add(new SeparatorItem("Class 3"));
        items.add(new ThumbnailItem("Multi-axis", "Looks like a tiny place", R.drawable.class3));
        items.add(new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."));
 
        items.add(new SeparatorItem("Class 4"));
        items.add(new ThumbnailItem("Auto-gyro", "A scary helicopter", R.drawable.class4));
        items.add(new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."));
 
        items.add(new SeparatorItem("Class 5"));
        items.add(new DrawableItem("Hot air baloon", R.drawable.class5));
        items.add(new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."));
 
        final Item item1 = new SeparatorItem("Class 6");
        final Item item2 = new TextItem("Airbus/Boeing planes");
        final Item item3 = new DescriptionItem("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in.");
        items.add(item1);
        items.add(item2);
        items.add(item3);
 
        final ProgressItem progressItem = new ProgressItem("Removing intruders", true);
        items.add(progressItem);
 
        final ItemAdapter adapter = new ItemAdapter(this, items);
        setListAdapter(adapter);
 
        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                adapter.remove(item1);
                adapter.remove(item2);
                adapter.remove(item3);
                adapter.remove(progressItem);
                adapter.insert(new ThumbnailItem("Ultralight aviation", "List of French 'ULM' classes", R.drawable.greendroid_icon), 0);
                adapter.notifyDataSetChanged();
            }
        },8000);
 
    }
}

XML generated items

Android has an amazing feature that consists on inflating data and views from an XML file. I extended it to the GreenDroid library. With GreenDroid you can create and inflate static items and display those items in a simple ListView:

<?xml version="1.0" encoding="utf-8"?>
<item-array
    xmlns:greendroid="http://schemas.android.com/apk/res/com.cyrilmottier.android.gdcatalog">
 
    <text-item
        greendroid:text="TextItem" />
    <text-item
        greendroid:enabled="false"
        greendroid:text="TextItem (disabled)" />
    <text-item
        greendroid:text="TextItem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in." />
    <longtext-item
        greendroid:text="LongText Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in." />
    <description-item
        greendroid:text="DescriptionItem Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in." />
    <separator-item
        greendroid:text="SeparatorItem" />
    <progress-item
        greendroid:isInProgress="true"
        greendroid:text="ProgressItem" />
    <drawable-item
        greendroid:enabled="false"
        greendroid:text="DrawableItem (disabled)"
        greendroid:drawable="@drawable/greendroid_icon" />
    <drawable-item
        greendroid:text="DrawableItem (with no drawable)" />
 
    <subtitle-item
        greendroid:text="SubtitleItem"
        greendroid:subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in." />
 
    <subtext-item
        greendroid:text="SubtextItem"
        greendroid:subtext="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in." />
 
    <thumbnail-item
        greendroid:text="ThumbnailItem"
        greendroid:subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."
        greendroid:thumbnail="@drawable/greendroid_icon" />
 
    <thumbnail-item
        greendroid:enabled="false"
        greendroid:text="ThumbnailItem (disabled)"
        greendroid:subtitle="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus consequat leo, et tincidunt justo tristique in."
        greendroid:thumbnail="@drawable/greendroid_icon" />
 
</item-array>

Thanks to XML, the associated Java code is very clear and simple:

package com.cyrilmottier.android.gdcatalog;
 
import greendroid.widget.ItemAdapter;
import android.app.ListActivity;
import android.os.Bundle;
 
public class XmlItemActivity extends ListActivity {
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        ItemAdapter adapter;
        try {
            adapter = ItemAdapter.createFromXml(this, R.xml.items);
            setListAdapter(adapter);
        } catch (Exception e) {
            e.printStackTrace();
        }
 
    }
 
}

The GreenDroid library can be download on Github:

http://github.com/cyrilmottier/GreenDroid

The library includes a project called GDCatalog that uses the GreenDroid library. It has been develop to help developers understanding how to use GreenDroid in their projects. Keep it mind, the GDCatalog project doesn’t include the library. Prior to launch it, apply the library using the greendroid.py script. If you kept the directory hierarchy of the Git repository you need to execute the following command from the root directory:

cd GreenDroid/scripts && ./greendroid.py apply ../../GDCatalog

Eclipse may not see the new files that have been added. In order to refresh the project, right-click on the project and select “Refresh”.

Happy coding !

Twitter pour Android

Personne n’a pu rater cette sortie fracassante de la version officielle de l’application Twitter pour Android. Les ressentis sont unanimes : cette application est une vraie tuerie ! Personnellement j’ai vraiment été impressionné par cette application car elle est très proche de l’ergonomie et du design que je me fais d’une bonne application Android :

• Design sobre : le design est totalement adéquat à un écran de téléphone mobile, il est sobre, correspond parfaitement au couleur et à l’identité de Twitter. Le tout est bien sûr animé ce qui donne une touche de “vivant” à l’application. Malgré un thème totalement “twiterrisé”, l’entreprise à l’oiseau n’a pas oublié de respecter les notions d’états pressé, focusé, etc.
• Ergonomie simple et efficace : l’information est visible rapidement. La prise en main est d’une simplicité enfantine et les écrans s’enchainent avec perfection.

En clair, Twitter est un vrai coup de coeur pour moi et pour beaucoup d’autres. Bravo Twitter et bravo Android bien sûr ! J’apprécie voir ce genre d’applications sortir sur la plateforme au robot vert car cela montre bien que le framework n’est absolument pas bloquant d’un point de vue possibilités techniques ou graphiques (c’est une idée pourtant reçue et qu’on n’hésite pas à me mentionner régulièrement …).

Google I/O

Je retiens mes larmes lorsque j’écris l’expression “Google I/O”. Pourquoi ? Tout simplement parce que c’est exactement le genre d’évènement où j’aimerai me trouver. Malheureusement, le coût financier a eu raison de moi … Je ne parle absolument pas du coût de l’entrée mais plutôt de la logistique qui entoure cet évènement. J’aurais volontier payé 400 ou 500$ rien que pour rencontrer les brillant ingénieurs de chez Google et/ou les fans des services et technologies Google. Malheureusement les 1000€ (minimum) d’avion et de logistique annexe (hôtels, nourriture, transport, etc.)

La disponibilité souvent rapide des vidéos des sessions techniques est une aubaine pour les développeurs. Cela permet d’être rapidement à jour sur les dernières avancées des technologies Google. Je reste scotché à mes flux RSS pour être notifié de leur disponibilité !

Pour finir, il est clair que cette édition des Google I/O sera l’occasion d’annoncer des nouveautés. Après “Google Waves” l’année dernière, je pense sincérement que cette année sera la part belle à Android. Les derniers changements de comportement de Google vis à vis des releases Android sont parfaitement en accord avec ma vision de l’avenir d’Android. Google commence à réduire la vitesse de mise à jour de son système d’exploitation mobile. Cela laisse d’une part le temps aux constructeurs d’effectuer des mises à jour de leurs terminaux et limite d’autre part la fragmentation (moins de version d’Android dans la nature). Je suis impatient de voir ce que les ingénieurs de Google nous ont concocté pour cette prochaine mise à jour qui s’annonce gigantesque !

Flash ou pas Flash

Question délicate que de discuter de la nécessité ou non d’avoir Flash sur nos téléphones mobiles. Mon avis sur la question est assez simple : je ne suis pas en faveur de la présence de Flash sur nos beaux terminaux Android. Je crois, en effet, qu’HTML5/CSS3 doit être au coeur de la modernisation du web et je le perçois comme un parfait remplacant à Flash.

Il semblerait que la prochaine version d’Android incorpore la prise en charge totale de Flash … cela va sans dire que ça me déçoit :). J’aurais sincèrement préféré des améliorations du moteur de rendu (encore assez loin des possibilités et de la fluidité offertes par Safari Mobile) qu’une intégration pure et simple de Flash. J’ai aussi un peu de mal à comprendre la logique de Google qui a toujours souhaité aller de l’avant et essayer de limiter de plus en plus l’utilisation de Flash. On se souviendra, par exemple, de Youtube commenant à afficher des vidéos sans utiliser Flash ou Chrome qui est un très grand acteur de l’évolution d’HTML5/CSS3 …

Conclusion

Comme vous vous en douter, l’objectif de ce post n’était pas de lancer une guerre mais tout simplement de donner mon ressenti. N’hésitez pas à laisser un commentaire afin de donner votre opinion sur les différents points abordés précédemment. A très bientôt pour un post un peu particulier …

Une belle interface graphique passe généralement par une utilisation souvent excessive de la transparence dans le design. Lorsqu’on regarde de plus prêt le code source d’Android et notamment les ressource graphiques disponibles dans le dossier res/drawable (images, 9-patchs, etc.), on se rend même compte qu’il est difficile de “vivre” sans transparence. C’est une des raisons pour laquelle le format PNG24 est largement préconisé dans le développement sous Android (le fait que ce soit un format ouvert et efficace joue également énormément dans la balance). Développer une interface graphique qui s’adapte à différentes tailles d’écran mais sans avoir accès à une notion de transparence s’avère malheureusement un calvaire et ne sera pas sans rappeler le développement web sous IE6 il y a encore peu de temps …

La transparence (ou parfois appelée “l’alpha”) engendre quelques conséquences sur l’interface graphique. En effet gérer l’alpha signifie forcément faire des calculs supplémentaires pour déterminer la couleur finale d’un pixel. Imaginons par exemple avoir 2 couches à superposer : une première couche (couche 1) totalement verte (#0f0) et une seconde (couche 2), qu’on pose sur la précédente, rouge transparent (#7f00). Le rendu s’effectue donc en 2 phases :

• On applique/dessine la couche verte (couche 1)
• On dessine ensuite la couche rouge transparente en effectuant, pour chaque pixel, un calcul permettant de déterminer la couleur résultante en fonction de actuel l’état (de la couleur) du pixel de coordonnée (x, y) à l’écran et du pixel (x, y) à appliquer.

Déterminer la couleur résultante passe par un calcul qui s’effectue sur chaque pixel. Bien que ce calcul se fasse via JNI (en C) - ou même parfois de façon matérielle, il n’en reste pas moins que c’est un calcul coûteux. L’utilisation de la transparence dans vos interfaces graphiques est donc forcément synonyme de “baisse de la rapidité/fluidité”. Votre objectif est donc maintenant de déterminer la valeur de cette baisse …

Une optimisation instaurée dans l’API level 7 sur View est isOpaque. Elle permet tout simplement d’informer le système si la vue est opaque (sans aucune transparence) ou non. Cette méthode peut sembler inutile mais elle peut pourtant permettre de nombreuses optimisations graphiques. En effet, si une vue opaque recouvre intégralement une autre vue, il n’est pas nécessaire de dessiner la vue sous-jacente. Les premières version d’Android n’intégraient pas ce mécanisme et redessinaient de façon totalement stupide l’intégralité des vues à chaque passe de dessin. Cette méthode apporte donc quelques optimisations permettant d’accélérer votre UI.

N’allez pas vous tracassez pour vos interfaces graphiques. Il n’est vraiment pas nécessaire de supprimer toute occurrence à la transparence dans vos UIs tant que ces dernières sont statiques. L’intérêt d’une telle optimisation est surtout applicable lorsque les vues sont animées car c’est à ce stade que les ralentissements peuvent se faire sentir. La ListView est probablement le widget le plus concerné par ces problèmes.

La ListView est un composant permettant d’afficher un ensemble de données similaires sous forme de vue scrollable. C’est un widget élémentaire dans n’importe quel système d’exploitation mobile car il permet d’afficher un grand nombre de données un minimisant l’impact mémoire (seules les vues affichées à l’écran sont dans la hiérarchie de vues, système de réutilisation des vues, etc.) et en rendant la lecture par l’utilisateur la plus optimale possible (cellules souvent larges, gestures avancés comme le scroll ou le fling, etc.). Une ListView s’utilise, en général, pour afficher un nombre important de données du même type. Néanmoins, il est possible d’inclure des données un peu “exotiques” pour casser l’impression d’uniformité. Un exemple récurrent serait de de séparer les données ayant un trait commun.

Imaginons que nous ayons une longue liste de titre de films et de séries. Pour faciliter la lecture et la recherche, il peut être intéressant de trier ces vidéos par type et donc d’afficher un séparateur pour chaque section (qui peut par la même occasion casser l’impression de “bloc” d’une liste). Le code ci-dessous donne une implémentation de cette liste statique (code disponible ici) :

package com.cyrilmottier.android.itemviewtype;
 
import android.app.ListActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
 
public class MainListActivity extends ListActivity {
 
	private static final int ITEM_VIEW_TYPE_VIDEO = 0;
	private static final int ITEM_VIEW_TYPE_SEPARATOR = 1;
	private static final int ITEM_VIEW_TYPE_COUNT = 2;
 
	private static class Video {
		public String title;
		public String description;
 
		public Video(String title) {
			this(title, "bla bla");
		}
 
		public Video(String title, String description) {
			this.title = title;
			this.description = description;
		}
	}
 
	private static final Object[] OBJECTS = { "Movies",
			new Video("Iron Man 2"), new Video("Adèle Blanc-Sec"),
			new Video("Twilight - Chapitre 3 : hésitation"),
			new Video("Green Zone"), new Video("Shrek 4, il était une fin"),
			new Video("L'Amour c'est mieux à deux"),
			new Video("Sex and the City 2"), new Video("Predators"),
			new Video("Inception"), "Series",
			new Video("Dr House (Docteur House)"), new Video("True Blood"),
			new Video("Smallville"), new Video("Sanctuary"),
			new Video("Desperate Housewives"),
			new Video("Spartacus: Blood and Sand"),
			new Video("Lost, les disparus"), new Video("Stargate Universe"),
			new Video("How I Met Your Mother") };
 
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
 
		setListAdapter(new VideoAdapter());
	}
 
	private class VideoAdapter extends BaseAdapter {
 
		@Override
		public int getCount() {
			return OBJECTS.length;
		}
 
		@Override
		public Object getItem(int position) {
			return OBJECTS[position];
		}
 
		@Override
		public long getItemId(int position) {
			return position;
		}
 
		@Override
		public int getViewTypeCount() {
			return ITEM_VIEW_TYPE_COUNT;
		}
 
		@Override
		public int getItemViewType(int position) {
			return (OBJECTS[position] instanceof String) ? ITEM_VIEW_TYPE_SEPARATOR
					: ITEM_VIEW_TYPE_VIDEO;
		}
 
		@Override
		public boolean isEnabled(int position) {
			// A separator cannot be clicked !
			return getItemViewType(position) != ITEM_VIEW_TYPE_SEPARATOR;
		}
 
		@Override
		public View getView(int position, View convertView, ViewGroup parent) {
 
			final int type = getItemViewType(position);
 
			// First, let's create a new convertView if needed. You can also
			// create a ViewHolder to speed up changes if you want ;)
			if (convertView == null) {
				convertView = LayoutInflater
						.from(MainListActivity.this)
						.inflate(
								type == ITEM_VIEW_TYPE_SEPARATOR ? R.layout.separator_list_item
										: R.layout.video_list_item, parent,
								false);
			}
 
			// We can now fill the list item view with the appropriate data.
			if (type == ITEM_VIEW_TYPE_SEPARATOR) {
				((TextView) convertView).setText((String) getItem(position));
			} else {
				final Video video = (Video) getItem(position);
				((TextView) convertView.findViewById(R.id.title))
						.setText(video.title);
				((TextView) convertView.findViewById(R.id.description))
						.setText(video.description);
			}
 
			return convertView;
		}
 
	}
}

Les différences majeures entre la version présentée ci-dessus et une liste “classique” se situe au niveau des méthodes :

• getViewTypeCount() : Implémentée par l’Adapter afin d’informer la ListView du nombre total de types de vues. Dans notre cas, nous avons bien 2 types de vues : les vues séparateur et les vues “vidéos”
• getItemViewType(int position) : Retourne le type de la vue à la position position. Le type d’une vue est représenté par un entier compris entre 0 (inclus) et getItemViewCount() (exclus).

Le code de getView ressemble fortement à l’implémentation habituelle :

• Si convertView est nulle, il faut créer la vue adaptée
• On applique la donnée à la cellule
• On retourne la cellule

Cette facilité d’utilisation est une conséquence directe de l’utilisation de type d’items. En effet, il n’est pas nécessaire de vérifier le type de la convertView pour savoir si cette dernière est une vue “séparateur” ou une vue “vidéos”. La ListView s’assure, elle même, du type de la convertView.

Il existe d’autres techniques permettant d’inclure des séparateurs dans vos listes comme l’inclusion d’un entête à l’ensemble des cellules (entête dont le flag de visibility est mis à View.GONE lorsque la vue n’est pas en début de section) mais celle présentée ici à l’avantage d’être très proche de l’utilisation classique des ListView. Avec cette nouvelle astuce dans votre sac, vous allez maintenant pouvoir présenter l’information aux utilisateurs de la façon la plus ergonomique et user-friendly possible !