This document provides tips for designing mobile applications for Android phones. It recommends creating a base design for 960 x 1440 pixels to support multiple screen densities. It discusses designing backgrounds using colors, gradients, images or patterns, and strategies for dealing with full-screen images across different devices. It also covers designing foreground elements for non-scrollable, vertically scrollable, horizontally scrollable, or two-direction scrollable content. The document outlines strategies for laying out each type of content depending on varying screen widths and heights.

1. TIPS FOR DESIGNERS: FROM A DEVELOPER

2. Create base design for 960 X 1440 (this is 3 times
of 320 X 480: base size and base density (mdpi)
for Android phones)
TBD
BASE DESIGN

3. Two parts of screen for designing:
 Background
 Foreground elements
BASE DESIGN

4. Background could be following:
 Color
 Gradient
9-patch drawable
Repeating pattern
Full screen image
If background is anything other than full screen
image, it will stretch without any issue.
DESIGN BACKGROUNDS OF SCREENS

5. Not a recommended approach. TBD
DEALING WITH FULL SCREEN BACKGROUND

6. If we still need to use this approach we have
following options:
1. Use Image with largest supported dimension
2. Keep it in center and add a colored border
around it
3. Can stretch it to full screen (aspect ratio will
not be maintained)
DEALING WITH FULL SCREEN BACKGROUND

7. Can use a bigger background image (to fit largest
available device), and keep it in center so on
smaller devices image will be cropped from
center.
APPROACH 1: USE IMAGE WITH LARGEST
SUPPORTED DIMENSION

8. APPROACH 1:BACKGROUND IMAGE TO BE USED

9. APPROACH 1:CROP THE IMAGE TO 1080 X
1920: LARGEST SUPPORTED SIZE

10. APPROACH 1: HOW THIS IMAGE WILL LOOK IN
NEXUS 5 AND IN NEXUS S

11. TBD
APPROACH 2:KEEP IT IN CENTER AND ADD A
COLORED BORDER AROUND IT

12. TBD
APPROACH 3:CAN STRETCH IT TO FULL SCREEN

13. Foreground screens could be divided in four
categories:
Non scrollable content
Vertically scrollable content
Horizontally scrollable Content
Content is scrollable in both direction
DESIGN FOREGROUND ELEMENTS

14. Either content could be in center or left aligned
What if we need to show the content full screen?
TBD
STRATEGIES FOR NON SCROLLABLE CONTENT

15. We don’t need to bother about display height, as
our scrollable content will take care of it.
What we can do for extra display width?
STRATEGIES FOR VERTICALLY SCROLLABLE
CONTENT

16. We don’t need to bother about display width, as
our scrollable content will take care of it.
What we can do for extra display height?
STRATEGIES FOR HORIZONTALLY SCROLLABLE
CONTENT

17. STRATEGIES FOR CONTENT THAT IS SCROLLABLE IN
BOTH DIRECTION

18. This is just an outline document, I will cover the
topic in detail during the session.
Alok Vaish
Vinsol