Task 3: Explore Layout Editor

Each screen in an Android app goes with something called a fragment. Each fragment in an app has an associated layout, life cycle and events. Because we started with the Basic Views Activity, your app should default to two fragments, with both of them being connected to each other. The one showing now is called FirstFragment.

To view these fragments, go to the navigation folder and click nav_graph.xml.

Layouts are defined in XML, and the layout editor lets you define and modify your layout through both coding XML and visually.

Let’s start by editing your FirstFragment by opening the layout editor.

Navigate to the layout folder under app > res > layout and double-click fragment_first.xml.

Troubleshooting: If you don't see the file fragment_first.xml, confirm you are running Android Studio 3.6 or later, which is required for this tutorial.

The layout editor is now open. Let’s take a look at what each panel does. Close the project hierarchy panel if your display is too crowded.

On the left is a Palette (1) of views you can add to your app.
Below that is a Component Tree (2) showing the views currently in this file, and how they are arranged in relation to each other.
In the upper right corner of the Design editor, above Attributes (3), find the three icons that look like this:

These represent Code (code only), Split (code + design), and Design (design only) views.
- Try selecting the different modes. Depending on your screen size and work style, you may prefer switching between Code and Design, or staying in Split view. If your Component Tree disappears, hide and show the Palette.
- You scroll, zoom and pan using the buttons on the lower right of the editor.

At the top of the editor, you can change the orientation, whether the blueprint is displayed, and other settings. You can also change the size of the device, which can be useful for testing.

Next, be sure the mode is set to Design. Look at the component tree in the bottom left corner, which shows the view hierarchy of your layout, or how the views are arranged in relation to each other.

Remember, a view is an element in your fragment!
Notice that the root (top) of the component tree is a NestedScrollView, which is a viewgroup, or a view that contains other views. Every layout must have a root view containing all other views, and in our case, the NestedScrollView holds every other view and also makes the fragment scrollable. Under that is a ConstraintLayout which dictates how elements are laid out on the screen.
- The ConstraintLayout contains a TextView called textview_first and a Button called button_first. Notice how these correspond to the elements currently on screen in the design window.

Now switch the mode to Split using the button in the upper right corner. Now you should be seeing the XML code for the layout on the left and the design editor on the right. If you want to hide/unhide the component tree, click the vertical button on the bottom right. Also, hide the Attributes panel if it takes up too much room.

See how the XML code corresponds to what is in the component tree? You should see that the root element is <androidx.core.widget.NestedScrollView>. Directly under that is the items you would expect to be based off of the component tree.
Here, you can directly edit the code for each view and viewgroup, instead of through the design editor.

In Split mode, you can see directly how the XML code corresponds to the actual design of the app. If you click on a view on the right, you’ll see the corresponding XML code on the left become highlighted, and vice versa. This makes it very easy to see how the XML code that is actually processed is turned into the layout of your app.

Examine the TextView element, which corresponds to the Lorem Ipsum text in the layout. If you click on the String of the android:text property within the properties, you’ll notice it expands to become a directory.

This directory is located in res > values > strings.xml. Navigating here will show you every string currently being used in your project. Any new strings that are added should be placed here and referenced in the same way as before. This makes translation and editing easier.

Change the Lorem Ipsum string block to something much smaller, like “Hello World!” or something similar.

Go back to fragment_first.xml and you should see the text updated.
In the Component Tree, click on the textview_first element (the one containing the text we just edited). On the right, look at the Attributes panel.

This panel will contain every attribute that can be added to the TextView element. Note that these can also be implemented manually through the XML code, and sometimes this is recommended for more precise control.
Notice that the text field within Attributes still references the same path as before.
Scrolling down the panel’s list, you can see that they are grouped into different sections. Importantly, the Common Attributes section shows you attributes that are specific to TextViews, while the All Attributes section shows you every attribute you can add to the element. You can also search for whatever property you need at the top.

Run the app again and you should see that the text has now changed to whatever you set it to!

Change some more TextView attributes, including the Color attribute which can be changed through manually entering a Hex Code or typing in the name of an Android default color. You can also click the dropper in the field to bring up a color picker and a list of color resources you’ve added (we will go over this process in the next step).

After you’ve made some changes to the TextView, run the app again to see if you correctly applied your changed attributes. If everything looks correct, you now know how to adjust the properties of a View!