This practical codelab is part of Unit 1: Get started in the Android Developer Fundamentals (Version 2) course. You will get the most value out of this course if you work through the codelabs in sequence:

What you should already know

You should be able to:

What you'll learn

What you'll do

You will add a launcher icon to the HelloToast app you created previously or to a new app.

Each new app you create with Android Studio starts with a standard launcher icon that represents the app. The launcher icon appears in the Google Play store listing. When users search the Google Play store, the icon for your app appears in the search results.

When a user has installed the app, the launcher icon appears on the device in various places including the home screen and Search Apps screen. For example, the HelloToast app appears in the Search Apps screen of the emulator with the standard icon for new app projects, as shown below.

Changing the launcher icon is a simple step-by-step process that introduces you to Android Studio's image asset features. In this task you also learn more about accessing the official Android documentation.

1.1 Explore the official Android documentation

You can find the official Android developer documentation at developer.android.com.

This documentation contains a wealth of information that is kept current by Google.

  1. Go to developer.android.com/design/.

This section is about Material Design, which is a conceptual design philosophy that outlines how apps should look and work on mobile devices. Navigate the links to learn more about Material Design. For example, visit the Style section to learn more about the use of color and other topics.

  1. Go to developer.android.com/docs/ to find API information, reference documentation, tutorials, tool guides, and code samples.
  2. Go to developer.android.com/distribute/ to find information about putting an app on Google Play, Google's digital distribution system for apps developed with the Android SDK. Use the Google Play Console to grow your user base and start earning money.

1.2 Add an image asset for the launcher icon

To add a clip-art image as the launcher icon, follow these steps:

  1. Open the HelloToast app project from the previous lesson on using the layout editor, or create a new app project.
  2. In the Project > Android pane, right-click (or Control-click) the res folder and select New > Image Asset. The Configure Image Asset window appears.

  1. In the Icon Type field, select Launcher Icons (Adaptive & Legacy) if it's not already selected.
  2. Click the Foreground Layer tab, select Clip Art for the Asset Type.

  1. Click the icon in the Clip Art field. Icons appear from the material design icon set.
  2. Browse the Select Icon window, choose an appropriate icon (such as the mood icon to suggest a good mood), and then click OK.

  1. Click the Background Layer tab, choose Color as the Asset Type, and then click the color chip to select a color to use as the background layer.
  2. Click the Legacy tab and review the default settings. Confirm that you want to generate legacy, round, and Google Play Store icons. Click Next when finished.
  3. Run the app.

Android Studio automatically adds the launcher images to the mipmap directories for the different densities. As a result, the app launch icon changes to the new icon after you run the app, as shown below.

Tip: See Launcher Icons to learn more about how to design effective launcher icons.

Android Studio provides templates for common and recommended app and activity designs. Using built-in templates saves time, and helps you follow design best practices.

Each template incorporates a skeleton activity and user interface. You've already used the Empty Activity template. The Basic Activity template has more features and incorporates recommended app features, such as the options menu that appears in the app bar.

2.1 Explore the Basic Activity architecture

The Basic Activity template is a versatile template provided by Android Studio to assist you in jump-starting your app development.

  1. In Android Studio, create a new project with the Basic Activity template.
  2. Build and run the app.
  3. Identify the labeled parts in the figure and table below. Find their equivalents on your device or emulator screen. Inspect the corresponding Java code and XML files described in the table.

Being familiar with the Java source code and XML files will help you extend and customize this template for your own needs.

Architecture of the Basic Activity template

#

UI Description

Code reference

1

Status bar

The Android system provides and controls the status bar.

Not visible in the template code.

It's possible to access it from your activity. For example, you can hide the status bar, if necessary.

2

AppBarLayout > Toolbar

The app bar (also called the action bar) provides visual structure, standardized visual elements, and navigation. For backwards compatibility, the AppBarLayout in the template embeds a Toolbar with the same functionality as an ActionBar.

In activity_main.xml, look for android.support.v7.widget.Toolbar

inside android.support.design.widget.AppBarLayout.

Change the toolbar to change the appearance of its parent, the app bar. For an example, see the App Bar Tutorial.

3

Application name

This is derived from your package name, but can be anything you choose.

In AndroidManifest.xml:

android:label="@string/app_name"

4

Options menu overflow button

Menu items for the activity, as well as global options, such as Search and Settings for the app. Your app menu items go into this menu.

In MainActivity.java:

onOptionsItemSelected() implements what happens when a menu item is selected.

res > menu > menu_main.xml

Resource that specifies the menu items for the options menu.

5

Layout ViewGroup

The CoordinatorLayout ViewGroup is a feature-rich layout that provides mechanisms for View (UI) elements to interact. Your app's user interface goes inside the content_main.xml file included within this ViewGroup.

In activity_main.xml:

There are no views specified in this layout; rather, it includes another layout with an include layout instruction to include @layout/content_main where the views are specified. This separates system views from the views unique to your app.

6

TextView

In the example, used to display "Hello World". Replace this with the UI elements for your app.

In content_main.xml:

All your app's UI elements are defined in this file.

7

Floating action button (FAB)

In activity_main.xml as a UI element using a clip-art icon. MainActivity.java includes a stub in onCreate() that sets an onClick() listener for the FAB.

2.2 Customizing the app produced by the template

Change the appearance of the app produced by the Basic Activity template. For example, you can change the color of the app bar to match the status bar (which on some devices is a darker shade of the same primary color). You may also want to remove the floating action button if you are not going to use it.

  1. Change the color of the app bar (Toolbar) in activity_main.xml by changing the android:background to "?attr/colorPrimaryDark", which sets the app bar color to a darker primary color that matches the status bar:
android:background="?attr/colorPrimaryDark"
  1. To remove the floating action button, start by removing the stub code in onCreate() that sets an onClick() listener for the button. Open MainActivity and delete the following block of code:
FloatingActionButton fab = (FloatingActionButton) 
                                            findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Replace with your own action", 
                                      Snackbar.LENGTH_LONG)
                          .setAction("Action", null).show();
    }
});
  1. To remove the floating action button from the layout, delete the following block of XML code from activity_main.xml:
<android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />
  1. Change the name of the app that is displayed in the app bar by changing the app_name string resource in strings.xml to the following:
<string name="app_name">New Application</string>
  1. Run the app. The floating action button no longer appears, the name has changed, and the app bar background color has changed.

Tip: See Accessing Resources for details on the XML syntax for accessing resources.

2.3 Explore how to add activities using templates

For the practicals so far, you've used the Empty Activity and Basic Activity templates. In later lessons, the templates you use vary, depending on the task.

These activity templates are also available from inside your project, so that you can add more activities to your app after the initial project setup. (You learn more about the Activity class in another chapter.)

  1. Create a new app project or choose an existing project.
  2. In the Project > Android pane, right-click the java folder.
  3. Choose New > Activity > Gallery.
  4. Add an Activity. For example, click Navigation Drawer Activity to add an Activity with a navigation drawer to your app.
  5. Double-click the layout files for the Activity to display them in the layout editor.

Android Studio and the Android documentation provide many code samples that you can study, copy, and incorporate with your projects.

3.1 Android code samples

You can explore hundreds of code samples directly from within Android Studio.

  1. In Android Studio, choose File > New > Import Sample.
  2. Browse the samples.
  3. Choose a sample and click Next.
  4. Accept the defaults and click Finish.

3.2 Use the SDK Manager to install offline documentation

Installing Android Studio also installs essentials of the Android SDK (Software Development Kit). However, additional libraries and documentation are available, and you can install them using the SDK Manager.

  1. Choose Tools > Android > SDK Manager.
  2. In the left column, click Android SDK.
  3. Select and copy the path for the Android SDK Location at the top of the screen, as you will need it to locate the documentation on your computer:

  1. Click the SDK Platforms tab. You can install additional versions of the Android system from here.
  2. Click the SDK Update Sites tab. Android Studio checks the listed and selected sites regularly for updates.
  3. Click the SDK Tools tab. You can install additional SDK Tools that are not installed by default, as well as an offline version of the Android developer documentation.
  4. Select the checkbox for "Documentation for Android SDK" if it is not already installed, and click Apply.
  5. When the installation finishes, click Finish.
  6. Navigate to the sdk directory you copied above, and open the docs directory.
  7. Find index.html and open it.

4.1 Search on Stack Overflow using tags

Go to Stack Overflow and type [android] in the search box. The [] brackets indicate that you want to search for posts that have been tagged as being about Android.

You can combine tags and search terms to make your search more specific. Try these searches:

To learn more about the many ways in which you can search on Stack Overflow, see the Stack Overflow help center.

The related concept documentation is in 1.4: Resources to help you learn.

Android Studio documentation:

Android developer documentation:

Code samples:

Videos:

Other:

This section lists possible homework assignments for students who are working through this codelab as part of a course led by an instructor. It's up to the instructor to do the following:

Instructors can use these suggestions as little or as much as they want, and should feel free to assign any other homework they feel is appropriate.

If you're working through this codelab on your own, feel free to use these homework assignments to test your knowledge.

Load a sample app and explore resources

  1. Load one of the sample apps into Android Studio.
  2. Open one of the Java activity files in the app. Look for a class, type, or procedure that you're not familiar with and look it up in the Android Developer documentation.
  3. Go to Stack Overflow and search for questions on the same topic.
  4. Change the launcher icon. Use an icon that's available in the image assets section of Android Studio.

Answer these questions

Question 1

Within an Android Studio project, what menu command can you use to open the list of sample apps? Choose one:

Question 2

Which buttons does the Basic Activity template provide as part of the UI? Choose two:

Question 3

Which source of documentation is the official documentation for Android developers? Choose one:

Submit your app for grading

Guidance for graders

The result is a new app, or a version of Hello Toast, with a new launcher icon that appears in the Search Apps screen of an Android device.

To find the next practical codelab in the Android Developer Fundamentals (V2) course, see Codelabs for Android Developer Fundamentals (V2).

For an overview of the course, including links to the concept chapters, apps, and slides, see Android Developer Fundamentals (Version 2).