Android Studio Design Tools Split Editor: Test Plan

Author: amaurym@

Overview

The new split editor introduced in Android Studio Design Tools replaces the former dual editor (text + design) paradigm. The flag was enabled in Android Studio 3.6 Canary 7, and we plan to improve the feature in future releases. This document proposes a test plan for the current version.

Figures 1 and 2 illustrate how the split editor looks like in comparison to the two tabs (“Text” and “Design”) we use to have for layout and navigation editors, respectively. Please note we use the top-right buttons to change mode instead of using the former tabs.

Figure 1 - Android Studio Layout Editor with the new split editor

Figure 2 - Android Studio Navigation Editor with the new split editor

Tests (All tests passed in canary 11)

Layout Editor: New Project

  1. Create a new project with empty activity
  2. Open the activity_main.xml file created and wait for sync to finish
  3. Expected result: file is open in the new split editor. Make sure you can use the buttons on the top-right corner to change the editor mode to “Text”, “Design” and “Split” views.

Navigation Editor: New Project

  1. Create a new project with basic activity
  2. Open the nav_graph.xml file created and wait for sync to finish
  3. Expected result: file is open in the new split editor. Make sure you can use the buttons on the top-right corner to change the editor mode to “Text”, “Design” and “Split” views.

Layout Editor: Component Selection

  1. Create a new project with empty activity
  2. Open the activity_main.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. Drag a Button from the palette to the surface, so the layout contains a TextView and a Button
  5. On the text portion of the editor, select the <TextView> tag
  6. Expected result: TextView gets selected on the visual part of the editor
  7. On the text portion of the editor, select the <Button> tag
  8. Expected result: Button gets selected on the visual part of the editor
  9. On the visual part of the editor, select the TextView
  10. Expected result: <TextView> tag gets highlighted on the text part of the editor
  11. On the visual part of the editor, select the Button
  12. Expected result: <Button> tag gets highlighted on the text part of the editor

Navigation Editor: Component Selection

  1. Create a new project with basic activity
  2. Open the nav_graph.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. On the text portion of the editor, select one a <fragment> tag
  5. Expected result: The fragment gets selected on the visual part of the editor
  6. On the text portion of the editor, select an <action> tag
  7. Expected result: The action arrow gets selected on the visual part of the editor
  8. On the visual part of the editor, select an unselected fragment
  9. Expected result: <fragment> tag corresponding to the fragment selected gets highlighted on the text part of the editor
  10. On the visual part of the editor, right-click SecondFragment and select Move To Nested Graph > New Graph
  11. On the text portion of the editor, select the SecondFragment <fragment> tag
  12. Expected result: The nested graph gets expanded on the visual portion of the editor and SecondFragment is displayed

Layout Editor: Go to XML

  1. Create a new project with empty activity
  2. Open the activity_main.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. On the visual part of the editor, right-click the TextView and select “Go to XML” (or press Ctrl/Cmd + B).
  5. Expected result: Caret moves to the <TextView> tag on the text portion of the editor
  6. Select the “Design” mode from the top-right corner (the one on the right)
  7. Right-click the text view and select “Go to XML” (or press Ctrl/Cmd + B).
  8. Expected result: Editor changes mode to “Text” and caret moves to the <TextView> tag

Navigation Editor: Go to XML

  1. Create a new project with basic activity
  2. Open the nav_graph.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. On the visual part of the editor, right-click FirstFragment and select “Go to XML” (or press Ctrl/Cmd + B).
  5. Expected result: Caret moves to the <fragment> tag with id @+id/FirstFragment on the text portion of the editor
  6. Select the “Design” mode from the top-right corner (the one on the right)
  7. Right-click SecondFragment and select “Go to XML” (or press Ctrl/Cmd + B).
  8. Expected result: Editor changes mode to “Text” and caret moves to the <fragment> tag with id @+id/SecondFragment

Navigation Editor: Jump to Layout File

  1. Create a new project with basic activity
  2. Open the nav_graph.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. On the visual part of the editor, double-click FirstFragment
  5. Expected result: fragment_first.xml is open

Drawables: Adaptive Icon

  1. Create a new project with empty activity
  2. Open the ic_launcher.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. On the toolbar on the visual part of the editor, change the density to mdpi
  5. Expected result: quality of the drawable gets considerably worse
  6. On the same toolbar, change the density to xxxhdpi
  7. Expected result: quality of the drawable gets considerably better
  8. On the toolbar, change the icon format from Square to Circle
  9. Expected result: icon is drawn as a circle

Drawables: Vector

  1. Create a new project with empty activity
  2. Open the ic_launcher_foreground.xml file created and wait for sync to finish
  3. Select the “Split” mode from the top-right corner (middle button)
  4. Use the zoom controls on the visual part of the editor
  5. Expected result: vector zooms in/out depending on the zoom controls used

Drawables: Fonts

  1. Create a new project with empty activity
  2. Create a new font resource directory and download/extract these files there
  3. Open the my_font.xml file downloaded
  4. Select the “Split” mode from the top-right corner (middle button)
  5. Expected result: three different fonts are rendered in the visual part of the editor, vertically stacked
  6. Use the zoom controls on the visual part of the editor
  7. Expected result: fonts zoom in/out depending on the zoom controls used

Related documents