Moving Layout from Zeplin to Android Studio

Zeplin is an awesome desktop application that can be used as a tool for collaboration between UI designers and front end developers. It can help the developers in building pixel perfect mobile apps.

Zeplin itself calculates all the pixels in DP so you don’t have to worry about PX to DP conversion to make it apply in your layout .xml files. It also can convert the image assets for all needed densities and resolutions like mdpi, hdpi, xhdpi, etc.

During the installation of Zeplin, it will ask you if it wants to install Zeplin plugin for Photoshop. This is required by Zeplin since it can upload your design directly from Photoshop to Zeplin.

First things first! Once everything is setup, You need to define densities of the PSD designs which you are going to import to Zeplin. This is the most important step since Zeplin needs to know the current pixel density. Hope you know the difference between ‘PX’, ‘DP’, ‘DIP’ and ‘SP’ in Android.

Once you finalize the density of your design, log in to Zeplin, and create a new project under Designer profile. It is recommended you choose the Designer profile, because only the project owner will be able to upload the designs in a free version of the application.

Be sure you have Zeplin plugin installed in your version of photoshop. Now open the design file.

Select the layers you need to import. You can choose the layers by turning On / Off the visibility of the layers.

Since the Zeplin Plugin can only import Artboards, you need to create an Artboard before you can import into Zeplin. Also, Zeplin takes everything as a group, so you will need to put all the layers as a group and then import the Artboard.

Zeplin also has the potential to export all images in .png format for each and every pixel densities like mdpi, hdpi, etc,. To utilize this feature of Zeplin, you have to export all images in your PSD layer as separate assets. You can easily export the images by expanding the artboard objects, selecting them and clicking the export button. When the design file is exported at once, you can select any screen and in the image you will get to see the properties of elements such as width and height when mouse is moved over them. It will also display many other properties such as the distance between them in DP.

When images are saved as assets, these get saved to folders namely drawable-mdpi, drawble-hdpi, etc. These folders are ready to be copied to the Project res folder.

Best Practice to move from Zeplin to Android layouts

Be sure you check few pieces of auto-generated code before you use it in Android Project.

If your Layout has a TextView do Check for  tools:text

and Change it to android:text

Or else the text will not be displayed in the app while running in an emulator or a real device. ( Please note that Android preview will display the text during development)

For example, Here is a snippet of what is generated by zeplin.

<TextView
tools:text=”Welcome!”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”14sp”
android:fontFamily=”Android-Scratch-Regular”
android:textStyle=”bold”
android:textColor=”#ffffff”
android:lineSpacingExtra=”8sp”
/>

This is how it should look like

<TextView
android:text=”Welcome!”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:textSize=”16sp”
android:fontFamily=”sans-serif”
android:textStyle=”normal”
android:textColor=”#7e868c”
android:lineSpacingExtra=”8sp”
/>