Example Android project for learning how to support devices with different screen sizes, densities, and orientations.
If the Android Studio layout preview shows an error by default, then edit
res/values/styles.xmlas follows: change: <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> to: <style name="AppTheme" parent="Base.Theme.AppCompat.Light.DarkActionBar">
Reading:
- http://developer.android.com/training/multiscreen/index.html
- http://developer.android.com/guide/practices/screens_support.html
A good reference for information about the current Android version and device sizes in use is:
Screen variations refers to differences in screen size, screen density and orientation. Layouts and images must have variations for each combination of screen size, screen density and orientation.
Added this in the manifest.
Create multiple layout directories that represent each screen size that your app supports. By default, each layout directory represents a layout for the portrait orientation.
There are two types of size qualifiers that we must add:
- small, normal, large, etc.: To support devices from Android 3.1 (API 12) and earlier.
- sw: To support devices from Android 3.2 (API 13) and higher.
- res/layout
- res/layout-land
- res/layout-small: rarely used smaller phone
- res/layout-normal: phone
- res/layout-large: 7" tablets and above
- res/layout-xlarge: 10" tablets and above
Map <= Android 3.1 (API 12) layout sizes to >= Android 3.2 (API 13) layout sizes
| <= Android 3.1 | >= Android 3.2 | Device |
|---|---|---|
| layout-small | sw320dp | |
| layout-normal | sw | normal phone |
| layout-large | sw600dp | 7" tablet |
| layout-large-land | w600dp | multi-pane layout |
| layout-xlarge | sw720dp | 10" tablet (incl. Nexus 9); multi-pane layout with lrg details |
- 320dp: a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
- 480dp: a tweener tablet like the Streak (480x800 mdpi).
- 600dp: a 7” tablet (600x1024 mdpi).
- 720dp: a 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc).
Example sizes for a few devices:
nexus 7: layout-large-hdpi nexus 10: layout-xlarge-xhdpi
Create multiple layout directories that represent each landscape orientation + screen size that your
app supports. Append -land to each directory that is for the landscape orientation.
- res/layout
- res/layout-land
- res/layout-small
- res/layout-normal
- res/layout-large
- res/layout-xlarge
The complete set of directories for each size x orientation variation is shown below:
- res/layout
- res/layout-land
- res/layout-small
- res/layout-small-land
- res/layout-normal
- res/layout-normal-land
- res/layout-large
- res/layout-large-land
- res/layout-xlarge
- res/layout-xlarge-land
Screen variations require that you create multiple images of various sizes for each image that is used in your app. There are four screen densities that need to be supported:
| Density | Description | x of mdpi | Example device(s) |
|---|---|---|---|
| xxhdp | Extra extra high DPI | 3.0 | |
| xhdpi | Extra high DPI | 2.0 | |
| hdpi | High DPI | 1.5 | |
| mdpi | Medium DPI | 1.0 | |
| ldpi | Low DPI | 0.75 |
mdpi is the baseline image size. xhdpi is 2.0x (or double) the size of the mdpi image. xdpi
is 1.5x the mdpi image size. ldpi is .75x the size of the mdpi image size.
Create the following directories to support the various screen densities:
- res/drawable-xxhdpi
- res/drawable-xhdpi
- res/drawable-hdpi
- res/drawable-mdpi
- res/drawable-ldpi
Example sizes for a few devices:
- nexus 5: drawable-xxhdpi
- nexus 6: drawable-xxxhdpi. However, it has to scale these down slightly as the phone is between xxxhdpi and xxhdpi.
- nexus 9: drawable-xhdpi
cd into this project, then run the following script.
./screen-variations.sh