Coding for Different Android Screen sizes and Density By - PowerPoint PPT Presentation

Coding ¡for ¡Different ¡Android ¡ Screen ¡sizes ¡and ¡Density ¡ By ¡Robin ¡Srivastava ¡

Intended ¡Audience ¡ • Developers ¡of ¡Android ¡apps ¡ • Any ¡technological ¡enthusiast ¡ • Any ¡enthusiast ¡

Ques?ons ¡Answered ¡ ¡ • What ¡to ¡ask ¡from ¡a ¡graphic ¡designer? ¡ • What ¡to ¡do ¡once ¡the ¡graphic ¡designer ¡gives ¡ the ¡assets? ¡ • How ¡to ¡create ¡screen ¡layouts ¡which ¡are ¡ independent ¡of ¡screen-­‑size ¡and ¡screen-­‑ density? ¡ • What ¡screen-­‑sizes ¡and ¡densi?es ¡are ¡available? ¡ • Your ¡ques?ons ¡

Why ¡is ¡this ¡so ¡important? ¡ Some ¡stats ¡first ¡

Stat ¡1 ¡– ¡Android ¡OS ¡Distribu?on ¡

Stat ¡2 ¡– ¡Screen ¡Size ¡and ¡Density ¡

Stat ¡2 ¡– ¡Screen ¡Size ¡and ¡Density ¡ (contd..) ¡

Back ¡to ¡the ¡previous ¡ques?on ¡ Why ¡is ¡it ¡so ¡important? ¡ • Simple ¡mathema?cs ¡would ¡suggest ¡that ¡we ¡have ¡4 ¡* ¡4 ¡= ¡16 ¡ different ¡varia?ons ¡of ¡android ¡screen ¡size ¡and ¡density. ¡ ¡ • Each ¡of ¡these ¡sizes ¡and ¡density ¡comes ¡in ¡a ¡range, ¡so ¡ theore?cally ¡speaking ¡its ¡infinite ¡ • Prac?cally, ¡out ¡of ¡16 ¡there ¡are ¡only ¡12 ¡varia?ons ¡to ¡consider ¡ with ¡a ¡very ¡reasonable ¡devia?on ¡

12 ¡screen ¡varia?ons? ¡ • Is ¡it ¡low ¡or ¡high? ¡ • Android ¡gives ¡an ¡op?on ¡to ¡have ¡different ¡ folders ¡for ¡different ¡varia?ons. ¡ • If ¡we ¡s?ck ¡to ¡it ¡religiously, ¡we ¡are ¡talking ¡ about ¡having ¡12 ¡set ¡of ¡graphics, ¡each ¡with ¡ different ¡specs ¡

12 ¡screen ¡varia?ons? ¡ • Is ¡it ¡low ¡or ¡high? ¡ • Android ¡gives ¡an ¡op?on ¡to ¡have ¡different ¡ folders ¡for ¡different ¡varia?ons. ¡ • If ¡we ¡s?ck ¡to ¡it ¡religiously, ¡we ¡are ¡talking ¡ about ¡having ¡12 ¡set ¡of ¡graphics, ¡each ¡with ¡ different ¡specs ¡ A ¡small ¡change ¡of ¡direc?on ¡or ¡shadow ¡in ¡an ¡ arrow ¡icon ¡will ¡require ¡changing/crea?ng ¡11 ¡ more ¡assets ¡

What ¡we ¡didn’t ¡consider ¡in ¡the ¡ previous ¡slides ¡ • Large ¡TVs ¡ • Small ¡watches ¡

What ¡to ¡ask ¡from ¡a ¡graphic ¡designer? ¡ • One ¡word ¡answer ¡– ¡graphical ¡assets ¡ J ¡

What ¡to ¡ask ¡from ¡a ¡graphic ¡designer? ¡ • One ¡word ¡answer ¡– ¡graphical ¡assets ¡ J ¡ • But ¡the ¡real ¡ques?on ¡is, ¡do ¡we ¡really ¡need ¡ that ¡asset ¡we ¡are ¡asking ¡for? ¡

Some ¡ques?ons ¡to ¡ask ¡yourself ¡before ¡ asking ¡for ¡assets ¡ • Do ¡I ¡really ¡need ¡the ¡assets ¡to ¡display ¡a ¡kind ¡ dialog ¡box? ¡ • Those ¡fancy ¡texts, ¡do ¡I ¡really ¡need ¡an ¡image ¡ for ¡it? ¡ • Those ¡colored ¡lines ¡being ¡used, ¡do ¡I ¡really ¡ need ¡them ¡as ¡a ¡separate ¡image? ¡ • So ¡on ¡and ¡so ¡forth ¡

Giving ¡Rich ¡Look ¡Using ¡Views ¡ Font ¡Name ¡– ¡Roboto ¡ Color ¡Code ¡-­‑ ¡#33B5E5 ¡ Color ¡code ¡#33B5E5 ¡

If ¡you ¡really ¡need ¡an ¡asset ¡ • Is ¡it ¡some ¡basic ¡shape ¡or ¡intricate ¡image? ¡ – If ¡its ¡shape ¡try ¡to ¡use ¡ShapeDrawable ¡(demo), ¡else ¡ • Take ¡the ¡PNG ¡ • Convert ¡it ¡into ¡9-­‑patch ¡

9-­‑patch ¡Image ¡ • Stretchable ¡bitmap ¡ • Define ¡the ¡area ¡in ¡which ¡the ¡text ¡appears ¡

9-­‑patch ¡ • How ¡to ¡use ¡ – Tool ¡demo ¡ – App ¡demo ¡

When ¡9-­‑patch ¡might ¡not ¡work ¡ • Images ¡with ¡text ¡in ¡it ¡and ¡the ¡requirement ¡is ¡ stretching ¡of ¡text ¡too ¡(without ¡making ¡it ¡look ¡ bad) ¡ • Images ¡which ¡requires ¡very ¡fine ¡shadowing ¡ and ¡gradients ¡ • Characters ¡and ¡cartoons ¡with ¡intricate ¡designs ¡

When ¡9-­‑patch ¡might ¡not ¡work ¡ (contd…) ¡ • Need ¡different ¡images ¡for ¡different ¡resolu?on ¡

Providing ¡Alternate ¡Resources ¡ • <resource-­‑name> ¡-­‑ ¡<qualifier> ¡ • Famous ¡ones ¡ – drawable-­‑hdpi ¡ – drawable-­‑mdpi ¡ • Some ¡more ¡ ¡ – drawable-­‑fr-­‑hdpi ¡ – drawable-­‑sw600dp-­‑hdpi ¡ – drawable-­‑land ¡ – drawable-­‑long ¡ – drawable-­‑land-­‑v8 ¡ – etc ¡

For ¡the ¡en?re ¡list ¡ Open ¡developers’ ¡manual ¡for ¡providing ¡resources ¡

How ¡to ¡create ¡screen ¡size ¡and ¡density ¡ independent ¡layout? ¡ • First, ¡let’s ¡check ¡out ¡various ¡common ¡screen ¡ sizes ¡and ¡densi?es ¡

Some ¡terminologies ¡we ¡will ¡use ¡ • Screen ¡density ¡ – Number ¡of ¡dots ¡per ¡inch ¡of ¡the ¡screen. ¡A ¡medium ¡ density ¡device ¡has ¡an ¡average ¡of ¡160 ¡dots-­‑per-­‑inch ¡ • Resolu?on ¡ – Total ¡number ¡of ¡physical ¡pixels ¡ • Density ¡independent ¡pixel ¡(dp ¡or ¡dip) ¡ – The ¡density-­‑independent ¡pixel ¡is ¡equivalent ¡to ¡one ¡ physical ¡pixel ¡on ¡a ¡160 ¡dpi ¡screen, ¡which ¡is ¡the ¡ baseline ¡density ¡assumed ¡by ¡the ¡system ¡for ¡a ¡ “medium” ¡density ¡screen ¡ – px ¡= ¡dp ¡* ¡(dpi ¡/ ¡160) ¡

Screen ¡Sizes ¡and ¡Density ¡Ranges ¡

Resolu?ons ¡in ¡the ¡form ¡of ¡DP ¡ • Xlarge ¡– ¡960dp ¡x ¡720dp ¡ • Large ¡– ¡640dp ¡x ¡480dp ¡ • Normal ¡– ¡470dp ¡x ¡320dp ¡ • Small ¡– ¡426dp ¡x ¡320dp ¡

Back ¡to ¡the ¡ques?on ¡ • How ¡to ¡create ¡layouts ¡which ¡are ¡independent ¡ of ¡screen ¡sizes ¡and ¡densi?es? ¡ ¡ DEMO ¡

Some ¡Quick ¡Tips ¡ • DO ¡NOT ¡use ¡ px ¡ as ¡the ¡unit ¡of ¡text ¡sizes ¡and ¡ views ¡ • Use ¡ dp ¡while ¡giving ¡the ¡margins, ¡padding ¡or ¡ the ¡dimension ¡of ¡a ¡view ¡ • Give ¡the ¡text ¡size ¡is ¡ sp ¡

Some ¡Quick ¡Tips ¡ Header ¡ Use ¡ ¡ Content ¡ Linear ¡Layout ¡ Footer ¡

Some ¡Quick ¡Tips ¡ When ¡alignment ¡ rela?ve ¡to ¡other ¡ components ¡ maper ¡– ¡use ¡ Rela?ve ¡Layout ¡ ¡ It ¡is ¡the ¡most ¡ general ¡layout ¡ which ¡can ¡be ¡ used ¡for ¡laying ¡ out ¡components ¡ with ¡great ¡ flexibility ¡

E-­‑mail ¡– ¡robin@paradigmcrea?ves.com ¡