Navigation Editor

    What is the new Navigation Editor tool? 

    The Navigation Editor is an early prototype of a tool for graphically creating and viewing the structure and layout of an Android application. We have released this early version so as to be able to incorporate as much feedback as possible into its feature set and design. If you'd like to use a tool like this in Android Studio, your feedback would be really helpful.

    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 starting the development process. 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 the 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?

    The Navigation Editor generates and parses regular Android source code. 

    The 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 the 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 and it is possible (in fact likely) that large non-standard applications will have transitions that the Navigation Editor cannot ‘see’. 

    The patterns used by the Navigation Editor are described here

    In all cases the 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 the 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 the 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 for “phone/tablet” and “portrait/landscape” are a straw man UI for this. Should the first control list all devices as it does in the Layout Editor? If so, how should changes to the locations of Screens in the Navigation View (which do not affect the APK) 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?

    • Activity Inspector? Each Activity has a bunch of information e.g. name of the Activity class, layout resource name, list of fragment names/ids, properties, view ids. This information should be surfaced somewhere - how? An inspector/property sheet?