Preview
Video Player
00:00
00:00
Handling Clicks
5:20In this video we'll see how we can handle clicks in the Fragment and have that trigger an action in the Activity!
The last thing we need to do with our list
fragment is make it respond to touch.
0:00
When we tap on a recipe
we should change the UI
0:04
to display a different fragment
with the recipe details.
0:07
And who's responsible for
managing these UI changes?
0:10
That's right, our activity.
0:13
So when we click a recipe on our list
this should call a method in our activity
0:16
which handles the UI changes.
0:20
But for now, let's settle for
just showing a toast of the recipe's name.
0:22
A good way to communicate events from
a fragment back to its hosting activity,
0:27
is to define a callback interface
inside the fragment, and
0:31
then have the activity
implement this interface.
0:35
Here's an example.
0:38
Let's say we've got
a fragment with a button and
0:40
when we tap that button,
we want to call a method in the activity.
0:43
We create an interface with our
method inside the fragment class.
0:47
And the activity
implements this interface.
0:51
Then, we use the getActivity()
method to get our activity, and
0:54
cast it to our interface.
0:58
Lastly, in the on click
method of the button,
1:00
we call the onButtonClicked method.
1:03
All right let's start by creating a new
interface and our list fragment class.
1:06
And let's call it
onRecipeSelectedInterface.
1:12
At the top of the class let's
add some space and type public
1:16
interface OnRecipeSelectedInterface and
then brackets.
1:22
Now we need to add
a method to our interface.
1:31
This will be the method that
our activity needs to implement
1:34
to handle a recipe being selected.
1:36
So let's call it onListRecipeSelected
void onListRecipeSelected.
1:39
And then let's give it an int parameter
named index which will represent the index
1:49
of the chosen recipe.
1:54
That will do it for the interface next
up let's implement this interface and
1:57
our activity.
2:01
Over in main activity after we
extend AppCompactedActivity
2:03
let's implement our new interface.
2:08
Implements OnRecipeSelectectedInterface.
2:11
Then use Alt+Enter to create
our OnRecipeSelected method
2:16
and to top it off let's toast
which recipe was clicked.
2:23
Toast and make sure to pick
the create a new toast option.
2:28
Then for the second parameter
let's use Recipes.names
2:34
and pass an index for the index.
2:39
And now we'll see the name of our
recipe as a toast when we select it.
2:45
Moving back to our list fragment class,
we need to get the activity and
2:49
cast it to onRecipeSelectedInterface.
2:53
So right at the top of onCreateView,
let's create a new
2:56
onRecipeSelectedInterfaceObject named
listener.
3:02
And let's set it equal to our activity,
getActivity, and
3:10
then use Alt+Enter to add the cast.
3:15
Now that we've got our listener,
3:19
we just need to call
listener.onListRecipeSelected,
3:21
whenever a recipe is tapped.
3:25
And since the ListAdapter is where
we set the OnClickListeners for
3:27
each list item, we need to pass
our listener into our ListAdapter.
3:31
So let's just add it right here, and then
use Alt+Enter to create the constructor.
3:36
Next, we need a field for
our listener and our ListAdapter class.
3:46
Inside the constructor,
let's type mListener = listener.
3:51
And then use Alt+Enter on
mListener to create our new field.
3:56
And now that we've got
our listener as a field,
4:04
down in the onClick method of our view
holder, all the way at the bottom.
4:08
Let's call mListener.onListRecipeSelected
and pass in the index of this view.
4:15
Which we don't have yet but it looks like
we can get it from the bindView method.
4:23
Let's create a new field for
the index of this view and name it mIndex
4:28
private int mIndex.
4:33
Then let's set mIndex and bindView.
4:40
MIndex = position.
4:46
And then in onClick let's pass it
in to on onListRecipeSelected.
4:51
All right that should do it.
4:57
Let's test the app and
see if our toasts work.
4:59
And if we start tapping on list items,
we should see some toasts.
5:08
Like this nice French Toast toast.
5:17