Android Effective UI: Tips, Tricks and Patterns
Download as PPTX, PDF0 likes1,265 views
The document discusses tips and patterns for effective Android user interfaces. It covers using resources and qualifiers to customize UI for different devices, introduces the Model-View-Presenter pattern to separate business logic from UI, and recommends the ButterKnife library to simplify view injection. The Model-View-Presenter pattern is explained as having three layers - the view displays data, the presenter handles user input and updates the model, and the model manages the business logic and data.
Android Effective UI: Tips, Tricks and Patterns
- 1. Android Effective UI Tips, Tricks and Patterns Adham Enaya adhamenaya.com 1
- 2. Topics • Introduction • Resources and qualifiers • Using ButterKnife Library • Model View Presenter (MVP) • Some advices adhamenaya.com 2
- 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. Android Devices • Almost 19,000 devices(60% growth yearly) adhamenaya.com 4
- 5. Motivation (2) How can we change the UI depending on the device ? By using Android Resources adhamenaya.com 5
- 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. 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. 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. Resources & Qualifiers/Screen Density adhamenaya.com 9
- 10. Resources & Qualifiers/Screen Destiny adhamenaya.com 10
- 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. Resources & Qualifiers/Screen Size • Android screen resolution distribution in China. (Umeng data) adhamenaya.com 12
- 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. 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. 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. Using Butter Knife Library (1) • Inject Views and view events in activities and fragments. • Notation –based. By : Jake Wharton (Square). adhamenaya.com 16
- 17. Using Butter Knife Library (2) • Using findViewById adhamenaya.com 17
- 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. 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. Butter Knife / View Events(5) • Use: @OnClick(R.id.sample_textview) public void showToastMessage(){ // DO SOTHING …. } adhamenaya.com 20
- 21. Android Design Pattern Model-View-Presenter (MVP) adhamenaya.com 21
- 22. What is MVP? • The MVP pattern allows separate the presentation layer(UI) from the business logic adhamenaya.com 22
- 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. 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. 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. 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. MVP: Model (Interactor) • Gateway towards the business logic. • Contains methods to for data retrival. adhamenaya.com 27
- 28. MVP Conventions • MVP – Views: ExampleView – Listeners: ExampleListener – Presenters: ExamplePresenter • > impl: ExamplePresenterImpl – Interactors: ExampleInteractor • > impl: ExmpleInteractorImpl adhamenaya.com 28
- 29. MVP Example Activity Presenter Network Interactor Press Login Button valiadteAccount() loginSuccess() networkSuccess() loginFailue() networkFailure() adhamenaya.com 29
- 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
- 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
- 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. Any Questions? Contact me: [email protected] adhamenaya.com 37