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.
TextViewin an app.
This is what your app will look like when you're done.
Important: If you're not familiar with creating a new project in Android Studio, see Create and run your first Android app for details.
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.
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
Views 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
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.
Creating the user interface by arranging
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.
Viewswhich you can add to your app.
Viewand 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:
Let's go make some changes in the Layout Editor to make your app more like a birthday card!
activity_main.xmlfile contains a description of your screen layout.
activity_main.xmlin the Layout Editor and shows the layout it describes in the Design view.
ConstraintLayout, and a
TextViewis indented because it is inside the
ConstraintLayout. As you add more
ConstraintLayout, they will be added to this list.
TextViewhas "Hello World!" next to it, which is the text you see when you run the app.
The text attribute shows the text that is printed inside a
Nice work! You made your first changes to an Android app.
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
TextViewat the center of the layout.
TextView, and your app now shows just a
ConstraintLayoutin the Layout Editor and the Component Tree.
In this step, you'll add a
TextView in the upper left of your app to hold the birthday greeting.
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.
TextView. It appears both in the Common category and the Text category.
TextViewfrom the Palette to the upper left of the design surface in the Layout Editor and drop it.
TextViewadded, and notice a red exclamation mark in the Component Tree.
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.
TextViewto 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
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?
TextViewfrom the Palette and drop it near the bottom right of the app view in the Layout Editor.
Congratulations! You've added and positioned some UI elements in your app.
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.
TextViewin the Component Tree and find the Common Attributes section of the Attributes window. You may need to scroll down to find it.
TextViewwith your signature, change the textSize, textColor and fontFamily to match.
Congratulations, you've taken the first steps to creating a birthday card app!
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.
TextViewis a UI element for displaying text in your app.
ConstraintLayoutis a container for other UI elements.
Viewsneed to be constrained horizontally and vertically within a
Viewis with a margin.
Viewis from an edge of the container it's in.
TextViewlike the font, text size, and color.