Learn about the containers feature of Proto.io and how to use the containers panel.
- [Instructor] To this point in the course, we've created screens using images and components and we've added interactivity and navigation to those components. You may be wondering what do in those common situations where the content to be added actually exceeds the screen's dimensions. This would be such things as a collection of cards or strips that a user can scroll through or content such as a map or image, where the user moves the content around inside the viewpoint. This is where Proto's containers feature comes in to play.
Think of a container as being a reusable custom component that you can create and this component can contain UI elements, interactions, motion and so on. They are dead simple to create and use and best of all can be nested inside of each other and even duplicated to contain different content. So let's get started, and to get started create a new Android smartphone project. And what I'm going to do here is I'm going to name this project Container and I'm going to choose the small Android phone, right here, 360 x 640.
Click create and this should take us over to the editor. Now let's make this a little bit more Android-like than a blank screen. So let's come over to the material components. And we're going to scroll down to the bottom here and I'm going to double-click to add a status bar, which goes right to the top. And we're going to double-click to add a navigation bar, which we can drag to the bottom. And we'll add an action bar, almost like a placeholder, so we'll use the rectangle of a shadow and we'll make it 56 pixels high.
And we'll just drag that right under the status bar. Now we're going to need the content, and I've give you the content. It's in your download. So let's go over to the download and bring that in. And that's these five images here. Seasons.png, sunsets.png, trail1.png, sunset02.png and sunset03.png. Let's drag and drop them right into the assets panel. And once they finish loading we can get to work.
Okay, the assets are in place. Now, the plan is real simple. We're going to put these cards in this area here and let the user scroll through the cards to choose the one that they want to check out. And this is where containers become your best friend. To add a container what you do is you come over here to the containers, so you just click on the containers tab, and we're going to add a new container so just select it. And what happens here is the new container model window or dialog box opens up.
And we'll call this one cards. Now, the width and height areas that you see here are actually the width and height of the container itself. So each card is 345 pixels wide. So let's make that 345 for the width. And the cards are also 340 pixels high. Now, you would think you would just need one that has a height of 1,020 which is three times 340. Let's give it a little bit of air, so we're going to use 1050 as our value.
So 1050. And you can add background color, but we'll just leave this alone. Just click create. And here we are, right here. And you'll notice that we're in a cards, which is a container, we're not inside the screen. So let's build the content for the container. So just grab the first image there and just put it up to the top there. And we'll grab this image here and just drop it in to the bottom. And we'll grab this orange sunset right here and drag it sort of into the middle here.
Okay, so let's select the cards. Command or Control + A. And let's align them horizontally, here we go. And let's space them out and make sure the spacing between them is equal. And that's done and we have created our cards container. So how do we add the container to the screen? Well, you come over the screens, so open your screen, then open containers and just double-click, and boom, that opens the container. So you know you can't do that. So we're going to come over to the screen and here's how you add it.
Let's go back to the screen, containers, just drag-and-drop. Put that into position, and we'll line this horizontally. That gives us equal spacing on either side. And you'll notice in the properties, we've got these scroll properties and right now this is set up not to scroll. So let's click the no, and we're going to choose vertically. So we're going to go up and down. And when you choose how to scroll, you're going to be asked all kinds of questions. The first one is do you want to treat this scroll container as a snap carousel? No you don't.
And that is something we'll get into later on in this chapter. Allow scrolling beyond the container boundaries? Absolutely. Enable inertia This adds easing when you actually use the scroll wheel. And show the scroll bars on scroll? No, we don't need them, but if you want you can do that. And if you're going to be previewing these things on a device, you could enable pinch-and-zoom. We're going to leave that deselected as well. And we'll just deselect, there we go, we close that. Now, we've got a couple problems here so notice that my container is way over the content and not only that, it's sort of on top of everything.
So let's grab the cards and just drag it under the status bar. Okay, so it's at the bottom. And then we can just take the container itself and just move it up, so when the user comes in they'll see one card and there's piece of another one. And let's see what all that looks like. Save the project, and we'll preview it. Ya, click and drag and we've now got our cards. And if I use the scroll feature, notice how it decelerates as it slows down, or stops moving? That's the inertia right there.
Okay, let's close the player. Now there's another way of creating a container. And so I'm going to show it to you. Select your container on the screen and delete it. Now, you'll notice that it's not gone. See, it's still there in the containers area. So we're going to come back to our screen and we're going to grab this first card deselect it and then right-click on it, and right here, convert to container. So you can take any content you want and convert it to a container. Convert it to a container and we'll call it Cards2.
And if we come to the containers, you can see that naming it doesn't work. What you do is you name a container is you open it up in the container properties, or the container area and just rename it there. So we wanted it Cards2. And what we need to do is add those other cards because the container itself is just the size of this one card, so to change the properties, you don't right-click here, what you do is you right-click on the container itself in the container area and open up container properties. And again, here we go, 345, 1050.
Click save and again, we just build that container the way we did previously, so just drop your cards in. Let's line them all horizontally and let's give them some equal spacing, there we go, and we're going to to come back our screen, screen one, there's our container. And we'll just open it up a little bit, there we go. And we'll just set the scroll to vertical. And we'll turn off scroll bars.
And we'll click save and preview. And there we go. We've taken a piece of content and turn it into a container. So there you go, there's using containers. They are handy-dandy little devices. I think you are going to enjoy using them. The offer you all kinds of flexibility and all kinds of possibility as well.
- Using design patterns
- Using grids and columns
- Using the Proto.io player
- Using the Proto.io smartphone app
- Working with screens
- Using components
- Creating artwork
- Creating and using containers
- Creating animation
- Publishing your prototype