The Design Tools Suite in Android Studio provides a Suite of development kits that allow developers to efficiently Design UI, prototype, build, and debug code. These tools include Layout Editor, Navigation Editor, Motion Editor, Resource Manager, and Layout “Inspector.” In the iteration of Android Studio 4.1, we focused on listening to and processing user feedback and using it as a basis for improving existing tools, which resulted in redesigning some of the existing interactions and adding some missing features. This article will cover some of the UX improvements we’ve made to Android Studio, and you can also check out What’s New in Design Tools Talk.
Layout Editor
Better ConstraintHelpers support
ConstraintLayout 1.1 introduced for the first time ConstraintHelper, Barriers and Guidelines, which allow an invisible view to reference multiple widgets, And group-align widgets without having to write code repeatedly. In ConstraintLayout 2.0, we continue to extend the concept of helper by adding VirtualLayouts, such as flows and Groups, to allow certain behaviors to be applied simultaneously to all referenced widgets. For example, with Flow, you can easily layout views horizontally or vertically by globally adjusting the gap and wrap style between interfaces.
In Android Studio 4.1, we wanted to support these helper features well in the IDE for a better interactive experience. Therefore, from the user’s perspective, we explored a set of the whole process of finding the corresponding function, creating independently, and then changing the created project. Based on this, we further started to improve the efficiency of each step of the operation process. For example, we added a Helpers bar to the Palette to make it easy for users to find and use helper tools that are available.
Add “Helpers” to the Palette
When creating a helper, you can select multiple views, right-click to select a helper, and Android Studio will automatically add the correct ID based on the user’s selection.
Helper creation in multiple selection scenarios
For helper-based operations, we want Flow to be easier to use, so we have extended some of the commonly used properties in the Property Panel, especially for Flow. For example, quick alignment buttons have corresponding indicator ICONS, and Reference Views bars for quick rearrangement of Views have been added.
Operate the helper through the new properties panel options
Design-time property switch
Android Studio provides various tool properties, which are XML properties in the Android: Tools namespace, that enable design-time functionality (such as displaying the layout of the fragment). These attributes are removed when the application is built, they are only used for design/development purposes and therefore have no impact on the size of the generated APK or the runtime behavior.
Tools :visibility and Tools :layout_editor_absoluteX for absolute positioning and Tools :layout_editor_absoluteY are the most widely used tool attributes during building the UI. The former allows the designer to temporarily show or hide the UI, while the latter allows the designer to accurately position the interface before setting constraints in the Layout Editor. However, from actual observations of user use cases, it is difficult to tell when or if a view has tool properties set, which often results in the user seeing a preview in the Layout Editor that is very different from the one rendered in the simulator or on the real machine. For example, in the screenshot below, the images in the right column are absolutely positioned, and even though they look fine in the Layout Editor’s preview, in the emulator they all overlap on the left side of the screen.
The preview effect in the Layout Editor is different from the render effect in the emulator due to tool attributes
To solve this problem, we decided to add a switch in the upper right corner of the Layout Editor’s design panel that allows users to easily switch between tools: Visibility and Absolute Positioning.
Use the new tool property switch
With this switch, we want to provide users with more accurate, non-design-time renderings and make them aware of whether they are using these tool properties.
Control the Visibility property in the Component Tree
As mentioned in the previous section, Visibility is a very common and important property of views, especially useful when you need to display/hide a UI based on different conditions and specific logic, such as allowing only authenticated users to see the corresponding user data. Therefore, we wanted to optimize the visibility properties by providing a quick way to easily set the show/hide/ Gone (show/hide/ Remove) states of visibility in the Layout Editor.
Use the new Visibility property controller in the Component Tree
Starting with version 4.1, you can change this property using the Visibility Control picker next to any view in the Component Tree column. In this way, you can see the visibility state of those views just by looking at the display state of the Component Tree, and then make changes to the UI as needed.
Component Tree uses ICONS to display different visibility states
We provide both tools and Android visibility namespaces to cover different user needs. Note that, at design-time, the Tools namespace overrides the Visibility property in the Android namespace, and this behavior is also reflected in the control — if you set Tools :visibility, It will be represented on the UI with high priority. For example, in the screenshot below, student sets Android :visibility = visible and Tools :visibility = gone, in which case Tools :visibility has a higher priority, This is reflected in the form shown below.
Tools overrides the Visibility property under the Android namespace
Keyboard shortcuts and mapping Settings
We all recognize the importance of keyboard shortcuts in improving productivity and development efficiency. In Studio 4.1, we revisited all of the shortcuts in the Design Tools Suite and registered them in Preferences > Keymap, where you can explore and change their Settings. This makes it the best development tool for the way you work.
Keyboard mapping Settings that contain the Design Editor shortcut key
The Transform panel
We’ve had some feedback from developers who want to improve the precision of the view’s Transform property, and we’ve improved on that in this release. To make it easier to adjust the View’s Transform property, we added a visual display to show the VIEW’s 3D transformation in real time, and a slider for finer manipulation. In the properties panel, once a view is selected, the control can be adjusted in the “Transform”.
Rotate in the Transform panel to view the Service Dog image
Resource Manager
Spacing Drawable resource selector
In Android Studio version 3.6, we introduced the Color Picker Resource TAB, which helps you quickly update the Color values in your app. This feature is popular because the interaction of the color picker mode provides a seamless transition from text (code) to vision (color). Users can use graphical interfaces (GUIs) to improve development efficiency without changing the context of the code editor. In version 4.1, we brought the same idea to the gutter icon in Drawable. When your project file contains a Drawable resource, you’ll see a gutter icon appear next to the editor that allows you to quickly change the Drawable resource. In addition, clicking “Browse” opens the Resources dialog box for a broader search.
Drawable selector
Automatically downloads icon resources from Vector Asset
This update may not be a big deal, but it’s a big deal. We’ve received a lot of complaints about the inconsistency between the Material icon in The Material. IO and the Icon in the Vector Asset Wizard, The main reason for the inconsistencies is the mismatch between Android Studio’s release pace and Material’s update pace. To address this issue, we streamlined the update process so that the Vector Asset Wizard is now updated automatically in the background every time Material updates its icon library. Therefore, you can now use the latest version of the Material icon in the Wizard at any time. 🎉
Navigation Editor
Use graph structure to show destinations in Split View
In Android Studio version 3.6, a new way to switch design file editing modes was introduced, Split View, which created an opportunity to optimize side-by-side views of Navigation files and the Navigation Editor. One of the optimizations is to use the Component Tree structure in the Navigation Editor to display the destination map. This way the user can see at a glance the destination to select (including the nested hierarchy involved) and the action, and be able to map the selected content 1:1 into the code in split mode.
Show the destination in a graph structure in a Split View
By the way, this approach is very helpful for the health of our code base because it allows us to reuse common components across all of our design tools.
The Deeplink dialog supports new properties and auto-populate
Navigation 2.3.0 introduces two new property types for Deeplink: MIME and Action. To enable this functionality in Android Studio’s design tools, we added both properties to the Create DeepLink dialog in the Navigation Editor and added auto-fill and validation.
Motion Editor
Graphical editing of action keyframe paths
MotionLayout supports different types of keyframes, the most common of which is Postion Keyframes (
Displays grid and coordinate values for keyframe positions
Transition Curve editor
Similar to the Transform panel in the Layout Editor above, we have received a lot of feedback from developers that it is difficult to define the Transition curve using pure numbers. Therefore, in version 4.1, we added support for a GUI curve Editor to The Motion Editor, allowing developers to refine desired curves through visual methods and controls.
Use the Transition curve editor
We look forward to you trying out these new features. We will continue to collect feedback to improve our products. The goal of the Design Tools Suite is to continually enrich, complement, and enhance your coding experience by providing visual or GUI support in the right places. Some of the improvements mentioned in this article will also be applied to Jetpack Compose. For example, the experience of some selectors (such as switching visibility state, spacing Drawable resource selectors) is something we can further explore and optimize because they are context-based, non-distracting, and they provide a unique way to apply design tools to the development process.
As always, if you have any problems using these tools or have some new ideas to improve your productivity, please submit your suggestions in our Issue Tracker or in the comments section below. We will continue to optimize the performance of the editor, continuously improve and fix problems, and listen to your suggestions and feedback.