SlideShare uma empresa Scribd logo
1 de 18
UI Design Patterns & Best Practices Mike Wolfson July 22, 2010
Best Practices – Why? ,[object Object],[object Object],[object Object],[object Object]
Avoid the Jank ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Force Close ,[object Object]
What happens next? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Single Threading Model ,[object Object],[object Object],[object Object],[object Object],[object Object]
Android Threading Rules ,[object Object],[object Object],[object Object]
Avoid FC and Jank –  accessing UI thread manually ,[object Object],[object Object],[object Object]
AsyncTask ,[object Object],[object Object],[object Object]
IntentService ,[object Object],[object Object],[object Object],[object Object]
Tips to keep your app “snappy” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Design patterns ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Contacts Sync/ Quick Contact  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Dashboard ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Action Bar ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Companion Widget ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
QuickAction ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Conclusion ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Mais de Mike Wolfson

Mais de Mike Wolfson (19)

Effective Remote Teamwork DevFest Minnesota 2018
Effective Remote Teamwork DevFest Minnesota 2018Effective Remote Teamwork DevFest Minnesota 2018
Effective Remote Teamwork DevFest Minnesota 2018
 
Introduction To Android - Short
Introduction To Android - ShortIntroduction To Android - Short
Introduction To Android - Short
 
Introduction To Android - Long
Introduction To Android - LongIntroduction To Android - Long
Introduction To Android - Long
 
Mastering Material Motion
Mastering Material MotionMastering Material Motion
Mastering Material Motion
 
Material Design basics for Android and the Web
Material Design basics for Android and the WebMaterial Design basics for Android and the Web
Material Design basics for Android and the Web
 
Android Developer Tools Essentials - Oscon 14
Android Developer Tools Essentials - Oscon 14Android Developer Tools Essentials - Oscon 14
Android Developer Tools Essentials - Oscon 14
 
Android Developer Tools Essentials
Android Developer Tools EssentialsAndroid Developer Tools Essentials
Android Developer Tools Essentials
 
AnDevCon IV - Android Bootcamp
AnDevCon IV - Android BootcampAnDevCon IV - Android Bootcamp
AnDevCon IV - Android Bootcamp
 
AnDevCon IV - Advanced Android Developer Tools
AnDevCon IV - Advanced Android Developer ToolsAnDevCon IV - Advanced Android Developer Tools
AnDevCon IV - Advanced Android Developer Tools
 
AnDevCon IV - Intro to Android Developer Tools
AnDevCon IV - Intro to Android Developer ToolsAnDevCon IV - Intro to Android Developer Tools
AnDevCon IV - Intro to Android Developer Tools
 
Phxmobilefest
PhxmobilefestPhxmobilefest
Phxmobilefest
 
Android For Java Developers
Android For Java DevelopersAndroid For Java Developers
Android For Java Developers
 
Intro to Android for the iOS Fan
Intro to Android for the iOS FanIntro to Android for the iOS Fan
Intro to Android for the iOS Fan
 
Mobile tech is saving the world
Mobile tech is saving the worldMobile tech is saving the world
Mobile tech is saving the world
 
Android Development Tools Overview
Android Development Tools OverviewAndroid Development Tools Overview
Android Development Tools Overview
 
Overview of Mobile Dev Platforms
Overview of Mobile Dev PlatformsOverview of Mobile Dev Platforms
Overview of Mobile Dev Platforms
 
Overview of Mobile Development Platforms
Overview of Mobile Development PlatformsOverview of Mobile Development Platforms
Overview of Mobile Development Platforms
 
Android For Java Developers
Android For Java DevelopersAndroid For Java Developers
Android For Java Developers
 
Android Debug
Android DebugAndroid Debug
Android Debug
 

Último

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering DevelopersWSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
Apidays New York 2024 - Passkeys: Developing APIs to enable passwordless auth...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 

Android UI Design Patterns & Best Practices

  • 1. UI Design Patterns & Best Practices Mike Wolfson July 22, 2010
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

Notas do Editor

  1. http://nanocr.eu/ - Google’s mismanagement of the Android Market
  2. Android offers several ways to access the UI thread from other threads. You may already be familiar with some of them but here is a comprehensive list:    * Activity.runOnUiThread(Runnable)    * View.post(Runnable)    * View.postDelayed(Runnable, long)    * Handler AsyncTask is The goal of AsyncTask is to take care of thread management for you. Whenever you first start an Android application, a thread called "main" is automatically created. The main thread, also called the UI thread, is very important because it is in charge of dispatching the events to the appropriate widgets and this includes the drawing events. It is also the thread you interact with Android widgets on. For instance, if you touch the a button on screen, the UI thread dispatches the touch event to the widget which in turn sets its pressed state and posts an invalidate request to the event queue. The UI thread dequeues the request and notifies the widget to redraw itself. This single thread model can yield poor performance in Android applications that do not consider the implications. Since everything happens on a single thread performing long operations, like network access or database queries, on this thread will block the whole user interface. No event can be dispatched, including drawing events, while the long operation is underway. From the user's perspective, the application appears hung. Even worse, if the UI thread is blocked for more than a few seconds (about 5 seconds currently) the user is presented with the infamous "application not responding" (ANR) dialog.
  3. Android offers several ways to access the UI thread from other threads. You may already be familiar with some of them but here is a comprehensive list:    * Activity.runOnUiThread(Runnable)    * View.post(Runnable)    * View.postDelayed(Runnable, long)    * Handler AsyncTask is The goal of AsyncTask is to take care of thread management for you. Whenever you first start an Android application, a thread called "main" is automatically created. The main thread, also called the UI thread, is very important because it is in charge of dispatching the events to the appropriate widgets and this includes the drawing events. It is also the thread you interact with Android widgets on. For instance, if you touch the a button on screen, the UI thread dispatches the touch event to the widget which in turn sets its pressed state and posts an invalidate request to the event queue. The UI thread dequeues the request and notifies the widget to redraw itself. This single thread model can yield poor performance in Android applications that do not consider the implications. Since everything happens on a single thread performing long operations, like network access or database queries, on this thread will block the whole user interface. No event can be dispatched, including drawing events, while the long operation is underway. From the user's perspective, the application appears hung. Even worse, if the UI thread is blocked for more than a few seconds (about 5 seconds currently) the user is presented with the infamous "application not responding" (ANR) dialog.
  4. AsyncTask must be used by subclassing it. It is also very important to remember that an AsyncTask instance has to be created on the UI thread and can be executed only once. You can specify the type, using generics, of the parameters, the progress values and the final value of the task    * The method doInBackground() executes automatically on a worker thread    * onPreExecute(), onPostExecute() and onProgressUpdate() are all invoked on the UI thread    * The value returned by doInBackground() is sent to onPostExecute()    * You can call publishProgress() at anytime in doInBackground() to execute onProgressUpdate() on the UI thread    * You can cancel the task at any time, from any thread Example: public void onClick(View v) {  new DownloadImageTask().execute(" http://example.com/image.png "); } private class DownloadImageTask extends AsyncTask {     protected Bitmap doInBackground(String... urls) {         return loadImageFromNetwork(urls[0]);     }     protected void onPostExecute(Bitmap result) {         mImageView.setImageBitmap(result);     }  }
  5. IntentService is a base class for Service s that handle asynchronous requests (expressed as Intent s) on demand. Clients send requests through startService(Intent) calls; the service is started as needed, handles each Intent in turn using a worker thread, and stops itself when it runs out of work. This "work queue processor" pattern is commonly used to offload tasks from an application's main thread. The IntentService class exists to simplify this pattern and take care of the mechanics. To use it, extend IntentService and implement onHandleIntent(Intent) . IntentService will receive the Intents, launch a worker thread, and stop the service as appropriate. All requests are handled on a single worker thread -- they may take as long as necessary (and will not block the application's main loop), but only one request will be processed at a time.
  6. AsyncTask must be used by subclassing it. It is also very important to remember that an AsyncTask instance has to be created on the UI thread and can be executed only once. You can specify the type, using generics, of the parameters, the progress values and the final value of the task    * The method doInBackground() executes automatically on a worker thread    * onPreExecute(), onPostExecute() and onProgressUpdate() are all invoked on the UI thread    * The value returned by doInBackground() is sent to onPostExecute()    * You can call publishProgress() at anytime in doInBackground() to execute onProgressUpdate() on the UI thread    * You can cancel the task at any time, from any thread Example: public void onClick(View v) {  new DownloadImageTask().execute(" http://example.com/image.png "); } private class DownloadImageTask extends AsyncTask {     protected Bitmap doInBackground(String... urls) {         return loadImageFromNetwork(urls[0]);     }     protected void onPostExecute(Bitmap result) {         mImageView.setImageBitmap(result);     }  }
  7. AsyncTask must be used by subclassing it. It is also very important to remember that an AsyncTask instance has to be created on the UI thread and can be executed only once. If you don't implement these patterns, it is good to start thinking about them, so you can design your own UIs to closely match the Google recommended patterns (the apps consistent with the general feel of the OS, can feel better, and more integrated).
  8. One of the most important intents we added to Twitter for Android was the ability to sync your Twitter contacts into the phone. This integration also allowed us to give Twitter users with an Android phone the use of the QuickContact widget, which gives users a choice of ways to contact their followers. We recommend: Using this activity upon first signing into an application. If your app has no sign-in, showing this screen at first launch to improve discoverability of contact sync. The good news for developers is you get this highly functional contacts feature for free if users choose to sync contact information into your app. QuickContact for Android provides instant access to a contact's information and communication modes. For example, a user can tap a contact photo and with one more tap launch a call, SMS, or email to that person. Other applications such as Email, Messaging, and Calendar can also reveal the QuickContact widget when you touch a contact photo or status icon.
  9. The dashboard pattern serves as a home orientation activity for your users. It is meant to include the categories or features of your application. We recommend including an Action bar on this screen as well. The dashboard can be static or dynamic. For example, in the case of our dashboard for Twitter, we used the goodness of Live Wallpapers introduced in 2.1 to create an animated dashboard complete with real-time trend bubbles and the Twitter bird silhouette. We recommend: Using this pattern to showcase the most prominent features of your app. Adding some unexpected delight to this screen, making it engaging without overwhelming the user. Exercising caution - for some apps, the user will want to jump directly into the meat of the application. For others, this sort of welcoming dashboard will be the right starting place.
  10. Great place to brand – and use Logo as link to home (consistent with web feel) The Action bar gives your users onscreen access to the most frequently used actions in your application. We recommend you use this pattern if you want to dedicate screen real estate for common actions. Using this pattern replaces the title bar. It works with the Dashboard, as the upper left portion of the Action bar is where we recommend you place a quick link back to the dashboard or other app home screen. We recommend: Placing an Action bar at the top of the screen to house the most common actions for your application that work across all activities. Using no more than 3 onscreen actions for the Action bar. Use the main menu as overflow for actions that are less important. The balance between Action bar and main menu will ensure the richness of interaction that is Android. Making the left-hand region actionable, offering one-touch return to your dashboard or other app home.
  11. The companion widget pattern is something we recommend all developers think about deeply. The widget you create should be more than a big button link into your app. Used correctly, it can provide a place on a home screen that personalizes, albeit in a small window, your application. In the case of Twitter for Android, we designed and built small and large-sized widgets to support different types of functionality. Both widgets let a user view his/her tweetstream. However, the smaller widget hands off to the application to create a reply to a tweet from the stream, whereas the larger one gives direct access to the Tweet compose activity. We recommend: Identify your application in the widget with a brand icon Make this more than a button into your app. Give your user an action or view into the app itself. Keep the activity stateful so that on exiting the application and re-entering a user is returned to the same context in the activity, minimizing the impact of using the dashboard if it is used.
  12. QuickActions is our newest UI pattern. Currently, it has been implemented as a fast, engaging, popup triggered by an onscreen UI element that identifies it in as minimally disruptive way as possible. We recommend you use this pattern for list views that are data intensive where items inside the list have contextual actions associated with them. QuickActions can be used as a replacement for our traditional dialog invoked by long press. By choosing to use this pattern as part of a list, we made it easier for Twitter users to take action on the information in the list view by keeping the item and associated actions in context. We also took the extra step of making it easier to target links in list views by turning off the list view button element as a secondary component to making this pattern even more usable. This way users of Twitter for Android can view links with one tap and/or see the posted tweet on a map by tapping the tweet meta data directly. We recommend: Creating a UI element that is minimal and recognizable as an action popup; either a frame around an image or an icon in a list item. Only using this pattern in applications where the data is intensive. Placing the action popup below or above the information you wish to allow users to take relevant contextual actions on. This will make it easier to associate the actions with the content in view. Turning off the entire list view button element so that regions can be easily targeted for the user.