cs 696 mobile phone application development fall semester
DESCRIPTION
TRANSCRIPT
![Page 1: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/1.jpg)
CS 696 Mobile Phone Application DevelopmentFall Semester, 2009Doc 19 Screen Sizes
Nov 19, 2009
Copyright ©, All rights reserved. 2009 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.
![Page 2: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/2.jpg)
References
2
Supporting Multiple Screens, http://developer.android.com/guide/practices/screens_support.html
![Page 3: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/3.jpg)
Screen Size/Density
3
Low density (120), ldpi Medium density (160), mdpi High density (240), hdpi
Small screen
QVGA (240x320), 2.6"-3.0" diagonal
Normal screen
WQVGA (240x400), 3.2"-3.5" diagonal
FWQVGA (240x432), 3.5"-3.8" diagonal
HVGA (320x480), 3.0"-3.5" diagonal
WVGA (480x800), 3.3"-4.0" diagonal
FWVGA (480x854), 3.5"-4.0" diagonal
Large screen
WVGA (480x800), 4.8"-5.5" diagonal
FWVGA (480x854), 5.0"-5.8" diagonal
![Page 4: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/4.jpg)
Test Your Application on Multiple Screens
4
QVGA (240x320, low density, small screen)HVGA (320x480, medium density, normal screen)WVGA800 (480x800, high density, normal screen)WVGA854 (480x854 high density, normal screen)
Android 2.0WQVGA400 (240x400, low density, normal screen)WQVGA432 (240x432, low density, normal screen)
![Page 5: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/5.jpg)
Getting correct size screen
5
Create an AVD for the target screen size & density
Tell the emulator your monitors density
emulator -avd normal -scale 96dpi
![Page 6: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/6.jpg)
Difference Emulator Sizes
6
WVGA854
default emulator size Corrected for monitor density
![Page 7: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/7.jpg)
Supporting Multiple Screens
7
Resource Files for different size/density
Specify the supported Screen
![Page 8: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/8.jpg)
Specify the supported Screen
8
android:smallScreensandroid:normalScreensandroid:largeScreens android:anyDensity
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizable="true" android:anyDensity="true" /> </manifest>
![Page 9: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/9.jpg)
Resource Files for different size/density
9
Screen characteristic Qualifier
Size
small
normal
large
Density
ldpi
mdpi
hdpi
nodpi
Aspect ratiolong
notlong
Platform version v<api-level>
![Page 10: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/10.jpg)
res directory
10
res/layout/my_layout.xml // layout for normal screen sizeres/layout-small/my_layout.xml // layout for small screen sizeres/layout-large/my_layout.xml // layout for large screen sizeres/layout-large-land/my_layout.xml // layout for large screen size in landscape mode
res/drawable-ldpi/my_icon.png // icon image for low densityres/drawable-mdpi/dpi/my_icon.png // icon for medium densityres/drawable-hdpi/my_icon.png // icon image for high density
res/drawable-nodpi/composite.xml // density independent resource
![Page 11: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/11.jpg)
Runtime support
11
Pre-scaling of resources
Load size- or density-specific resources
If not available scale resource to needed size
![Page 12: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/12.jpg)
Runtime support
12
Auto-scaling of pixel dimensions and coordinates
If application does not support different screen densities
Android auto-scales absolute pixel coordinates, pixel dimension values, and pixel math
![Page 13: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/13.jpg)
Runtime support
13
Compatibility-mode display on larger screen-sizes
If current screen's size is larger than your application supports
Application is shown in supported size surrounded by black
![Page 14: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/14.jpg)
Density independence
14
Pre-scaling of drawable resources
Auto-scaling of device-independent pixel (dip) values
Auto-scaling of absolute pixel values used in the applicationwhen android:anyDensity="false"
![Page 15: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/15.jpg)
Best practices for Screen Independence
15
Prefer wrap_content, fill_parent and the dip unit to px in XML layout filesAvoid AbsoluteLayoutDo not use hard coded pixel values in your codeUse density and/or resolution specific resources
![Page 16: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/16.jpg)
Prefer wrap_content etc
16
wrap_content, fill_parent & diplayout_width="100dip"
Font sizes
sp (scale-independent pixel)Allows the user to scale the text
dipUser can't scale the text
![Page 17: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/17.jpg)
AbsoluteLayout
17
deprecated in Android 1.5
Use FrameLayout set layout_margin of children
![Page 18: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/18.jpg)
Don't hard-coded pixel values in your code
18
But you may need to know the actual pixel
scroll gesture - triggered when move by at least 16 pixels
HVGA16 pixels / 160 dpi = 1/10th of an inch
high (240) density display16 pixels / 240 dpi = 1/15th of an inch
![Page 19: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/19.jpg)
getContext().getResources().getDisplayMetrics().density
19
private static final float GESTURE_THRESHOLD_DIP = 16.0f;
// Convert the dips to pixelsfinal float scale = getContext().getResources().getDisplayMetrics().density;mGestureThreshold = (int) (GESTURE_THRESHOLD_DIP * scale + 0.5f);
scaling factor for the Density Independent Pixel
160dpi screen - 1.0120dpi screen - 0.75240dpi screen - 1.5
![Page 20: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/20.jpg)
Use pre-scaled configuration value
20
android.view.ViewConfiguration
ViewConfiguration.get(aContext).getScaledTouchSlop()
getScaledXXX()returns values in pixels that will display properly
![Page 21: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/21.jpg)
Pre-scaling, auto-scaling
21
resourcespre-scaled before displayedvalue of android:anyDensity does not affect pre-scaling
android:anyDensity=trueresources are pre-scaledoriginal sizes are reportedIf you modify the resource odd things may happen
nodpi resources are not scaled
BitmapFactory.Options gives control over pre-scaling
![Page 22: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/22.jpg)
Pre-scaling, auto-scaling
22
auto-scalingDone when creating bitmaps in memory and drawing on them
Drawing on the larger bitmap is different than scaling after drawing
![Page 23: CS 696 Mobile Phone Application Development Fall Semester](https://reader033.vdocuments.us/reader033/viewer/2022042714/54c82d844a7959e93d8b45c9/html5/thumbnails/23.jpg)
Pre-scaling versus auto-scaling
23
Effects of loading low(120dpi) medium(160)dpi & high(240 dpi) bitmaps on a medium screen