18. My session topics
Some tips on developing Apps
for multi versions and multi devices.
2.x 3.x 4.x
Handsets Tablets
19. What is “Sekai Phone”?
Real time translation phone services
(Supports Android 2.x/3.x/4.x & multi devices)
)
English German
Japanese
○ ○
○
Italian
French
○ ○ Chinese
Publishe Date: Jan, 2010, over 20+ ver.up
20. Use Case (1)
Phone mode
(Auto translating to receiver’s native language)
English Japanese
Hello!
Talking Konnichiwa!
Talking
Paul Kenichi
Thanks! Arigatou!
21. Use Case (2)
Talk mode
(Auto translating on the spot)
English Japanese
23. Platform Versions?
Honeycomb
ICS
JB
Gingerbrea
Others
d
Froyo
This data by Google on October 1, 2012
In my App:
Main Target: Android 2.2+ (2.2,2.3,3.x,4.x)
24. Screen Sizes & Densities?
This data by Google on October 1, 2012
In my App:
(normal,large,xlarge)x(mdpi,hdpi,xhdpi)
27. Support multi versions and multi
devices?
1.Designing User Interface
Screen size
Screen density
Screen orientation
…
2.Using APIs
Fragment
Menu
…
29. [UI]1st Approach
Using layout-small/normal/large/xlarge
Screen Size
Classification
Supports Android 1.6+
Both 7” tablet and 5” handset mapped to “large”
Pre 3.0 some devices mis-classified
30. [UI]2nd Approach
Using sw<N>dp,w<N>dp,h<N>dp
(a)layout-sw600dp Width & Height ≥ 600dp
(b)layout-w720dp Width ≥ 720dp
(c)layout-h480dp Height ≥ 480dp
Recommended by Google
Supports only Android 3.2+
Note: Effect by Screen Orientation
31. [UI]3rd Approach
Combination of 1st and 2nd
res/layout-sw600dp/main.xml <- 3.2+ tablets
res/layout-xlarge/main.xml <- 3.0/3.1 tablets
res/layout/main.xml <- The others (Handsets)
Supports Android 1.6
Supports many devices (compared to 1st or 2nd)
Any Problem?
32. [UI]4th Approach
Based on 3rd , plus some tips
• Put minimum requirement
for layouts
33. [UI]4th Approach
Based on 3rd , plus some tips (Layout Aliases)
// for Tablets
<resources>
<item name "main_layout" type="layout">
@layout/main_twopanes
</item>
<bool name="has_two_panes">
true
</bool>
</resources>
34. [UI]4th Approach
Based on 3rd , plus some tips (Layout Aliases)
// for Tablets
<resources>
<item name "main_layout" type="layout">
@layout/main_twopanes
</item>
<bool name="has_two_panes">
true
</bool>
</resources>
boolean hasTwoPanes =getResources().
getBoolean(R.bool.has_two_panes);
if (hasTwoPanes)
…
• Simple Java codes