Your Interactive Tool Belt

Convert a PSD to Android XML UI and Java

Last updated on November 9, 2017

Convert a PSD to Android XML UI and Java in minutes. Your PSD to Android XML conversion is quick and easy with Export Kit, supporting custom styles, target Android devices, Java code, and more. PSD to Android is an advanced export and will require a general understanding of Android and Java to modify the code.

Android XML UI, is very powerful and supports a variety of features and options. You can accomplish a lot with PSD to Android XML, but the magic of Android is in Java. Export Kit will provide you with all the required code files and assets to begin development of any Android app - in no time flat!

ANDROID STUDIO: Our PSD to Android Output produces an Eclipse project, google "Import Eclipse into Android Studio" for more details. We will update this feature in a future release.

Before You Begin

Android XML UI and Java are advanced exports and will require customizations in the output to make the Android app functional. We recommend you use as many target screens as possible to target multiple Android devices, and Export Kit will handle all of your Android resources in the output.

IMPORTANT: You must use as many folders as possible to organize your UI/UX into stacked layouts. Your design should match the size of your target screen - learn more.

RULE: Your design must start at 0,0.

PSD to Android XML UI and Java

This guide will show your custom Android XML UI and Java from your PSD to Android XML export.

Step 1: Device UI Design

You can target an unlimited number of Android devices in your PSD design, but you should have one base design to first create your elements in. You can copy your design to various target screens after you approve your default device design.

Android uses density to map both the size and position of elements rather than pixels. This means that the visible size of the user’s device screen may not reflect the resolution density of the device.

EXAMPLE: A real life example of density is 2 phones with different screen sizes both sharing the same resolution.

Element Rendering

Export Kit will translate your PSD layers to Android XML elements with relative positioning to its respective parent element. Because you can target PSD to Android layout screens, your designs will render WYSIWYG (What you see is what you get), and will map to the target device screen. This will give you pixel-perfect translation of your PSD to android XML elements.

RULE: Android does not support (-) negative margins.

NOTE: Your PSD to Android XML UI elements will use relative containers with margins to measure the element's position and size.

NOTE: Photoshop and Android both render elements differently, and have different support for effects. Some Photoshop styles may not render the same visually in Android - we will fix this in future versions.

Color Rendering

All colors are stored as values is your Android resources folder. This makes it easy to manage your colors and styles from a single location.

Image Rendering

Images are rasterized and rendered as-is. Your image will size according to the target screen, if no target screen is defined then the image is treated as a nodpi element.

Shape Rendering

Export Kit will convert Shape Elements from your PSD design directly into native Android shapes. There are no special settings required for processing shapes, simply use the shape tool and choose your shape, along with your desired shape options; Export Kit will do the rest.

Text Rendering

Export Kit has great Text Support for justification for left, center and right; including various character styles and paragraphs. There are no special settings required for processing text, select the text tool, your font and settings; Export Kit will do the rest.

String Resource Guide

Please read the Official Android String Resource Guide – you will find a lot of useful information regarding the CORRECT usage of strings. Some characters you need to escape, while others you may need to enclose in double quotes (“).

Escaping Strings

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

This\'ll work
-- OK
"This'll also work"
-- OK
This doesn't work
-- Causes a compile error
This is a \"good string\".
-- OK
This is a "bad string".
-- Quotes are stripped; displays as: This is a bad string.
'This is another "bad string".'
-- Causes a compile error

Font Rendering

Android Widgets

Export Kit makes it easy to create your Android widget layout in your design, then render the native Android widget in your project. Your widget will render with the size, position and effects applied to the layer. We recommend using Shapes to create widgets – when using other Layers, the properties of the layer are copied.

Shape Effects Support

Text Effects Support

Custom Android Styles

Using our CSS Style and Styles tags you can create custom run-time styles for Android that will render with elements when compiled. This makes it easy to reuse styles and themes when creating your Android projects.

Android XML Activity

All elements in your Photoshop design are converted to super clean Android XML UI, with reference to all layer properties. Each Activity will create an individual layout XML file with all PSD layer elements within the respective ${page} folder.

Note: Some properties such as strings, images, and colors are linked to other resources files.

Note: If you have multiple target screens, then you will have one layout XML file per screen.

Android Java Activity

All ${page} folders convert to respective Java Activities in the PSD to Android output. Your Java files will reference all the layer elements contained in the Android XML layout file.

Note: You will have one Java Activity per ${page} regardless of the target screens.

Link Activities

Use our Link Tag to connect Activities and allow the end-user to navigate your Android app via native Intents. Links can be used with any PSD layer and will change the current Android Activity to the supplied link Activity.

Links are created in your Java Activity file and will simulate a “click” to navigate the user. In future updates we will add support for gestures and swipes.

NOTE: You do not need to add extensions to links, just use the page/activity name and Export Kit will reference the Activity.

EXAMPLE: If you have ${page:user_home} then you can use ${link:user_home} to connect the two.

Step 4: Target Multiple Devices

Target unlimited PSD to Android devices from a single Photoshop file with our CSS Screen Tags. All layouts and assets are created by Export Kit from your PSD to Android XML output. Each target screen will generate an individual layout and drawable folder for the screen assets, but only one Java Activity is required per Android layout.

NOTE: Images will auto-resize to the correct layout and drawable size, but some images may require a re-export your images to match the correct dpi (if not already set in your PSD).

Preview with Graphical Layout

All PSD to Android XML UI outputs are rendered perfectly for preview in the Android Graphical Layout. You will see right-away that your PSD is converted to a pure Android XML UI with all your layer properties intact.

You can edit elements and properties using either the Android Graphical Layout, your layout XML, or Java Activity file. Each perspective will give you access to all elements in the respective layout.

IMPORTANT: We recommend you preview each target screen layout to ensure your PSD to Android XML UI output is as expected.

Tweak Your Images

Depending on your PSD image settings for dpi, you may want to re-export some images with the correct dpi settings respective of the target device.

Step 7: Test your Android App

At this point you PSD to Android XML UI is ready to compile and test. You will need to load an Android emulator for your test device, then build your project.

Step 8: Now Build Your Super App

Now you are ready to build your amazing Android app. All your resources, class elements and layouts are ready to go. That’s easily weeks to months worth of work, ask your self: “Self, how much is that worth?“

Free Download

Start Your 14 Day Free Trial

Get instant access to your 14 Day Free Trial and Free Online Training. We guarantee your first conversion will 100% work - we work with you to ensure this, Contact Us or check the Community FAQs for assistance.