• Resources and qualifiers
• Using ButterKnife Library
• Model View Presenter (MVP)
• Some advices
• 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.
How can we change the UI
depending on the device ?
By using Android Resources
• Color: declares the app
• Drawable: images
• Layout: xml file declares
the app layout.
• Menu: xml file declares
the UI menu
• Integer: integer values
in xml and java codes.
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
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
Resources & Qualifiers/Screen Size
• Android screen resolution distribution in China. (Umeng data)
How to use Qualifiers?
• Create new directory in res/ folder
• The name of the folder in this format:
– Resource name: such drawable, layout …
– Qualifier: such as hdpi, mdpi, land, port…
Android resources example
• drawable/: for every thing
• drawable-en/ : for English locale
• drawable-en-port/ : for English and in portrait
• drawable-en-notouch-12key/ : For English
and in notouch devices and 12key as primary
• drawable-port-ldpi/ : for low density screen
and in portrait orientation
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.
Using Butter Knife Library (1)
• Inject Views and view events in activities and
• Notation –based. By : Jake Wharton (Square).
Using Butter Knife Library (2)
• Using findViewById
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:
What is MVP?
• The MVP pattern allows separate the
presentation layer(UI) from the business logic
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
– Such as: changing the data access (from local
database to web service).
• Easier to test each interface alone.
How to implement MVP ?
• MVP architecture consists of 3 layers:
View Presenter Model
User Event Update Model
Update view State Changed
• 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
• 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.
MVP: Model (Interactor)
• Gateway towards the business logic.
• Contains methods to for data retrival.
MVP vs. MVC
• MVP Pattern
– View is more loosely coupled to the model. The
presenter is responsible for binding the model to
– 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.
• 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.
Contact me: firstname.lastname@example.org