Présentation UI guidelines et mise en place des Quick Actions Popups

1. Paris Android User Group
Mise en place des Quick Actions Popups
Nicolas Chambrier 23/11/2010

2. 2
Qui suis-je ?
● Consultant/Architecte
Clever Age
● Une société où il fait
bon travailler :)
● Pôle expertise
● Bande de geeks !
@naholyr

3. 3
Parole, parole, parole...
● Twitter for Android
→ Modèle d'UI
● Open-source ? On
attend toujours…
● Mais les conseils
doivent être suivis
● Comment on se
démerde nous ?

4. 4
Nouvelles UI guidelines (1/3)
Action Bar
● Actions courantes et
globales
● Et la touche menu ?
→ Actions avancées
● Et la touche search ?
→ Bouton physique
optionnel
● Window.FEATURE_NO_TITLE

5. 5
Nouvelles UI guidelines (2/3)
Quick Actions Popup
● Actions
contextuelles
● Pourquoi pas un
context menu ?
→ plus joli
→ moins encombrant
→ mais plus
complexe

6. 6
Nouvelles UI guidelines (3/3)
Home
● Voir toutes les
« zones » de l'appli
● Pas de données
affichées
immédiatement ?
→ performance
● Chemin simple pour
aller partout (retour
home + clic)

7. 7
UI et UX sont sur un bateau...
● Joli ≠ ergonomique
● Twitter for Android ≠
votre application
● Les utilisateurs de
Twitter ≠ vos
utilisateurs
● USE YOUR BRAIN !!

8. 8
Histoires d'une refonte graphique
(Horaires TER SNCF)

9. 9
Gros plan : Quick Actions
● Remplace la notion de menu contextuel
→ Donc commencez par un ContextMenu :)
● Est-ce vraiment approprié à mon application ?
→ Pas vraiment plus ergonomique
→ Sexy : certes, mais si l'appli est moche ?

10. 10
Dieu nous a abandonné !
● Google ne nous aide pas sur ce coup... Est-on
seuls au monde ?
● Des initiatives personnelles :
● WHSFinder https://github.com/ruqqq/WorldHeritageSite/tree/master/src/sg/ruqqq/WHSFinder
● Simple QuickActions http://code.google.com/p/simple-quickactions/
Lorenz http://www.londatiga.net/it/how-to-create-quickaction-dialog-in-android/
● DevoTeam http://code.google.com/p/devoquickaction/
(inspiré de WHSFinder)
● Horaires TER SNCF http://code.google.com/p/horaires-ter-sncf/wiki/QuickActionWindow

11. 11
Pourquoi réinventer la roue ?
● Facile à faire
● Besoins spécifiques :
● Intégration intents
→ système de plugins
● Contraintes :
● Compétences limitées en graphisme
● Layout limité à 1 background (9-patch)

12. 12
Utilisation QuickActionWindow (1/4)
● Intégrer la librairie .jar
● Créez vos layouts <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/quick_actions_background_below">
<HorizontalScrollView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:fadingEdgeLength="15dip"
android:fadeScrollbars="true">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/quick_actions"
android:orientation="horizontal"
android:gravity="center_horizontal" />
</HorizontalScrollView>
</LinearLayout>

13. 13
Utilisation QuickActionWindow (2/4)
● Créer la popup
final Intent pluginIntent = new Intent(Intent.ACTION_VIEW);
pluginIntent.setType(Gare.CONTENT_TYPE);
final Context context = this;
QuickActionWindow window = QuickActionWindow.getWindow(this, Common.QUICK_ACTION_WINDOW_CONFIGURATION, new
QuickActionWindow.Initializer() {
@Override
public void setItems(QuickActionWindow window) {
// ici ajouter les items
}
}, POPUP_ID);
// Complete intent items, adding station ID
Bundle extras = new Bundle();
extras.putLong(Gare._ID, id);
window.dispatchIntentExtras(extras, pluginIntent);
window.show(view);

14. 14
Utilisation QuickActionWindow (3/4)
● Ajouter item fixe
● Ajouter des « pubs »
// Add item "add/remove to favorites", always here
int favIconId;
if (Gare.getFavorites(context).has(id)) {
favIconId = R.drawable.quick_action_remove_favorite;
} else {
favIconId = R.drawable.quick_action_add_favorite;
}
window.addItem(getString(favStringId), getResources().getDrawable(favIconId),
new QuickActionWindow.Item.Callback() {
public void onClick(QuickActionWindow.Item item, View anchor) {
anchor.findViewById(R.id.favicon).performClick();
}
});
// Advertisement items for not found plugins (GMap & Itineraires)
QuickActionWindow.Advertisement[] ads = new QuickActionWindow.Advertisement[] {
new Common.PluginMarketAdvertisement(context, "gmap", "MapActivity", R.drawable.quick_action_gmap, "Localiser sur une carte"),
new Common.PluginMarketAdvertisement(context, "itineraire", "ItineraireFromActivity", R.drawable.quick_action_itineraire_from,
"Itinéraire depuis cette gare..."),
new Common.PluginMarketAdvertisement(context, "itineraire", "ItineraireToActivity", R.drawable.quick_action_itineraire_to,
"Itinéraire vers cette gare..."), };

15. 15
Utilisation QuickActionWindow (4/4)
● Ajoutez des « plugins » par intent
// Plugins
window.addItemsForIntent(context, pluginIntent, new QuickActionWindow.IntentItem.ErrorCallback() {
@Override
public void onError(ActivityNotFoundException e, IntentItem item) {
Toast.makeText(item.getContext(), "Erreur : Application introuvable", Toast.LENGTH_LONG).show();
ErrorReporter.getInstance().handleSilentException(e);
}
}, ads);

16. 16
Et moi dans tout ça ?
● Réinventer la roue n'est pas forcément le mal
● Librairies open-source
● Attendre que Google nous livre des
composants graphiques dans son SDK ?

17. 17
Android = liberté
● Restez flexible !
● Guidelines ≠ marbre
● Twitter a évolué (vers
une UI à la iPhone...)
● Être suiveur ou
innovateur ?

18. 18
D'autres ressources
● GreenDroid
→ ActionBar et autres joyeusetés :)
android.cyrilmottier.com
● Sûrement plein d'autres
→ Google's your friend :P

19. 19
Des questions ?
http://www.slideshare.net/naholyr/paris-android-user-group