$30 off During Our Annual Pro Sale. View Details »

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.

Filipe Mendes

April 15, 2016
Tweet

More Decks by Filipe Mendes

Other Decks in Programming

Transcript

  1. Android.

    More than an UI.
    Filipe Mendes
    1

    View Slide

  2. Filipe Mendes
    • Sharednode Founder
    • Android developer @ Fork IT
    • MSc Student @ ISEL
    • GDG Lisbon Organizer
    • https://fmendes6.github.io

    View Slide

  3. Android Development is more than 

    just drawing an UI

    View Slide

  4. Topics
    • UX concerns & Context awareness
    • Architecture
    • RxJava
    • Testing
    • Third party libraries
    • UI related problems
    • Performance

    View Slide

  5. Mobile

    View Slide

  6. Mobile Constraints
    • Weak internet connection;

    - Internet is not always available nor always speedy;

    - Can fail in a middle of a request => inconsistent state

    View Slide

  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;

    View Slide

  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);

    View Slide

  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;

    View Slide

  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.

    View Slide

  11. Context

    View Slide

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

    View Slide

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

    View Slide

  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)

    View Slide

  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

    View Slide

  16. Android

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  21. Architecture

    View Slide

  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.

    View Slide

  23. App Architecture
    • Monolithic solutions are good ONLY for demo purposes, although
    many companies still do it.

    View Slide

  24. App Architecture
    • Some adopt MVP as the app’s architecture

    View Slide

  25. App Architecture
    • Others are moving to Clean architecture by Uncle Bob (with
    MVP on presentation layer)

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  31. RxJava

    View Slide

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

    View Slide

  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.

    View Slide

  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;

    View Slide

  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;

    View Slide

  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;

    View Slide

  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.

    View Slide

  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() {

    @Override

    public PostView call(Post post) {

    return mPostMapper.transform(post);

    }

    })

    .observeOn(AndroidSchedulers.mainThread())

    .subscribe(new Subscriber() {

    ...

    @Override

    public void onNext(PostView postView) {

    mView.onPostLoaded(postView);

    }

    });

    View Slide

  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() {

    @Override

    public PostView call(Post post) {

    return mPostMapper.transform(post);

    }

    })

    .observeOn(AndroidSchedulers.mainThread())

    .subscribe(new Subscriber() {

    ...

    @Override

    public void onNext(PostView postView) {

    mView.onPostLoaded(postView);

    }

    });

    View Slide

  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() {

    @Override

    public PostView call(Post post) {

    return mPostMapper.transform(post);

    }

    })

    .observeOn(AndroidSchedulers.mainThread())

    .subscribe(new Subscriber() {

    ...

    @Override

    public void onNext(PostView postView) {

    mView.onPostLoaded(postView);

    }

    });

    View Slide

  41. Testing

    View Slide

  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.

    View Slide

  43. “Do you even test bro?”

    View Slide

  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.

    View Slide

  45. Third party libraries

    View Slide

  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

    View Slide

  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> 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> response = service.groupList(10,"asc");

    View Slide

  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

    View Slide

  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);

    View Slide

  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.

    View Slide

  51. Plus, many others.

    View Slide

  52. But..

    View Slide

  53. Let’s not forget the UI

    View Slide

  54. Screen sizes and
    Images

    View Slide

  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…”

    View Slide

  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

    View Slide

  57. Screen resolutions

    View Slide

  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

    View Slide

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

    View Slide

  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) !!

    View Slide

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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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.

    View Slide

  65. Design Library
    • NavigationView
    • FloatingActionButton
    • Snackbar
    • CoordinatorLayout
    • CollapsingToolbarLayout

    View Slide

  66. Performance

    View Slide

  67. Goal
    • Hard to achieve 60 fps but
    possible.
    • Everything needs to be done in
    a 16 ms window.
    GOOD BAD

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  72. Plus…

    Animations, Screen transitions, Scrolling,
    Camera Api, etc.

    View Slide

  73. Android Development is more than 

    just drawing an UI

    View Slide

  74. Thanks!

    View Slide

  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/

    View Slide