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 create our next Fragment!
Related Links
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
[SOUND] We finally finished
up our list fragment.
0:00
And we're ready to move on
to launching a new fragment,
0:06
once the user has selected a recipe.
0:08
But before we get started,
let's take a quick look
0:11
at what this new fragment should be and
how we can go about implementing it.
0:14
When we tap on a recipe,
the app should change its display
0:18
to show the ingredients and
directions of that recipe.
0:21
And when we're on a phone, these should
be displayed one at a time by using tabs.
0:25
To utilize tabs like this, we'll be making
use of a new view group called ViewPager.
0:30
ViewPagers, much like recycler views,
0:36
make use of an adapter to determine
what should be displayed on each page.
0:39
And more than that, there's even
a special FragmentPagerAdapter class
0:44
we can use to handle showing different
fragments on each page of our viewPager.
0:49
But that's getting a little
ahead of ourselves.
0:54
Right now, let's just focus on
displaying a new fragment and
0:57
moving our toast into this new fragment.
1:00
Let's start by creating a new class,
Named ViewPagerFragment.
1:04
And let's make it extend Fragment.
1:13
Then let's create a new layout file for
this fragment.
1:17
And let's name it fragment_viewpager.
1:26
We'll make changes to this layout later,
but right now, we just need it to exist.
1:31
Back in our ViewPagerFragment class,
let's hit Ctrl+O to bring up
1:37
the override dialogue and
override the onCreateView method.
1:41
Then, inside this method,
let's create a new view variable
1:49
named view, and
set it equal to inflater.inflate,
1:54
pass in our fragment's layout,
R.Layout.fragment_viewpager.
1:59
And the view grouping which we'd
like to add this layout, container,
2:06
and lastly pass in false for
the third parameter to tell
2:10
Android that we don't want our
fragment to be added to the container.
2:13
Remember, fragments will
be added automatically.
2:18
Last but not least,
let's return our view variable.
2:22
Now that we've got our fragment and
2:27
given it a layout,
let's head over to main activity and
2:28
see what we can do about switching to
this fragment when we tap on a recipe.
2:31
Replacing one fragment with another
is done in pretty much the same way
2:37
as when we add a fragment.
2:41
The only difference is that
instead of using the add method,
2:43
we'll use the replace method.
2:47
Let's copy the fragment adding
code from OnCreate, and
2:49
paste it into the bottom
of onListRecipesSelected.
2:53
Then let's change add to replace.
2:59
And use a ViewPagerFragment
instead of a ListFragment.
3:05
Now let's run the app and see if it works.
3:15
And if we click on a recipe,
we get a blank screen,
3:25
which means we're looking
at our new fragment.
3:28
Nice.
3:32
Now let's hit the back button
to go back to the recipe list.
3:34
Or just quit the app.
3:38
That's cool too.
3:41
In the next video, we'll see what we can
do to make the back button work correctly.
3:43
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