We’ve got the ability for users to add images to their diary entries. So now we should have some way where we can display them out on the screen and also show all of the images on a trip for the diary entries attached to that trip.

So that’s what we’re going to set up in this lesson.

Now, of course, in your application, you might not want to replicate my exact design here. So, how do you go about designing what your views should look like, especially when they start having images and this kind of interesting content and interesting layout in them?

I encourage you to find inspiration for your own design out on the internet. This tool in particular, Mobin — I’ve mentioned this earlier in the course — is a brilliant resource for finding design inspiration. They’ve got a huge catalog of real-life applications and the interfaces for those applications.

You also have AI tools. So, at the time of recording, this tool Stitch by Google allows you to add a prompt and have it generate a pretty good, pretty clean-looking interface design. You can also generate these kinds of designs just using a tool like ChatGPT.

So there are lots of different options, and I do encourage you before you start to create any new designs in your app to try and visualize it with one of these tools. Try to get some inspiration. Even if it’s just sketching it on paper, just try to have something that you are working towards.

So in my case, I quite like this design. I think this is pretty close to what we’re going to go with. I also like this design from trip.com. I saw this design actually on Mobin and then I installed the app for trip.com just to play around with it.

You can always actually download applications from the app store and play around with them and just see how they implement certain design patterns and certain aesthetics. So I think we’re going to more or less stick with something like this for our application.

And to test this out properly, I’m actually going to create a new trip here and then just add some sample diary entries.

I’ve got a bunch of images here that I’ve generated with AI, and you’ve got so many different options for different tools for generating images. One of my favorites is actually this tool here, Crea.ai. You can also, of course, use OpenAI or Google’s Gemini models to generate images as well.

So what I’ve done is just generated a bunch of images and downloaded them to my phone, and that’s just going to give us some realistic-looking data here to test with.

We can also use AI to generate written test data like a travel diary entry here. So I’ve used ChatGPT to generate this. From the context of my phone, I can just copy this and paste it into my trip diary entry here and then hit Create.

And so right now this is what our diary entry looks like.

We obviously need to make a few adjustments here. The first thing we can do is remove this text which is just displaying the URL for the uploaded image. We only added that in a previous lesson just for demonstration purposes, so I’m going to remove that.

Looking at the design that we’re working towards, I want to have some buttons — a back button and a more actions button — actually sitting on top of the image. So that suggests to me that we’re going to use, as the element to display this image, a group element with the image for that group set to be an image.

So I’m going to add here a group to the top of the view. We could call this Group Top Image, and we can set the background style for this group to be an image and then pull that image from the diary entry — the diary entry which is inside of that diary entry property.

And then we should also always set a fixed height for images that we display here on mobile so that we don’t get into a situation where this container — this image display group — can change its height depending on the image.

That will just have the text underneath jumping around all over the place — sometimes further up the screen for shorter images, sometimes further down for longer images.

We want to have a degree of consistency in our design and just keep the size that we’ve allocated for images consistent.

And then let’s also make sure that we are centering the image here.

You can see that right out of the gate that actually doesn’t look too bad. Some of you might want to use this kind of design instead, and that’s absolutely fine.

But for completeness, I will show how we create this kind of design as well.

So in this setup here, we’re actually manually creating our own top app bar as opposed to relying on the built-in native top app bar.

What that means is that on my Diary Entry Details view, I’m actually going to uncheck Show Top App Bar and instead I’m going to add a group inside of my group top image. It’s inside of here that I’m going to add my two icon buttons — one of them being my back button.

So, first let’s change the style here to Filled Light Secondary. And actually, now that I think about it, I want an icon here — it’s going to be a back icon.

In the Phosphor library, these types of icons that we’re looking for are called carets. So I’m going to look for this caret left and just set my element to be a fixed width.

But now I realize that the way that I’m setting up this button is very similar to the delete icon that we set up in the previous lesson.

So I actually want to turn this delete icon into its own style because I’m going to reuse this kind of rounded icon button in multiple parts of my application.

So I’m going to detach the style on this delete icon and we can call this something like Semi-Transparent Icon, which is kind of descriptive of what it is as a button.

The benefit of doing that is that we’re also preserving this 50% background opacity.

So if I go back to my diary entry details now, instead of fussing around setting all these individual properties, I’m just going to set this to my Semi-Transparent Icon style.

You can see there it already looks good straight out of the box. The only thing we have to do is just change back to that caret icon — caret left.

And so this is going to be our Button Back.

But we also need to recreate this three-dot icon. So I’m just going to duplicate this icon and set this to be the three dots.

Then let’s make sure that this group with our icons in it is actually set to be a row layout and is putting space between those two elements.

Okay, we’re sort of getting there. A couple of small tweaks — I think that perhaps our buttons are a little bit too transparent here.

That is easily fixed because these icons are attached to a style, so I can always just go in and edit the style and change the opacity of this background. Let’s maybe change it to 75% instead.

Okay, that’s looking a little better. I might also just bump up the icon size slightly — I’m just going to go up here by four pixels just to make those icons a little bit more visible.

Notice at the top of the image we’ve got this white area with my native app icons — like my battery and the time and this sort of thing.

We can actually prevent that area from showing if we untick Show Safe Area.

You saw there how the elements just snapped up to the very top of the view. So that safe area is essentially just an extra little bit of padding within the view that we can add to make sure that native app toolbar there is not having any of our view elements overlapping with it.

But in our case, we actually do want it to be overlapping because we want that native toolbar to actually be sitting within the image.

Then we just need to make some adjustments so that our icons actually sit a bit further down. So what I’m going to do is add 40 pixels and also add 16 pixels on either side.

That gives our icons a little bit of breathing room against the margins of the view.

Okay, and all of a sudden it seems like we’re getting somewhere.

I still think that background for our icons maybe is a little bit too transparent. So I’m going to go back and make another fine-tuned adjustment here. I’m actually going to set this all the way to 90 and I might even set the background color to white — just plain old white — so that those icons are now very visible on the view.

Now, we need to add the title for this diary entry somewhere. I’m going to add it right in this little space here.

So, I’m going to grab a text element and make sure that it is going inside of my group body here. Then I can just put it at the top of the group and set this to pull dynamically from the diary entry’s title.

Let’s just add a canvas placeholder so we can have a little bit of an indicator about how this will look.

We probably need to emphasize this text a little bit because it is the most important piece of information on the page other than the image. So I’m going to set this to Heading 5.

Let’s see how that looks — and yeah, I think that looks pretty good actually.

The only thing I might still finesse here is some of the spacing between these text elements to give it a little bit of breathing room.

So I’m going to get rid of the minimum height on my text elements so I can control this.

We’ve got 16 pixels of margin above this group body, which is creating some space between the top image and the group underneath. Just to keep things consistent, I’m going to get rid of that top margin and add it as padding instead.

The other thing I’m mindful of is that I want this date piece of information to be just underneath this title, with the content for the diary entry further down below — and I’ll explain why in a minute.

So if I just get rid of the current row gap between all these elements altogether, I’ve got a little bit more fine-grain control here.

If I just add four pixels of margin underneath this top title, and then on top of the text holding the actual content for the diary entry, I’m going to add quite a bit more — 16 pixels.

That effectively creates four pixels of space between these two elements, and then 16 pixels below.

The reason for this relates to a principle in interface design called proximity. Basically, elements that are closer together you associate as being more related than elements that are further apart.

So I do consider that these first two sections here are kind of like metadata about the diary entry, whereas the content is sort of its own thing.

The end result is something like this, which I think looks pretty neat.

We could even experiment — depending on the typical length that you would expect for these kinds of headers — with bumping up the size of this diary entry title. So I could set this to Heading 4 instead.

Yeah, I think this is looking good. We can leave this here.

This kind of fine-tuning you can always do on the fly based on what you think looks good.

The only thing that we have to solve for still is that if we have a diary entry without an image, then we have this problem in our interface where we’ve got this big blank space where the image would otherwise be.

That’s because our group here has a fixed height of 400 pixels.

So one way you might think of solving this is, “Okay, well, if we don’t have an image, let’s not show this group at all.” Right?

So let’s make it invisible on page load and then just check whether or not the diary entry — the diary entry living inside of that property, as always — whether the image field is not empty.

In other words, it has an image to display. In that case, yeah, let’s show it.

Well, if you go and test that, you’ll notice the issue right away — which is not only is our title way up here at the top of the screen overlapping with the native app toolbar, but also we’re missing our back button and our more button.

That’s because this group here — the one holding those two buttons — is itself inside of group top image, right?

This group, which we should maybe just call Group Top Bar to be precise.

So we don’t want to do this. We don’t want to hide it at all. It needs to be visible, but we could probably reduce the height quite a bit.

So, have a go — see if you can solve this yourself. Otherwise, let me show you how I would solve this.

What I would do is say: we don’t want to have a fixed height. It’s going to be variable, and it’s going to depend on whether or not there is an image for this diary entry.

So, I’m going to turn off the fixed height and turn off the minimum height.

Alright, and this is how things are going to look by default. This works quite well for our diary entries that don’t have an image.

But for the ones that do have an image, we’ve got an obvious problem.

So what kind of rule do you think we would need here? Something like: “Well, if the diary entry has an image, should we increase the height of this top image group?”

Maybe there’s some kind of condition that we can add here. Again, we’re going to check whether the diary entry has an image field — in other words, it’s not empty.

And then what property could we change here? Well, we skimmed right past it, didn’t we?

What about this minimum height?

Because this group has Fit Height to Content turned on, when we change the minimum height, that’s the same thing as basically setting a fixed height — we’re essentially pushing the height of this group from the inside out.

So yeah, we’ll keep this as zero by default, but when there is an image to display, let’s just bump up that minimum height.

This is how it looks when we do have an image and when we don’t have an image.

Now, you may think actually that doesn’t look very good — the fact that this icon is not aligned with the text — and I would tend to agree.

So what I would do here is a little bit of a trick. I would first add a little bit of negative margin.

A negative margin — say I add negative 20 — see how that just pulled the icon out to the left?

Normally, margin creates space between one side of an element and the parent container or any siblings within the same container. But when we add negative margin, it does the opposite.

It pulls that edge — in our case the left edge — by the specified amount of pixels in the opposite direction to which the margin would normally apply.

So what I would do here is just play around with a little bit of negative margin. I think 20 was actually quite close. You can see maybe that’s a little too much.

I want this corner of the arrow to be in line with the text here. So maybe not -20, maybe -16. And you know, that’s pretty close. I could probably fine-tune it even more.

Yeah, I think that’s close enough.

So this -14 — I don’t want this to appear all the time because while it looks a lot better now when we don’t have an image to display, if we do have an image to display, it’s just too far over now.

So again, we want to have some conditional logic here. Have a go at solving this yourself if you can.

Otherwise, what I’m going to do is go through it together. I’m going to reset that margin back to zero and add that margin — that negative margin — back inside of a condition.

And that condition, of course, is going to be whether or not there is an image for this diary entry.

So, does the diary entry not have an image? In other words, is there no image? Is it empty?

If that is the case, then I’m going to conditionally add some negative left margin.

The only reason that I was adding the negative margin here within the normal layout tab was just for me to test — to quickly test with my eye to see what looked good.

But I only want that margin to actually apply under this condition.

So here’s a diary entry without an image — that looks good. But if we do have an image, then that also looks good.

Now, let’s not forget to hook up the logic for these icons up the top here.

So if we just add back our top app bar for a minute, let’s recognize what we have.

We’ve got a built-in back button, and that’s just going to go to the previous view. So we could probably set that one up fairly easily, right?

When our new back button is clicked — this is the one in our new top bar — when this one is clicked, we can just use this very helpful action that we’ve seen a few times, which is Go to Previous Mobile View.

I think that one’s relatively self-explanatory.

But then we’ve also got this legacy, or this old, three-dot button in our old top app bar. And what that one is doing is showing the menu sheet.

Since we are no longer using our top app bar here, I’m going to hide it again.

We have to set up this workflow to show our menu sheet all over again.

So on our new three-dot menu — which I’m just going to call Button More so it’s a little bit more obvious what it is — we’ll add a workflow to show that sheet menu.

That means I can now hit this back button to go back to the previous view — that’s great — and I can hit my more button here to open up this more sheet.

So that’s our trip detail view looking pretty good.

Let’s now set up, in the next lesson, this scrolling carousel of images, which is going to be on our actual trip details view.

And this is just going to show all of the images across all of the diary entries that are attached to a trip.

So, I’ll see you in the next lesson.