My First Fragment6:05 with Ben Deitch
In this video we'll get our feet wet by creating a Fragment!
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 up