Embed Size (px)
Citation preview
adhamenaya.com 1
Android Effective UITips, Tricks and Patterns
Adham Enaya
adhamenaya.com 2
Topics
• Introduction• Resources and qualifiers• Using ButterKnife Library• Model View Presenter (MVP)• Some advices
adhamenaya.com 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 4
Android Devices
• Almost 19,000 devices(60% growth yearly)
adhamenaya.com 5
Motivation (2)
How can we change the UI depending on the device ?
By using Android Resources
adhamenaya.com 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 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 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 9
Resources & Qualifiers/Screen Density
adhamenaya.com 10
Resources & Qualifiers/Screen Destiny
adhamenaya.com 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 12
Resources & Qualifiers/Screen Size
• Android screen resolution distribution in China. (Umeng data)
adhamenaya.com 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 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 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 16
Using Butter Knife Library (1)
• Inject Views and view events in activities and fragments.
• Notation –based. By : Jake Wharton (Square).
adhamenaya.com 17
Using Butter Knife Library (2)
• Using findViewById
adhamenaya.com 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 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 20
Butter Knife / View Events(5)
• Use:@OnClick(R.id.sample_textview)public void showToastMessage(){
// DO SOTHING ….
}
adhamenaya.com 21
Android Design Pattern
Model-View-Presenter (MVP)
adhamenaya.com 22
What is MVP?
• The MVP pattern allows separate the presentation layer(UI) from the business logic
adhamenaya.com 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 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 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 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 27
MVP: Model (Interactor)
• Gateway towards the business logic.• Contains methods to for data retrival.
adhamenaya.com 28
MVP Conventions
• MVP– Views: ExampleView– Listeners: ExampleListener– Presenters: ExamplePresenter• > impl: ExamplePresenterImpl
– Interactors: ExampleInteractor• > impl: ExmpleInteractorImpl
adhamenaya.com 29
MVP Example
Activity Presenter NetworkInteractor
Press Login Button valiadteAccount()
loginSuccess() networkSuccess()
loginFailue() networkFailure()
adhamenaya.com 30
MVP Example: Login
adhamenaya.com 31
Login Sequence LoginActivity PresenterImpl
(onLoginFinsishedListener)InteractorImpl
attempLogin(..)validateCredentials(..)
onSuccess()navigateToMainActivity()
onError()
loginFaild()
loginTapped()Web
Service
adhamenaya.com 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 33
MVP architecture
adhamenaya.com 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
adhamenaya.com 35
MVC architecture
adhamenaya.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.
