Navigation Editor

What is the new Navigation Editor tool? 


Navigation Editor is a tool for graphically creating and viewing the structure and layout of an Android application. Navigation Editor is being developed in the open so we can incorporate feedback into its feature set and design throughout the development process. If you'd like to use a tool like this in Android Studio, please send us your feedback.


Who is the tool for?


Navigation Editor is intended to be used both by developers who want to rapidly prototype apps, and by designers who are interested in seeing their designs work on real devices without writing any code. We also want to provide support for people without Android development experience who are looking for a hands-on way to scope out mobile development work before committing to a full development initiative. In all cases we have tried to ensure that prototypes built using Navigation Editor can form the basis of real implementations, so as to promote a method of iterative development that gives designers and developers an effective way to collaborate.


How do I run it?


You can show the editor from the Android Studio menu with “Tools -> Android -> Navigation Editor”.


If Android Studio is able to build your project, you should see a tool window that looks something like this:



How do I use it?


In Navigation Editor you can:


  • Create new Activities - with a right-mouse click

  • Edit the layout of each Activity - by double clicking it
  • Add transitions from controls (e.g. Buttons and menu items) to other Activities - by shift-dragging with the mouse (ctrl/alt also work)


To see your app running on a real device, plug the device into your USB port and click 'run' (the green triangle) in the tool.


How does it work?


Navigation Editor generates and parses regular Android source code. 


Navigation Editor examines the AndroidManifest file, Java sources, layout and other resource files to put together an overall picture of the structure of an app, which includes the Activities and Fragments that the user sees and the transitions between them. If your application was created by Navigation Editor, the patterns of code that it generates will all be picked up and you will see the application exactly as it was created. If the structure of the application was modified by hand but the same patterns were used to create transitions between Activities, Navigation Editor will show all of these links too. Because Navigation Editor cannot understand all of the ways that it is possible to launch an Activity, it is possible (in fact likely) that large non-standard applications will have transitions that Navigation Editor cannot ‘see’. 


The patterns used by Navigation Editor are described here


In all cases Navigation Editor is able to operate on that subset of the app that it can see - without affecting the parts that it can’t.



What kind of files does it create/require to run?


The only data stored by Navigation Editor are the locations of the images in the tool. This information is held in XML files inside the .navigation directory of your project but is not referenced by the build process and does affect your final APK at all. You can delete these files, or the entire .navigation directory without having any effect on your app. If you delete the .navigation directory you can still use Navigation Editor again but will have to reposition the images from a default configuration that Navigation Editor will create when you next open it.


Where do I submit my feedback?


Please see our feedback page.


Open Issues


  • Switching between form factors: the ComboBoxes showing device qualifiedrs like “raw” and “raw-sw600dp-land” are a straw man UI for this (and only appear when multiple layouts are provided for different form factors). In addition to the UI issue, how should changes to the locations of Screens in the Navigation View affect the Views of different devices/form factors?

  • Graphics: should the navigation view provide device frames (pictures of the phone) around each Activity (perhaps conditionally) as the Layout Editor does?