App Bar and Image List Components10:05 with Nick Pettit
Material Design includes numerous components that can be combined together to create interfaces. In this video, we'll start using components from the UI kit in our prototype.
Resources and Documentation
- Material Design UI Kit for Adobe XD - This compressed zip file contains a UI kit for Google Material Design created in Adobe XD. It also includes the initial wireframe created in Adobe XD as well as sample photos that are used in the project.
It's time to assemble our app using the components available to us in 0:00 Material Design. 0:04 In the initial wireframe the app has some navigation across the top, 0:05 a couple of different modes the photos could be viewed in and some filters. 0:09 One good way to organise all of this is to use what Material Design calls and 0:13 app bar. 0:18 Let's take a look at this in a documentation really quick which you can 0:19 find a link to in the notes associated with this video. 0:23 So in the Material Design documentation, I'm going to go down 0:27 to Material Guidelines> Components and App bars bottom. 0:32 An app bar can be on the top or bottom and I think either one can work here. 0:39 But because one of the moble form factor, I like the bottom app bar a little 0:45 better because it's easier to reach with your thumb. 0:50 If we scroll down to the Usage section, it says that bottom 0:54 app bars can have up to four actions along with a floating action button. 0:59 Let's open that article in another tab really quick. 1:05 The floating action button or FAB, can be used to perform 1:10 the primary or most common action on a given screen. 1:15 Not every screen needs a FAB, and 1:21 sometimes when you're showing photos that can be a little distracting. 1:24 But one goal of this app is to get users to store more photos on our service. 1:29 So, we're representing taking new photos as the primary action, 1:35 okay, let's go back to the app bar. 1:41 App bars can highlight important actions, they're flexible and 1:44 can change based on screen size. 1:48 And like I mentioned, they're comfortable to use with your hands on a mobile device. 1:50 Bottom app bars should only be used on mobile, and 1:56 they shouldn't be used if there is only one or no actions. 2:01 If we scroll down to anatomy, we can see the bottom app bar generally 2:06 includes a containing element, the three line hamburger menu, 2:11 or as Google calls it a Navigation drawer control. 2:17 It has a floating action button or FAB, a few action icons and 2:22 an overflow menu control for more actions that might not fit. 2:27 The floating action button or FAB can be displayed as either an overlap, 2:32 a higher elevation, or as 2:38 an inset where the bar shape transforms to accommodate the space taken up by the FAB. 2:42 Either serves the same role but inset can highlight an action even more. 2:48 All right, enough documentation let's actually use this thing. 2:53 In the DOBXD document with the material signed UI kit, 2:58 I'm going to zoom into art board with app bars. 3:03 Which it looks like a bottom app bar is right here, 3:11 I'm gonna zoom in just a little further. 3:15 And I'm going to select this first bottom app bar and copy it to my clip board. 3:18 And then I'm going to switch over to my android 3:27 mobile app board here, and let's zoom into that. 3:32 And then I will paste that app bar in place, 3:37 you may need to drag to reposition it to the bottom, and 3:41 it should snap into place, great. 3:46 We'll customize this with our own icons and 3:50 controls later, but this is a good start. 3:52 Now we need to display a gallery of images and Material Design has a way for 3:55 us to do that too. 4:00 Let's head back to the documentation, 4:01 and let's check out the image lists component. 4:05 You can find a link to this components documentation in the notes 4:12 associated with this video. 4:16 Going to scroll down to the Usage section, And 4:18 it says, image lists represent a collection of items in a repeated pattern, 4:23 they allow users to scan image based content easily. 4:29 They make it easy to compare items in a collection and 4:33 they're responsively integrated into the surrounding content and layout. 4:37 There are a few different types, there are standard image lists, 4:44 which arrange items in a uniform grid of squares. 4:48 Quilted image lists emphasize some items over others and 4:52 can create hierarchy using variable sizes and aspect ratios. 4:56 And then there is woven and masonry image lists which are good for 5:00 user generated content. 5:05 We're going to stick with a quilted image list, because generally, 5:07 photos will be similar aspects ratios. 5:12 Either landscape or portrait and maybe our engineers can use some machine learning or 5:14 an algorithm of some kind to highlight important photos. 5:20 The only thing that's required for each item, is the image container itself. 5:25 Optionally you can include text labels, actionable iconography and so 5:32 forth, but we keep it simple. 5:37 Now let's go back to the UI kit, and I will zoom back out here. 5:39 And let's find the art board with image list, 5:46 looks like they're right here. 5:51 And down here on this first image list art board, 5:55 Looks like we have the quilted type. 6:01 So I'm going to click that and 6:04 copy it to my clipboard, and then in my 6:08 Android mobile artboard I will paste it. 6:13 And you may need to rearrange a layers and 6:19 positioning so that it appears at the top and 6:23 below the app bar, there we go, 6:28 Now we want to be able to scroll down when viewing this as a prototype, 6:35 as if there are many photos, so let's increase the height of this artboard. 6:41 So I'm going to zoom out a bit, and with the artboard selected, 6:47 I will increase its height, maybe say to about there, and you can see Adobe XD 6:52 has this little dotted line indicating where the bottom of the screen ends. 6:59 So this is what users will see when they look at a prototype and 7:05 then if they scroll down they'll see anything below this. 7:09 Next let's make this gallery repeat as a grid, 7:13 I'm going to select it and then click repeat grid and 7:19 then I'll just drag this down just like that. 7:24 And I'm going to adjust the spacing between each one of these repeats, 7:29 so that it looks like it's about the same size as the, 7:36 Distance between them vertically and horizontally, 7:43 now I'll zoom back out again. 7:47 And let's just make sure that this is repeating the way we want, 7:51 I'll cut it off about there. 7:55 And then you may need to adjust the height of the artboard again, 7:56 just to cut it off about there, there we go. 8:02 Now if you want, you can drag and 8:06 drop some photos into these image place holders. 8:08 You can find a link in the notes associated with this video 8:12 to download some images that you can use. 8:15 I'm going to drop in some now, open up the finder, so here are my photos. 8:18 I'm going to use these six and this one as well, 8:24 I'm not going to use this photo of myself we'll use that a little bit later on. 8:27 I'll drop in this one, this one and 8:32 you may see these images repeat using the repeat grid. 8:36 But if you just drop in images on top of them they'll be replaced, 8:41 so we'll just keep going here. 8:47 And try to add some variety. 8:53 And it's okay if these images repeat themselves because this is just a mockup. 8:59 Okay, so now we have photos in place and 9:09 it looks like a semi randomized gallery, that's good. 9:13 And finally, if we select the bottom app bar again, 9:20 and in the inspector, we check the box that says fixed position when scrolling. 9:27 It will keep the app bar in place as we move down the page. 9:34 Now, save your work, and with the mobile artboard selected, 9:39 click the play button in the upper right. 9:45 If everything went well, you should be able to scroll down and 9:50 the app bar should stay in place. 9:55 This app is already looking pretty good, 9:58 next we'll start working on some of the interactions. 10:01
You need to sign up for Treehouse in order to download course files.Sign up