Android Codelab 1: Create a Birthday Card app

0 0
Read Time:25 Minute, 20 Second

About this codelab

In this codelab, you will build a simple Android app that displays text. You will be able to position the text on the screen by understanding more about User Interface (UI) components in Android.

Prerequisites

  • How to create a new app in Android Studio.
  • How to run an app in the emulator or on your Android device.

What you will learn

  • What are user interface elements, such as Views and ViewGroups.
  • How to display text in a TextView in an app.
  • How to set attributes, such as text, font, and margin on a TextView.

What you will build

  • An Android app that displays a birthday greeting in text format.

This is what your app will look like when you’re done.

dec50a075480d2ff.png

What you need

  • A computer with Android Studio installed.

2. Set up your Happy Birthday app

Create an Empty Activity project

  1. To start, create a new Kotlin project in Android Studio using the Empty Activity template.
  2. Call the app “Happy Birthday”, with a minimum API level of 19 (KitKat).

Important: If you’re not familiar with creating a new project in Android Studio, see Create and run your first Android app for details.

30a171ff53cba940.png
  1. Run your app. The app should look like the screenshot below.
7253111e53c87473.png

When you created this Happy Birthday app with the Empty Activity template, Android Studio set up resources for a basic Android application, including a “Hello World!” message in the middle of the screen. In this codelab, you will learn how that message gets there, how to change its text to be more of a birthday greeting, and how to add and format additional messages.

About user interfaces

The user interface (UI) of an app is what you see on the screen: text, images, buttons, and many other types of elements. It’s how the app shows things to the user, and how the user interacts with the app.

Each of these elements is what’s called a View. Almost everything you see on the screen of your app is a ViewViews can be interactive, like a clickable button or an editable input field.

In this codelab, you will work with a kind of View that is for displaying text and is called a TextView.

The Views in an Android app don’t just float on the screen by themselves. Views have relationships to each other. For example, an image may be next to some text, and buttons may form a row. To organize Views, you put them in a container. A ViewGroup is a container that View objects can sit in, and is responsible for arranging the Views inside it. The arrangement, or layout, can change depending on the size and aspect ratio of the screen of the Android device that the app is running on, and the layout can adapt to whether the device is in portrait or landscape mode.

One kind of ViewGroup is a ConstraintLayout, which helps you arrange the Views inside it in a flexible way.

b02cb13e267730fc.png

About the Layout Editor

Creating the user interface by arranging Views and ViewGroups is a big part of creating an Android App. Android Studio provides a tool that helps you do this, called the Layout Editor. You’ll use the Layout Editor to change the “Hello World!” text to “Happy Birthday!”, and later, to style the text.

When the Layout Editor opens, it has a lot of parts. You will learn to use most of them in this codelab. Use the annotated screenshot below for help recognizing the windows in the Layout Editor. You will learn more about each part as you make changes to your app.

  • On the left (1) is the Project window, which you have seen before. It lists all the files that make up your project.
  • At the center you can see two drawings (4) and (5) that represent the screen layout for your app. The representation on the left (4) is a close approximation of what your screen will look like when the app runs. It’s called the Design view.
  • The representation on the right (5) is the Blueprint view, which can be useful for specific operations.
  • The Palette (2) contains lists of different types of Views which you can add to your app.
  • The Component Tree (3) is a different representation of the views of your screen. It lists all the views of your screen.
  • On the far right (6) are Attributes. It shows you the attributes of a View and lets you change them.

Read more about the Layout Editor and how to configure it in the developer reference guide.

Annotated screenshot of the whole Layout Editor:

fc4828e6a783234.png

Let’s go make some changes in the Layout Editor to make your app more like a birthday card!

Change the Hello World message

  1. In Android Studio find the Project window on the left.
  2. Take note of these folders and files: The app folder has most of the files for the app that you will change. The res folder is for resources, such as images or screen layouts. The layout folder is for screen layouts. The activity_main.xml file contains a description of your screen layout.
  3. Expand the app folder, then the res folder, and then the layout folder.
  4. Double-click on activity_main.xml. This opens activity_main.xml in the Layout Editor and shows the layout it describes in the Design view.
1f64a0a2623c9380.png

Note: In these codelabs you will frequently be asked to open a file like in the previous steps. As a shorthand, this may be abbreviated as: Open activity_main.xml (res > layout > activity_main.xml) instead of listing each step separately.

  1. Look at the list of views in the Component Tree. Notice that there is a ConstraintLayout, and a TextView underneath it. These represent the UI of your app. The TextView is indented because it is inside the ConstraintLayout. As you add more Views to the ConstraintLayout, they will be added to this list.
  2. Notice that the TextView has “Hello World!” next to it, which is the text you see when you run the app.
9f483ad72607f3b6.png
  1. In the Component Tree, click on the TextView.
  2. Find Attributes on the right.
  3. Find the Declared Attributes section.
  4. Notice that the text attribute in the Declared Attributes section contains Hello World!.
de37fe1f5ed1507e.png

The text attribute shows the text that is printed inside a TextView.

  1. Click on the text attribute where the Hello World! text is.
  2. Change it to say Happy Birthday!, then press the Enter key. If you see a warning about a hardcoded string, don’t worry about it for now. You will learn how to get rid of that warning in the next codelab.
  3. Notice that the text has changed in the Design View…..(this is cool, you can see your changes right away!)
  4. Run your app, and now it says Happy Birthday!
233655306db5a589.png

Nice work! You made your first changes to an Android app.

3. Add TextViews to the layout

The birthday card you are building looks different than what you have in your app now. Instead of the small text in the center, you need two larger messages, one in the upper left and one in the lower right corner. In this task you’ll delete the existing TextView, and add two new TextViews, and learn how to position them within the ConstraintLayout.

Delete the current TextView

  1. In the Layout Editor, click to select the TextView at the center of the layout.
105cee362aaaceb0.png
  1. Press the Delete key. Android Studio deletes the TextView, and your app now shows just a ConstraintLayout in the Layout Editor and the Component Tree.
d39283af7f165541.png

Tip: If you want to zoom in on your layout, you can use the controls at the bottom right of the Layout Editor to adjust the size. Click on the bottom-most icon to return to a zoom level where the whole layout fits on your screen. 

ff6908e60c9fd434.png

Add a TextView

In this step, you’ll add a TextView in the upper left of your app to hold the birthday greeting.

452cf299739cfef7.png

The Palette in the upper left of the Layout Editor contains lists of different types of Views, organized by category, which you can add to your app.

  1. Find TextView. It appears both in the Common category and the Text category.
e23ce742cec0ab41.png
  1. Drag a TextView from the Palette to the upper left of the design surface in the Layout Editor and drop it. You don’t need to be exact, just drop it near the upper left corner.
6bbcb1bbc39df93a.gif
  1. Notice that there’s a TextView added, and notice a red exclamation mark in the Component Tree.
  2. Hover your pointer over the exclamation mark, and you’ll see a warning message that the view is not constrained and will jump to a different position when you run the app. You’ll fix that in the next step.
82be9743106923ab.png

Position the TextView

For the birthday card, the TextView needs to be near the upper left corner with some space around it. To fix the warning, you’ll add some constraints to the TextView, which tell your app how to position it. Constraints are directions and limitations for where a View can be in a layout.

The constraints you add to the top and left will have margins. A margin specifies how far a View is from an edge of its container.

76b7a03f2e03922d.png
  1. In Attributes on the right, find the Constraint Widget in the Layout section. The square represents your view.
b8811ae0b8d7acdf.png
  1. Click on the + at the top of the square. This is for the constraint between the top of your text view and the top edge of the constraint layout.
  2. A field with a number appears for setting the top margin. The margin is the distance from the TextView to the edge of the container, the ConstraintLayout. The number you see will be different depending on where you dropped the TextView. When you set the top margin, Android Studio automatically also adds a constraint from the top of the text view to the top of the ConstraintLayout.
ec09d6fe6c58407.png
  1. Change the top margin to 16.

Note: The unit for margins and other distances in the UI is density-independent pixels (dp). It’s like centimeters or inches, but for distances on a screen. Android translates this value to the appropriate number of real pixels for each device. As a baseline, 1dp is about 1/160th of an inch, but may be bigger or smaller for some devices.

  1. Do the same for the left margin.
ea087eb3bdbc771b.png
  1. Set the text to wish your friend a happy birthday, for example “Happy Birthday, Sam!” and press Enter.
106f43119170e8a7.png
  1. Notice that the Design view updates to show what your app will look like.
452cf299739cfef7.png

Add and position another TextView

Your birthday card needs a second line of text near the bottom right corner, which you’ll add in this step in the same way as in the previous task. What do you think the margins of this TextView should be?

  1. Drag a new TextView from the Palette and drop it near the bottom right of the app view in the Layout Editor.
7006f342897bf9d1.png
  1. Set a right margin of 16.
  2. Set a bottom margin of 16.
26482fb78346f8b.png
  1. In Attributes, set the text attribute to sign your card, for example “From Emma.”
  2. Run your app. You should see your birthday wish in the upper left and your signature in the lower right.
f547c1b45045984a.png

Congratulations! You’ve added and positioned some UI elements in your app.

4. Add style to the text

You added text to your user interface, but it doesn’t look like the final app yet. In this task, you’ll learn how to change the size, text color, and other attributes that affect the appearance of the TextView. You can also experiment with different fonts.

  1. Click on the first TextView in the Component Tree and find the Common Attributes section of the Attributes window. You may need to scroll down to find it.
  2. Notice the various attributes including fontFamilytextSize, and textColor.
26afd9402e32543b.png
  1. Look for textAppearance.
  2. If textAppearance is not expanded, click on the down triangle.
  3. In the textSize set the textSize to 36sp.
abfd83a8ec1f44dd.png

Note: Just like dp is a unit of measure for distances on the screen, sp is a unit of measure for the font size. UI elements in Android apps use two different units of measurement, density-independent pixels (dp) which you used earlier for the layout, and scalable pixels (sp) which is used when setting the size of text. By default, sp is the same size as dp, but it resizes based on the user’s preferred text size.

  1. Notice the change in the Layout Editor.
ce3e0956cad6413a.png
  1. Change the fontFamily to casual.
  2. Try some different fonts to see what they look like. There are even more choices for fonts at the bottom of the list, under More Fonts…
  3. When you’re done trying different fonts, set the fontFamily to sans-serif-light.
  4. Click on the textColor attribute’s edit box and start typing black. Notice that as you type, Android Studio shows a list of colors that contain the text you’ve typed so far.
88b7985332d38f90.png
  1. Select @android:color/black from the list of colors and press Enter.
  2. In the TextView with your signature, change the textSizetextColor and fontFamily to match.
  3. Run your app and look at the result.
ab46eb841980bc5b.png

Congratulations, you’ve taken the first steps to creating a birthday card app!

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

5. Summary

  • The Layout Editor helps you create the UI for your Android app.
  • Almost everything you see on the screen of your app is a View.
  • TextView is a UI element for displaying text in your app.
  • ConstraintLayout is a container for other UI elements.
  • Views need to be constrained horizontally and vertically within a ConstraintLayout.
  • One way to position a View is with a margin.
  • A margin says how far a View is from an edge of the container it’s in.
  • You can set attributes on a TextView like the font, text size, and color.

2. Set up your app

  1. Open your project from the previous codelab in Android Studio. You can use the solution code or the code you created. When you run the app, it should look like this.
ab46eb841980bc5b.png

Add an image to your project

In this task, you’ll download an image from the internet and add it to your Happy Birthday app.

  1. Click here to access the image for your birthday card on Github.
  2. Click the Download button on the right. This displays the image by itself.
80745a1810838bd4.png
  1. Right-click on the image and save the file to your computer as androidparty.png. Make note of where you saved it (for example, the Downloads folder).
  2. In Android Studio, click on View > Tool Windows > Resource Manager in the menus or click on the Resource Manager tab to the left of the Project window.
  3. Click the + below Resource Manager, and select Import Drawables. This opens a file browser.
d7f72d9af346ff2c.png
  1. In the file browser find the image file you downloaded and click Open.
  2. Click Next. Android Studio shows you a preview of the image.
  3. Click Import.
  4. If the image has been imported successfully, Android Studio adds the image to your Drawable list. This list includes all your images and icons for the app. You can now use this image in your app.
e4a7e2568ab80e33.png
  1. Switch back to the project view by clicking on View > Tool Windows > Project in the menus or the Project tab on the far left.
  2. Confirm the image is in the drawable folder of your app by expanding app > res > drawable.
3af43a9ea1c39ed4.png

3. Add an ImageView

In order to display an image in your app, it needs a place to be displayed. Just like you use a TextView to display text, you can use an ImageView to display images.

In this task, you’ll add an ImageView to your app, and set its image to the cupcake image you downloaded. Then you’ll position it and adjust its size so it fills the screen.

Add an ImageView and set its image

  1. In the Project window open activity_main.xml ( app > res > layout > activity_main.xml ).

Tip: If you don’t see the Layout Editor, click on the Design mode button in the upper right. 5cdbdfcc1b6ea82e.png

  1. In the Layout Editor, go to the Palette and drag an ImageView to your app. Drop it near the center and not overlapping any of the text

The Pick a Resource dialog opens. This dialog lists all the image resources available to your app. Notice the birthday image listed under the Drawable tab. A drawable resource is a general concept for a graphic that can be drawn to the screen. It includes images, bitmaps, and icons and many other types of drawn resources.

  1. In the Pick a Resource dialog find the cake image in the Drawable list.
  2. Click on the image and then click OK.
1f98a4e8c3dde1bd.gif

This adds the image to your app, but it’s probably not in the right place and it doesn’t fill the screen. You’ll fix that in the next step.

Position and size the ImageView

  1. Click and drag the ImageView around in the Layout Editor, and note that as you drag, a pink rectangle appears around the app screen in the Design view. The pink rectangle indicates the boundaries of the screen for positioning your ImageView.
  2. Drop the ImageView so that the left and right edges align with the pink rectangle. Android Studio will “snap” the image to the edges when you’re close. (You’ll take care of the top and bottom in a moment.)
25ab8b0401429ebd.gif

Views in a ConstraintLayout need to have horizontal and vertical constraints to tell the ConstraintLayout how to position them. You’ll add those next.

Note: A constraint in the context of the Layout Editor represents a connection or alignment of a view to another view, the parent layout, or an invisible guideline. For example, a view can be constrained to be a certain distance from the edge of its container, or always be to the right of another view, or always the top view inside a container.

  1. Hold the pointer over the circle at the top of the outline of the ImageView, and it highlights with another circle.
  2. Drag the circle towards the top of the app screen, and an arrow connects the circle to your pointer as you are dragging. Drag until it snaps to the top of the screen. You’ve added a constraint from the top of the ImageView to the top of the ConstraintLayout.
f3b70726695ea8c9.gif
  1. Add a constraint from the bottom of the ImageView to the bottom of the ConstraintLayout. It may be too close to the edge to drag as you did for the top. In that case, you can click on the bottom + in the Constraint Widget in the Attributes window to add a constraint. Make sure the margin is 0.
cdde37ea44d6bc1a.png

Tip: Adding constraints can be more difficult as you add more Views on the screen. If you add a constraint to the wrong View, you can undo that step with Control+Z (Command+Z on a Mac.) Or right-click on the View which will pop up a menu, and choose Clear Constraints of Selection which will remove all the constraints on that View.

b83d43d284d69d64.png
  1. In the Attributes pane, use the Constraint Widget to add a margin of 0 to the left and to the right sides. This automatically creates a constraint in that direction.
1c58fd4afe6f83bb.png

The image is now centered, but it isn’t taking up the whole screen yet. You’ll fix that in the next steps:

  1. Below the Constraint Widget in the Constraints section, set the layout_width to 0dp (match constraint). 0dp is a shorthand to tell Android Studio to use match constraint for the width of the ImageView. Because of constraints you just added, this makes it as wide as the ConstraintLayout, minus any margins.
9fff7d632ac45a3d.png
  1. Set the layout_height to 0dp (match constraint). Because of the constraints you added, this makes the ImageView as tall as the ConstraintLayout, minus any margins.
704ef89d2286fd5f.png
  1. The ImageView is as wide and tall as the app screen, but the image is centered inside the ImageView and there is a bunch of whitespace above and below the image. Since that doesn’t look very attractive, you will adjust the scaleType of the ImageView, which says how to size and align the image. Read more about ScaleType in the developer reference guide. Your app should now look as shown below.
426fe4a377aef0c6.png
  1. Find the scaleType attribute. You may need to scroll down or search for this attribute. Try setting different values for the scaleType to see what they do.

Tip: To find a property in the list of all the properties, click on the magnifying glass icon to the right of Attributes, and begin typing the name of the property. Android Studio will show just the properties that contain that string.

6349e6a522fda9ea.png
1e116f4ea013be17.png
  1. When you’re done, set the scaleType to centerCrop because that makes the image fill the screen without distorting it.
32350f1cf95adb1d.png

The cake image should now fill the entire screen, as shown below.

b3ef159159143c95.png

But now you can’t see your birthday greeting and signature. You’ll fix that in the next step.

Move the ImageView behind the text

After making the ImageView fill the screen, you can’t see the text anymore. This is because the image now covers up the text. It turns out that the order of your UI elements matters. You added the TextViews first, then you added the ImageView, which means it went on top. When you add views to a layout, they are added at the end of a list of views, and they get drawn in the order they are in the list. The ImageView was added to the end of the list of Views in the ConstraintLayout, which means it’s drawn last, and draws over the TextViews. To fix that, you’ll change the order of the views and move the ImageView to the beginning of the list so it’s drawn first.

c52a8a80608e453.gif

In the Component Tree, click on the ImageView, and drag it above the TextViews to just below the ConstraintLayout. A blue line with a triangle appears showing where the ImageView will go. Drop the ImageView just below the ConstraintLayout.

140649e77bd4f05b.gif

The ImageView should now be first in the list below the ConstraintLayout, with the TextViews after it. Both the “Happy Birthday, Sam!” and the “From Emma.” text should now be visible. (Ignore the warning for the missing content description for now.)

Congratulations! You’ve added an image to your Android app!

4. Adopt good coding practices

When you added the TextViews in the previous codelab, Android Studio flagged them with warning triangles. In this step, you’ll fix those warnings and also fix the warning on the ImageView.

Translating

When you write apps, it’s important to remember that they may be translated into another language at some point. As you learned in an earlier codelab, a string is a sequence of characters like “Happy Birthday, Sam!”.

hardcoded string is one that is written directly in the code of your app. Hardcoded strings make it more difficult to translate your app into other languages, and harder to reuse a string in different places in your app. You can deal with those issues by “extracting strings into a resource file”. That means instead of hardcoding the string in your code, you put the string into a file, give it a name, and then use the name whenever you want to use this string. The name will stay the same, even if you change the string or translate it to a different language.

c8cc318f2276fbf0.png
  1. Click on the orange triangle next to the first TextView with “Happy Birthday, Sam!” Android Studio opens a window with more information and a suggested fix. You may need to scroll down to see the Suggested Fix.
Hardcoded string
  1. Click the Fix button. Android Studio opens the Extract Resource dialog. In this dialog, you can customize what your string resource is called, and some details on how to store it. The Resource name is what the string is going to be called. The Resource value will be the actual string itself.
  2. In the Extract Resource dialog, change the Resource name to happy_birthday_text. String resources should have lowercase names, and multiple words should be separate with an underscore. Leave the other settings with the defaults.
2849a324f8a7c805.png
  1. Click the OK button.
  2. In the Attributes pane, find the text attribute, and notice that Android Studio has automatically set it to @string/happy_birthday_text for you.
579b6eff07a35331.png
  1. Open strings.xml (app > res > values > strings.xml) and notice that Android Studio has created a string resource called happy_birthday_text.
<resources>    <string name="app_name">Happy Birthday</string>    <string name="happy_birthday_text">Happy Birthday, Sam!</string></resources>

The strings.xml file has a list of strings that the user will see in your app. Note that the name of your app is also a string resource. By putting the strings all in one place, you can more easily translate all the text in your app, and more easily reuse a string in different parts of your app.

  1. Follow the same steps to extract the text for the signature TextView, and name the string resource signature_text.

Your finished file should look like this.

<resources>    <string name="app_name">Happy Birthday</string>    <string name="happy_birthday_text">Happy Birthday, Sam!</string>    <string name="signature_text">From Emma.</string></resources>

Check your app for accessibility

Following good coding practices for accessibility allows all of your users, including users with disabilities, to navigate and interact with your app more easily.

Note: Android provides many tools for users. For example, TalkBack is the Google screen reader included on Android devices. TalkBack gives users spoken feedback so that users can use their device without looking at the screen. Read more about accessibility in the developer reference guide.

Android Studio provides hints and warnings to help you make your app more accessible.

  1. In the Component Tree, notice the orange triangle next to the ImageView that you added earlier. If you hover the pointer over it, you’ll see a tooltip with a warning about a missing ‘contentDescription’ attribute on the image. A content description can help make your app more usable with TalkBack by defining the purpose of the UI element.

However, the image in this app is only included for decorative purposes. Instead of setting the content description that is announced to the user, you can just tell TalkBack to skip the ImageView by setting its importantForAccessibility attribute to no.

  1. In the Component Tree, select the ImageView.
  2. In the Attributes window, in the All Attributes section, find importantForAccessibility and set it to no.

The orange triangle next to the ImageView disappears.

  1. Run your app again to make sure it still works.

Congratulations! You’ve added an image to your Happy Birthday app, followed the accessibility guidelines, and made it easier to translate to other languages!

ba4136f24be200c4.png

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

5. Summary

  • The Resource Manager in Android Studio helps you add and organize your images and other resources.
  • An ImageView is a UI element for displaying images in your app.
  • ImageViews should have a content description to help make your app more accessible.
  • Text that is shown to the user like the birthday greeting should be extracted into a string resource to make it easier to translate your app into other languages.
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Verified by MonsterInsights