SlideShare une entreprise Scribd logo
Paris Android User Group
Mise en place des Quick Actions Popups
Nicolas Chambrier 23/11/2010
2
Qui suis-je ?
● Consultant/Architecte
Clever Age
● Une société où il fait
bon travailler :)
● Pôle expertise
● Bande de geeks !
@naholyr
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
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
Nouvelles UI guidelines (2/3)
Quick Actions Popup
● Actions
contextuelles
● Pourquoi pas un
context menu ?
→ plus joli
→ moins encombrant
→ mais plus
complexe
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
UI et UX sont sur un bateau...
● Joli ≠ ergonomique
● Twitter for Android ≠
votre application
● Les utilisateurs de
Twitter ≠ vos
utilisateurs
● USE YOUR BRAIN !!
8
Histoires d'une refonte graphique
(Horaires TER SNCF)
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
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
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
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
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
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
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
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
Android = liberté
● Restez flexible !
● Guidelines ≠ marbre
● Twitter a évolué (vers
une UI à la iPhone...)
● Être suiveur ou
innovateur ?
18
D'autres ressources
● GreenDroid
→ ActionBar et autres joyeusetés :)
android.cyrilmottier.com
● Sûrement plein d'autres
→ Google's your friend :P
19
Des questions ?
http://www.slideshare.net/naholyr/paris-android-user-group

Contenu connexe

Similaire à Paris Android User Group

Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
Horacio Gonzalez
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
Jean-Pierre Vincent
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
Fabernovel
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
CocoaHeads France
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
Microsoft
 
Acra
Acra Acra
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
Olivier Lorrain
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
Anne-Marie Pinna-Dery
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
Jean-Baptiste Guerraz
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
Horacio Gonzalez
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
michael_bailly
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptm
Ahmed Feki
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
Christophe Villeneuve
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
Michael Laguerre
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
LINAGORA
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
Thierry Gayet
 
Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013
CNI Tunisia
 
3D Touch
3D Touch3D Touch
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
Julien Dubois
 

Similaire à Paris Android User Group (20)

Bootcamp d'Initiation à Android - 2013/11/30
Bootcamp d'Initiation à Android  - 2013/11/30Bootcamp d'Initiation à Android  - 2013/11/30
Bootcamp d'Initiation à Android - 2013/11/30
 
Les performances Web mobile
Les performances Web mobileLes performances Web mobile
Les performances Web mobile
 
Publier une application mobile en un clic
Publier une application mobile en un clicPublier une application mobile en un clic
Publier une application mobile en un clic
 
Apple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey BocquetApple Watch par Benoit Capallere et Joeffrey Bocquet
Apple Watch par Benoit Capallere et Joeffrey Bocquet
 
10 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 810 tips pour améliorer les performances de vos applications Windows 8
10 tips pour améliorer les performances de vos applications Windows 8
 
Acra
Acra Acra
Acra
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
Android201710 avrilcours3
Android201710 avrilcours3Android201710 avrilcours3
Android201710 avrilcours3
 
Drupal & Mobilité
Drupal & MobilitéDrupal & Mobilité
Drupal & Mobilité
 
GDG Rennes - Bootcamp Initiation Android - Théorie
GDG Rennes - Bootcamp Initiation Android -  ThéorieGDG Rennes - Bootcamp Initiation Android -  Théorie
GDG Rennes - Bootcamp Initiation Android - Théorie
 
Tutorial android
Tutorial androidTutorial android
Tutorial android
 
Méthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to marketMéthodes agiles, frameworks javascript: optimisez votre time to market
Méthodes agiles, frameworks javascript: optimisez votre time to market
 
Présentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptmPrésentation pfe feki 2015.pptm
Présentation pfe feki 2015.pptm
 
Pas possible en drupal, c'est faux
Pas possible en drupal, c'est fauxPas possible en drupal, c'est faux
Pas possible en drupal, c'est faux
 
Tech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobilesTech Conf n°1 - Développement natif d'applications mobiles
Tech Conf n°1 - Développement natif d'applications mobiles
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
Prérequis au développement google android
Prérequis au développement google androidPrérequis au développement google android
Prérequis au développement google android
 
Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013Liste des nouvelles acquisitions 2013
Liste des nouvelles acquisitions 2013
 
3D Touch
3D Touch3D Touch
3D Touch
 
HTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilitéHTML5, Spring, NoSQL et mobilité
HTML5, Spring, NoSQL et mobilité
 

Paris Android User Group

  • 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