This codelab is part of the Android Kotlin Fundamentals course. You'll get the most value out of this course if you work through the codelabs in sequence. All the course codelabs are listed on the Android Kotlin Fundamentals codelabs landing page.
ScrollViewfor displaying the scrollable content.
TextViewto the layout to display your name.
ScrollViewto display scrollable text.
In the AboutMe app, you can showcase interesting facts about yourself, or you can customize the app for a friend, family member, or pet. This app displays a name, a DONE button, a star image, and some scrollable text.
In this task, you create the AboutMe Android Studio project.
Company Name android
Leave the default location, or change it to your preferred directory.
Minimum API level
API 19: Android 4.4 (KitKat)
This project will support instant apps
Leave this checkbox cleared.
Use AndroidX artifacts
Select this checkbox.
Android Studio will take a moment to generate the project files.
The Empty Activity template creates a single empty activity,
Mainactivity.kt. The template also creates a layout file called
activity_main.xml. The layout file has
ConstraintLayout as its root
ViewGroup, and it has a single
TextView as its content.
In this task, you change the generated root
ViewGroup to a
LinearLayout. You also arrange the UI elements vertically.
ViewGroup is a view that can contain child views, which are other views and view groups. Views that make up a layout are organized as a hierarchy of views with a view group as the root.
LinearLayout view group, the UI elements are arranged either horizontally or vertically.
Change the root layout so that it uses a
LinearLayout view group:
app/res/layoutfolder, open the
TextView. In the
LinearLayoutelement, add the
android:orientationattribute and set it to
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> </LinearLayout>
The Layout Editor is a visual-design tool inside Android Studio. Instead of writing XML code by hand to build your app's layout, you can use the Layout Editor to drag UI elements into the design editor.
To see the Layout Editor, click the Design tab. The screenshot below shows the parts of the Layout Editor.
Design editor: Displays a visual representation of your screen layout in design view, blueprint view, or both. The design editor is the main part of the Layout Editor.
Toolbar: Provides buttons to configure your layout's appearance in the design editor, and to change some layout attributes. For example, to change the display of your layout in the design editor, use the Select Design Surface drop-down menu:
Palette: Provides a list of views and view groups that you can drag into your layout or into the Component Tree pane.
Attributes: Shows attributes for the currently selected view or view group. To toggle between a complete list of attributes and commonly used attributes, use the icon at the top of the pane.
Component Tree: Displays the layout hierarchy as a tree of views. The Component Tree is useful when you have small, hidden, or overlapping views that you could not otherwise select in the design editor.
res/layout/activity_main.xmlfile, if it's not already open.
LinearLayoutas its root view group. (View groups are views that contain other views.)
LinearLayouthas the required attributes
orientation, which is
TextViewin the design editor.)
Set it to your name. (One of the text fields shows a wrench icon to indicate that it's for the
textAppearance > textSize
textAppearance > textColor
textAppearance > textAlignment
In the Component Tree, next to the
TextView, you will notice a warning icon . To see the warning text, click the icon or point to it, as shown in the screenshot below.
To resolve the warning, create a string resource:
name. Set the Resource value field to your own name. Click OK. Notice that the warning is gone.
res/values/strings.xmlfile and look for the newly created string resource called
<string name="name">Aleks Haecky</string>
You just added a resource using the resource editor. You can also extract resources in the XML code editor to create new resources:
activity_main.xmlfile, switch to the Text tab.
textSizeline, click on the number (
20sp) and type
Option+Enteron a Mac). Select Extract dimension resource from the popup menu.
text_sizein the Resource name field. Click OK.
res/values/dimens.xmlfile to see the following generated code:
MainActivity.ktfile, and look for the following code at the end of the
setContentView() function connects the layout file with the
Activity. The specified layout resource file is
Ris a reference to the resource. It is an auto-generated class with definitions for all the resources in your app.
layout.activity_mainindicates that the resource is a layout named
TextViewwith your name is displayed.
When you look at your app screen, your name is pushed up against the top of the screen, so now you add padding and a margin.
Padding is the space inside the boundaries of a view or element. It is the space between the edges of the view and the view's content, as shown in the figure below.
A view's size includes its padding. The following are commonly used padding attributes:
android:paddingspecifies padding for all four edges of the view.
android:paddingTopspecifies padding for the top edge.
android:paddingBottomspecifies padding for the bottom edge.
android:paddingStartspecifies padding for the "starting" edge of the view.
android:paddingEndspecifies padding for the "ending" edge of the view.
android:paddingLeftspecifies padding for the left edge.
android:paddingRightspecifies padding for the right edge.
Margin is the space added outside of the view's borders. It is the space from the edge of the view to its parent, as shown in the figure above. The following are commonly used margin attributes:
android:layout_marginspecifies a margin for all four sides of the view.
android:layout_marginBottomspecifies space outside the bottom side of this view.
android:layout_marginStartspecifies space outside the "starting" side of this view.
android:layout_marginEndspecifies space on the end side of this view.
android:layout_marginLeftspecifies space on the left side of this view.
android:layout_marginRightspecifies space on the right side of this view.
To put space between your name and the top edge of the
name text view, add top padding.
activity_main.xmlfile in the Design tab.
small_paddingwith a value of
To move the
name text view away from the edge of the parent element, add a top margin.
layout_marginand make it
16dp. Click OK.
To make the
name text view look better, use the Android Roboto font. This font is part of the support library, and you add the font as a resource.
roband choose Roboto. In the Preview list, select Regular.
res folder now has a
font folder that contains a
roboto.ttf font file. The
@font/roboto attribute is added to your
A style is a collection of attributes that specify the appearance and format for a view. A style can include font color, font size, background color, padding, margin, and other common attributes.
You can extract the
name text view's formatting into a style and reuse the style for any number of views in your app. Reusing a style gives your app a consistent look when you have multiple views. Using styles also allows you to keep these common attributes in one location.
TextViewin the Component Tree and select Refactor > Extract Style.
layout_heightcheckbox, and the
textAlignmentcheckbox. These attributes are usually different for each view, so you don't want them to be part of the style.
res/values/folder in a
styles.xmland examine the generated code for the
NameStylestyle, which will look similar to this:
<style name="NameStyle"> <item name="android:layout_marginTop">@dimen/layout_margin</item> <item name="android:fontFamily">@font/roboto</item> <item name="android:paddingTop">@dimen/small_padding</item> <item name="android:textColor">@android:color/black</item> <item name="android:textSize">@dimen/text_size</item> </style>
activity_main.xmland switch to the Text tab. Notice that the generated style is being used in the text view as
Most real-world Android apps consist of a combination of views to display images, display text, and accept input from the user in the form of text or click events. In this task, you add a view to display an image.
ImageView is a view for displaying image resources. For example, an
ImageView can display
Bitmap resources such as PNG, JPG, GIF, or WebP files, or it can display a
Drawable resource such as a vector drawing.
There are image resources that come with Android, such as sample icons, avatars, and backgrounds. You will add one of these resources to your app.
name_textin the Component Tree. The Resources dialog opens.
LinearLayout, views you add are vertically aligned.
ImageViewcode. The width is set to
match_parent, so the view will be as wide as its parent element. The height is set to
wrap_content, so the view will be as tall as its content. The
<ImageView android:id="@+id/imageView" android:layout_width="match_parent" android:layout_height="wrap_content" app:srcCompat="@android:drawable/btn_star_big_on" />
ImageView, right-click on
"@+id/imageView"and select Refactor > Rename.
@+id/star_image. Click Refactor.
star_image. The warning is for a missing
contentDescription, which screen readers use to describe images to the user.
contentDescriptionattribute. The Resources dialog opens.
yellow_star, and set the Resource value field to
Yellow star. Click OK.
@dimen/layout_margin) to the
yellow_star, to separate the star image from the name.
ScrollView is a view group that allows the view hierarchy placed within it to be scrolled. A scroll view can contain only one other view, or view group, as a child. The child view is commonly a
LinearLayout. Inside a
LinearLayout, you can add other views.
The following image shows an example of a
ScrollView that contains a
LinearLayout that contains several other views.
In this task, you will add a
ScrollView that allows the user to scroll a text view that displays a brief biography. If you are only making one view scrollable, you can put the view directly into the
ScrollView, which is what you do in this task.
activity_main.xmlfile in the Design tab.
// Auto generated code <ScrollView android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> </ScrollView>
The height and width of the
ScrollView match the parent element. Once the
name_text text view and the
star_image image view have used enough vertical space to display their contents, the Android system lays out the
ScrollView to fill the rest of the available space on the screen.
ScrollViewand call it
bio_scroll. Adding an
ScrollViewgives the Android system a handle for the view so that when the user rotates the device, the system preserves the scroll position.
ScrollView, remove the
LinearLayoutcode, because your app will only have one view that's scrollable—a
TextViewfrom the Palette to the Component Tree. Put the
bio_scroll, as a child element of
NameStylefrom the list, and click OK. The text view now uses the
NameStylestyle, which you created in a prior task.
strings.xml, create a string resource called
bio, and put in some long text about yourself, or about anything that you want.
Here is a sample biography:
<string name="bio">Hi, my name is Aleks. \n\nI love fish. \n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean. \nFun fact is that I have several aquariums and also a river. \n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much. \nAnd sometimes I even go fishing. \nAnd even less sometimes, I actually catch something. \n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands. \n\nI\'ll be happy to teach you how to make your own aquarium. \nYou should ask someone else about fishing, though.\n\n</string>
bio_texttext view, set the value of the
textattribute to the
biostring resource that contains your biography.
bio_texttext easier to read, add spacing between the lines. Use the
lineSpacingMultiplierattribute, and give it a value of
biotext runs all the way to the side edges of the screen. To fix this problem, you can add left, start, right, and end padding attributes to the root
LinearLayout. You do not need to add bottom padding, because text that runs right up to the bottom signals to the user that the text is scrollable.
16dpto the root
You have created a complete app from scratch, and it looks great!
Android Studio project: AboutMe
ScrollView, add an
ImageView above the
TextView. When you run the app, this image, unlike the star, scrolls out of view as the text scrolls up.
Hint: The scroll view can only have one child view. You have to wrap the two scrollable views, the
ImageView and the
TextView, into a
ViewGroupis a view that can contain other views.
ScrollVieware view groups.
LinearLayoutis a view group that arranges its child views horizontally or vertically.
ScrollViewwhen you need to display content on the screen, such as long text or a collection of images. A scroll view can contain only one child view. If you want to scroll more than one view, then add a
ViewGroupsuch as a
ScrollView, and put the views to be scrolled inside that
Android developer documentation:
This section lists possible homework assignments for students who are working through this codelab as part of a course led by an instructor. It's up to the instructor to do the following:
Instructors can use these suggestions as little or as much as they want, and should feel free to assign any other homework they feel is appropriate.
If you're working through this codelab on your own, feel free to use these homework assignments to test your knowledge.
Which of the following is a view group?
Which of the following listed view hierarchies is not valid?
Styles are resources defined in
styles.xml. Using styles, you can define colors, fonts, text size, and many other characteristics of a view. True or false?
ScrollView is a view group that can contain any number of views or view groups as its children. True or false?
Which UI element can be used to display images in your app?
Start the next lesson:
For links to other codelabs in this course, see the Android Kotlin Fundamentals codelabs landing page.