Working With Android and Multiple Screens
You can target an unlimited number of Android devices in your PSD, then copy your design to various target screens after you approve your default device design
.
All assets and layouts are generated by Export Kit from your PSD to Android output. Each target screen will generate an individual layout and drawable folder for the screen assets, but only one Java Activity is created per Android layout.
IMPORTANT:800px
in your PSD will target2560 xhdpi
– you must consider pixel to dpi conversion or download our Android PSD templates and start there.
PSD to Android XML – Multiple Device Support
This guide will show your custom Android XML UI targeting multiple devices from your PSD to Android XML export.
Device Layouts
You should have an idea of the screens you are targeting and their DPI settings before you create your PSD design for multiple Android screens. Each device you target should have a CSS Screen reflective of the device size.
${css|screen:800} p-2560 xhdpi / 1280 mdpi
${css|screen:960} l-1200 xhdpi / 1080 mdpi
${css|screen:600} p-1200 xhdpi / 1080 mdpi
${css|screen:384} p-768 xhdpi
${css|screen:360} p-720 xhdpi / 1080 xxhdpi
${css|screen:533} l-480 hdpi
${css|screen:320} p-480 hdpi
All assets and elements placed in the CSS Screen folder will resize to match the Android layout in the output.
NOTE: If you are targeting 4 devices, you may have up to 4 target screens.
IMPORTANT: Because Android use DPI and Adobe uses Pixels, some text elements may need to resize - learn more.
Screen Orientation
Most Android devices change their screen size each time the user changes the device orientation from landscape to portrait, and vice versa. Depending on your project requirements, you may need to:
a) Restrict the user to a single Orientation, the user cannot "flip the screen
"
b) Create an additional CSS Screen to support "flip the screen
"
Your project requirements will determine if you need the user to have a single or multiple orientation view, but Export Kit makes that process simple and easy!
NOTE: If you are targeting 4 devices +orientation
, you may have up to 8 target screens.
Custom Screen Sizes
Android supports an unlimited number of devices along with custom devices which load the Android platform, eg. Touch Screen Kiosks.
You will need to manually draw a rectangle
shape to match the layout width of your Android screen. This may take some trial and error
, once you have a pixel size the matches your Android screen width, create a CSS Screen to match that size.
IMPORTANT: Because Android use DPI and Adobe uses Pixels, you must draw custom screen sizes to find the pixel size related to your Android screen - learn more.
DPI Image Assets
Images will auto-resize to the correct layout and drawable size, respective of your CSS Screen and target size. Some images may require a re-export to match the correct dpi (if not already set in your PSD).
When you place your images inside your CSS Screen folders, you do not need to enable any furhter options or take additional steps – thats it, Export Kit does the rest!
Android Studio Auto Layout
If you are using Android Studio to generate your layout for your design on the fly, then expect to have blury images
– this is common. If you do not add target screens to your PSD design, Android will assume you medium-density assets only
.
NOTE: You will need control the Bitmap density withsetDensity()
, passing a constant fromDisplayMetrics
:DENSITY_HIGH
orDENSITY_LOW
.