CodeLab：Android fundamentals 05.1:Drawables, styles, and themes

Android fundamentals 05.1:Drawables, styles, and themes

---

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 2: User experience 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.

Introduction

In this chapter you learn how to apply common styles to your views, use drawable resources, and apply themes to your app. These practices reduce your code and make your code easier to read and maintain.

What you should already know

You should be able to:

• Create and run apps in Android Studio.
• Create and edit UI elements using the layout editor.
• Edit XML layout code, and access elements from your Java code.
• Extract hardcoded strings into string resources.
• Extract hardcoded dimensions into dimension resources.
• Add menu items and icons to the options menu in the app bar.
• Create a click handler for a Button click.
• Display a Toast message.
• Pass data from one Activity to another using an Intent.

What you’ll learn

• How to define a style resource.
• How to apply a style to a View.
• How to apply a theme to an Activity or app in XML and programmatically.
• How to use Drawable resources.

What you’ll do

• Create a new app and add Button and TextView elements to the layout.
• Create Drawable resources in XML and use them as backgrounds for your Button elements.
• Apply styles to UI elements.
• Add a menu item that changes the theme of the app to a low contrast “night mode.”

---

---

2、App overview

The Scorekeeper app consists of two sets of Button elements and two TextView elements, which are used to keep track of the score for any point-based game with two players.

---

---

3、Task 1: Create the Scorekeeper app

In this section, you create your Android Studio project, modify the layout, and add the android:onClick attribute to its Button elements.

1.1 Create the project

1. Start Android Studio and create a new Android Studio project with the name Scorekeeper.
2. Accept the default minimum SDK and choose the Empty Activity template.
3. Accept the default Activity name (MainActivity), and make sure the Generate Layout file and Backwards Compatibility (AppCompat) options are checked.
4. Click Finish.

1.2 Create the layout for MainActivity

The first step is to change the layout from ConstraintLayout to LinearLayout:

1. Open activity_main.xml and click the Text tab to see the XML code. At the top, or root, of the View hierarchy is the ConstraintLayout ViewGroup:

android.support.constraint.ConstraintLayout

1. Change this ViewGroup to LinearLayout. The second line of code now looks something like this:

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

1. Delete the following line of XML code, which is related to ConstraintLayout:

xmlns:app="http://schemas.android.com/apk/res-auto"

The block of XML code at the top should now look like this:

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

1. Add the following attributes (without removing the existing attributes):

Attribute	Value
android:orientation	"vertical"
android:padding	"16dp"

1.3 Create the score containers

The layout for this app includes score containers defined by two RelativeLayout view group elements—one for each team. The following diagram shows the layout in its simplest form.

1. Inside the LinearLayout, add two RelativeLayout elements with the following attributes:

RelativeLayout attribute	Value
android:layout_width	"match_parent"
android:layout_height	"0dp"
android:layout_weight	"1"

You may be surprised to see that the layout_height attribute is set to 0dp. This is because we are using the layout_weight attribute to determine how much space these RelativeLayout elements take up in the parent LinearLayout.

1. Add two ImageButton elements to each RelativeLayout: one for decreasing the score, and one for increasing the score. Use these attributes:

ImageButton attribute	Value
android:id	"@+id/decreaseTeam1"
android:layout_width	"wrap_content"
android:layout_height	"wrap_content"
android:layout_alignParentLeft	"true"
android:layout_alignParentStart	"true"
android:layout_centerVertical	"true"

Use increaseTeam1 as the android:id for the second ImageButton that increases the score. Use decreaseTeam2 and increaseTeam2 for the third and fourth ImageButton elements.

1. Add a TextView to each RelativeLayout between the ImageButton elements for displaying the score. Use these attributes:

TextView attribute	Value
android:id	"@+id/score_1"
android:layout_width	"wrap_content"
android:layout_height	"wrap_content"
android:layout_centerHorizontal	"true"
android:layout_centerVertical	"true"
android:text	"0"

Use score_2 as the android:id for the second TextView between the ImageButton elements.

1. Add another TextView to each RelativeLayout above the score to represent the Team Names. Use these attributes:

TextView attribute	Value
android:layout_width	"wrap_content"
android:layout_height	"wrap_content"
android:layout_alignParentTop	"true"
android:layout_centerHorizontal	"true"
android:text	"Team 1"

Use "Team 2" as the android:text for the second TextView.

1.4 Add vector assets

You will use material icons in the Vector Asset Studio for the scoring ImageButton elements.

1. Select File > New > Vector Asset to open the Vector Asset Studio.
2. Click the icon to open a list of material icon files. Select the Content category.
3. Choose the add icon and click OK.
4. Rename the resource file ic_plus and check the Override checkbox next to size options.
5. Change the size of the icon to 40dp x 40dp.
6. Click Next and then Finish.
7. Repeat this process to add the remove icon and name the file ic_minus.

You can now add the icons and content descriptions for the ImageButton elements. The content description provides a useful and descriptive label that explains the meaning and purpose of the ImageButton to users who may require Android accessibility features such as the Google TalkBack screen reader.

1. Add the following attributes to the ImageButton elements on the left side of the layout:

android:src="@drawable/ic_minus"
android:contentDescription="Minus Button"

1. Add the following attributes to the ImageButton elements on the right side of the layout:

android:src="@drawable/ic_plus"
android:contentDescription="Plus Button"

1. Extract all of your string resource