In this codelab you will learn how to add images to your app using an
TextViewsusing the Layout Editor.
In this task, you'll download an image from the internet and add it to your Happy Birthday app.
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.
ImageViewto 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.
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.
ImageViewaround 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
ImageViewso 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.)
Views in a
ConstraintLayout need to have horizontal and vertical constraints to tell the
ConstraintLayout how to position them. You'll add those next.
ImageView, and it highlights with another circle.
ImageViewto the top of the
ImageViewto 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.
The image is now centered, but it isn't taking up the whole screen yet. You'll fix that in the next steps.
ImageView. "match constraints means.... Because of constraints you just added, this makes it as wide as the
ConstraintLayout, minus any margins.
ImageViewas tall as the
ConstraintLayout, minus any margins.
ImageViewis as wide and tall as the app screen, but the image is centered inside the
ImageViewand 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
ScaleTypein the developer reference guide. Your app should now look as shown below.
The cake image should now fill the entire screen, as shown below.
But now you can't see your birthday greeting and signature. You'll fix that in the next step.
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.
ImageView, and drag it above the
TextViewsto just below the
ConstraintLayout. A blue line with a triangle appears showing where the
ImageViewwill go. Drop the
ImageViewjust below 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!
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
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!".
A 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.
TextViewwith "Happy Birthday, Sam!"
<resources> <string name="app_name">Happy Birthday</string> <string name="happy_birthday_text">Happy Birthday, Sam!</string> </resources>
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.
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>
Following good coding practices for accessibility allows all of your users, including users with disabilities, to navigate and interact with your app more easily.
Android Studio provides hints and warnings to help you make your app more accessible.
ImageViewthat 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.
The orange triangle next to the
Congratulations! You've added an image to your Happy Birthday app, followed the accessibility guidelines, and made it easier to translate to other languages!
The solution code for the Happy Birthday app has been uploaded to GitHub, in case you'd like to see the code that we ended up with.
GitHub is a service that allows developers to manage code for their software projects. It uses Git, which is a version control system that keeps track of the changes made for each version of the code. If you've ever seen the version history of a Google Doc, you can see when and what edits were made on the document in the past. Similarly, you can track the version history of the code in a project. This is very helpful if you are working on a project as an individual or with a team.
GitHub also has a website where you can view and manage your project. This GitHub link allows you to browse the Happy Birthday project files online or download them to your computer.
To get the code for this codelab and open it in Android Studio, do the following.
Note: If Android Studio is already open, instead, select the File > New > Import Project menu option.
ImageViewis a UI element for displaying images in your app.
ImageViewsshould have a content description to help make your app more accessible.
Do the following:
Viewsyou will need.
There are two types of bitmap images commonly used for Android apps, JPEG files and PNG files. PNG files can have transparent (empty) areas in them. Read more about image formats in the developer reference.
Viewsfirst with constraints and margins, then style them.
Check your work:
Your finished app should run without errors and show the birthday card you designed.