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 a tablet specific layout! We'll also see how we can decide which layout a user will see!
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
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up