Tweet
Tweet

Slide 1

Slide 1 text

Android.
 More than an UI. Filipe Mendes 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Android Development is more than 
 just drawing an UI

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Mobile

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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;

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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;

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

Context

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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)

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Android

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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.

Slide 21

Slide 21 text

Architecture

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

App Architecture • Doesn’t matter for the user;

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

RxJava

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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;

Slide 35

Slide 35 text

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;

Slide 36

Slide 36 text

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;

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Testing

Slide 42

Slide 42 text

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.

Slide 43

Slide 43 text

“Do you even test bro?”

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Third party libraries

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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.

Slide 51

Slide 51 text

Plus, many others.

Slide 52

Slide 52 text

But..

Slide 53

Slide 53 text

Let’s not forget the UI

Slide 54

Slide 54 text

Screen sizes and Images

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Screen resolutions

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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.

Slide 63

Slide 63 text

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.

Slide 64

Slide 64 text

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.

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Performance

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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)

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Android Development is more than 
 just drawing an UI

Slide 74

Slide 74 text

Thanks!

Slide 75

Slide 75 text

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/