Guidelines for using Android and Export Kit?« Back to Questions List

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?

2. How to manage different android graphics resolutions for say below standard resolution support of Android devices –
MDPI: 320 X 480
HDPI 480 X 800
XHDPI 720 X 1280
XXHDPI 1080 X 1920

3. How to manage vector icons / graphics. We found that some graphics becomes rounded corners even though we don’t want that kind of behavior.

4. Also we would like to know which are the Android supported widgets/controls(list view, grid view, spinner, view pager, etc) Export Kit will map while generating auto layouts?

Look forward to get your feedback for the designer guidelines to use Expert Kit tool efficiently.

Asked by darshan shah
Added April 5, 2015 3:49 pm

This question has been resolved, view the correct answer now!

Correct Answer

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!
EXAMPLE:
My Android.psd - INCORRECT
myAndroid.psd - INCORRECT
my_android.psd - CORRECT
myandroid.psd - CORRECT

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.
SCREEN SIZE IS 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.

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.

1. CSS Screen Tag: http://exportkit.com/plugin/layer-tags/advanced-layer-tags/css-screen-tag
2. How to create CSS Screens (tutorial, works with Android also): http://exportkit.com/plugin/environments/html5/convert-a-psd-to-responsive-html-and-css

Screen Size is Important

Your screen size is important, some of your content will require the user to scroll (if you do not want this, you will need to re-measure your design based on our templates): http://exportkit.com/suite/download/127/psd/android.

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

1. Multiple Device Support (video): http://exportkit.com/learn/video-tutorials/advanced-videos/psd-to-android-xml-ui-java-apps
2. Android Multiple Device PSD (From the zip file):
[zip folder] \psd_example_files \11_advanced_android \ek127_1102_android_screens.psd

Vectors and complex shapes:

This is a feature we are supporting soon with better path mapping for SVG, Android, XCode and Swift. We have basic shape support, but if you are using complex vectors – you will have to:

a. Convert it to a smart object
- OR
b. Use an ${img} tag with the layer (converts it to an image): http://exportkit.com/plugin/layer-tags/basic-layer-tags/image-tag 

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.

Take a look at some of the current features.

Answer by admin ★★★
Answered On April 5, 2015 7:20 pm #
Looking for another answer? View other questions in Android or get premium support for guaranteed results.
Asked by darshan shah
1315 views
1 answer
Last Answered 2 months ago by kp

Categories

Recent Answers


Share Your Knowledge!

Contribute to the community and help other users to benefit from your answer with experience and knowledge.