This course will be retired on June 1, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll get our feet wet by creating a Fragment!
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
First things first.
0:00
We need to create the project.
0:01
Let's create a new project and
name it Smells Like Bakin.
0:03
And let's leave everything else default.
0:12
Make sure this is set to empty
activity and then hit Finish.
0:15
Before we get started,
0:26
there are a few starter files that
you should add to your project.
0:27
Start by downloading
the images we'll be using
0:30
from the link below in
the teacher's notes.
0:33
Once you've got the images, copy and
paste them into the drawable folder.
0:36
Next create a new class called Recipes.
0:44
And copy and paste the code for
0:52
this class from the teacher's
notes into your new Recipe class.
0:54
We'll be using this class to store
information about our recipes.
1:01
Notice that we've got a few
public static arrays.
1:05
We've got one for the recipe names.
1:08
One for the resource IDs.
1:11
Another for the ingredients.
1:14
And one last array for the directions.
1:16
The Recipes class has all
the information we need to make our app.
1:19
Now, let's move on to creating
our very first fragment.
1:23
And that fragment is the list
fragment from the phone layout.
1:26
Let's start by creating a new
layout file for this fragment.
1:30
And let's call it fragment_list.
1:37
Fragments need to get their
layouts from somewhere.
1:43
And just like activities,
an easy way to specify the layout for
1:46
a fragment is through an XML file.
1:49
Because we're still trying
to figure out fragments,
1:53
let's just quickly add
a text view to the middle.
1:55
Change its text to say yay fragments.
1:59
And leave it at that for now.
2:06
Then, let's create a new
class named ListFragment.
2:08
This class will represent the list
we saw earlier on the phone.
2:17
And it will display our
new fragment list layout.
2:21
And since this is a fragment, we should
make it extend to fragment class.
2:25
And notice that there are actually
two fragment classes.
2:31
One from the android.app package, and one
from the android.support.v4.app package.
2:34
If we need to support less than API 11 we
2:43
need to pick the fragment
from the support package.
2:46
But since our min SDK version is 15, which
was defaulted then we created the project,
2:49
we'll be fine picking
the regular fragment class.
2:55
Next up let's override our
fragments on Create view method.
3:00
Ctrl+O onCreateView > Enter.
3:04
The view returned by this method is
what will be displayed by our fragment.
3:11
So we need to return a view that
represents our fragment list layout.
3:15
We can do this by using
the LayoutInflator parameter.
3:21
Remember allowed LayoutInflater is what
we use to turn XML layouts into views.
3:23
Let's get rid of this
line with the return and
3:30
create a new variable for
the view we'd like to return.
3:35
View, view.
3:39
And let's set it equal
to inflater.inflate.
3:41
And for the first argument, it looks
like we need to provide a resource ID.
3:45
So let's pass an R.layout fragment list.
3:50
Then, for the second argument,
we need a view group.
3:57
This view group will be where
our new view gets added.
4:00
And luckily, it's provided for
us as the container parameter.
4:04
So I'll just copy that and
then pass that and as the second argument.
4:09
Looking good.
4:15
Last but not least,
let's return our view variable.
4:16
Now that we've got our fragment,
let's head over to main activity and
4:21
make the magic happen.
4:24
But first let's take a quick detour
to our activities layout file,
4:26
and delete the text view.
4:30
When we add a fragment to an activity,
4:36
we have to specify where in the activity
we should add the fragment.
4:38
One way to do this,
4:43
is to put the fragment directly into
the XML of the activities layout.
4:44
To do this we just use the fragment tag.
4:49
And then specify which fragment to
show by using the name attribute.
4:55
The other way to add a fragment
to an activity is to use a view
5:01
group as a placeholder and add or remove
fragments from that view group and code.
5:04
It's just an empty view group with the
sole purpose of reserving a spot in our
5:10
activities UI for our fragments.
5:14
Since we'll be using a few different
fragments as the main display,
5:18
let's go with the view group approach.
5:21
And I'll delete this fragment tag.
5:23
A good view group choice
would be a frame layout.
5:27
Since we'll only be showing one fragment
at a time, the list or the details.
5:30
Let's change RelativeLayout
to FrameLayout.
5:35
Then let's give this an ID of placeholder
so we can reference it from our activity.
5:41
Android id placeHolder.
5:47
Lastly, let's get rid of
the four padding attributes.
5:53
If we want padding,
we'll do it in the fragments.
5:57
In the next video, we'll make
the jump over to main activity and
6:00
see our new fragment in action.
6:03
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up