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.
In this codelab, you learn about fragments, and you create a fragment inside a starter app called AndroidTrivia. In the next codelab, you learn more about navigation and do further work on the AndroidTrivia app.
In the three codelabs that make up this lesson, you work on an app called AndroidTrivia. The completed app is a game in which the user answers three trivia questions about Android coding. If the user answers all three questions correctly, they win the game and can share their results.
The AndroidTrivia app illustrates navigation patterns and controls. The app has several components:
The top of the app displays a colored view called the app bar, which is also known as the action bar.
In this codelab, you work from a starter app that provides template code and fragment classes that you need as you complete the Trivia app.
MainActivity
class and fragment classes.activity_main.xml
file appears in the Layout Editor.activity_main.xml
file shows the root layout as vertical LinearLayout
. A fragment represents a behavior or a portion of user interface (UI) in an activity. You can combine multiple fragments in a single activity to build a multi-pane UI, and you can reuse a fragment in multiple activities.
Think of a fragment as a modular section of an activity, something like a "sub activity" that you can also use in other activities:
The AndroidTrivia app has a main activity and several fragments. Most of the fragments and their layout files have been defined for you. In this task, you create a fragment and add the fragment to the app's main activity.
In this step, you create a blank TitleFragment
class. Start by creating a Kotlin class for a new fragment:
TitleFragment.kt
fragment file, if it is not already open. It contains the onCreateView()
method, which is one of the methods that's called during a fragment's lifecycle. onCreateView()
, remove the return TextView(activity).apply
section, including the line that starts with setText
. The onCreateView()
function is left with only the following code:override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
}
Create a binding object
The fragment won't compile now. To make the fragment compile, you need to create a binding object and inflate the fragment's view (which is equivalent to using setContentView()
for an activity).
onCreateView()
method in TitleFragment.kt
, create a binding
variable (val binding
).DataBindingUtil.inflate()
method on the fragment's Binding
object, which is FragmentTitleBinding
. inflater
, which is the LayoutInflater
used to inflate the binding layout.R.layout.fragment_title
.container
for the parent ViewGroup
. (This parameter is optional.)false
for the attachToParent
value. DataBindingUtil.inflate
returns to the binding
variable.binding.root
from the method, which contains the inflated view. Your onCreateView()
method now looks like the following code:override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
savedInstanceState: Bundle?): View? {
val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
R.layout.fragment_title,container,false)
return binding.root
}
In this step, you add the TitleFragment
to the app's activity_main.xml
layout file.
LinearLayout
element, add a fragment
element.titleFragment
.com.example.android.navigation.TitleFragment
. match_parent
.<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<fragment
android:id="@+id/titleFragment"
android:name="com.example.android.navigation.TitleFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>
</layout>
Android Studio project: AndroidTriviaFragment
In this codelab, you added a fragment to the AndroidTrivia app, which you will keep working on in the next two codelabs in this lesson.
<fragment>
tag to define the layout for the fragment in the XML layout file.onCreateView()
.Udacity course:
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.
What are some of the differences between fragments and activities? Select all the statements that are true.
onCreateView()
method. When creating an activity, you inflate the layout in onCreate()
.R.layout.
layoutname
.Which of the following statements about fragments are true? Select all that apply.
activity_main.xml
layout file.<fragment>
tag to define the place in a layout file where a fragment is to be inserted.Start the next lesson:
For links to other codelabs in this course, see the Android Kotlin Fundamentals codelabs landing page.