To enable the designer preview mode for a specific screen mode, you will need to set the attribute “app:tools_screen_mode” to either “dual_screen” or “single_screen”.įigure 2: Designer Preview for a single-screen layout using SurfaceDuoLayoutįigure 3: Designer Preview for a dual-screen layout using SurfaceDuoLayout dual_screen_end_layout_id – Layout for the right-side screenīy default, the designer layout preview will show the single-screen mode as a preview, but you can change the designer preview mode to support a dual-screen designer preview.dual_screen_start_layout_id – Layout for the left-side screen.single_screen_layout_id – Layout to load in single screen mode, or on other devices.These attributes are in addition to existing ones below which define the single and dual-screen behaviors: tools_hinge_color – Defines the color of the hinge.tools_screen_mode – Defines the designer preview for single screen layout or dual screen layouts.To start utilizing the Designer Preview, you will need to add these two new attributes to the layout XML: You can also modify the layout and add buttons or other common controls. For DuoKLayout, it enables both a single screen layout preview and a dual screen layout preview. Designer PreviewĪs part of the Android Studio Design editor, you can now preview your layout in different modes and postures. Today we are releasing an update to this layout control and adding Designer Layout Preview support for developers using Android Studio. You can view this behavior in these samples ( Java, Kotlin). Our CompanionPaneLevel2 sample helps create a sophisticated, responsive UI declaratively. When using the SurfaceDuoLayout, you can implement dual-screen behavior by either using layouts or by listening for screen change events and manipulating fragments, or with a combination of the two approaches. In the March 26th blog post, we introduced the Dual Screen Layout.įigure 1: Single-screen and dual-screen layouts using SurfaceDuoLayout

Android studio preview does not stay