Your Interactive Tool Belt

Our design team would like to get some guidelines / help for using this tool efficiently for any of the PSD file they design for Android app development. Can you provide help for the below points –

1. How to manage PSD layer to handle different layout resolution support? Because currently demo creating layout with fix vales of height, width and margins. Is it possible to manage single layout without considering this hardcoded values?

IMPORTANT:
(a) Android does uses DPI
(b) Photoshop uses a custom Adobe Pixel
- they are NOT THE SAME!

IMPORANT: Android does not allow for project names with ' ' (space) and class names must start with a lowercase letter. Your PSD/AI name is used as your Android project name and your default class name = no ' ' (space) and start with lowercase!

Think DPI, Not Pixel:

Consider that Android is DPI based when it comes to size – so with Export Kit there are several ways to handle this. Consider PSDs can only be one resolution, so it’s impossible currently to provide multi-dpi assets. Dev has, and is still looking into workarounds for this.

1. You should always design large first then scale down – similar to working with images. When you scale up – it becomes a bit more difficult.

2. If create a single screen layout and use Android Studio to auto-layout to other devices, you will need control the Bitmap density with setDensity(), passing a constant from DisplayMetrics: DENSITY_HIGH or DENSITY_LOW.

Negative (-) Margins Not Allowed

Do not “bleed” your background design. Android does not allow for negative (-) margins. In your case, your main background image is larger than the screen – so your content will start where the background starts (note this error in the output res/layouts/ folder with Graphical Preview)

Image Sizes/Exports:

Export Kit will export your images based on your PSD settings, eg. if you have a higher DPI then it will use that in the image settings. In many situations, you may often design in a lower setting than your target device – this is OK. You can re-export the same PSD after using Image Kit at a higher DPI setting.

Text Size:

Text size does not always match the Android output size in your layout, this is normal. Photoshop and Android measure items very differently (DPI vs Pixel) so we will add a few adjustments for size correction in future versions.

The quick fix is to note the Output size difference, and change your PSD respectively.

Horizontal Scroll:

This is our default view state. In future versions we plan to support as many Layout types as we can, but for our first release to ensure you “get-what-you-see” we did it this way. Currently your design will export with Relative Layout and Horizontal Scroll, you can remove the scroll view if you like, but if you change the Relative Layout, your element positions may not render correctly.

Layout resolutions:

This is easy to do, you will need to use our CSS Screen tags to denote which screen size you are targeting.

Multiple Device support:

This is related to our ${css|screen} tags as they control the layout, but Android is a bit different with its pixel calculations. We have mapped many common screen sizes, and anything else you will have to measure manually.

Note that default screen is not required for Android, you should actually set the size you are targeting

Lightning Strom will soon have full vector support for many environments.

Android Widgets:

Widgets are used in almost every Android project – or a subclass of – this makes them a vital part of any Android UI design. Export Kit makes it easy to create your Android widget layout in your design, then render the native Android widget in your project.