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.

What you should already know

What you'll learn

What you'll do

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.

  1. Download the AndroidTrivia-Starter Android Studio project.
  2. Open the project in Android Studio and run the app. When the app opens, it doesn't do anything other than display the app name and a blank screen.

  3. In the Android Studio Project pane, open the Project: Android view to explore the project files. Open the app > java folder to see the MainActivity class and fragment classes.

  4. Open the res > layout folder and double-click on activity_main.xml. The activity_main.xml file appears in the Layout Editor.
  5. Click the Design tab. The Component Tree for the activity_main.xml file shows the root layout as vertical LinearLayout.

    In a vertical linear layout, all the child views in the layout are aligned vertically.

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.

Step 1: Add a fragment class

In this step, you create a blank TitleFragment class. Start by creating a Kotlin class for a new fragment:

  1. In Android Studio, click anywhere inside the Project pane to bring the focus back to the project files. For example, click the folder.
  2. Select File > New > Fragment > Fragment (Blank).
  3. For the fragment name, use TitleFragment. Clear all the checkboxes, including create Layout XML, include fragment factory methods, and include interface callbacks.
  4. Click Finish.
  5. Open the 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.
  6. In 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).

  1. In the onCreateView() method in TitleFragment.kt, create a binding variable (val binding).
  2. To inflate the fragment's view, call the DataBindingUtil.inflate() method on the fragment's Binding object, which is FragmentTitleBinding.

    Pass four parameters into the method:
  1. Assign the binding that DataBindingUtil.inflate returns to the binding variable.
  2. Return 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,
   return binding.root

Step 2: Add the new fragment to the main layout file

In this step, you add the TitleFragment to the app's activity_main.xml layout file.

  1. Open res > layout > activity_main.xml and click the Text tab to view the layout XML code.
  2. Inside the existing LinearLayout element, add a fragment element.
  3. Set the fragment's ID to titleFragment.
  4. Set the fragment's name to the full path of the fragment class, which in this case is
  5. Set the layout width and height to match_parent.
<layout xmlns:android=""


  1. Run the app. The fragment has been added to your main screen.

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.

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.

Answer these questions

Question 1

What are some of the differences between fragments and activities? Select all the statements that are true.

Question 2

Which of the following statements about fragments are true? Select all that apply.

Start the next lesson: 3.2 Define navigation paths

For links to other codelabs in this course, see the Android Kotlin Fundamentals codelabs landing page.