Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Paris Android User Group

2,552 views

Published on

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

Published in: Technology, News & Politics
  • Be the first to comment

Paris Android User Group

  1. 1. Paris Android User Group Mise en place des Quick Actions Popups Nicolas Chambrier 23/11/2010
  2. 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. 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. 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. 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. 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. 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. 8 Histoires d'une refonte graphique (Horaires TER SNCF)
  9. 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. 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. 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. 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. 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. 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. 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. 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. 17 Android = liberté ● Restez flexible ! ● Guidelines ≠ marbre ● Twitter a évolué (vers une UI à la iPhone...) ● Être suiveur ou innovateur ?
  18. 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. 19 Des questions ? http://www.slideshare.net/naholyr/paris-android-user-group

×