Android Studio's Navigation Editor - dummies

By Barry Burd

Using Android Studio’s Navigation Editor, you can control the flow within an app from one activity to another. To do so, try the following experiment:

  1. Launch Android Studio and create a new Android project.

    When you create the project, accept all the defaults.

  2. In Android Studio’s main menu, choose Tools→Android→Navigation Editor.

    When you do, Android Studio displays a pictorial representation of the contents of one of your project’s files. The file’s name is main.nvg.xml.

    The Navigation Editor
    The Navigation Editor

    Here, the Navigation Editor illustrates a relationship between your app’s main activity and the main activity’s menu.

  3. Right-click (on a PC) or Control-click (on a Mac) anywhere in the grey area in the Navigation Editor panel.

    When you do, you see a contextual menu containing a New Activity item.

  4. Click the New Activity item.

    Android Studio displays the familiar Add an Activity to Mobile dialog box.

  5. Select Blank Activity and then click Next.

    As usual, you see a Customize the Activity dialog box.

  6. Accept the defaults. (That is, click Finish.)

    As a result, you return to Android Studio’s Navigation Editor. Now the editor displays two activities.

    You have two activities!
    You have two activities!

    If you look at the Project tool window, you see MainActivity and Main2Activity in the tool window’s tree.

  7. In the Navigation Editor, double-click inside the picture of the original MainActivity.

    When you do, Android Studio opens the Designer tool and displays a preview of the MainActivity screen.

  8. From the palette, drag a button to the MainActivity screen.

    Your goal is to make a click of this button launch the other activity (the Main2Activity). Here’s where the Navigation Editor shows its real muscle!

    Look for the tabs that appear above the Designer tool. One of the tabs is labeled main.nvg.xml.

  9. Return to the Navigation Editor by selecting the main.nvg.xml tab.

    In the Navigation Editor’s pictorial representation of MainActivity, you see the button that you added in Step 8.

  10. While you hold down the Shift key, drag your mouse cursor from the button to the picture of the second activity (Main2Activity).

    When you do, Android Studio draws an arrow between the button and the second activity.

    Clicking the button launches the second activity
    Clicking the button launches the second activity
  11. Select the tab just above the Navigation Editor.

    In the code, you can see that the button’s click starts the second activity.

    protected void onCreate(Bundle savedInstanceState) {
            setOnClickListener(new View.OnClickListener() {
        public void onClick(View v) {
          startActivity(new Intent(MainActivity.this,

    You didn’t have to type this code. The Navigation Editor composed the code for you. What’s more, the Navigation Editor can give you a pictorial representation of the flow of activities within your app. As your app’s complexity increases and the flow becomes complex, having a picture of the flow can be very handy.

  12. Run your app, and click the original main activity’s button.

    Sure, it works. But try it anyway, just to feel the power!