A guided tour in Android World

Fundamental Session 1

6-1-2016

© For internal use Who are we ? Practical Work - Session 1

▶ Maxime PERON ▶ François FACON ▶ Ibrahim GHARBI ▶ François Julien Ritaine SDCO Engineer Mobile software R&D Engineer Mobile Web & Mobile architect expert [email protected] [email protected] [email protected]

L’Appli Mon Coffre

Mes Transferts

Our job explained in 7 minutes (koreus.com)

2 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Quizz time About you… ▶ Go to http://www.socrative.com – Then click on « STUDENT LOGIN »

From A to H From I to Z

T6SXFNK4 CWVS25TY

▶ Wait until I start the Quizz, then enter your « first name » & « last name » like this: FirstName LastName ▶ Complete the Quizz…

3 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline About Worldline by Atos

4 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline About Worldline by Atos

5 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline About Worldline by Atos

R&D

Strategy, Marketing & Communication

Software Development Comunity Office

Technical Operations

Merchant Services Mobility & Financial Processing & e-Transactional & Terminals Services Software Licensing

Retail, industry, Telco, medias, Bank, finance, hardware governement, sport assurance

6 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Internships Objectives …What we will do together

1. Dive into 3. Work in a team The Android World and make great apps !

2. Take a look at 4. Share our an application experiences, (main structure, tools, to be more components, efficient GUI, tools…)

7 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Planning P2

Practical Work Project teams Project presentation

D1 D2 D3 D4 D5 D6 P1 P2 26/11 03/12 10/12 17/12 07/01 14/01 21/01 28/01

QUIZZ D1 QUIZZ D2 QUIZZ D3 QUIZZ D4 QUIZZ D5 QUIZZ D6 - A bit of History… - Layout - ListView - SQLite - CursorAdapter - Thread - Deep in - Activity - Custom Cell - SQLiteDatabase - ContentObserver android - Intent - AsyncTask - Custom - ContentValues - Service - Buttons - Fragment - Adapter - Cursor - Inside an - PendingIntent - Listeners - ViewHolder - ContentProvider Android - ListView - Toast application - ImageView - ContentResolver - AlarmManager - Adapter - Preferences - Bitmap - URI - BroadcastReceiver - Menu - LayoutInflater - Authority - Notification

Twitter Twitter Twitter Twitter Twitter Project Project App App App Hello World App App part 1 part 2 Step1 Step2 Step3 Step4 Step5

I.Gharbi I.Gharbi I.Gharbi I.Gharbi I.Gharbi I.Gharbi I.Gharbi I.Gharbi F.Facon F.Facon F.Facon F.Facon F.Facon F.Facon F.Facon F.Facon M.Peron FJ.Ritaine FJ.Ritaine

8 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Agenda

▶ A little bit of history … – The mobile world – Android ecosystem

▶ Deep in android – How my apps are running inside android ? – Android for a developer

▶ Inside an android application – Prepare your environment and create your first app ! – Structure of an application

9 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline A little bit of history….

The mobile world

10 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world From a simple phone to a « smart » one

2G : First Iphone 2G : Colors on Emergence of Android 1.0 First Phones Phone growth Web app & web phones released (80s) (end of 90s) Experience experience (2004) (1997) (2001) (2007) (2008)

Nokia Apple Nokia Sony Ericsson N95 Iphone HTC 3210 G1 Motorola T68i DynaTAC 8000X

L'HISTOIRE DU EN 25 TÉLÉPHONES EMBLÉMATIQUES (CLUBIC.COM)

11 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world A new device with new usages (1/2)

▶ 2010 : more Smartphones sales than PC

▶ 2013 : more tablets sales than PC in France

IL S’EST-VENDU PLUS DE TABLETTES QUE DE PC EN FRANCE EN 2013 (LE FIGARO)

12 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world A new device with new usages (2/2)

▶ Smartphone = consuming the Web

▶ Still less productivity than a standard PC

DIGITAL SOCIAL MOBILE, LES CHIFFRES (WEARESOCIAL.FR)

13 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world Mobile constraints

User Interface (UI) User Experience (UX)

!=

Bandwid Performa Ubiquity Battery Security Sensors th nce

for mobile need to be specific. ▶ it’s a compromise of all those constraints

14 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world

“An operating system (OS) is system software that manages computer hardware and software resources and provides common services for computer programs.” (Wikipedia)

OS mobile Timeline :

90s 2010 2017

2000 2015

15 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline The mobile world Market share

16 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline SMARTPHONE OS MARKET SHARE (KANTARWORLDPANEL.COM) The mobile world Manufacturer share

http://dazeinfo.com/2015/04/30/worl dwide-smartphone-shipments-q1- 2015-samsung-is-back-to-business/

SAMSUNG IS BACK TO BUSINESS 17 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline (DAZEINFO.COM) A little bit of history….

Android ecosystem

18 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android ecosystem What is android ?

▶ Mobile OS based on created in 2007 ▶ Designed to work on a large set – Develop open standards for mobile of devices devices ▶ Initially developed by a startup, ▶ AOSP ; open source version of bought by in 2005 android

19 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline A brief Android History

A BRIEF HISTORY OF ANDROID 20 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline (THE VERGE) Android ecosystem To summarize

M

2007 2015

▶ The platform evolved with lots of changes between each versions providing to developers new possibilities

ANDROID DE 2003 21 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline À AUJOURD’HUI (PRESSE-CITRON.NET) Android ecosystem Fragmentation (1/5) : Versions

22 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID VERSION FRAGMENTATION IN REAL TIME ! Android ecosystem Fragmentation (2/5) : Hardware fragmentation

▶ Differences : – CPU/GPU – Memory – Storage – Screen size – Density – Battery – Sensors

23 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID DEVICE FRAGMENTATION (OPEN SIGNAL) Android ecosystem Fragmentation (3/5) : Manufacturer / M(V)NO fragmentation

▶ Apps (browser , sms , photo manager …)

▶ GUI (Graphical ) – Samsung Touchwizz – HTC Sense – LG UX – Sony Timescape – …

▶ Android customization (custom room) – CyanogenMod – Remix OS …..

24 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android ecosystem Fragmentation (4/5) : Devices fragmentation

▶ Designed to run on a large set of devices : – Smartphone, Tablet – TV – Watch – Car player – Washing machine…

▶ … on specific operating system version :

Android M

25 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android ecosystem Fragmentation (5/5) : solutions ?

▶ For new theme, components, design pattern , backport exist : Use support library

▶ Android design ▶ support library services

▶ Google Cloud Testing ▶ Android system webview

26 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID SUPPORT LIBRARY Android ecosystem design history

Android iOS

(2012) Holo (2014) (2013) Flat design

27 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID MATERIAL DESIGN Agenda

▶ A little bit of history … – The mobile world – Android ecosystem

▶ Deep in android – How my apps are running inside android ? – Android for a developer

▶ Inside an android application – Prepare your environment and create your first app ! – Structure of an application

28 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Deep in android…

How my apps are running inside android ?

29 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline How my apps are running inside android ? 4 Fundamentals

▶ Language for your applications : – Java 6… not 7 !

▶ A Virtual Machine like JVM: – JIT – Compiled in DEX files

▶ Dalvik is now replaced by ART – experimental on 4.4 – fully integrated on android 5.x

▶ Application packaged in Android PacKage (APK) that contains : – .dex with Java classes – Manifest in binary – Resources (images, labels, themes, …)

30 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline How my apps are running inside android ? Simple architecture

▶ Both on KitKat ( Dalvik by default) ▶ ART only on Lollipop

31 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Architecture : the 5 rules

1. You developed in Java, your java files are compiled in .class files

2. “.class” files are converted by the compiler in DEX bytecode that is the code running on your virtual machine (Dalvik or ART) – DEX bytecode format is independent of device processor architecture (i386, x64, armv6…). You have 1 APK for every android devices in the world !

3. DEX bytecode needs to be translated to your native machine by the Runtime (Dalvik or ART)

4. Dalvik is based on Just-in-Time (JIT) compilation – Each time when the app is run, it dynamically translates a part of the Dalvik bytecode into machine code

5. ART is based on Ahead-of-Time (AOT) compilation – At app’s installation, DEX bytecode is translated into machine code and stores in the device’s storage. This is a one-time event.

32 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Full Architecture

33 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Deep in android…

Android for a developer

34 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Compilation (1/2)

▶ How from my java code I can build a fully functional APK working on my device ?

35 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Compilation (2/2)

36 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Developer toolbox

1. Documentation

2. An SDK (Java) for every version of Android

3. NDK (/C++) : native development kit

4. IDE

deprecated ADT plugin for VS based on IntelliJ

1. Debugging tools 2. Emulator (AVD) 3. Logs …and a lot more

ALL ANDROID DEVELOPPEMENT 37 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline TOOLS

Android for a developer Documentation / Guidelines / Training

http://developer.android.com/index.html

38 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID CHANGELOGS (ANDROID DEVELOPPER) Android for a developer Tool focus (1/6) : Android SDK Manager

▶ Install/update/delete – Android SDK – Tools – Drivers (for windows) – Additional API – External libraries (from Google) – System images (emulator)

39 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Tool focus (2/6) : Android Studio IDE

▶ IDE ▶ Launch simulator ▶ Debug tools ▶ … ▶ Access to AVD, SDK Manager

40 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Tool focus (3/6) : Android Studio IDE

41 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Tool focus (4/6) : Android Virtual Device (AVD) Manager ▶ Manage emulators – Based on provided images – Custom emulators

42 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Tool focus (4/6) : Dalvik Debug Monitor Server (DDMS)

▶ Monitor :

– Devices – Threads – Heap – Memory – Network – FS – Emulator – Logs…

43 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Android for a developer Tool focus (5/6) : Android Debug Bridge (ADB)

▶ Command line tool to communicate with an emulator instance or connected Android device

▶ Client/server program with a daemon

▶ List of commands – List connected devices – Install/uninstall apps – Push/Pull data…

44 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ADB COMMAND LINE TOOL (ANDROID DEVELOPPER) Android for a developer Tool focus (6/6) : Google Play Developer console

▶ 25$ once

▶ Publish your app

▶ Analyse feedbacks from users

▶ Get some sta tistics , usages

▶ Soon …Test your app !

45 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Agenda

▶ A little bit of history … – The mobile world – Android ecosystem

▶ Deep in android – How my apps are running inside android ? – Android for a developer

▶ Inside an android application – My first application – Structure of an application

46 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Inside an android application

My First Application

47 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Prerequires

▶A Laptop

▶SDK downloaded and installed https://goo.gl/DJXUN

▶An Android device to run your first projet

▶Or an emulator

▶Start Android studio

48 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application The twitter project

▶ During our next 5 sessions , we will try to make and improve a Twitter wall app

▶ This application will provide : – Authentication to the twitter feed – A page containing the wall – A detail page showing a twit

49 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application The twitter project : how it works

Activity Service HTTP Twitter API Fragment

UI

Notifications Model Preferences

50 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (1/6)

51 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (2/6)

52 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (3/6)

53 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (4/6)

54 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (5/6)

55 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Create an emulator in AVD

56 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My first application Start a project (6/6)

Build

Deploy

Run

Test

57 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline My First Application Start an android project

Create your first single activity project

58 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Inside an android application

Structure of an application

59 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline Structure of an application Agenda

▶Project settings ▶Permissions ▶Folder Structure ▶Resources ▶Manifest File – Folders ▶Application design – Dimentions – Internationalization ▶Activity – Drawables – lifecycle – Theme & style – Layout and views

60 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An android app from the inside “Project structure” menu : Your app configuration

▶ Build flavor, types ▶ Dependencies ▶ Services ▶ Modules….

61 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Folders structure

▶ src – Java classes ▶ gen – Auto-generated files (BuildConfig, R) ▶ assets – Raw files ▶ bin – Output directory of the build ▶ libs – Private libraries ▶ res – Resources : drawables, animations, string resources, layouts, …

62 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Manifest : the center point of an application

▶ ID card of your application : the central file that describes the nature of the application and each of its components

▶ It describes: – Activities – Services – Broadcast receivers – Content providers – Features needed/required – Requested Permissions – API level – …

63 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Application design

▶ MVC pattern – Model is your data structure – View loaded from XML layout – Controller is the Activity

▶ Other existing pattern for android : – MVVM (windows phone C# style) – MVP – Data Binding (introduced in Android Studio 1.3)

▶ http://developer.android.com/guide/components/activities.html

64 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (1/9) : Principles

▶ An Activity is an application component that provides a screen (such as dial the phone, take a photo, send an email, or view a map) ▶ Each activity is given a window in which to draw its user interface.

▶ Because state of your application changes, activity has a lifecycle

65 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (2/9) : Lifecycle

▶ Many event can occur when your app is running

▶ SDK use callback to properly handle lifecycle

▶ Three essential states : – Resumed • Running, in foreground

– Paused • Running, but another activity is on top • Other activity doesn’t cover the entire screen

– Stopped • In background, another activity is on top • Other activity covers the entire screen

66 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (3/9) : Lifecycle in your code

from

▶ An Activity is a java object with different types.

67 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (4/9) : Layout & Views

▶ An activity provide a user interface with a hierarchy of views packaged in a single layout file located on the Layout Folder

▶ The language to describe a layout is XML

▶ ViewGroup : used to layout multiple views

from

68 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (5/9) : Layout & Views

▶ You can edit your layout in plain XML or with the layout editor where you can drag and drop views

▶ It’s also possible to create a layout and views with code only.

69 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (6/9) : Layout & Views

▶ Android provides a number of ready-made views that you can use to customize and organize your layout.

70 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Activity (7/9) : Layout & Views

▶ The layout is provided to the activity programmatically by “setContentView” methods :

HOW EVERYTHING IS DRAWN 71 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline (INOVEX.DE) An Android app from the inside Activity (8/9) : the manifest declaration

▶ You must declare your activity in the manifest file in order for it to be accessible to the system.

▶ Lots of activity properties could be set inside the manifest (portrait/landscape mode, theme …)

MANIFEST PROPERTIES FOR AN 72 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ACTIVITY (ANDROID DEVELOPPER) An Android app from the inside Activity (9/9) : the manifest declaration

▶ “An Intent is a messaging object you can use to request an action from another app component ” (ex: activities)

▶ Intent filter : it specifies the type of intents accepted by the activity based on the intent's action, data, and category. The system will deliver an implicit intent to your app component only if the intent can pass through one of your intent filters.

▶ “Launcher” is the default one when you create an application

INTENT FILTERS 73 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline (ANDROID DEVELOPPER) An Android app from the inside Permissions

▶ Declares a security permission that can be used to limit access to specific components or features of this or other applications

PERMISSIONS (ANDROID DEVELOPPER)

NB : Before android 6.0, users validate permissions only at app install on google playstore. Now permission need to be accepted the first time the feature is used

74 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Resources (1/5): Folder description

▶ res/values – arrays • Define arrays (string, int, …) – attrs • Define some specific component attributes – colors • Define colors – dimens • Define dimensions used in the layouts – style • Customize application theme • Define style to be reused in other components

– strings • Define labels used in the app

75 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline

An Android app from the inside Resources (2/5): Dimensions

▶ Device (DP) or Device Independant Pixel (DIP) : – A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way

– In LDPI : 1dp = 0.75px – In MDPI : 1dp = 1px – In HDPI : 1dp = 1.5px – In XHDPI : 1dp = 2px – XXHDPI…

76 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Resources (3/5): : Drawables & DPIs

▶ Drawables (=images), depend on dpi – drawable : no density specified – drawable-ldpi : low density devices (~120dpi) – drawable-mdpi : medium density devices (~160dpi) – drawable-hdpi : high density devices (~240dpi) – drawable-xhdpi : extra high density devices (~320dpi) – drawable-xxhdpi : extra extra high density devices (~480dpi)

Nexus 4 ▶ Layout also support multiple screen size : ▶ 4,7 inch – layout-small : ~ 426dp x 320dp Galaxy Ace 3 ▶ Type normal

– layout-normal : ~ 470dp x 320dp ▶ 4 inch ▶ XHDPI ▶ Type normal

– layout-large : ~ 640dp x 480dp Galaxy Y ▶ HDPI ▶ 1280x768px - 3 inch

– layout-xlarge : ~ 960dp x 720dp - Type small ▶ 800x480px

- ldpi ▶ 317dpi ▶ 233dpi – … - 320x240px

- 133dpi

77 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline

An Android app from the inside Resources (3/5): : Calculate density 768px How many pixels for 4,7̋ ?

(7682 + 12802) = 1492, 72px

Which density ?

1280px 1492,72 = 317,6 dpi

4,7

78 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Resources (3/5): Determine size and density

768px ▶ Densities – drawable-ldpi : low density devices (~120dpi) – drawable-mdpi : medium density devices (~160dpi) 384dp – drawable-hdpi : high density devices (~240dpi) – drawable-xhdpi : extra high density devices (~320dpi)

– drawable-xxhdpi : extra extra high density 640

1280 devices (~480dpi) dp

px ▶ Screen size

– layout-small : ~ 426dp x 320dp ▶ 4,7 inch

– layout-normal : ~ 470dp x 320dp ▶ Type normal – layout-large : ~ 640dp x 480dp ▶ XHDPI – layout-xlarge : ~ 960dp x 720dp ▶ 1280x768px 317dpi – … ▶ 317dpi

Remember, in XHDPI, 1dp = 2px

79 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Resources (3/5): How many UI to manage ?

80 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline ANDROID DASHBOARD Exercise Screen densities

Calculate your Smartphone screen size and density

81 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline An Android app from the inside Resources (4/5): management

▶ Internationalization (I18n) – res/values – res/values-fr – res/values-de – …

▶ OS version specific – res/values-v11 – res/values-v14

▶ Size/density dependant – values/w820dp – values/sw600dp SCREEN SIZES (ANDROID DEVELOPPER)

82 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline

An Android app from the inside Resources (5/5): Theme & Style

▶ Located in res/values/style.xml or res/values/theme.xml it’s near CSS class principles :

– Define your own app theme – Change colors – Change component UI

▶ OS version specific theme is possible – res/values/style.xml – res/values-v11/style.xml – …

83 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline

Exercise Your first layout

▶ Create a new layout file My Profile ▶ Use LinearLayout as base ViewGroup

▶ With orientation:vertical Michel Moustache ▶ Translate in English and French Age : 32 City of birth : Arras

Status : First Android ▶ Run on emulator or physical device training today ! 

Edit profile

84 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline TODO For next week

Android Studio Import your twitter project skeleton 1.3+ You can download sources at 2.4 Android Gradle Plugin http://awl.li/ISENBaseApp 1.1.0 Build tools 21.1.2 Minimum SDK 14 Targeted SDK 21 SupportV4 version 21.0.+ AppCompat version 21.0.3

85 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline That’s all for Today

▶ Threesome programming next week, – find your partners

▶ Bring your computer

▶ Be ready for 1st Quizz…

Download this presentation here http://awl.li/ISENSession1

86 | 1/6/2016 | Maxime Peron, Bruno Verachten, Ibrahim Gharbi, François Facon © Worldline