Loading...

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 target 2560 xhdpi – you must consider pixel to dpi conversion or download our Android PSD templates and start there.
Use CSS Screen Tags to create unlimited target screens for Android devices.
Read our tutorial on Converting a PSD to Responsive CSS which applies directly to Android also!

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.
Read more about Responsive Screen Sizes.

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!

Learn how to Export Your Images with different DPI settings.

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 with setDensity(), passing a constant from DisplayMetrics: DENSITY_HIGH or DENSITY_LOW.
Read more about Multiple Screen Support on Android.com.
LOGIN NOW: Get instant access to our free Online Training - click here.

Products For Smart Professionals


smart_images_base_set

Smart Images Base Set

smart_psd

Smart PSD Batch

smart_images

Smart Images

Need a custom solution?

Try our Shop!

Using the Plugin

Layer Support

Layer Tags

How To Guides

Optimization Tips

Help Us Improve


We aim to keep our content relevant with useful information, examples, samples and links. Tell us what you think!

I found the content:

Helpful
Confusing
Outdated
Broken Links
Bad Spelling
Too Short
Too Long

This page needs:

Nothing
Better Content
Links
Examples
Videos

Free Download


Dropdown +Rollover Menus

Professional dropdown menus with full CSS rollover support.

Start Your 14 Day Free Trial

New users get instant access to the 14 Day Free Trial with all features enabled, and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, contact us or check our FAQs for assistance.

Connect With Us

Top