Here's a quick and simple tutorial on how to use our Android Studio Sympli Handoff plugin.

First, download the Android Studio plugin from our website. Open your Android Studio, go to Preferences/Settings, search for Plugins and then click on the gear and "Install plugin from disc". Navigate to the downloaded zip file, press OK, and restart your Android Studio.

After the restart, you'll find the Sympli Handoff plugin in the right-hand Toolbar. If you don't have this toolbar visible, go to View and check the Tool Buttons option. Upon launching Sympli Handoff plugin for the first time you'll be asked to log in. Use your Sympli Handoff credentials and you'll be able to access your Android projects. Looking for a project that doesn't appear?Make sure you have access to it from the web app and it's an Android project.

Click on the project and then click on any design to get to the Design Browser. Here you can get information about the design element's position and dimensions. For text elements, you can find information on fonts, size, and color. One more handy feature is that you can inspect the distances between any two elements. To do that you need to click on the first element and hover over the second one. You can also measure the distance between a container and an inner element.

If you need more precise measurements you can use our Ruler tool. Click on the Ruler tool button, and position the ruler where you need it. After this, you can select an element to get the distance between the end of the ruler and this element.

In the Design Browser you also have access to all the design graphic assets included in the bundle. And if you select an element from the list - the corresponding element will be highlighted on the canvas. You also can generate VectorDrawable for some layers. You should select any shape layer and click on "Generate Vector Drawable" button.

You have access to the structure of the source graphic editor file, in this case here is how it looks with the sample file. You have access to the color palette too, where all the colors have human-readable names. And if you double-click on the item in the list, the HEX code of this color will be copied to the clipboard.

Also, you have access to the custom fonts, that are included in the bundle. To synchronize resources from the design bundle into your project - click on the Import button in the toolbar. Select which resources you would like to merge.

Let's start with assets. In the assets dialog window, you can choose which assets from the design bundle will go to your project. You can deselect some items or you can open the per dpi view to select which assets will be included into the merge. If you want to sync everything you can just click on the Select All option in the right upper corner and then click on Import Button. After you clicked Import and synchronized the drawable directory you can see that all resources were synced.

You can do the same with colors. The plugin will merge your existing colors with the colors from the bundle. AS's project contains a color.xml file and this file includes all colors. Our plugin can add colors from design to this file without removing the existing colors in the file.

To sync fonts into your project click on the Import button in the toolbar. Select Import Fonts. After you click OK, you'll get all your fonts from the bundle placed into your project.

In case you need to rename the files - you can do it and the plugin will create mapping for these new names. Sympli Handoff will remember this mapping and next time you import something in this project you're not going to need this all over again, it will be picked up automatically.

Sympli Handoff also provides code snippet generation for the styling of the text elements. To access this feature you should choose a text element in the design and click "Generate styling code". You'll see a dialog window with code snippets for Java, Styles XML, dimensions XML, and colors XML. And you have an option to do this in pure Java.

This is all for the Sympli Handoff Android Studio plugin. If you lack some important feature or some part of a workflow - please, submit a request on it through our Canny. This is also the place to check for all the updates our products get, so feel free to visit and comment anytime, we appreciate all your feedback.

Thank you for reading this tutorial, if you have any questions - contact us through the chat in the bottom right corner of the website.