Tablet Layout6:45 with Ben Deitch
In this video we'll create a tablet specific layout! We'll also see how we can decide which layout a user will see!
[MUSIC] 0:00 What good is a recipe app if we're alienating all the users who want to use 0:04 their tablet as a cookbook. 0:08 We may be done with the app for phones, but 0:10 we still need to create a tablet layout. 0:12 Let's start by taking a look at the mockups. 0:14 Right off the bat, we can see that one of the biggest difference with the tablet 0:19 layout, is that we'll be using a grid instead of a list. 0:23 And if we click on a recipe, instead of seeing a view pager, 0:26 we see both the ingredients and the directions on the same page. 0:31 Now that we know what we're looking for, let's get down to business. 0:35 But first, we will need a way to test this. 0:39 Which means we need a tablet. 0:42 Let's go up here and open the Android virtual device manager. 0:44 Then, let's click create virtual device, 0:48 and select tablet on the left. 0:53 Then let's pick Nexus nine, and 0:57 hit next, then hit next again, 1:02 and then finish. 1:07 Then let's hit the play button to start our new virtual device. 1:10 And since we don't need it right now, 1:16 let's move it to the background while it loads. 1:18 Also, if you've still got the other virtual device running, 1:20 you might want to close it. 1:25 These things take up a huge amount of ram. 1:27 So depending on your computer, an extra virtual device might slow things down. 1:30 Now, before we can get started with our grid, 1:35 we need a way to determine if a user is on a phone or a tablet. 1:38 Luckily, this is easy to do thanks to resource qualifiers. 1:43 Resource qualifiers are just the way for us to provide different resources 1:47 to different users based on what hardware they have. 1:52 Let's see how it works by doing it. 1:56 First, we'll create a new values file named config, 1:59 right click on the values folder, select new, values resource file. 2:04 Then type config and hit Enter. 2:09 Inside this file we are going to define one boolean item named is tablet, 2:14 and we'll set it to false. 2:20 Let's type, < item To start the tag, 2:22 then, let's set the name property to is_tablet, 2:28 And the type property to bool. 2:35 Then, let's close this opening item tag, and lastly, let's give it a value of 2:39 false, by typing false between the opening and closing tags. 2:44 Now let's create another new values file. 2:48 And just like the last one, let's name it config. 2:52 But this time, let's add a resource qualifier. 2:59 In the list to the left, let's select smallest screen width. 3:02 And hit the arrows in the middle to add it. 3:07 Then in the smallest screen width box, let's type 600. 3:10 And notice that the directory name has changed to values-sw600dp. 3:16 Then let's hit OK. 3:25 And now we've got two config files. 3:27 Let's copy our item from the other config file, 3:31 And paste it into this one. 3:37 And let's change the value to true. 3:41 All right, now, if the user is on a device with the smallest 3:44 width of 600 dp, or more, meaning both the width and 3:49 height of the device are larger than 600 dp, 3:54 then they will see an is_tablet value of true. 3:58 And if the user is on a device that doesn't meet that criteria, 4:02 they'll see an is_tablet value of false. 4:07 So for our purposes, any device with both width and 4:10 height greater than 600 dp will be considered a tablet. 4:14 Over in main activity, let's see how we can access our new value. 4:19 Right below where we call set content view, 4:23 let's create a new boolean named isTablet. 4:27 And let's set it equal to getResources.getBoolean. 4:35 And pass in the resource ID, R.bool.isTablet. 4:42 Then, let's quickly add a toast to show us this value. 4:48 Toast isTablet plus an empty string to cast it to a string. 4:52 And let's test the app on our new tablet virtual device to see what happens. 5:01 But first, let's click up here and edit the configuration. 5:06 We don't want it to use the same device for future launches anymore. 5:09 Then I'll stop my current run and hit the play button. 5:14 And check this out, if we highlight, both of these devices, so 5:21 I'll hold Shift and hit the down key, we can test on both of them at once. 5:26 And in a few seconds 5:31 There we go. 5:46 Is tablet is false on the phone and true on the tablet. 5:47 Awesome. 5:52 Now that we know how it works, let's use it. 5:54 Let's get rid of our toast, and 5:57 instead write, if not is tablet 6:02 And let's cut and paste in this list fragment section. 6:10 Then, let's add an Else, And paste in that same section again. 6:18 But change list fragment to grid fragment. 6:27 We'll be creating the grid fragment in the next video. 6:42
You need to sign up for Treehouse in order to download course files.Sign up