From the course: Android Studio Essential Training 2020

Edit layouts with design and text mode

From the course: Android Studio Essential Training 2020

Start my 1-month free trial

Edit layouts with design and text mode

“

- Android Studio has a tool that allows you to design your XML layout files using a WYSIWYG, or What You See Is What You Get interface. Your layout files are stored in the layout directory under res for resources, and the number of layout files you'll have will depend on what template you used when you created a project. When you first open an XML file, you can look at these XML files in either Design or in Code view. And you control these in Android Studio 4.0 with icons that appear in the top right corner. Clicking on Code shows you the XML, clicking on Design shows you just the visual design, and clicking on Split shows them to you side-by-side. I'll close my project window and show that I can look at the code and click into any element and, in the WYSIWYG interface on the right, I'll have selected that element. When you're in Design view, the palette appears to the left side of the design environment. This particular XML file has a CoordinatorLayout as the parent, a nested AppBarLayout and Toolbar as children, and then an include directive that includes the contentmain.xml file. There's also a floating action button that's anchored to the bottom and to the end or, in left to right displays, to the right side of the screen. When looking at the code, to go from a parent to a child layout, hold down the Command key on Mac or the Control key on Windows and click the layout. This is where the text element lives. Once again, I could look at this in Code, Split, or Design view. When you're working in a layout that has ConstraintLayout as its parent, you can use a really great WYSIWYG tool to build your screen. I'll click on another button here in the palette, and drag it onto the screen. Then I'll click on these handles, then I'll click and drag with these handles, and anchor the component to the bottom, left, and right. That centers the button horizontally. I can click and drag the button from right to left, and I'll be affecting something called the horizontal bias. You can affect all the properties of an element by clicking on it and then looking at the Attributes window over on the right. You can also decide what device you want to emulate in the design environment. Making changes here doesn't change anything about the code, it just changes the dimensions of the display on-screen. But there are ways to generate some code. I'll click on this button to go to landscape view, and right now I'm only affecting the way it looks in design view, but I can also say create a landscape variation. And now I have a copy of my XML file, I'm looking at it in landscape, but it's been placed into the appropriate resource subdirectory. So it will be used automatically by the device when the device goes into that orientation. There are other tools here to affect how the visual design environment behaves, how it generates code, for example, this would indicate what the default margins are when you drop a new object on the screen, and you can use this button and this one to affect the constraints. So that's a peek at the visual layout system. And again, when you use it, you're modifying text files that are in your project's resources directory under layout.

Contents