Converting Xd Design To Android App

Adobe XD is a powerful and collaborative UI/UX prototyping and designing an app. Such a prototype is necessarily developed before the developers start the actual coding of the interface to have a clear plan of the way things have to be executed. Moreover, the feature of Coediting which is currently available in Beta, allows the designers to work as a team on a project all together that too in real-time. Similarly, Android Studio is the official IDE (Integrated Development Environment) for Android app development and it is based on JetBrains' IntelliJ IDEA software. In this article, we will see how to extract the UI Designed in Adobe XD to Android Studio easily.

Step by Step Implementation

Step 1: Firstly You have to create a UI design of Your app in Adobe XD as shown below.

Want a more fast-paced & competitive environment to learn the fundamentals of Android?

Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!

Step 2: Now Select the UI you want to extract and press ctr + E and Select Android. Select the desired folder you want to export to and hit Export.

Extracting UI to Android

Step 3: Now when you open the folder "Assets" you will observe that the UI gest stored in different folders of different sizes(i.e hdpi, ldpi, mdpi, etc).

Assets folder

Step 4: Now open Android Studio and Go to Resource Manager present on the left side of your screen.

Resource Manager in Android Studio

Step 5: Now open the Assets Folder which was saved earlier and select all the items in the folder and do "Drag and Drop" into the Resource Manager.

After drag and drop, you will see something like this

Step 6: Click Next > Import. Now To check if you have correctly imported all the files go to the XML file and test it out by putting the files as background images