Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Android Effective UI: Tips, Tricks and Patterns

1,061 views

Published on

Android Effective UI: Tips, Tricks and Patterns

Published in: Mobile
  • Be the first to comment

  • Be the first to like this

Android Effective UI: Tips, Tricks and Patterns

  1. 1. Android Effective UI Tips, Tricks and Patterns Adham Enaya adhamenaya.com 1
  2. 2. Topics • Introduction • Resources and qualifiers • Using ButterKnife Library • Model View Presenter (MVP) • Some advices adhamenaya.com 2
  3. 3. Motivation • Provide and enjoyable user experience. • Change the UI depending on the device. • Improve layout performance. • Create Customized widgets. • Make the UI code maintainable and testable. adhamenaya.com 3
  4. 4. Android Devices • Almost 19,000 devices(60% growth yearly) adhamenaya.com 4
  5. 5. Motivation (2) How can we change the UI depending on the device ? By using Android Resources adhamenaya.com 5
  6. 6. Android Recourses • Color: declares the app color pallet • Drawable: images assets • Layout: xml file declares the app layout. • Menu: xml file declares the UI menu • Integer: integer values in xml and java codes. adhamenaya.com 6
  7. 7. Resources & Qualifiers • Screen Density: hdpi, mdpi … etc • Screen Size: large, small .. etc • Language: ar, en, ar-JO • Min Width: sw600dp, sw720dp • Screen Orientation: port and land • Android API level: v7, v8, v9 …etc adhamenaya.com 7
  8. 8. Resources & Qualifiers/Screen Destiny • Screen Destiny: quantity pixels(dots) per inch – ldpi: ~120dpi – mdpi: ~160dpi – hdpi: ~240dpi – xhdpi: ~360dpi – xxhdpi:480dpi – xxxhdpi: ~640dpi adhamenaya.com 8
  9. 9. Resources & Qualifiers/Screen Density adhamenaya.com 9
  10. 10. Resources & Qualifiers/Screen Destiny adhamenaya.com 10
  11. 11. Resources & Qualifiers/Screen Size • xlarge screens are at least 960dp x 720dp > 7 inch • large screens are at least 640dp x 480dp 5-7 inch • normal screens are at least 470dp x 320dp 3.0-4.7 inch • small screens are at least 426dp x 320dp 2.2-2.7 inch adhamenaya.com 11
  12. 12. Resources & Qualifiers/Screen Size • Android screen resolution distribution in China. (Umeng data) adhamenaya.com 12
  13. 13. How to use Qualifiers? • Create new directory in res/ folder • The name of the folder in this format: – <resources_name>-<qualifier> – Resource name: such drawable, layout … – Qualifier: such as hdpi, mdpi, land, port… adhamenaya.com 13
  14. 14. Android resources example • drawable/: for every thing • drawable-en/ : for English locale • drawable-en-port/ : for English and in portrait orientation • drawable-en-notouch-12key/ : For English and in notouch devices and 12key as primary input • drawable-port-ldpi/ : for low density screen and in portrait orientation adhamenaya.com 14
  15. 15. Android resources example(2) • layout-v4: API level (android 1.6) • layout- h720dp: Available height 720 • Layout-sw600dp: Smallest width 600 Same application with different layouts for each device. adhamenaya.com 15
  16. 16. Using Butter Knife Library (1) • Inject Views and view events in activities and fragments. • Notation –based. By : Jake Wharton (Square). adhamenaya.com 16
  17. 17. Using Butter Knife Library (2) • Using findViewById adhamenaya.com 17
  18. 18. Using the Butter Knife Library (3) • Add dependency to build.gradle: – compile 'com.jakewharton:butterknife:6.1.0‘ • In the onCreate() method of the activity, before using any the views, call inject on the Butterknife object: – ButterKnife.inject(this); adhamenaya.com 18
  19. 19. ButterKnife / Insatiate the view (4) • Use: – @InjectView(R.id.sample_textview); – TextView textview; • Rather than: – TextView textview; – textview = (TextView)findViewById(R.id.sample_textview); adhamenaya.com 19
  20. 20. Butter Knife / View Events(5) • Use: @OnClick(R.id.sample_textview) public void showToastMessage(){ // DO SOTHING …. } adhamenaya.com 20
  21. 21. Android Design Pattern Model-View-Presenter (MVP) adhamenaya.com 21
  22. 22. What is MVP? • The MVP pattern allows separate the presentation layer(UI) from the business logic adhamenaya.com 22
  23. 23. Why use MVP? • Android activities are closely coupled to both interface and data. – Such as: CursorAdapter (View)+Cursor(data) • Application to be easily extensible and maintainable. – Such as: changing the data access (from local database to web service). • Easier to test each interface alone. adhamenaya.com 23
  24. 24. How to implement MVP ? • MVP architecture consists of 3 layers: – View – Presenter – Model View Presenter Model User Event Update Model Update view State Changed event adhamenaya.com 24
  25. 25. MVP: VIEW • Activity, Fragment, View … • Has a reference to the Presenter • Propagates evens from UI to the Presenter. (such as onClick) • Exposes methods that controls the presentation objects. (Such as Show/Hide progress bar) adhamenaya.com 25
  26. 26. MVP: PRESENTER • Middle-man Between the View and Presenter • Has reference to View and Model. • Introduce a level of abstraction to the data coming from the model, and formats it before sending it to the view (this makes the View and Model independent). • Updates the UI, the difference to the MVC. adhamenaya.com 26
  27. 27. MVP: Model (Interactor) • Gateway towards the business logic. • Contains methods to for data retrival. adhamenaya.com 27
  28. 28. MVP Conventions • MVP – Views: ExampleView – Listeners: ExampleListener – Presenters: ExamplePresenter • > impl: ExamplePresenterImpl – Interactors: ExampleInteractor • > impl: ExmpleInteractorImpl adhamenaya.com 28
  29. 29. MVP Example Activity Presenter Network Interactor Press Login Button valiadteAccount() loginSuccess() networkSuccess() loginFailue() networkFailure() adhamenaya.com 29
  30. 30. MVP Example: Login adhamenaya.com 30
  31. 31. Login Sequence LoginActivity PresenterImpl (onLoginFinsishedListener) InteractorImpl attempLogin(..) validateCredentials(..) onSuccess() navigateToMainActivity() onError() loginFaild() loginTapped() Web Service adhamenaya.com 31
  32. 32. MVP vs. MVC • MVP Pattern – View is more loosely coupled to the model. The presenter is responsible for binding the model to the view. – Easier to unit test because interaction with the view is through an interface – Usually view to presenter map one to one. Complex views may have multi presenters. adhamenaya.com 32
  33. 33. MVP architecture adhamenaya.com 33
  34. 34. MVP vs. MVC • MVC Pattern – Controller are based on behaviors and can be shared across views – Can be responsible for determining which view to display 34adhamenaya.com
  35. 35. MVC architecture adhamenaya.com 35
  36. 36. Some Advices • Avoid expensive tasks on the UI thread. • Avoid code duplicity • Use themes, styles and colors properly. • Think in UI layer as isolated domain. • Write testable code and test it. • Measure the UI performance using the performance measure tools. adhamenaya.com 36
  37. 37. Any Questions? Contact me: a.it@hotmail.com adhamenaya.com 37

×