[MUSIC]

We have actually completed the hardest part of this app.

Getting the data model and architecture correct can sometimes be the hardest,

most time consuming part of working on an app.

It's an important balance to find, because you can design things to death without

ever actually working on something.

You'll need to learn how you work your best.

But always remember that a little bit of thought ahead of time,

can save you headaches later on.

I personally love jumping into code, but I often need to remind myself to

think through things before I just start typing away.

Anyhow, let's take a look at our current story page layout.

When we created our StoryActivity, we also got our layout file activity_story.xml.

Time to add some things inside here.

So remember, we said that each page in our story will consist of an image, text for

the story, and then two choices,

which we will represent with white buttons at the bottom like this.

I asked our designer to create images in a horizontal rectangle shape, so

that we could fill them across the top of the screen in a consistent manner.

The basic layout will be the image at the top, the story filling up the middle, and

then our button choices at the bottom.

We are going to practice again with constraint layouts.

Remember that the key idea in using constraint layouts is to choose things

to anchor to.

In this case we will be anchoring to the sides of the screen.

Let's start by adding an image view, which we will anchor to the top left corner and

extend to the right side of the screen.

It will grow in height as needed for

the image, just like we're doing with the image on the main title screen.

In fact, why don't you treat this as a mini challenge.

Pause this video and see if you can configure it this way yourself.

Okay, let's drag a new image view.

I'll select image over here and then pull in image view, and

I can drop it anywhere on the screen.

And I'm going to pick a place holder image, I'll use one of the page images.

Let's use page0 and click OK.

So I wasn't too concerned about where to drop it on the screen,

because I'm going to align it with the constraints like this.

Left, top, and right, and then over here I wanna change all the margins to 0.

And then remember, we want to force a new calculation of the width with 0dp.

And then you might be wondering, hey why isn't this filling up the available space.

That's because we haven't changed adjustViewBounds.

So check that and, there we go, it pops into place, cool.

I'm also going to select the scale type to be fitXY again,

although it doesn't change anything on this view.

And let's change the ID to something more meaningful like storyimageView.

Let's switch over to the XML view for a moment.

We just set the source for this image view to be our drawable image, page0.

But we're actually going to change the image,

based on whichever story we're viewing.

So we don't want to necessarily hard code it, like this, it's gonna be dynamic.

However, we do want to show up in the preview over here.

We can accomplish that by using the tools prefix, like we see up here.

Any can of attribute that we prefix with tools like this,

will only show within our tools within Android Studio.

So it's a nice way to use placeholder images and text.

I'm going to delete this line and then type tools:src and

then set it equal to @drawable/page0.

Now if I flip back, we should still see the image and there we go.

We see it in the Tools, but if we ran this page right now,

there would be no image there because we didn't dynamically populate it.

All right, so next, let's add a text view for the text of this page.

We will position it directly below the image view and change a few properties.

So here, under All, we've got a TextView at the very top.

Pull it in here, and it dropped here in the upper corner.

I'm gonna pull it down and start to resize it, go to the left.

This one I wanna hook up right here to the image view.

So it is now constrained to the bottom of our image view.

Pull that right over, Change all these margins, actually for

the textView we wanna use margin of 16 all around it.

That will provide a little bit of space around the text.

Now the width, we do want to recalculate with 0dp.

And for the text, let's change that to more placeholder text in the XML view,

in just a moment.

I wanna bump up the font size just a little bit.

Right now the default is 14sp, but I wanna switch that to, let's go with 16sp.

I'm gonna type in a different value, 16sp.

Remember that we use SP instead of DP for text, because that will take into account

any individual preferences users have set for how text is displayed on their screen.

So for example, if they want all text to be a little bit bigger,

the SP settings will take that into account.

Whereas if we used DP settings, it would remain consistent,

no matter what their user settings were.

Let's go down here and

let's change one more thing, this, I'm gonna pull this over.

This says lineSpacingExtra,

this creates a little bit of room between lines of text, so let's set this to 8sp.

Pull this back, and let's switch to the text view.

And here I want to add, instead of this android:text, this hard-coded text,

let's switch this to tools and let's plug in one of our strings from the story.

So type @string/, and let's use page0, and see how it looks.

Cool, okay lets take a short break here and then we'll come back to finish

the rest of the layout including a few updates to our main title layout.