This practical codelab is part of Unit 1: of CS3040/DC3040. You will get the most value out of this course if you work through the codelabs in sequence:

For the complete list of codelabs in CS3040/DC3040, please see the Blackboard module.
For the Androidn training material this module is based on, including concept chapters, apps, and slides, see Android Developer Fundamentals (Version 2).
Note: This module uses the terms "codelab" and "practical" interchangeably.

Introduction

As you learned in Unit 1.2 Part A: Your first interactive UI, you can build a user interface (UI) using ConstraintLayout in the layout editor, which places UI elements in a layout using constraint connections to other elements and to the layout edges. ConstraintLayout was designed to make it easy to drag UI elements into the layout editor.

ConstraintLayout is a ViewGroup, which is a special View that can contain other View objects (called children or child views). This practical shows more features of ConstraintLayout and the layout editor.

This practical also introduces two other ViewGroup subclasses:

LinearLayout: A group that aligns child View elements within it horizontally or vertically.
RelativeLayout: A group of child View elements in which each View element is positioned and aligned relative to other View element within the ViewGroup. Positions of the child View elements are described in relation to each other or to the parent ViewGroup.

What you should already know

You should be able to:

• Create a Hello World app with Android Studio.
• Run an app on the emulator or a device.
• Create a simple layout for an app with ConstraintLayout.
• Extract and use string resources.

What you'll learn

• How to create a layout variant for horizontal (landscape) orientation.
• How to create a layout variant for tablets and larger displays.
• How to use a baseline constraint to align UI elements with text.
• How to use the pack and align buttons to align elements in the layout.
• How to position views within a LinearLayout.
• How to position views within a RelativeLayout.

What you'll do

• Create a layout variant for a horizontal display orientation.
• Create a layout variant for tablets and larger displays.
• Modify the layout to add constraints to the UI elements.
• Use ConstraintLayout baseline constraints to align elements with text.
• Use ConstraintLayout pack and align buttons to align elements.
• Change the layout to use LinearLayout.
• Position elements in a LinearLayout.
• Change the layout to use RelativeLayout.
• Rearrange the views in the main layout to be relative to each other.

The Hello Toast app in a previous lesson uses ConstraintLayout to arrange the UI elements in the Activity layout, as shown in the figure below.

To gain more practice with ConstraintLayout, you will create a variant of this layout for horizontal orientation as shown in the figure below.

You will also learn how to use baseline constraints and some of the alignment features of ConstraintLayout by creating another layout variant for tablet displays.

You also learn about other ViewGroup subclasses such as LinearLayout and RelativeLayout, and change the Hello Toast app layout to use them.

In the previous lesson, the coding challenge required changing the layout of the Hello Toast app so that it would fit properly in a horizontal or vertical orientation. In this task you will learn an easier way to create variants of your layout for horizontal (also known as landscape) and vertical (also known as portrait) orientations for phones, and for larger displays such as tablets.

In this task you will use some of the buttons in the top two toolbars of the layout editor. The top toolbar lets you configure the appearance of the layout preview in the layout editor:

In the figure above:

1. Select Design Surface: Select Design to display a color preview of your layout, or Blueprint to show only outlines for each UI element. To see both panes side by side, select Design + Blueprint.
2. Orientation in Editor: Select Portrait or Landscape to show the preview in a vertical or horizontal orientation. This is useful for previewing the layout without having to run the app on an emulator or device. To create alternative layouts, select Create Landscape Variation or other variations.
3. Device for Preview: Select the device type (phone/tablet, Android TV, or Android Wear).
4. API Version in Editor: Select the version of Android to use to show the preview.
5. Theme in Editor: Select a theme (such as AppTheme) to apply to the preview.
6. Locale in Editor: Select the language and locale for the preview. This list displays only the languages available in the string resources (see the lesson on localization for details on how to add languages). You can also choose Preview as Right To Left to view the layout as if an RTL language had been chosen.

The second toolbar lets you configure the appearance of UI elements in a ConstraintLayout, and to zoom and pan the preview:

In the figure above:

1. Show: Choose Show Constraints and Show Margins to show them in the preview, or to stop showing them.
2. Autoconnect: Enable or disable Autoconnect. With Autoconnect enabled, you can drag any element (such as a Button) to any part of a layout to generate constraints against the parent layout.
3. Default Margins: Set the default margins.
4. Clear All Constraints: Clear all constraints in the entire layout.
5. Infer Constraints: Create constraints by inference.
6. Guidelines: Add vertical or horizontal guidelines.

In the figure above:

1. Pan control
2. Zoom controls: Zoom in or out.

Tip: To learn more about using the layout editor, see Build a UI with Layout Editor. To learn more about how to build a layout with ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

1.1 Preview the layout in a horizontal orientation

To preview the Hello Toast app layout with a horizontal orientation, follow these steps:

1. Open the Hello Toast Layout app from the previous lesson which you can download from Blackboard.
2. Open the activity_main.xml layout file. Click the Design tab if it is not already selected.
3. Click the Orientation in Editor button in the top toolbar.
4. Select Switch to Landscape in the dropdown menu. The layout appears in horizontal orientation as shown below. To return to vertical orientation, select Switch to Portrait.

1.2 Create a layout variant for horizontal orientation

The visual difference between vertical and horizontal orientations for this layout is that the digit (0) in the show_countTextView element is too low for the horizontal orientation—too close to the Countbutton. Depending on which device or emulator you use, the TextView element may appear too large or not centered because the text size is fixed to 160sp.

To fix this for horizontal orientations while leaving vertical orientations alone, you can create variant of the Hello Toast app layout that is different for a horizontal orientation. Follow these steps:

1. Click the Orientation in Editor button in the top toolbar.
2. Choose Create Landscape Variation.
   A new editor window opens with the land/activity_main.xml tab showing the layout for the landscape (horizontal) orientation. You can change this layout, which is specifically for horizontal orientation, without changing the original portrait (vertical) orientation.
3. In the Project > Android pane, look inside the res > layout directory, and you will see that Android Studio automatically created the variant for you, called activity_main.xml (land).

1.3 Preview the layout for different devices

You can preview the layout for different devices without having to run the app on the device or emulator. Follow these steps:

1. The land/activity_main.xml tab should still be open in the layout editor; if not, double-click the activity_main.xml (land) file in the layout directory.
2. Click the Device for Preview button in the top toolbar.
3. Choose a different device in the dropdown menu. For example, choose Nexus 4, Nexus 5, and then Pixel to see differences in the previews. These differences are due to the fixed text size for the TextView.

1.4 Change the layout for horizontal orientation

You can use the Attributes pane in the Design tab to set or change attributes, but it can sometimes be quicker to use the Code tab to edit the XML code directly. The Split tab shows the XML code and provides a Preview tab on the right side of the window to show the layout preview, as shown in the figure below.

The figure above shows the following:

1. The Split tab, which you use to show both code and preview panes
2. The preview pane
3. The XML code

You can try using the Device for Preview option to select different devices. I found that none of the pre-defined phone options gave a particularly bad layout, however if I install the app on my Samsung S5, the bottom of the zero character is off the screen in landscape mode. Even worse, if you choose a wearable option using Device for Preview, the Wear Square optiondoes not show any of the zero character.

To change the layout, follow these steps:

1. The land/activity_main.xml tab should still be open in the layout editor; if not, double-click the activity_main.xml (land) file in the layout directory.
2. Click the Split tab (if not already selected).
3. Find the TextView element in the XML code.
4. Change the android:textSize="160sp" attribute to android:textSize="120sp". We don't need the app to display correctly on a wearable device, but if you have a phone with a small screen you want to choose the android:textSize value to be one that works with your device. You might need a smaller value that 120sp.
5. Choose different devices in the Device in Editor dropdown menu to see how the layout looks on different devices in horizontal orientation.
   In the editor pane, the land/activity_main.xml tab shows the layout for horizontal orientation. The activity_main.xml tab shows the unchanged layout for vertical orientation. You can switch back and forth by clicking the tabs.
6. Run the app on an emulator or device, and switch the orientation from vertical to horizontal to see both layouts. Once the zero character is completely visible in both portrait and landscape mode, you can move on. If the landscape mode still needs adjustment, go back to step 4 and change the value for android:textSize.

1.5 Create a layout variant for tablets

As you learned previously, you can preview the layout for different devices by clicking the Device in Editor button in the top toolbar. If you pick a device such as Nexus 10 (a tablet) from the menu, you can see that the layout is not ideal for a tablet screen—the text of each Button is too small, and the arrangement of the Button elements at the top and bottom is not ideal for a large-screen tablet.

To fix this for tablets while leaving the phone-size horizontal and vertical orientations alone, you can create variant of the layout that is completely different for tablets. Follow these steps:

1. Click the Design tab (if not already selected) to show the design and blueprint panes.
2. Click the Orientation in Editor button in the top toolbar.
3. Choose Create Tablet Variation.

A new editor window opens with the sw600dp/activity_main.xml tab showing the layout for a tablet-sized device. The editor also picks a tablet device, such as the Nexus 9 or Nexus 10, for the preview. You can change this layout, which is specifically for tablets, without changing the other layouts.

1.6 Change the layout variant for tablets

You can use the Attributes pane in the Design tab to change attributes for this layout.

1. Turn off the Autoconnect tool in the toolbar. For this step, ensure that the tool is disabled:
2. Clear all constraints in the layout by clicking the Clear All Constraints button in the toolbar.
   With constraints removed, you can move and resize the elements on the layout freely.
3. The layout editor offers resizing handles on all four corners of an element to resize it. In the Component Tree, select the TextView called show_count. To get the TextView out of the way so that you can freely drag the Button elements, drag a corner of it to resize it, as shown in the animated figure below.
   
   Resizing an element hardcodes the width and height dimensions. Avoid hardcoding the size dimensions for most elements, because you can't predict how hardcoded dimensions will look on screens of different sizes and densities. You are doing this now just to move the element out of the way, and you will change the dimensions in another step.
4. Select the button_toastButton in the Component Tree, click the Attributes tab to open the Attributes pane, and change the textSize to 60sp (#1 in the figure below) and the layout_width to wrap_content (#2 in the figure below).
   
   As shown on the figure below, you can click the view inspector's width control, which appears in two segments on the left and right sides of the square, until it shows Wrap Content. As an alternative, you can select wrap_content from the layout_width menu.
   
   You use wrap_content so that if the Button text is localized into a different language, the Button will appear wider or thinner to accommodate the word in the different language.
5. Select the button_countButton in the Component Tree, change the textSize to 60sp and the layout_width to wrap_content, and drag the Button above the TextView to an empty space in the layout.

1.7 Use a baseline constraint

You can align one UI element that contains text, such as a TextView or Button, with another UI element that contains text. A baseline constraint lets you constrain the elements so that the text baselines match.

1. Constrain the button_toastButton to the top and left side of the layout, drag the button_countButton to a space near the button_toastButton, and constrain the button_countButton to the right side of the button_toastButton, and assign borders of 8 around them, as shown in the animated figure:
   
2. Using a baseline constraint, you can constrain the button_countButton so that its text baseline matches the text baseline of the button_toastButton. Right-click the button_count element, and choose Show Baseline from the menu.
3. Click the baseline of the button_countButton and drag a baseline constraint line to the baseline of the button_toast element as shown below:
   

1.8 Expand the buttons horizontally

A chain is a group of views that are linked to each other with bi-directional position constraints. The views within a chain can be distributed either vertically or horizontally. You can read more about chains. We will create a chain containing the two buttons and then expand the buttons to fill the layout horizontally. The animated image below illustrates the steps.

1. Drag a rectangle around the two Button views, right click and select Chains > Create Horizontal Chain
2. Now click the Button with id button_toast and set its layout_width to 0dp (Match Constraints).
3. Click the Button with id button_count and set its layout_width to 0dp (Match Constraints).
   
4. To finish the layout, constraint the show_countTextView to the bottom of the button_toastButton and to the sides and bottom of the layout, set its layout_width and layout_height to Match Constraints and set its margins to 8, as shown in the animated figure below.
   
5. Click the Orientation in Editor button in the top toolbar and choose Switch to Portrait. The tablet layout appears in vertical orientation. You can choose Switch to Landscape to return to vertical orientation. The layout should look the same in both orientations. Here is a screenshot of the app running in a Tablet (Nexus 10) emulator:
   
6. Run the app on different emulators, and change the orientation after running the app, to see how it looks on different types of devices. You have successfully created an app that can run with a proper UI on phones and tablets that have different screen sizes and densities.

Tip: For more information on using ConstraintLayout, see Build a Responsive UI with ConstraintLayout.

You can find the completed code for this part of this codelab on Blackboard.

Challenge: Explore the different options for Horizontal Chain Style (right-click the chain of buttons and select Chains > Horizontal Chain Style. This option goes hand in hand with the layout_width of each Button.

Try and create the following set of variations of the button layouts, the first of which we already did in the exercise above.

Hint: You only need to change the settings for layout_width and chain style.

LinearLayout is a ViewGroup that arranges its collection of views in a horizontal or vertical row. A LinearLayout is one of the most common layouts because it is simple and fast. It is often used within another view group to arrange UI elements horizontally or vertically.

A LinearLayout is required to have these attributes:

• layout_width
• layout_height
• orientation

The layout_width and layout_height can take one of these values:

• match_parent: Expands the view to fill its parent by width or height. When the LinearLayout is the root view, it expands to the size of the screen (the parent view).
• wrap_content: Shrinks the view dimensions so the view is just big enough to enclose its content. If there is no content, the view becomes invisible.
• Fixed number of dp (density-independent pixels): Specify a fixed size, adjusted for the screen density of the device. For example, 16dp means 16 density-independent pixels.
  The orientation can be:
• horizontal: Views are arranged from left to right.
• vertical: Views are arranged from top to bottom.

In this task you will change the ConstraintLayout root view group for the Hello Toast app to LinearLayout so that you can gain practice in using LinearLayout.

2.1 Change the root view group to LinearLayout

1. Open the Hello Toast app from the previous task.
2. Open the activity_main.xml layout file (if it is not already open), and click the Code tab at the top right of the editing pane to see the XML code. At the very top of the XML code is the following tag line:

   <androidx.constraintlayout.widget.ConstraintLayout 
   	xmlns:android="http://schemas.android.com/apk/res/android"
   	xmlns:app="http://schemas.android.com/apk/res-auto"
   	xmlns:tools="http://schemas.android.com/tools"
   	android:layout_width="match_parent"
   	android:layout_height="match_parent"
   	tools:context=".MainActivity">
   

3. Change the androidx.constraintlayout.widget.ConstraintLayout tag name to be LinearLayout so that the code looks like this:

   <LinearLayout
   	xmlns:android="http://schemas.android.com/apk/res/android"
   	xmlns:app="http://schemas.android.com/apk/res-auto"
   	xmlns:tools="http://schemas.android.com/tools"
   	android:layout_width="match_parent"
   	android:layout_height="match_parent"
   	tools:context=".MainActivity">
   

4. Make sure the closing tag at the end of the code has changed to </LinearLayout> (Android Studio automatically changes the closing tag if you change the opening tag). If it hasn't changed automatically, change it manually.
5. Under the <LinearLayout tag line, add the following attribute after the android:layout_height attribute:

   android:orientation="vertical"
   

6. After making these changes, some of the XML attributes for other elements are underlined in red because they are used with ConstraintLayout and are not relevant for LinearLayout.

2.2 Change element attributes for the LinearLayout

Follow these steps to change UI element attributes so that they work with LinearLayout:

1. Continue editing the activity_main.xml layout file (if it is not already open), and click the Code tab to view the XML.
2. Find the button_toastButton element, and change the following attribute:
   

   Original	Change to
   android:layout_width="0dp"	android:layout_width="match_parent"

3. Delete the following attributes from the button_toast element:

   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent"
   

4. Find the button_count Button element, and change the following attribute:
   

   Original	Change to
   android:layout_width="0dp"	android:layout_width="match_parent"

5. Delete the following attributes from the button_count element:

   app:layout_constraintBottom_toBottomOf="parent"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   

6. Find the TextView element show_count called , and change the following attributes:
   

   Original	Change to
   android:layout_width="0dp"	android:layout_width="match_parent"
   android:layout_height="0dp"	android:layout_height="wrap_content"

7. Delete the following attributes from the show_count element:

   app:layout_constraintBottom_toTopOf="@+id/button_count"
   app:layout_constraintEnd_toEndOf="parent"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@+id/button_toast"
   

   Click the Design tab on the top right of the editor window to see a preview of the layout thus far:
   

2.3 Change the positions of elements in the LinearLayout

LinearLayout arranges its elements in a horizontal or vertical row. You have already added the android:orientation="vertical" attribute for the LinearLayout, so the elements are stacked on top of each other vertically as shown in the previous figure.

To change their positions so that the Count button is on the bottom, follow these steps:

1. Continue editing the activity_main.xmllayout file and click the Code tab to view the XML.
2. Select the button_count Button and all of its attributes, from the <Button tag up to and including the closing /> tag, and choose Edit > Cut.
3. Click after the closing /> tag of the TextView element but before the closing </LinearLayout> tag, and choose Edit > Paste.
4. (Optional) To fix any indents or spacing issues for cosmetic purposes, choose Code > Reformat Code to reformat the XML code with proper spacing and indents.
   The XML code for the UI elements now looks like the following:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   	xmlns:app="http://schemas.android.com/apk/res-auto"
   	xmlns:tools="http://schemas.android.com/tools"
   	android:layout_width="match_parent"
   	android:layout_height="match_parent"
   	android:orientation="vertical"
   	tools:context=".MainActivity">
   
   	<Button
   		android:id="@+id/button_toast"
   		android:layout_width="match_parent"
   		android:layout_height="wrap_content"
   		android:layout_marginStart="8dp"
   		android:layout_marginTop="8dp"
   		android:layout_marginEnd="8dp"
   		android:background="@color/colorPrimary"
   		android:onClick="showToast"
   		android:text="@string/button_label_toast"
   		android:textColor="@android:color/white" />
   
   
   	<TextView
   		android:id="@+id/show_count"
   		android:layout_width="match_parent"
   		android:layout_height="wrap_content"
   		android:layout_marginStart="8dp"
   		android:layout_marginTop="8dp"
   		android:layout_marginEnd="8dp"
   		android:layout_marginBottom="8dp"
   		android:background="#FFFF00"
   		android:gravity="center_vertical"
   		android:text="@string/count_initial_value"
   		android:textAlignment="center"
   		android:textColor="@color/colorPrimary"
   		android:textSize="240sp"
   		android:textStyle="bold" />
   
   	<Button
   		android:id="@+id/button_count"
   		android:layout_width="match_parent"
   		android:layout_height="wrap_content"
   		android:layout_marginStart="8dp"
   		android:layout_marginEnd="8dp"
   		android:layout_marginBottom="8dp"
   		android:background="@color/colorPrimary"
   		android:onClick="countUp"
   		android:text="@string/button_label_count"
   		android:textColor="@android:color/white" />
   
   </LinearLayout>
   

By moving the button_countButton below the TextView, the layout is now close to what you had before, with the Countbutton on the bottom. The preview of the layout now looks like the following:

2.4 Add weight to the TextView element

Specifying gravity and weight attributes gives you additional control over arranging views and content in a LinearLayout.

The android:gravityattribute specifies the alignment of the content of a View within the View itself. In the previous lesson you set this attribute for the show_countTextView in order to center the content (the digit 0) in the middle of the TextView:

android:gravity="center_vertical"

The android:layout_weight attribute indicates how much of the extra space in the LinearLayout will be allocated to the View. If only one View has this attribute, it gets all the extra screen space. For multiple View elements, the space is prorated. For example, if the Button elements each have a weight of 1 and the TextView2, totaling 4, the Button elements get one quarter of the space each, and the TextView gets the remaining half.

On different devices, the layout may show the show_countTextView element as filling part or most of the space between the Toast and Count buttons. In order to expand the TextView to fill the available space no matter which device is used, specify the android:gravity attribute for the TextView. Follow these steps:

1. Continue editing the activity_main.xml layout file, and click the Code tab to view the XML.
2. Find the show_countTextView element, and add the following attribute:
   android:layout_weight="1"
3. The preview now looks like the following figure.
   

The show_countTextView element takes up all the space between the buttons. You can preview the layout for different devices, as you did in a previous task by clicking the Device in Editor button as you did in a previous task by clicking the Device in Editor button in the top toolbar of the preview pane, and choosing a different device. No matter which device you choose for the preview, the show_countTextView element should take up all the space between the buttons.

Task 2 solution code

The XML code in activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	tools:context=".MainActivity">

	<Button
		android:id="@+id/button_toast"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginStart="8dp"
		android:layout_marginTop="8dp"
		android:layout_marginEnd="8dp"
		android:background="@color/colorPrimary"
		android:onClick="showToast"
		android:text="@string/button_label_toast"
		android:textColor="@android:color/white" />


	<TextView
		android:id="@+id/show_count"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginStart="8dp"
		android:layout_marginTop="8dp"
		android:layout_marginEnd="8dp"
		android:layout_marginBottom="8dp"
		android:background="#FFFF00"
		android:gravity="center_vertical"
		android:layout_weight="1"
		android:text="@string/count_initial_value"
		android:textAlignment="center"
		android:textColor="@color/colorPrimary"
		android:textSize="240sp"
		android:textStyle="bold" />

	<Button
		android:id="@+id/button_count"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginStart="8dp"
		android:layout_marginEnd="8dp"
		android:layout_marginBottom="8dp"
		android:background="@color/colorPrimary"
		android:onClick="countUp"
		android:text="@string/button_label_count"
		android:textColor="@android:color/white" />

</LinearLayout>

A RelativeLayout is a view grouping in which each view is positioned and aligned relative to other views within the group. In this task you will learn how to build a layout with RelativeLayout.

3.1 Change LinearLayout to RelativeLayout

An easy way to change the LinearLayout to a RelativeLayout is to add XML attributes in the Text tab.

1. Open the activity_main.xml layout file, and click the Code tab at the top right of the editing pane to see the XML code.
2. Change the <LinearLayout at the top to <RelativeLayout so that the statement looks like this:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   

3. Scroll down to make sure that the ending tag </LinearLayout> has automatically been changed to </RelativeLayout> and if it hasn't, change it manually.

3.2 Rearrange views in a RelativeLayout

An easy way to rearrange and position views in a RelativeLayout is to add XML attributes in the Text tab.

1. Click the Design tab at the top right of the editor to see the layout preview, which now looks like the figure below.
   
   With the change to RelativeLayout, the layout editor also changed some of the view attributes. For example:
2. The CountButton (button_count) overlays the ToastButton, which is why you can't see the ToastButton (button_toast).
3. The top part of the TextView (show_count) overlays the Button elements.
4. Add the android:layout_below attribute to the button_count Button to position the Button directly below the show_count TextView. This attribute is one of several attributes for positioning views within a RelativeLayout - you place views in relation to other views.

   android:layout_below="@+id/show_count"
   

5. Add the android:layout_centerHorizontal attribute to the same Button to center the view horizontally within its parent, which in this case is the RelativeLayout view group.

   android:layout_centerHorizontal="true"
   

   The full XML code for the button_count Button is as follows:

   	<Button
   		android:id="@+id/button_count"
   		android:layout_width="match_parent"
   		android:layout_height="wrap_content"
   		android:layout_below="@+id/show_count"
   		android:layout_centerHorizontal="true"
   		android:layout_marginStart="8dp"
   		android:layout_marginEnd="8dp"
   		android:layout_marginBottom="8dp"
   		android:background="@color/colorPrimary"
   		android:onClick="countUp"
   		android:text="@string/button_label_count"
   		android:textColor="@android:color/white" />
   

6. Add the following attributes to the show_count TextView:

   android:layout_below="@+id/button_toast"
   android:layout_alignParentLeft="true"
   android:layout_alignParentStart="true"
   

   The android:layout_alignParentLeft attribute aligns the view to the left side of the RelativeLayout parent view group. While this attribute by itself is enough to align the view to the left side, you may want the view to align to the right side if the app is running on a device that is using a right-to-left language. Thus, the android:layout_alignParentStart attribute makes the "start" edge of this view match the start edge of the parent. The start is the left edge of the screen if the preference is left-to-right, or it is the right edge of the screen if the preference is right-to-left.
7. Delete the android:layout_weight="1" attribute from the show_count TextView, which is not relevant for a RelativeLayout. The layout preview now looks like the following figure:
   Tip: RelativeLayout makes it relatively easy to quickly place UI elements in a layout. To learn more about how to position views in a RelativeLayout, see "Positioning Views" in the "Relative Layout" topic of the API Guide.

Task 3 solution code

The XML code in activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical"
	tools:context=".MainActivity">

	<Button
		android:id="@+id/button_toast"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_marginStart="8dp"
		android:layout_marginTop="8dp"
		android:layout_marginEnd="8dp"
		android:background="@color/colorPrimary"
		android:onClick="showToast"
		android:text="@string/button_label_toast"
		android:textColor="@android:color/white" />


	<TextView
		android:id="@+id/show_count"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_below="@+id/button_toast"
		android:layout_alignParentLeft="true"
		android:layout_alignParentStart="true"
		android:layout_marginStart="8dp"
		android:layout_marginTop="8dp"
		android:layout_marginEnd="8dp"
		android:layout_marginBottom="8dp"
		android:layout_weight="1"
		android:background="#FFFF00"
		android:gravity="center_vertical"
		android:text="@string/count_initial_value"
		android:textAlignment="center"
		android:textColor="@color/colorPrimary"
		android:textSize="240sp"
		android:textStyle="bold" />

	<Button
		android:id="@+id/button_count"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:layout_below="@+id/show_count"
		android:layout_centerHorizontal="true"
		android:layout_marginStart="8dp"
		android:layout_marginEnd="8dp"
		android:layout_marginBottom="8dp"
		android:background="@color/colorPrimary"
		android:onClick="countUp"
		android:text="@string/button_label_count"
		android:textColor="@android:color/white" />

</RelativeLayout>

Using the layout editor to preview and create variants:

• To preview the app layout with a horizontal orientation in the layout editor, click the Orientation in Editor button in the top toolbar and choose Switch to Landscape. Choose Switch to Portrait to return to vertical orientation.
• To create a variant of the layout that is different for a horizontal orientation, click the Orientation in Editor button and choose Create Landscape Variation. A new editor window opens with the land/activity_main.xml tab showing the layout for the landscape (horizontal) orientation.
• To preview the layout for different devices without having to run the app on the device or emulator, click the Device in Editor button click the Device in Editor button in the top toolbar, and choose a device.
• To create variant of the layout that is different for a tablet (larger screen), click the Orientation in Editor button and choose Create Tablet Variation. A new editor window opens with the sw600dp/activity_main.xml tab showing the layout for a tablet-sized device.

Using ConstraintLayout:

• To clear all constraints in a layout with the ConstraintLayout root, click the Clear All Constraints button in the toolbar.
• You can align one UI element that contains text, such as a TextView or Button, with another UI element that contains text. A baseline constraint lets you constrain the elements so that the text baselines match.
• To create a baseline constraint, right-click on the UI element and choose Show baseline, then click and drag a baseline constraint line to the baseline of the other element.
• Buttons can be grouped in a horizontal or vertical chain. To create a chain of views, you select all of the views that you want to include in the chain, and select Create Horizontal Chain or Create Vertival Chain. The layout of the views in the chain then depends on the chain style (spread, spread inside, or packed) and the layout_width/layout_height of each view.

Using LinearLayout:

• LinearLayout is a ViewGroup that arranges its collection of views in a horizontal or vertical row.
• A LinearLayout is required to have the layout_width, layout_height, and orientation attributes.
• match_parent for layout_width or layout_height: Expands the View to fill its parent by width or height. When the LinearLayout is the root View, it expands to the size of the screen (the parent View).
• wrap_content for layout_width or layout_height: Shrinks the dimensions so the View is just big enough to enclose its content. If there is no content, the View becomes invisible.
• Fixed number of dp (density-independent pixels) for layout_width or layout_height: Specify a fixed size, adjusted for the screen density of the device. For example, 16dp means 16 density-independent pixels.
  The orientation for a LinearLayout can be horizontal to arrange elements from left to right, or vertical to arrange elements from top to bottom.
• Specifying gravity and weight attributes gives you additional control over arranging views and content in a LinearLayout.
• The android:gravity attribute specifies the alignment of the content of a View within the View itself.
• The android:layout_weight attribute indicates how much of the extra space in the LinearLayout will be allocated to the View. If only one View has this attribute, it gets all the extra screen space. For multiple View elements, the space is prorated. For example, if two Button elements each have a weight of 1 and a TextView 2, totaling 4, the Button elements get one quarter of the space each, and the TextView gets half.

Using RelativeLayout:

• A RelativeLayout is a ViewGroup in which each view is positioned and aligned relative to other views within the group.
• Use android:layout_alignParentTop to align the View to the top of the parent.
• Use android:layout_alignParentLeft to align the View to the left side of the parent.
• Use android:layout_alignParentStart to make the start edge of the View match the start edge of the parent. This attribute is useful if you want your app to work on devices that use different language or locale preferences. The start is the left edge of the screen if the preference is left-to-right, or it is the right edge of the screen if the preference is right-to-left.

The related concept documentation is in 1.2: Layouts and resources for the UI.

Android Studio documentation:

• Meet Android Studio
• Create app icons with Image Asset Studio

Android developer documentation:

• Layouts
• Build a UI with Layout Editor
• Build a Responsive UI with ConstraintLayout
• LinearLayout
• RelativeLayout
• View
• Button
• TextView
• Supporting different pixel densities

Other:

• There is a Codelab on Blackboard: Using ConstraintLayout to design your Android views
• Vocabulary words and concepts glossary