Preview
Video Player
00:00
00:00
Creating the Story Layout
5:19With our data model in place, let's design the layout of the Story Activity to match the design in our mockups.
[MUSIC]
0:00
We have actually completed
the hardest part of this app.
0:04
Getting the data model and architecture
correct can sometimes be the hardest,
0:07
most time consuming part
of working on an app.
0:11
It's an important balance to find, because
you can design things to death without
0:13
ever actually working on something.
0:16
You'll need to learn
how you work your best.
0:18
But always remember that a little
bit of thought ahead of time,
0:20
can save you headaches later on.
0:23
I personally love jumping into code,
but I often need to remind myself to
0:25
think through things before
I just start typing away.
0:28
Anyhow, let's take a look at
our current story page layout.
0:31
When we created our StoryActivity, we also
got our layout file activity_story.xml.
0:34
Time to add some things inside here.
0:40
So remember, we said that each page in our
story will consist of an image, text for
0:43
the story, and then two choices,
0:47
which we will represent with white
buttons at the bottom like this.
0:49
I asked our designer to create images
in a horizontal rectangle shape, so
0:52
that we could fill them across the top
of the screen in a consistent manner.
0:56
The basic layout will be the image at the
top, the story filling up the middle, and
1:00
then our button choices at the bottom.
1:03
We are going to practice again
with constraint layouts.
1:06
Remember that the key idea in using
constraint layouts is to choose things
1:09
to anchor to.
1:12
In this case we will be anchoring
to the sides of the screen.
1:13
Let's start by adding an image view, which
we will anchor to the top left corner and
1:16
extend to the right side of the screen.
1:20
It will grow in height as needed for
1:22
the image, just like we're doing with
the image on the main title screen.
1:23
In fact, why don't you treat
this as a mini challenge.
1:27
Pause this video and see if you can
configure it this way yourself.
1:29
Okay, let's drag a new image view.
1:33
I'll select image over here and
then pull in image view, and
1:35
I can drop it anywhere on the screen.
1:38
And I'm going to pick a place holder
image, I'll use one of the page images.
1:40
Let's use page0 and click OK.
1:43
So I wasn't too concerned about
where to drop it on the screen,
1:46
because I'm going to align it
with the constraints like this.
1:48
Left, top, and right, and then over here
I wanna change all the margins to 0.
1:52
And then remember, we want to force
a new calculation of the width with 0dp.
2:02
And then you might be wondering, hey why
isn't this filling up the available space.
2:07
That's because we haven't
changed adjustViewBounds.
2:11
So check that and, there we go,
it pops into place, cool.
2:13
I'm also going to select
the scale type to be fitXY again,
2:16
although it doesn't change
anything on this view.
2:19
And let's change the ID to something
more meaningful like storyimageView.
2:22
Let's switch over to the XML view for
a moment.
2:28
We just set the source for this image
view to be our drawable image, page0.
2:31
But we're actually going
to change the image,
2:36
based on whichever story we're viewing.
2:38
So we don't want to necessarily hard code
it, like this, it's gonna be dynamic.
2:40
However, we do want to show
up in the preview over here.
2:44
We can accomplish that by using
the tools prefix, like we see up here.
2:47
Any can of attribute that we
prefix with tools like this,
2:53
will only show within our
tools within Android Studio.
2:56
So it's a nice way to use
placeholder images and text.
2:59
I'm going to delete this line and
then type tools:src and
3:02
then set it equal to @drawable/page0.
3:06
Now if I flip back, we should still
see the image and there we go.
3:12
We see it in the Tools, but
if we ran this page right now,
3:14
there would be no image there because
we didn't dynamically populate it.
3:17
All right, so next, let's add a text
view for the text of this page.
3:21
We will position it directly below the
image view and change a few properties.
3:25
So here, under All,
we've got a TextView at the very top.
3:29
Pull it in here, and
it dropped here in the upper corner.
3:32
I'm gonna pull it down and
start to resize it, go to the left.
3:36
This one I wanna hook up
right here to the image view.
3:39
So it is now constrained to
the bottom of our image view.
3:42
Pull that right over,
Change all these margins, actually for
3:46
the textView we wanna use
margin of 16 all around it.
3:51
That will provide a little
bit of space around the text.
3:54
Now the width,
we do want to recalculate with 0dp.
3:58
And for the text, let's change that to
more placeholder text in the XML view,
4:02
in just a moment.
4:06
I wanna bump up the font
size just a little bit.
4:07
Right now the default is 14sp, but I
wanna switch that to, let's go with 16sp.
4:09
I'm gonna type in a different value, 16sp.
4:14
Remember that we use SP instead of DP for
text, because that will take into account
4:17
any individual preferences users have set
for how text is displayed on their screen.
4:22
So for example, if they want all
text to be a little bit bigger,
4:28
the SP settings will
take that into account.
4:31
Whereas if we used DP settings,
it would remain consistent,
4:33
no matter what their user settings were.
4:37
Let's go down here and
4:40
let's change one more thing,
this, I'm gonna pull this over.
4:41
This says lineSpacingExtra,
4:43
this creates a little bit of room between
lines of text, so let's set this to 8sp.
4:45
Pull this back, and
let's switch to the text view.
4:51
And here I want to add, instead of this
android:text, this hard-coded text,
4:54
let's switch this to tools and let's plug
in one of our strings from the story.
5:00
So type @string/, and let's use page0,
and see how it looks.
5:05
Cool, okay lets take a short break here
and then we'll come back to finish
5:11
the rest of the layout including a few
updates to our main title layout.
5:15