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.

adhamenaya.com 37

Any Questions?

Contact me: a.it@hotmail.com