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

30. MVP Example: Login
adhamenaya.com 30

31. Login Sequence
LoginActivity PresenterImpl
(onLoginFinsishedListener)
InteractorImpl
attempLogin(..)
validateCredentials(..)
onSuccess()
navigateToMainActivity()
onError()
loginFaild()
loginTapped()
Web
Service
adhamenaya.com 31

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. MVP architecture
adhamenaya.com 33

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. MVC architecture
adhamenaya.com 35

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: a.it@hotmail.com
adhamenaya.com 37