CodeLab：Android fundamentals 01.4:Learn to help yourself

Android fundamentals 01.4:Learn to help yourself

---

Tutorial source : Google CodeLab
Date : 2021/04/06

Complete course : 教程目录 (java).

Note : The link in this article requires Google access

---

1、Welcome

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:

• For the complete list of codelabs in the course, see Codelabs for Android Developer Fundamentals (V2).
• For details about the course, including links to all the concept chapters, apps, and slides, see Android Developer Fundamentals (Version 2).

Note: This course uses the terms “codelab” and “practical” interchangeably.

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.

---

---

2、App overview

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.

---

---

3、Task 1: Change the launcher icon

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.

1. In the Icon Type field, select Launcher Icons (Adaptive & Legacy) if it’s not already selected.

2. Click the Foreground Layer tab. For the Asset Type, select Clip Art, shown as 1 in the screenshot below.

3. 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.

4. 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.

1. 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.
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.
3. 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.

Tip: To learn about designing effective launcher icons, see the Material Design Product icons guide.

---

---

4、Task 2: Use project templates

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

#	UI Description	Code reference
1	Status bar, which the Android system provides and controls.	Not visible in the template code, but you can access the status-bar from your activity. For example, you can add code in MainActivity.java to hide the status bar, if necessary.
2	The app bar, also called the action bar, provides visual structure, standardized visual elements, and navigation.	In activity_main.xml, look for Toolbarinside the AppBarLayout element. For backward compatibility, the AppBarLayout in the template embeds a Toolbar that has the same functionality as an ActionBar.To change the appearance of the app bar, change the toolbar attributes. For app bar tutorials, see Add the app bar.
3	The app name is initially derived from your package name, but you can change it to anything you want.	In AndroidManifest.xml, look for android:label="@string/app_name". Specify the app_name string in strings.xml.
4	The options-menu overflow button holds menu items for the activity. The overflow button also holds global menu options such as Search and Settings for the app. Your app menu items go into this menu.	In MainActivity.java, theonOptionsItemSelected() method implements what happens when the user selects a menu item. To see the options-menu items, open the res/menu/menu_main.xmlfile. Only the Settings menu item is specified in this template.
5	The CoordinatorLayout ViewGroup is a layout that provides mechanisms for UI elements to interact. Your app’s UI goes inside the content_main.xml file, which is included within this ViewGroup.	In activity_main.xml, look for the include layout instruction. No views are specified in this layout; instead, the layout includes the content_main layout, where the app’s views are specified. System views are kept separate from the views unique to your app.
6	The template uses a TextView to display “Hello World”. You replace this TextView with your app’s UI elements.	The “Hello World” text view is in the content_main.xml file. All your app’s UI elements should be defined in this file.
7	Floating action button (FAB)	In activity_main.xml, look for the FloatingActionButton element. The FAB is defined 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 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">New Application</string>

1. Change the color of the app bar (Toolbar) in activity_main.xml by changing 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"

1. 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();
   }
});

1. 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" />

1. 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.

Tip: For details on the XML syntax for accessing resources, see Accessing your app resources.

2.3 Explore how to add activities 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 class in another lesson.) You can also use activity 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 > Activity > Gallery.
4. Add an activity to the app by selecting one of the Activity templates. For example, select Navigation Drawer Activity to add an Activity that has a navigation drawer.
5. To display the activity in the layout editor, double-click the activity’s layout file (for example activity_main2.xml). Use the Design tab and the Text tab to switch between the activity’s layout preview and layout code.

---

---

5、Task 3: Learn from sample code

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.

Note: The samples contained here are meant as a starting point for further development. We encourage you to design and build your own ideas into them.

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.

---

---

6、Task 4: Many more resources

• 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.

---

---

7、Summary

• 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.

---

---

8、Related concept

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

---

---

9、Learn more

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

---

---

10、Homework

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:

• Assign homework if required.
• Communicate to students how to submit homework assignments.
• Grade the homework assignments.

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:

• File > Open
• File > New > Import Sample
• File > New > Import Module
• File > New > Import Project

Question 2

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

• Navigation buttons
• Options menu overflow button
• Floating action button
• Button class button with the text “Button”

Question 3

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

• stackoverflow.com
• officialandroid.blogspot.com
• developer.android.com
• github.com

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.

---

---

11、Next codelab

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).