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
With our data model in place, let's design the layout of the Story Activity to match the design in our mockups.
Downloads
Documentation
The documentation for these Views lists all the properties available for us to use.
GitHub Repo
[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
You need to sign up for Treehouse in order to download course files.
Sign up