Save 37% off PRO during our Black Friday Sale! »

Android. More than an UI

Android. More than an UI

A talk on which I try to explain some of the problems and concerns android developers (and mobile in general) have. That developing for android is not just drawing an UI to visualize data. As well as some libraries and suggestions by the community.

E24250ad371aa55fbaa329e0d01f60a1?s=128

Filipe Mendes

April 15, 2016
Tweet

Transcript

  1. Android.
 More than an UI. Filipe Mendes 1

  2. Filipe Mendes • Sharednode Founder • Android developer @ Fork

    IT • MSc Student @ ISEL • GDG Lisbon Organizer • https://fmendes6.github.io
  3. Android Development is more than 
 just drawing an UI

  4. Topics • UX concerns & Context awareness • Architecture •

    RxJava • Testing • Third party libraries • UI related problems • Performance
  5. Mobile

  6. Mobile Constraints • Weak internet connection;
 - Internet is not

    always available nor always speedy;
 - Can fail in a middle of a request => inconsistent state
  7. Mobile Constraints • Weak internet connection;
 - Internet is not

    always available nor always speedy;
 - Can fail in a middle of a request => inconsistent state • Limited mobile data and battery;
  8. Mobile Constraints • Weak internet connection;
 - Internet is not

    always available nor always speedy;
 - Can fail in a middle of a request => inconsistent state • Limited mobile data and battery; • Divided Attention (must be objective);
  9. Mobile Constraints • Weak internet connection;
 - Internet is not

    always available nor always speedy;
 - Can fail in a middle of a request => inconsistent state • Limited mobile data and battery; • Divided Attention (must be objective); • Handedness;
  10. Mobile Constraints • Weak internet connection;
 - Internet is not

    always available nor always speedy;
 - Can fail in a middle of a request => inconsistent state • Limited mobile data and battery; • Divided Attention (must be objective); • Handedness; • Small screens.
  11. Context

  12. Context awareness Who is your user? (Sign In API) •

    Email • name
  13. Context awareness Who is your user? (Sign In API) •

    Email • name What is the user doing? (Activity API) • Walking • Running • Sleeping
  14. Context awareness Who is your user? (Sign In API) •

    Email • name What is the user doing? (Activity API) • Walking • Running • Sleeping Where is your user? (Location API) • Location (latitude, longitude)
  15. Context awareness Who is your user? (Sign In API) •

    Email • name What is the user doing? (Activity API) • Walking • Running • Sleeping Where is your user? (Location API) • Location (latitude, longitude) Who or what are they near? (Places API) • Places • People
  16. Android

  17. Android in a nutshell • Activity - UI Screen in

    the application.
  18. Android in a nutshell • Activity - UI Screen in

    the application. • Broadcast Receiver - Subscribes OS events (ex: internet connection).
  19. Android in a nutshell • Activity - UI Screen in

    the application. • Broadcast Receiver - Subscribes OS events (ex: internet connection). • Service - Long running operations without a UI.
  20. Android in a nutshell • Activity - UI Screen in

    the application. • Broadcast Receiver - Subscribes OS events (ex: internet connection). • Service - Long running operations without a UI. • Content Provider - Manages access to structured data.
  21. Architecture

  22. App Architecture • Over the years, Google barely mentioned anything

    about android app architecture. • Aside from 2010’s Google IO talk by Virgil Dobjanschi on “Android REST client applications” which was very focused on android components like Content Providers (that are rarely needed), Services, Loaders (not suitable for network requests). • Last year on Android DevSummit, Google did a talk on android apps architecture; • This is a 5 years gap. • In between, the community came forward with different solutions.
  23. App Architecture • Monolithic solutions are good ONLY for demo

    purposes, although many companies still do it.
  24. App Architecture • Some adopt MVP as the app’s architecture

  25. App Architecture • Others are moving to Clean architecture by

    Uncle Bob (with MVP on presentation layer)
  26. App Architecture • Doesn’t matter for the user;

  27. App Architecture • Doesn’t matter for the user; • Architecture

    for the User Experience;
  28. App Architecture • Doesn’t matter for the user; • Architecture

    for the User Experience; • Offline or online use must be transparent to the user.
  29. App Architecture • Doesn’t matter for the user; • Architecture

    for the User Experience; • Offline or online use must be transparent to the user. • Pending web requests should be persisted until performed.
  30. App Architecture • Doesn’t matter for the user; • Architecture

    for the User Experience; • Offline or online use must be transparent to the user. • Pending web requests should be persisted until performed. • The best apps are not only the most clean and simple to use but those that sync online with offline like magic. • Google Keep, Gmail, Pocket Casts, etc.
  31. RxJava

  32. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.”
  33. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.” • Helps a lot with its threading API.
  34. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.” • Helps a lot with its threading API. • Contains operators to transform, filter and convert multiple sets of data;
  35. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.” • Helps a lot with its threading API. • Contains operators to transform, filter and convert multiple sets of data; • Handles errors in a clean and organised way;
  36. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.” • Helps a lot with its threading API. • Contains operators to transform, filter and convert multiple sets of data; • Handles errors in a clean and organised way; • RxAndroid adds a specific scheduler for the UI thread;
  37. RxJava • “A library for composing asynchronous and event-based programs

    using observable sequences for the Java VM.” • Helps a lot with its threading API. • Contains operators to transform, filter and convert multiple sets of data; • Handles errors in a clean and organised way; • RxAndroid adds a specific scheduler for the UI thread; • RxBindings adds RxJava binding APIs for Android UI widgets from the platform and support libraries.
  38. RxJava + RxAndroid • In android, view related operations (inflation,

    drawing) must be done on the UI thread. Everything else should be done on a worker thread. • RxAndroid adds specific Android Scheduler for UI Thread.
 mService.getPostById(postId)
 .subscribeOn(Schedulers.io())
 .map(new Func1<Post, PostView>() {
 @Override
 public PostView call(Post post) {
 return mPostMapper.transform(post);
 }
 })
 .observeOn(AndroidSchedulers.mainThread())
 .subscribe(new Subscriber<PostView>() {
 ...
 @Override
 public void onNext(PostView postView) {
 mView.onPostLoaded(postView);
 }
 });
  39. RxJava + RxAndroid • In android, view related operations (inflation,

    drawing) must be done on the UI thread. Everything else should be done on a worker thread. • RxAndroid adds specific Android Scheduler for UI Thread.
 mService.getPostById(postId)
 .subscribeOn(Schedulers.io())
 .map(new Func1<Post, PostView>() {
 @Override
 public PostView call(Post post) {
 return mPostMapper.transform(post);
 }
 })
 .observeOn(AndroidSchedulers.mainThread())
 .subscribe(new Subscriber<PostView>() {
 ...
 @Override
 public void onNext(PostView postView) {
 mView.onPostLoaded(postView);
 }
 });
  40. RxJava + RxAndroid • In android, view related operations (inflation,

    drawing) must be done on the UI thread. Everything else should be done on a worker thread. • RxAndroid adds specific Android Scheduler for UI Thread.
 mService.getPostById(postId)
 .subscribeOn(Schedulers.io())
 .map(new Func1<Post, PostView>() {
 @Override
 public PostView call(Post post) {
 return mPostMapper.transform(post);
 }
 })
 .observeOn(AndroidSchedulers.mainThread())
 .subscribe(new Subscriber<PostView>() {
 ...
 @Override
 public void onNext(PostView postView) {
 mView.onPostLoaded(postView);
 }
 });
  41. Testing

  42. App Architecture • Monolithic solutions are good for demo purposes

    but many companies still do it. “Testing in android is not so simple and clear as in other platforms, so we don’t do it” - Someone.
  43. “Do you even test bro?”

  44. Testing • For the data (repositories) layer: • Roboletric 3

    • And for the presentation layer: • Espresso • Android Instrumentation Testing • MonkeyRunner • Mockito and JUnit can also be used in the data layer as well as the domain layer.
  45. Third party libraries

  46. Third party libraries There are many libraries for different purposes

    but lets focus only on these topics: • Communication with Web Api’s • Requests persistence • Image Loading • Structured Data
  47. Retrofit Type-safe HTTP client for Android and Java. 1 -

    Turn your http api into a java interface:
 public interface GithubApi {
 @GET("group/{id}/users")
 Call<List<User>> groupList(@Path("id") int groupId, @Query("sort") String sort);
 } 2 - Create a retrofit instance:
 Retrofit retrofit = new Retrofit.Builder()
 .baseUrl("https://api.github.com")
 .addConverterFactory(GsonConverterFactory.create())
 .build(); 3 - Instantiate it and perform the request: 
 GithubService service = retrofit.create(GithubService.class);
 Call<List<User>> response = service.groupList(10,"asc");
  48. Requests persistence Just like mentioned before, requests should be persisted

    until completed. We should prevent the loss of data, in cases like when we run out of battery, the system crashes or the app closes. • Tape - by Square • Android Priority Job Queue - Yigit Boyar
  49. Glide Loading images over the network is harder than it

    seems, since we should: • Cache images (since downloads are costly) • Load them as fast as possible • With little memory footprint • UI Lifecycle aware Fortunately Glide does all of this (and more), through a simple api:
 Glide
 .with(myActivity)
 .load("www.images.com/image.png")
 .centerCrop()
 .placeholder(R.drawable.loading_spinner)
 .crossFade()
 .into(myImageView);
  50. Structured Data • SqlBrite - Wrapper for Sqlite with reactive

    stream semantics (RxJava). Apps still need to implement SQL logic. • ORM - (ActiveAndroid, OrmLite, SqlBriteDAO, etc) add an abstraction over SQL. • RealmDb - Closed source c++ database with java bindings. Simple to use and generally fast.
  51. Plus, many others.

  52. But..

  53. Let’s not forget the UI

  54. Screen sizes and Images

  55. Screen sizes Android iOS Source: Open Signal 2015 - “…from

    almost 10 million OpenSignal users. In this graphic we are showing physical screen size, not size in pixel…”
  56. Screen resolutions • ldpi (low) ~120dpi • mdpi (medium) ~160dpi

    • hdpi (high) ~240dpi • xhdpi (extra-high) ~320dpi • xxhdpi (extra-extra-high) ~480dpi • xxxhdpi (extra-extra-extra-high) ~640dpi
  57. Screen resolutions

  58. Screen resolutions • ldpi (low) ~120dpi • mdpi (medium) ~160dpi

    • hdpi (high) ~240dpi • xhdpi (extra-high) ~320dpi • xxhdpi (extra-extra-high) ~480dpi • xxxhdpi (extra-extra-extra-high) ~640dpi
  59. Svg support Replaces multiple png files for one single xml

    SVG (single vector graphics). • Available only for Android 5.0 (api 21)
  60. Svg support Replaces multiple png files for one single xml

    SVG (single vector graphics). • Available only for Android 5.0 (api 21) • Since February 24th available on Android 2.1 (api 7) !!
  61. Design Library • With Android 5.0 a new design language

    was introduced to the Android experience.
  62. Design Library • With Android 5.0 a new design language

    was introduced to the Android experience. • Days after the announcement, Google provided a spec sheet on how to design android applications.
  63. Design Library • With Android 5.0 a new design language

    was introduced to the Android experience. • Days after the announcement, Google provided a spec sheet on how to design android applications. • However, implementing some of those behaviours and components was usually very hard.
  64. Design Library • With Android 5.0 a new design language

    was introduced to the Android experience. • Days after the announcement, Google provided a spec sheet on how to design android applications. • However, implementing some of those behaviours and components was usually very hard. • Almost a year later, Google announced the Design Library to help developers achieve a consistent visual experience in a easier way.
  65. Design Library • NavigationView • FloatingActionButton • Snackbar • CoordinatorLayout

    • CollapsingToolbarLayout
  66. Performance

  67. Goal • Hard to achieve 60 fps but possible. •

    Everything needs to be done in a 16 ms window. GOOD BAD
  68. Avoid • Overdraw • Allocations in critical parts • Deep

    view Hierarchies • RelativeLayout does two measure passes. It’s usually negligible but with nested complex RelativeLayouts, could be a problem. • Avoid nesting weights on Linear layouts
  69. Falcon Pro case • On Falcon’s case, the problem was

    caused by setting the alpha property on the small little circles under the title. • This means there are more reasons for performance problems than the previously mentioned. GOOD BAD
  70. Falcon Pro case • On Falcon’s case, the problem was

    caused by setting the alpha property on the small little circles under the title. • This means there are more reasons for performance problems than the previously mentioned. • Android doesn’t like the blur effect either. :( GOOD BAD
  71. Use the tools • Developer options: • Don’t keep activities

    - to test activity destruction and reconstruction • Profile Gpu rendering - to look for the 16ms window • Debug GPU overdraw • Memory Monitor • Allocation Tracker • Hierarchy Viewer • LeakCanary (third party library)
  72. Plus…
 Animations, Screen transitions, Scrolling, Camera Api, etc.

  73. Android Development is more than 
 just drawing an UI

  74. Thanks!

  75. References • UX for Mobile Developers (udacity course) • https://github.com/ReactiveX/RxJava

    • https://realm.io/news/donn-felker-reactive-android-ui-programming-with-rxbinding/ • https://realm.io/news/joaquim-verges-making-falcon-pro-3/ • http://martiancraft.com/blog/2015/06/android-support-library/ • http://android-developers.blogspot.com/2015/05/android-design-support-library.html • http://opensignal.com/reports/2015/08/android-fragmentation/ • http://developer.android.com/about/dashboards/index.html • http://android-developers.blogspot.com/2016/02/android-support-library-232.html • https://github.com/yigit/android-priority-jobqueue • http://square.github.io/tape/