Creating apps that work on all screen sizes
•Descargar como PPTX, PDF•
10 recomendaciones•29,533 vistas
My presentation at droidcon. Please note , the slides by themselves are pretty mute , I would be pinning down some blogposts soon. Also note on slide 8 the image on the top is incorrect [ and was on droidcon too :( ]
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (9)
Similar a Creating apps that work on all screen sizes
Similar a Creating apps that work on all screen sizes (20)
Más de Ravi Vyas
Último
Último (20)
Creating apps that work on all screen sizes
- 1. Ravi Vyas
- 2. • Android Developer, Project Manager at Techjini Solution Pvt Ltd • Co-Organizer of the Bangalore Android User Group • Creator of the Blrdroid logos
- 3. • Screen size • Screen density • Orientation • Resolution
- 4. • Phones are not always • Android phones flavors : • Different screne sizes • Different screen densities • Always have a design plan for both portrait and landscape : • Landscape != Portrait + Δwidth - Δheight
- 5. • Use the <supports-screens> tag in the manifest to specify which screens you plan to support • <supports-screens android:smallScreens="true" android:normalScreens="true" android:largeScreens="true" android:xlargeScreens="true“ />
- 6. • You can provide different resources & layouts based on various factors like screen size , screen pixel density , orientation etc layout-land layout-port res-hdpi res-mdpi Android will handle changes by itself • Manually handle configuration changes onConfigurationChanged(Configuration newConfig) android:configChanges="keyboard|orientation"
- 7. • Do not use PX to specify size • Use rules for placement for pixel distances • Rethink, recheck your rules . • Check how alignParentLeft/Right will look on other screens
- 8. • 9 Patches
- 9. • XML Drawables <item android:id="@android:id/background"> <shape> <corners android:radius="15dip" /> <gradient android:startColor="#ff9d9e9d" android:centerColor="#ff5a5d5a" android:centerY="0.75" android:endColor="#ff747674" android:angle="270" /> </shape> </item>
- 11. • While designing the UI enter real sample data to better visualize the UI. • When displaying numbers , use the largest possible number to test • Don’t trust emulator. • Test on as many devices as possible. • Motodev Studio – Device Anywhere
- 12. • contact@ravivyas.co m • @ravivyas84 • Ravivyas.com/+
Notas del editor
- Screen size Actual physical size, measured as the screen's diagonal.For simplicity, Android groups all actual screen sizes into four generalized sizes: small, normal, large, and extra large.Screen density The quantity of pixels within a physical area of the screen; usually referred to as dpi (dots per inch). For example, a "low" density screen has fewer pixels within a given physical area, compared to a "normal" or "high" density screen.For simplicity, Android groups all actual screen densities into four generalized densities: low, medium, high, and extra high.Orientation The orientation of the screen from the user's point of view. This is either landscape or portrait, meaning that the screen's aspect ratio is either wide or tall, respectively. Be aware that not only do different devices operate in different orientations by default, but the orientation can change at runtime when the user rotates the device.Resolution The total number of physical pixels on a screen. When adding support for multiple screens, applications do not work directly with resolution; applications should be concerned only with screen size and density, as specified by the generalized size and density groups.Density-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.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. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities
- One of the biggest thing stopping you for supporting all screens is that most people think of the phone as a candy bar , so much so that a rectangle with the small dot at the bottom is considered an icon for a phone.Android is open source thus there are so many options with so many different configurationsIts totally fine to have different layouts for landscape, so much so that you may decide to hide some components
- Lets you specify the screen sizes your application supports and enable screen compatibility mode for screens larger than what your application supports. It's important that you always use this element in your application to specify the screen sizes your application supports. if your application does not work well when resized to fit different screen sizes, you can use the attributes of the <supports-screens> element to control whether your application should be distributed to smaller screens or have its UI scaled up ("zoomed") to fit larger screens using the system's screen compatibility mode.
- For orientation changes make sure you handle the orientation changes . Default orientation change restarts the activity
- PX does not scale for different screen sizesA center aligned wrapcontent image will look fine a small screen but as the screen size increases the empty space on the left and rigth will increaseDensity-independent pixel (dp)A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.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. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities
- They also save size
- <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" />android:centerXFloat. The relative X-position for the center of the gradient (0 - 1.0).android:centerYFloat. The relative Y-position for the center of the gradient (0 - 1.0).
- <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" />android:centerXFloat. The relative X-position for the center of the gradient (0 - 1.0).android:centerYFloat. The relative Y-position for the center of the gradient (0 - 1.0).
- <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" />android:centerXFloat. The relative X-position for the center of the gradient (0 - 1.0).android:centerYFloat. The relative Y-position for the center of the gradient (0 - 1.0).
- <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" />android:centerXFloat. The relative X-position for the center of the gradient (0 - 1.0).android:centerYFloat. The relative Y-position for the center of the gradient (0 - 1.0).