The user interface (UI) that appears on a screen of an Android device
consists of a hierarchy of objects called views — every element of the
screen is a View. The View class represents the basic building block
for all UI components, and the base class for classes that provide
interactive UI components such as buttons, checkboxes, and text entry
fields. Commonly used View subclasses described over several lessons
include:

The Java code that displays and drives the UI is contained in a class that extends Activity. An Activity is usually associated with a layout of UI views defined as an XML (eXtended Markup Language) file. This XML file is usually named after its Activity and defines the layout of View elements on the screen.

For example, the MainActivity code in the Hello World app displays a layout defined in the activity_main.xml layout file, which includes a TextView with the text "Hello World".

In more complex apps, an Activity might implement actions to respond to user taps, draw graphical content, or request data from a database or the internet. You learn more about the Activity class in another lesson.

In this practical you learn how to create your first interactive app—an app that enables user interaction. You create an app using the Empty Activity template. You also learn how to use the layout editor to design a layout, and how to edit the layout in XML. You need to develop these skills so you can complete the other practicals in this course.

What you should already know

You should be familiar with:

What you'll learn

What you'll do

The HelloToast app consists of two Button elements and one TextView. When the user taps the first Button, it displays a short message (a Toast) on the screen. Tapping the second Button increases a "click" counter displayed in the TextView, which starts at zero.

Here's what the finished app looks like:

Hello Toast Screenshot

In this practical, you design and implement a project for the HelloToast app. A link to the solution code is provided at the end.

1.1 Create the Android Studio project

  1. Start Android Studio and create a new project with the following parameters:

    Attribute

    Value

    Template

    Empty Activity (Click Next)

    Application Name

    Hello Toast

    Package Name

    uk.aston.hellotoast (or your own domain)

    Language

    Java

    Minimum SDK

    API18: Android 4.3 (Jelly Bean)

  2. Select Run > Run app or click the Run icon in the toolbar to build and execute the app on the emulator or your device.)

1.2 Explore the layout editor

Android Studio provides the layout editor for quickly building an app's layout of user interface (UI) elements. It lets you drag elements to a visual design and blueprint view, position them in the layout, add constraints, and set attributes. Constraints determine the position of a UI element within the layout. A constraint represents a connection or alignment to another view, the parent layout, or an invisible guideline.

Explore the layout editor, and refer to the figure below as you follow the numbered steps:
Android Studio IDE

  1. In the app > res > layout folder in the Project > Android pane, double-click the activity_main.xml file to open it, if it is not already open.
  2. Click the Design tab if it is not already selected. You use the Design tab to manipulate elements and the layout, and the Code tab to edit the XML code for the layout. The Split tab shows both XML code and design.
  3. The Palettes pane shows UI elements that you can use in your app's layout.
  4. The Component tree pane shows the view hierarchy of UI elements. View elements are organized into a tree hierarchy of parents and children, in which a child inherits the attributes of its parent. In the figure above, the TextView is a child of the ConstraintLayout. You will learn about these elements later in this lesson.
  5. The design and blueprint panes of the layout editor showing the UI elements in the layout. In the figure above, the layout shows only one element: a TextView that displays "Hello World".
  6. The Attributes tab displays the Attributes pane for setting properties for a UI element.

Tip: See Building a UI with Layout Editor for details on using the layout editor, and Meet Android Studio for the full Android Studio documentation.

In this task you create the UI layout for the HelloToast app in the layout editor using the ConstraintLayout features. You can create the constraints manually, as shown later, or automatically using the Autoconnect tool.

2.1 Examine the element constraints

Follow these steps:

  1. Open activity_main.xml from the Project > Android pane if it is not already open. If the Design tab is not already selected, click it.
    If there is no blueprint, click the Select Design Surface button Design Surface button in the toolbar and choose Design + Blueprint.
  2. The Autoconnect tool autoconnect tool is also located in the toolbar. It is enabled by default. For this step, ensure that the tool is not disabled.
  3. Click the zoom in Zoom in or out button to zoom into the design and blueprint panes for a close-up look.
  4. Select TextView in the Component Tree pane. The "Hello World" TextView is highlighted in the design and blueprint panes and the constraints for the element are visible.
  5. Refer to the animated figure below for this step. Click the circular handle on the right side of the TextView to delete the horizontal constraint that binds the view to the right side of the layout. The TextView jumps to the left side because it is no longer constrained to the right side. To add back the horizontal constraint, click the same handle and drag a line to the right side of the layout.
    animated gif showing constraint

In the blueprint or design panes, the following handles appear on the TextView element:

2.2 Add a Button to the layout

When enabled, the Autoconnect tool automatically creates two or more constraints for a UI element to the parent layout. After you drag the element to the layout, it creates constraints based on the element's position.

Follow these steps to add a Button:

  1. Start with a clean slate. The TextView element is not needed, so while it is still selected, press the Delete key or choose Edit > Delete. You now have a completely blank layout.
  2. Drag a Button from the Palette pane to any position in the layout. If you drop the Button in the top middle area of the layout, constraints may automatically appear. If not, you can drag constraints to the top, left side, and right side of the layout as shown in the animated figure below.
    Constraining top button

    2.3 Add a second Button to the layout

  3. Drag another Button from the Palette pane to the middle of the layout as shown in the animated figure below. Autoconnect may provide the horizontal constraints for you (if not, you can drag them yourself).
  4. Drag a vertical constraint to the bottom of the layout (refer to the figure below).
    Constraining bottom button

You can remove constraints from an element by selecting the element and hovering your pointer over it to show the Clear Constraints clear constraints button button. Click this button to remove all constraints on the selected element. To clear a single constraint, click the specific handle that sets the constraint.

To clear all constraints in the entire layout, click the Clear All Constraints tool in the toolbar. This tool is useful if you want to redo all the constraints in your layout.

The Attributes pane offers access to all of the XML attributes you can assign to a UI element. You can find the attributes (known as properties) common to all views in the View class documentation.

In this task you enter new values and change values for important Button attributes, which are applicable to most View types.

3.1 Change the Button size

The layout editor offers resizing handles on all four corners of a View so you can resize the View quickly. You can drag the handles on each corner of the View to resize it, but doing so hardcodes the width and height dimensions. Avoid hardcoding sizes for most View elements, because hardcoded dimensions can't adapt to different content and screen sizes.

Instead, use the Attributes pane on the right side of the layout editor to select a sizing mode that doesn't use hardcoded dimensions. The Attributes pane includes a square sizing panel called the view inspector at the top. The symbols inside the square represent the height and width settings as follows:

attributes pane


In the figure above:

  1. Height control. This control specifies the layout_height attribute and appears in two segments on the top and bottom sides of the square. The angles indicate that this control is set to wrap_content, which means the View will expand vertically as needed to fit its contents. The "0" indicates a standard margin set to 0dp.
  2. Width control. This control specifies the layout_width and appears in two segments on the left and right sides of the square. The angles indicate that this control is set to wrap_content, which means the View will expand horizontally as needed to fit its contents, up to a margin of 0dp.
  3. Attributes pane close button. Click to close the pane.

Follow these steps:

  1. Select the top Button in the Component Tree pane.
  2. Click the Attributes tab on the right side of the layout editor window.
    Attributes Tab
  3. Set the left, right, and top margins to 8dp (if not already set)
  4. Click the width control twice—the first click changes it to Fixed with straight lines, and the second click changes it to Match Constraints with spring coils, as shown in the animated figure below.
    Full width button
    As a result of changing the width control, the layout_width attribute in the Attributes pane shows the value match_constraint and the Button element stretches horizontally to fill the space between the left and right sides of the layout.
  5. Select the second Button, and make the same changes to the layout_width as in the previous step, as shown in the figure below.
    Bottom Button Constraints

As shown in the previous steps, the layout_width and layout_height attributes in the Attributes pane change as you change the height and width controls in the inspector. These attributes can take one of three values for the layout, which is a ConstraintLayout:

Tip: If you change the layout_width attribute using its popup menu, the layout_width attribute is set to zero because there is no set dimension. This setting is the same as match_constraint - the view can expand as much as possible to meet constraints and margin settings.

3.2 Change the Button attributes

To identify each View uniquely within an Activity layout, each View or View subclass (such as Button) needs a unique ID. And to be of any use, the Button elements need text. View elements can also have backgrounds that can be colors or images.

The Attributes pane offers access to all of the attributes you can assign to a View element. You can enter values for each attribute, such as the android:id, background, textColor, and text attributes.

The following animated figure demonstrates how to perform these steps:

  1. After selecting the first Button, edit the ID field at the top of the Attributes pane to button_toast for the android:id attribute, which is used to identify the element in the layout.
  2. Set the background attribute to @color/colorPrimary. (As you enter @c, choices appear for easy selection.)
  3. Set the textColor attribute to @android:color/white.
  4. Edit the text attribute to Toast.
    Button Toast Attributes
  5. Perform the same attribute changes for the second Button, using button_count as the ID, Count for the text attribute, and the same colors for the background and text as the previous steps.

The colorPrimary is the primary color of the theme, one of the predefined theme base colors defined in the colors.xml resource file. It is used for the app bar. Using the base colors for other UI elements creates a uniform UI. You will learn more about app themes and Material Design in another lesson.

One of the benefits of ConstraintLayout is the ability to align or otherwise constrain elements relative to other elements. In this task you will add a TextView in the middle of the layout, and constrain it horizontally to the margins and vertically to the two Button elements. You will then change the attributes for the TextView in the Attributes pane.

4.1 Add a TextView and constraints

  1. As shown in the animated figure below, drag a TextView from the Palette pane to the upper part of the layout, and drag a constraint from the top of the TextView to the handle on the bottom of the ToastButton. This constrains the TextView to be underneath the Button.
    Constrain TextView
  2. As shown in the animated figure below, drag a constraint from the bottom of the TextView to the handle on the top of the CountButton, and from the sides of the TextView to the sides of the layout. This constrains the TextView to be in the middle of the layout between the two Button elements.
    Text View Centered

4.2 Set the TextView attributes

With the TextView selected, open the Attributes pane, if it is not already open. Set attributes for the TextView as shown in the animated figure below. The attributes you haven't encountered yet are explained after the figure:

  1. Set the ID to show_count.
  2. Set the text to 0.
  3. Click to expand textAppearance and set the textSize to 160sp.
  4. Set the textStyle to B (bold) and the textAlignment to ALIGNCENTER (center the paragraph).
    Change the horizontal and vertical view size controls (layout_width and layout_height) to match_constraint.
  5. Set the textColor to @color/colorPrimary.
  6. Scroll down the pane and click to expand View all attributes, scroll down the second page of attributes to background, and then enter #FFFF00 for a shade of yellow.
  7. Scroll down to gravity, expand gravity, and select center_vertical (for center-vertical).
  8. Give your TextView a margin of 8 all around
    Yellow textview attributes

You may notice that the background attribute is on the first page of the Attributes pane for a Button, but on the second page of the Attributes pane for a TextView. The Attributes pane changes for each type of View. The most popular attributes for the View type appear on the first page, and the rest are listed on the second page.

The Hello Toast app layout is nearly finished! However, an exclamation point appears next to each UI element in the Component Tree. Right click on one of these exclamation points to view warnings pane, as shown below. The same warning appears for all three elements: hardcoded strings should use resources.
Hardcoded String Resources
The easiest way to fix layout problems is to edit the layout in XML. While the layout editor is a powerful tool, some changes are easier to make directly in the XML source code.

5.1 Open the XML code for the layout

For this task, open the activity_main.xml file if it is not already open, and click the Code tab Code tab at the top right of the layout editor.

The XML editor appears, replacing the design and blueprint panes. As you can see in the figure below, which shows part of the XML code for the layout, the warnings are highlighted—the hardcoded strings "Toast" and "Count". (The hardcoded "0" is also highlighted but not shown in the figure.) Hover your pointer over the hardcoded string "Toast" to see the warning message.
Xml Hardcoded String Warning

5.2 Extract string resources

Instead of hard-coding strings, it is a best practice to use string resources, which represent the strings. Having the strings in a separate file makes it easier to manage them, especially if you use these strings more than once. Also, string resources are mandatory for translating and localizing your app, because you need to create a string resource file for each language.

  1. Click once on the word "Toast" (the first highlighted warning).
  2. Press Alt-Enter in Windows/Linux or Option-Enter in macOS and choose Extract string resource from the popup menu.
  3. Enter button_label_toast for the Resource name.
  4. Click OK. A string resource is created in the values/res/string.xml file, and the string in your code is replaced with a reference to the resource: @string/button_label_toast
  5. Extract the remaining strings: button_label_count for "Count", and count_initial_value for "0".
  6. In the Project > Android pane, expand res and then expand values within res, and double-click strings.xml to see your string resources in the strings.xml file:
    <resources>
	<string name="app_name">HelloToast</string>
	<string name="button_label_toast">Toast</string>
	<string name="button_label_count">Count</string>
	<string name="count_initial_value">0</string>
</resources>
  7. You need another string to use in a subsequent task that displays a message. Add to the strings.xml file another string resource named toast_message for the phrase "Hello Toast!":
    <resources>
	<string name="app_name">HelloToast</string>
	<string name="button_label_toast">Toast</string>
	<string name="button_label_count">Count</string>
	<string name="count_initial_value">0</string>
<string name="toast_message">Hello Toast!</string>
</resources>

Tip: The string resources include the app name, which appears in the app bar at the top of the screen if you start your app project using the Empty Template. You can change the app name by editing the app_name resource.

In this task, you add a Java method for each Button in MainActivity that executes when the user taps the Button.

6.1 Add the onClick attribute and handler to each Button

A click handler is a method that is invoked when the user clicks or taps on a clickable UI element. In Android Studio you can specify the name of the method in the onClick field in the Design tab's Attributes pane. You can also specify the name of the handler method in the XML editor by adding the android:onClick property to the Button. You will use the latter method because you haven't yet created the handler methods, and the XML editor provides an automatic way to create those methods.

  1. With the XML editor open (the Text tab), find the Button with the android:id set to button_toast:
    <Button
	android:id="@+id/button_toast"
	android:layout_width="0dp"
	...
	app:layout_constraintStart_toStartOf="parent"
	app:layout_constraintTop_toTopOf="parent" />
  2. Add the android:onClick attribute to the end of the button_toast element after the last attribute and before the /> end indicator:
    <Button
	android:id="@+id/button_toast"
	...
	app:layout_constraintTop_toTopOf="parent"
	android:onClick="showToast" />
  3. Click the red bulb icon that appears next to attribute. Select Create ‘showToast(View)' in ‘MainActivity', and the MainActivity class will be opened in the editor with a new method called showToast.
    If the red bulb icon doesn't appear, click the method name ("showToast"). Press Alt-Enter (Option-Enter on the Mac), select Create ‘showToast(view)' in ‘MainActivity', and click OK.
    This action creates a placeholder method stub for the showToast() method in MainActivity, as shown in the animated image below:
    Create showToast method
  4. Repeat the last two steps with the button_countButton: Add the android:onClick attribute to the end, and add the click handler:
    <Button
	android:id="@+id/button_count"
	...	
app:layout_constraintStart_toStartOf="parent"
	android:onClick="countUp" />
    The XML code for the UI elements within activity_main.xml now looks like this:
    <?xml version="1.0" encoding="utf-8"?>
<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">

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

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

	<TextView
		android:id="@+id/show_count"
		android:layout_width="0dp"
		android:layout_height="0dp"
		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="160sp"
		android:textStyle="bold"
		app:layout_constraintBottom_toTopOf="@+id/button_count"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"
		app:layout_constraintTop_toBottomOf="@+id/button_toast" />

</androidx.constraintlayout.widget.ConstraintLayout>
  5. If MainActivity.java is not already open, expand java in the Project > Android view, expand uk.aston.hellotoast, and then double-click MainActivity. The code editor appears with the code in MainActivity:
    package uk.aston.hellotoast;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
	}

	public void showToast(View view) {
	}

	public void countUp(View view) {
	}
}

6.2 Edit the Toast Button handler

You will now edit the showToast() method—the ToastButton click handler in MainActivity - so that it shows a message. A Toast provides a way to show a simple message in a small popup window. It fills only the amount of space required for the message. The current activity remains visible and interactive. A Toast can be useful for testing interactivity in your app - add a Toast message to show the result of tapping a Button or performing an action.

Follow these steps to edit the ToastButton click handler:

Locate the newly created showToast() method.

public void showToast(View view) {
}
  1. To create an instance of a Toast, call the makeText() factory method on the Toast class.
    public void showToast(View view) {
	Toast toast = Toast.makeText(
}
  2. Supply the context of the app Activity. Because a Toast displays on top of the Activity UI, the system needs information about the current Activity. When you are already within the context of the Activity whose context you need, use this as a shortcut.
    Toast toast = Toast.makeText(this,
  3. Supply the message to display, such as a string resource (the toast_message you created in a previous step). The string resource toast_message is identified by R.string.
    Toast toast = Toast.makeText(this, R.string.toast_message,
  4. Supply a duration for the display. For example, Toast.LENGTH_SHORT displays the toast for a relatively short time.
    Toast toast = Toast.makeText(this, R.string.toast_message, 
								Toast.LENGTH_SHORT);
    The duration of a Toast display can be either Toast.LENGTH_LONG or Toast.LENGTH_SHORT. The actual lengths are about 3.5 seconds for the long Toast and 2 seconds for the short Toast.
  5. Show the Toast by calling show(). The following is the entire showToast() method:
    public void showToast(View view) {
	Toast toast = Toast.makeText(this, R.string.toast_message,
									Toast.LENGTH_SHORT);
	toast.show();
}

Run the app and verify that the Toast message appears when the Toast button is tapped.

Toast message showing

6.3 Edit the Count Button handler

You will now edit the countUp() method—the CountButton click handler in MainActivity - so that it displays the current count after Count is tapped. Each tap increases the count by one.

The code for the handler must:

Follow these steps to edit the CountButton click handler:

  1. Locate the newly created countUp() method.
    public void countUp(View view) {
}
  2. To keep track of the count, you need a private member variable. Each tap of the Count button increases the value of this variable. Enter the following, which will be highlighted in red and show a red bulb icon:
    public void countUp(View view) {
	mCount++;
}
    If the red bulb icon doesn't appear, click the mCount++ expression. The red bulb eventually appears.
    Click the red bulb icon and choose Create field ‘mCount' in ‘MainActivity' from the popup menu. This creates a private member variable at the top of MainActivity, and Android Studio assumes that you want it to be an integer (int). If you press Enter to accept the int type, that will complete the operation. Watch this animated image to see it done:
    Create count variable
  3. Locate the onCreate() method in MainActivity and add a line to initialise the private member variable to zero:
    @Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	mCount = 0;
}
  4. We want to display the value of the mCount variable on the screen of our app using the TextView whose ID we set to be show_count. You need to get a reference to the TextView using the ID you set in the layout file. In order to get this reference only once, specify it in the onCreate() method. As you learn in another lesson, the onCreate() method is used to inflate the layout, which means to set the content view of the screen to the XML layout. You can also use it to get references to other UI elements in the layout, such as the TextView.
  5. Add a call to findViewById to the end of your onCreate method to find and return the TextView which has the ID value show_count:
    @Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	mCount = 0;
	mShowCount = (TextView) findViewById(R.id.show_count);
}
    A View, like a string, is a resource that can have an id. The findViewById call takes the ID of a view as its parameter and returns the View. Because the method returns a View, you have to cast the result to the view type you expect, in this case (TextView).
  6. Once again, click the red bulb at the start of the line and select Create field ‘mShowCount' in ‘MainActivity' and click Enter to accept the type TextView. You should now have two member variables in MainActivity:
    private int mCount;
private TextView mShowCount;
  7. Now that you have assigned the TextView to mShowCount, you can use mShowCount to set the text in the TextView to the value of the mCount variable. Add the following code to the countUp() method:
    if (mShowCount != null) {
	mShowCount.setText(Integer.toString(mCount));
}
    The entire countUp() method now looks like this:
    public void countUp(View view) {
	mCount++;
	if (mShowCount != null) {
		mShowCount.setText(Integer.toString(mCount));
	}
}
  8. Run the app to verify that the count increases when you tap the Count button.

Count updated and displayed

Tip: For an in-depth tutorial on using ConstraintLayout, see the Codelab entitled Using ConstraintLayout to design your views.

You can find a ZIP of the Android Studio project: HelloToast on Blackboard.

The HelloToast app looks fine when the device or emulator is vertically oriented. However, if you switch the device or emulator to horizontal orientation, the CountButton may overlap the TextView along the bottom depending on the screen resolution of the emulated device. Watch the animated image below to see what happens when we run the app on a Nexus One and configure the emulator to rotate the screen when the orientation changes from portrait to landscape and vice versa:
Rotating the view

Challenge: Change the layout so that it looks good in both horizontal and vertical orientations:

Copy, rename and refactor the project

If you copy a project and want to work on the copy, you should rename and refactor the copy. In the following steps we are going to do that for the HelloToast project. Here are the steps to refactor the project:

  1. If the original project is still open in Android Studio, close it by selecting File > Close Project and use your system file navigator to find the folder containing the project
  2. Copy the HelloToast folder to a new location and rename it HelloToastChallenge
  3. In Android Studio, select Open an existing Android Studio project and open the renamed HelloToastChallenge project in Android Studio
  4. Select Build > Clean Project to remove the auto-generated files.
  5. If it is not already visible, click the 1:Project side-tab and choose Android from the drop-down menu to see your files in the Project: Android view.
  6. Expand the app > java folder.
  7. Right-click uk.aston.hellotoast and select Refactor > Rename. A Warning dialog is displayed. Select Rename package.
  8. The Rename dialog is displayed. Give a new name to your project, hellotoastchallenge.
  9. Select both Search in comments and strings and Search for text occurrences. Click Refactor.
  10. The Find: Refactoring Preview pane appears, showing the code to be refactored. Click Do Refactor.
  11. Expand the res > values folder and double-click the strings.xml file.
  12. Change the app_name string value to HelloToastChallenge.
  13. Check the AndroidManifest.xml and ensure that the package name has been refactored. The opening element should look like this:
    <manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="uk.aston.hellotoastchallenge">
  14. Open build.gradle(Module: app) and ensure that the applicatioId has been renamed:
    defaultConfig {
	applicationId "uk.aston.hellotoastchallenge"
  15. Open settings.gradle(Project Settings) and ensure that the rootProject.name has been updated. That file should look like this:
    include ':app'
rootProject.name = "HelloToastChallenge"
    After you change the value of rootProject.name, click Sync now which should appear at the top right hand corner of the Android Studio editor window.
    Tip: Another way to sync your Gradle files is to select File > Sync Project with Gradle Files.
  16. You should now be able to rebuild your project by selecting Build > Rebuild Project.
  17. Once the project is built you should be able to run it on the emulator.

Here is an animate image of the above steps (if this image is too small, try right clicking the image and choose Open image in new tab):
Refactor the project

Change the layout

  1. Change the layout so that the ToastButton and CountButton appear on the left side, as shown in the figure below. The TextView appears next to them, but only wide enough to show its contents. (Hint: Use layout_width and layout_height set to wrap_content before you add the layout constraints. You can remove all the constraints by clicking remove all constraints) on the toolbar.)
  2. Run the app in both horizontal and vertical orientations.

Design view

Emulator view

View, ViewGroup, and layouts:

Using the layout editor:

Setting layout width and height:

The layout_width and layout_height attributes change as you change the height and width size controls in the view inspector. These attributes can take one of three values for a ConstraintLayout:

Extracting string resources:

Instead of hard-coding strings, it is a best practice to use string resources, which represent the strings. Follow these steps:

Handling clicks:

Displaying Toast messages:

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