Hard Prerequisites |
IMPORTANT: Please review these prerequisites, they include important information that will help you with this content. |
|
In the three projects 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.
he 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 project, 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:
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 com.example.android.navigation 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:
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:
inflater
, which is the LayoutInflater
used to inflate the binding layout.
The XML layout resource of the layout to inflate. Use one of the layouts that is already defined for you, R.layout.fragment_title
.
container
for the parent ViewGroup
. (This parameter is optional.)
false
for the attachToParent
value.
Assign the binding that DataBindingUtil.inflate
returns to the binding
variable.
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,
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.
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 com.example.android.navigation.TitleFragment
.
5 - Set the layout width and height to 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>
6 - Run the app. The fragment has been added to your main screen.
In this project, you added a fragment to the AndroidTrivia app, which you will keep working on in the next two project in this lesson.
A fragment is a modular section of an activity.
A fragment has its own lifecycle and receives its own input events.
Use the <fragment>
tag to define the layout for the fragment in the XML layout file.
Inflate the layout for a fragment in onCreateView()
.
You can add or remove a fragment while the activity is running.