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

What you should already know

• The basic workflow of Android Studio.
• How to create an app in Android Studio using the Empty Activity template.
• How to use the Layout Editor in Android Studio.

What you'll learn

• Where to find Android developer information and resources.
• How to add a launcher icon to an app.
• How to look for help when you're developing Android apps.

What you'll do

• Explore some of the many resources available to Android developers of all levels.
• Add a launcher icon for an app.

In this codelab, you change the launcher icon for the HelloToast app that you created in a previous codelab. You replace the default icon with an image asset that's available within Android Studio.

Each app you create with Android Studio starts with a default launcher icon that represents the app. Launcher icons are sometimes called app icons or product icons.

If you publish an app on Google Play, the app's launcher icon appears in the app's listing and search results in the Google Play store.

After an app is installed on an Android-powered device, the app's launcher icon appears on the device's home screen and elsewhere on the device. For example, launcher icons appear in the device's Search Apps window, as shown in the screenshot below. The HelloToast icon shown below is the default launcher icon used for all app projects that you create in Android Studio.

Going through the process of changing the launcher icon introduces you to Android Studio's image asset features. In this task, you also learn more about finding help within Android documentation.

1.1 Explore the official Android documentation

Explore a few of the most useful Android documentation sites and become familiar with what's available:

1. Go to developer.android.com. This official Android developer documentation is kept current by Google.
2. Go to developer.android.com/design/. This site offers guidelines for designing the look and functionality of high-quality Android apps.
3. Go to material.io, which is a site about Material Design. Material Design is a conceptual design philosophy that outlines how all apps, not just Android apps, should look and function on mobile devices. Navigate the links to learn more about Material Design. For example, to learn about the use of color, click the Design tab, then select Color.
4. Go to developer.android.com/docs/ to find API information, reference documentation, tutorials, tool guides, and code samples.
5. Go to developer.android.com/distribute/ to find information about publishing an app on Google Play. Google Play is 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

In this step, you add a clip-art image as the launcher icon for the HelloToast app.

1. Open the HelloToast app project from the previous codelab 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. Select New > Image Asset. The Configure Image Asset dialog appears.
   
3. In the Icon Type field, select Launcher Icons (Adaptive & Legacy) if it's not already selected.
4. Click the Foreground Layer tab. For the Asset Type, select Clip Art, shown as 1 in the screenshot below.
   
5. Click the robot icon in the Clip Art field, shown as 2 in the screenshot above. The Select Icon dialog appears, showing the Material Design icon set.
6. Browse the Select Icon dialog, or search for an icon by name. Select an icon, such as the mood icon to suggest a good mood. Click OK.
   
7. In the Configure Image Asset dialog, click the Background Layer tab. For the Asset Type, select Color. Click the color chip and select a color to use as the background layer for the icon as shown in the image below:
   
8. Click the Options tab and review the default settings. Confirm that you want to generate legacy, round, and Google Play Store icons as shown below. Click Next and then click Finish.
   
9. Run the app on an AVD emulator or Android-powered device.

Android Studio automatically adds the launcher images to the mipmap directories for the different screen densities. The app now uses the new icon as its launch icon.

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 on Android-powered devices.

2.1 Explore the Basic Activity architecture

The Basic Activity template is a versatile template that Android Studio provides to help you jump-start your app development.

1. In Android Studio, create a project that uses the Basic Activity template. Select Java as the language.
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

2.2 Customizing the app that the template produces

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. (On some devices, the status bar is a darker shade of the same primary color that the app bar uses.) You may also want to remove the floating action button (FAB) if you aren't going to use it.

1. Change the name of the app that the app bar displays. To do this, change the app_name string resource in the strings.xml file to the following:

   <string name="app_name">My Basic Template Application</string>
   

2. Change the color of the app bar (Toolbar) in activity_main.xml by changing the value of the android:background attribute to "?attr/colorPrimaryDark". This value sets the app bar color to a darker primary color that matches the status bar:

   android:background="?attr/colorPrimaryDark"
   

3. To remove the FAB, start by removing the stub code in onCreate() that sets an onClick() listener for the button. Open MainActivity.java and remove the following block of code:

   FloatingActionButton fab = 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();
   }
   });
   

4. To remove the FAB from the layout, remove 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" />
   

5. Run the app. The FAB no longer appears, the name has changed, and the app bar background color is darker and matches the color of the status bar.
   

Android Navigation

As mentioned above, res/layout/content_main.xml contains only a navigation fragment. This fragment works with the Navigation Graph which you will find in /res/navigation/nav_graph.xml.

1. Double click /res/navigation/nav_graph.xml to open the navigation graph and click the Design tab. You should see the following layout:
   
2. Click to select FirstFragment, either by clicking on the fragment layout in the graph or by clicking on FirstFragment - Start in the list of fragments in the left hand pane.
   
   The display now shows the details of the navigation action associated with FirstFragment.
   
   1. The action itself is defined to link to SecondFragment. That means that SecondFragment will replace FirstFragment in the layout of MainActivity. The action has the ID action_FirstFragment_to_SecondFragment.
   2. The same action is shown in the graph by the highlighted link.
   
   The interface allows you to add new Fragment destinations and to add navigation actions between the fragments in the graph.
3. Open the file FirstFragment.java and look for the following block of code:

   view.findViewById(R.id.button_first).setOnClickListener(new View.OnClickListener() {
   	@Override
   	public void onClick(View view) {
   		NavHostFragment.findNavController(FirstFragment.this)
   				.navigate(R.id.action_FirstFragment_to_SecondFragment);
   	}
   });
   

   This block of code adds an onClick() method to button_first in the layout of FirstFragment. It uses the NavController to navigate using the ID of the defined action.
4. Open nav_graph.xml again and click on SecondFragment and look at its action. The action has the ID action_SecondFragment_to_FirstFragment
5. Open SecondFragment.java and look for this block of code that implements the navigation agtion back to the first fragment.

   view.findViewById(R.id.button_second).setOnClickListener(new View.OnClickListener() {
   	@Override
   	public void onClick(View view) {
   		NavHostFragment.findNavController(SecondFragment.this)
   				.navigate(R.id.action_SecondFragment_to_FirstFragment);
   	}
   });
   

6. Run the app and click the buttons to navigate between the two fragments.

2.3 Explore how to add activities and fragments using templates

For the codelabs in this course so far, you've used the Empty Activity and Basic Activity templates to start new projects. (You learn more about the Activity and Fragment classes in other lessons.) You can also use activity and fragment templates when creating activities after your project has been created.

1. Create an app project or choose an existing project.
2. In the Project > Android pane, right-click the java folder.
3. Select New > Fragment > Gallery to see the list of fragment templates or select New > Activity > Gallery to see the list of activity templates.
4. Add a Fragment to the app by selecting one of the Fragment templates. For example, select Settings Fragment to add a fragment to allow the user to customise their settings.
5. We will now add your new fragment into the navigation graph, open res > navigation > nav_graph.xml and click on the new destination icon , select the new fragment from the list displayed and the new fragment appears on the graph.
6. To link this into the navigation, you need a way to navigate from an existing fragment to your new fragment. We will add a button to FirstFragment that will open the new settings fragment. Open res > layout > fragment-first.xml and add a new button, the code below will constrain the button to be below the text field and above the existing button:

   	<Button
   		android:id="@+id/button_settings"
   		android:layout_width="wrap_content"
   		android:layout_height="wrap_content"
   		android:text="Settings"
   		app:layout_constraintBottom_toTopOf="@+id/button_first"
   		app:layout_constraintEnd_toEndOf="parent"
   		app:layout_constraintStart_toStartOf="parent"
   		app:layout_constraintTop_toBottomOf="@+id/textview_first" />
   

7. In nav_graph.xml, click on FirstFragment and drag a new navigation action to settingsFragment. Your FirstFragment should now have a second action in its list of actions. The action ID highlighted in the image below is action_FirstFragment_to_settingsFragment2 (make a note of this ID you will need it in the next step):
   
8. Open SettingsFragment.java and locate the code in the onViewCreated method that navigates from the existing button_first to SecondFragment and add the following code to make your new button_settings initiate a navigation to the settings fragment:

   view.findViewById(R.id.button_settings).setOnClickListener(new View.OnClickListener() {
   	@Override
   	public void onClick(View view) {
   		NavHostFragment.findNavController(FirstFragment.this)
   				.navigate(R.id.action_FirstFragment_to_settingsFragment2);
   	}
   });
   
   

9. Run your app and verify that clicking the Settings button takes you to the new settings fragment. Clicking the back button should take you back to the FirstFragment.

The Google Samples repositories on GitHub provide Android code samples that you can study, copy, and incorporate into your projects.

3.1 Android code samples

You can explore 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 Android Developer Resources

The Android Developer Documentation contains a lot of resources to help Android Developers. This includes, sample code, the API reference, the Design Guidelines, Codelab tutorials (which these codelabs are based on) and training courses. Using other resources can be problematic and you need to check what version of Android the resource is addressing to know whether or not it will work for you.

1. The sample code in Java contains 120 example projects you can use.
2. The Android API Reference contains the full documentation for classes and libraries that you will use. This is the definitive guide and you should always refer to it.
3. The Design Guidelines are one set of guidelines that you can follow in designing your apps, but you do not have to follow these guidelines.
4. The Codelabs and training courses provide a means of working through and learning individual topics.

Be aware that no all resources and tutorials on Android development are kept up to date and you might find that what you see in Android Studio doesn't always tally with what you find in online tutorials.

*The Android Developer YouTube channel is a great source of tutorials and tips.

• The Android team posts news and tips in the official Android blog.
• Stack Overflow is a community of programmers helping each other. If you run into a problem, chances are high that someone has already posted an answer. Try posting a question such as "How do I set up and use ADB over WiFi?" or "What are the most common memory leaks in Android development?"
• And last but not least, type your questions into Google search, and the Google search engine will collect relevant results from all of these resources. For example, "What is the most popular Android OS version in India?"

  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:

• [android] and [layout]
• [android] "hello world"

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

• Official Android Developer Documentation: developer.android.com
• Material Design is a conceptual design philosophy that outlines how apps should look and work on mobile devices.
• The Google Play store is Google's digital distribution system for apps developed with the Android SDK.
• Android Studio provides templates for common and recommended app and activity designs. These templates offer working code for common use cases.
• When you create a project, you can choose a template for your first activity.
• While you are further developing your app, activities and other app components can be created from built-in templates.
• Android Studio contains many code samples that you can study, copy, and incorporate with your projects.

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

Android Studio documentation:

• Meet Android Studio
• Developer workflow basics

Android developer documentation:

• Android developer site
• Google Developers Training
• Layouts
• App resources overview
• Layouts
• Menus
• TextView
• String resources
• App Manifest

Code samples:

• Source code for exercises on GitHub
• Android code samples for developers

Videos:

• Android Developer YouTube channel
• Udacity online courses

Other:

• Official Android blog
• Android Developers blog
• Google Developers Codelabs
• Stack Overflow
• Android vocabulary