【Create Birthday Card application】

Previous: [Understand the basics of Android testing]

1. Introduction

In this article, you'll build a simple Android application that displays text. A detailed understanding of the various interface (UI) components in Android will help you place text properly on the screen.

prerequisite

• Learn how to create new apps in Android Studio.
• Learn how to run your app in an emulator or on an Android device.

Learning Content

• What are interface elements such as Viewsand ViewGroups.
• How to display text TextViewin .
• How to set properties like text, font and margins TextViewon .

build content

• An Android app that displays birthday wishes in text format.

When complete, your app will look like this.

required conditions

• A computer with Android Studio installed.

2. Set up your Happy Birthday app

Create an Empty Activity project

1. First, create a new Kotlin project in Android Studio using the Empty Activity template.

2. Name the app "Happy Birthday" and set the minimum API level to 19 (KitKat).

Important: If you're unfamiliar with creating a new project in Android Studio, see Getting Your First Android App Up and Running for details.

3. Run your app and it should look like the screenshot below.

When you used the Empty Activity template to create this Happy Birthday app, Android Studio set up the resources needed for a basic Android app, including the "Hello World!" message displayed in the middle of the screen. In this codelab, you'll learn how to place the message, change its text to look more like a birthday greeting, and add and format an additional message.

Interface Introduction

An app's interface (UI) is what you see on the screen, including text, images, buttons, and many other types of elements. It is both the way the app displays content to the user and the vehicle through which the user interacts with the app.

Every element of it is called View. Almost everything you see on an app screen belongs to View. ViewsIt can also be an interactive element, such as a clickable button or an editable input field.

In this article, you'll use one for displaying text View, which we'll call TextView.

The in an Android app Viewsdoesn't float on the screen by itself. ViewsEach is related to each other. For example, an image might be next to some text, or several buttons might be on their own line. To organize Views, you can put them in a container. ViewGroupis a container into which Viewobjects , and is responsible for arranging the items inside Views. Arrangement (ie, layout) may vary depending on the screen size and aspect ratio of the Android device running the app, and may adjust based on whether the device is in portrait or landscape mode.

ConstraintLayoutis one ViewGroupthat helps you flexibly arrange its interior Views.

Introduction to the Layout Editor

Creating interfaces by arranging Viewsand ViewGroupsis an important part of creating Android applications. Android Studio provides a tool called Layout Editor to help you do this. You'll use the layout editor to change the "Hello World!" text to "Happy Birthday!" and then style the text.

After opening the layout editor , you will see many windows. In this codelab, you will learn how to use most of these windows. Please refer to the annotated screenshots below to help you identify the windows in the layout editor . As you change apps, you'll learn more about each window.

• Marked (1) on the left is the Project window you've seen before , listing all the files that make up your project.
• In the central area, you can see two drawing windows labeled (4) and (5), which represent the screen layout of the application. The window labeled (4) on the left presents the approximate effect that the screen will present when the application is running, which is the so-called Design view.
• The window labeled (5) on the right presents the Blueprint view. This view can be very useful when performing certain actions.
• The Palette window labeled (2) contains a list Viewsof .
• The Component Tree window labeled (3) is another presentation form of the screen view. It will list all views of the screen.
• The window labeled (6) on the far right is the Attributes view, which displays the various attributes Viewof . You can change these properties here.

For more information on Layout Editor and how to configure it, see the Developer Reference Guide .

Screenshot (annotated) of the entire layout editor:

Let's make some changes in the layout editor to make the app look more like a birthday card!

Change the Hello World message

1. In Android Studio, find the Project window on the left.
2. Keep an eye out for these folders and files: The app folder contains most of the app files you'll change. The res folder is used for various resources such as pictures or screen layouts. The layout folder is used for screen layouts. activity_main.xmlThe file contains instructions for screen layouts.
3. Expand the app folder, res folder, and layout folder in turn.
4. Double click activity_main.xml. The system opens in the layout editoractivity_main.xml and displays the layout it describes in the Design view.

NOTE: In these codelabs, you will often need to open the file as described above. In short, the steps can be summarized in the following steps: Open activity_main.xml (res > layout > activity_main.xml) , it is not necessary to list each step individually.

5. See the list of views in the Component Tree . Note that there is one in that list ConstraintLayoutand one below it TextView. These represent the interface of the application. TextViewIt is indented because it is ConstraintLayoutinside . As you ConstraintLayoutadd Views, they are all added to this list.
6. TextViewNote the "Hello World!" displayed next to , which is the text you'll see after running the app.

7. In the Component Tree , click TextView.
8. Find Attributes on the right .
9. Find the Declared Attributes section.
   10. Notice that the text attribute in the Declared Attributes section contains Hello World! .

The text property will display the text output in TextViewthe .

11. Click on the tex t property where the Hello World! text is located .
12. Change it to Happy Birthday! and press Enter . If you see warnings about hardcoded strings, don't worry for now. You'll address the warning in your next codelab.
13. Notice that the text in Design View has changed... (this is cool, you can see your changes immediately!)
14. Now, when you run the app, it says Happy Birthday!

Great! You've made your first change to your Android app.

3. Add a TextView to the layout

The birthday card you're building won't look the same as what's already in your app. Instead of small text in the center, you want two larger messages in the top left and bottom right. In this task, you'll delete the existing ones TextView, add two new ones TextViews, and see how to place these views in ConstraintLayoutthe .

Delete the current TextView

1. In the layout editor, tap to select the TextView in the center of the layout.

2. Press the Delete key. Android Studio will be deleted TextView, and your app will now only show up in the Layout Editor and Component TreeConstraintLayout .

Tip: If you want to enlarge the layout, you can use the controls in the lower right corner of the layout editor to adjust the size. Clicking the bottommost icon
restores the zoom level to fill the screen with the entire layout.

Add TextView

In this step, you'll add a in the top left corner of the app TextViewto hold birthday wishes.

The Palette in the upper left corner of the Layout Editor contains a list Viewsof various s (organized by category) that you can add to your application.

1. find TextView. You'll find it both in the Common category and in the Text category.

2. Drag and drop TextViewfrom the Palette to the upper left corner of the design interface in the layout editor . You don't have to be precise, just drop near the upper left corner.

3. You'll see one added TextViewand a red exclamation mark appear in the Component Tree .
4. Hover over the exclamation point and you'll see a warning message that the view is unconstrained and will jump elsewhere when you run the app. In this next step, you will resolve this issue.

Place the TextView

If you're making a birthday card, you'll want to TextViewplace near the upper left corner with some space around it. In order to fix the issue noted in the previous warning, you need TextViewto add some constraints to the to tell the app how to place the view. Constraints are used to specify the orientation and limits Viewof .

Constraints added to top and left will have margins. Margins specify how far Viewfrom the edge of the container it is in.

1. In Attributes on the right , find the Constraint Widget in the Layout section . The square shown here represents your view.

2. Click the + at the top of the square . This adds a constraint between the top of the text view and the top edge of the constraint layout.
3. A field with numbers will appear to set the top margin. The margin TextViewis ConstraintLayoutthe distance from to the edge of the container (ie). The number shown varies depending on where you drop TextViewthe . When you set the top margin, Android Studio also automatically adds a constraint between the top of the text view and ConstrainLayoutthe top of the .

4. Change the Top Margin to 16.

Note: Margins and other distances in the UI are measured in density-independent pixels (dp). It's similar to centimeters or inches, but expresses distances on the screen. Android converts this value to the corresponding actual pixel count for each device. In general, 1dp is about 1/160 of an inch, but for some devices this size may vary.

5. Set the same value for the left margin.

6. Type your birthday wishes for your friend (eg: "Happy Birthday, Sam!") in the text field and press Enter .

Add and place another TextView

The birthday card also needs another line of text near the bottom right corner, which you'll add in this step the same way you did in the previous tasks. What do you think the outer margin of this TextView should be?

1. Drag a new one TextViewfrom the Palette and drop it near the bottom right corner of the app view in the layout editor.

2. Set the right margin to 16.
3. Set the Bottom Margin to 16.

4. In Attributes , set the text attribute to your card signature, eg "From Emma".
5. Run the application. You should see your birthday wishes in the upper left corner and your signature in the lower right corner.

Congratulations! You've added and placed some UI elements in your application.

4. Add styles to the text

You've added text to the interface, but it doesn't look quite like the final app yet. In this task, you will learn how to change the size, text color, and other properties that affect TextViewthe appearance of a . Also, you can experiment with different fonts.

1. Click on the first one in the Component TreeTextView , then find the Common Attributes section of the Attributes window . You may need to scroll down to find this section.

2. Note the various properties, including fontFamily , textSize , and textColor .

3. Look for textAppearance .
4. If the textAppearance is not expanded, click the down triangle.
5. Set textSize to 36sp .

Note: Just like dp is a measure of distance on the screen, sp is a measure of font size. UI elements in Android apps use two different units of measurement: the density-independent pixels ( dp ) that you previously used for layout , and the scalable pixels ( sp ) that you used when setting font sizes . By default, sp and dp are the same size, but the size of the former is adjusted according to the user's preferred text size.

6. Notice the changes appearing in the layout editor .

7. Change fontFamily to casual .
8. Try using a few different fonts and see how they each look. You can also select other fonts via More Fonts… at the bottom of the list .
9. After you've tried different fonts, set the fontFamily to sans-serif-light .
   10. Click the edit box for the textColor property, and start typing black . Note that as you type, Android Studio displays a list of the colors you've typed so far.

11. Select @android:color/black from the list of colors and press Enter.
12. TextViewIn the containing signature , change textSize , textColor , and fontFamily to matching values.
13. Run the application and view the results.

Congratulations, you've completed the first few steps of creating a Birthday Card app!

5. Solutions

Solution code URL: https://github.com/google-developer-training/android-basics-kotlin-birthday-card-app-solution

To get the code for this article and open it in Android Studio, do the following.

get code

1. Click on the URL provided. At this point, the project's GitHub page opens in your browser.
2. On the project's GitHub page, click the Code button to open a dialog.

3. In the dialog, click the Download ZIP button to save the project to your computer. Wait for the download to complete.
4. Locate the file on your computer (probably in the Downloads folder).
5. Double-click the ZIP file to extract it. A new folder will be created containing the project files.

Open the project in Android Studio

1. Start Android Studio.
2. In the Welcome to Android Studio window, click Open an existing Android Studio project .

Note: If Android Studio is already open, select the File > New > Import Project menu option.

3. In the Import Project dialog, go to where the unzipped project folder is located (probably in the Downloads folder).
4. Double-click the project folder.
5. Wait for Android Studio to open the project.
6. Click the Run button to build and run the application. Make sure the app builds as expected.
7. Browse the project file in the Project tool window to see how your app is set up.

Reminder: In Android Studio, if you see the " Android framework is detected. Click to configure" error message, either the project is not detected or the "Run" button is disabled, make sure you are in the Android The HappyBirthday subdirectory is opened in Studio , not the parent directory.

6. Summary

• The layout editor helps you create the interface of your Android application.
• Almost everything you see on an app screen belongs to a View .
• TextViewis an interface element that displays text in an application.
• ConstraintLayoutIt is a container for storing other interface elements.
• ConstraintLayoutIn , you must Viewsset horizontal and vertical constraints for .
• ViewOne way to place is with margins.
• Margins indicate how far Viewfrom the edge of the container it is in.
• You can set properties such as font, text size, and color on TextViewthe .

7. Learn more

• Vocabulary related to "Kotlin Development Basics for Android"
• View
• TextView
• ConstraintLayout
• dp and sp
• Layout Editor in Android Studio

Next: 【Add pictures to your Android application】