Live Stream: Building a Peloton Clone with Xamarin.Forms Part 9 - Programs & Collections

what is going on hello hello hello happy friday happy saturday morning wherever you're at in the world oh my goodness i'm back it happened aidan good to see you as well mcgranger thank you so much for the subscription nine months oh my goodness that is way too kind thank you you gotta do a little icon there but i think you make one with hair now going down that's my next jam i think so oh man it's been a while it's been a hot second i figured this week i'll hop on do some work next week i don't know what i'm gonna do yet i'm out on friday so uh and the let's learn event is going on next week too uh as well so we'll see we'll see what happens hey sean good to see you as well welcome to the chat planted almost 300 trees since we started doing trees that haven't been very consistent uh over here i have been pumping out some youtube videos which has been quite good and of course uploading all these videos to the youtubes as well which i've also been doing pretty well too um hadira's z good to see as well org brat from memphis tennessee welcome welcome welcome still haven't visited tennessee it's on my list of things to do i got some some co-workers over there that have invited me and recommend i come out so one day it's on the list tennessee look at this jam whatever's happening here pretty chill uh i hope everyone's doing good it's been a busy busy time i would say uh we've had uh all sorts of announcements we've had new done at six previews new donna maui previews announcement visual studio 2022 uh happened last week this week this week oh my goodness time's going crazy uh yeah it's been been pretty good just been out and about doing stuff friday's been busy uh starting to cool down a little bit which is good going into build so we'll see see how the next few weeks go hopefully i'll be able to stream a little bit more and uh catch up but uh yeah let's get into it we've been building out this app peloton clone for a while which is quite cool i'm gonna minimize this down and get a nice little background background uh here so uh we've been coming pretty good so the this the one the left here obviously this is mine and this one here is the peloton app so we have the challenges pretty much in place which is pretty good so if we go to active here you can kind of flip through these it's pretty cool uh you got upcoming that one's just like the same view so i didn't make a different one we should do that view too maybe you click on one oops i joined it oh no that's not what how do i unjoin leave challenge get out of here uh i think you just like tap on how do i just tap on it oh i tapped on that one i see that's a good view whoa yeah we'll try to do that maybe um you got that the upcoming one that's cool and you got completed so these ones are easy peasy we did that one too all these different ones here not too bad i've actually done quite a few since we last talked uh classes we got uh some views in here just this one i think today we're gonna work on these the programs this will be a shared view because they're pretty much the same we'll go ahead and grab those do two different videos schedule is kind of crazy i don't know how i'm gonna do that one yet shouldn't be too hard it's a lot of scrolling uh as well yeah we got the that's kind of cool well that's not not terrible i don't think we'll see how that goes not sure yet goku good to see you as well welcome to the chat uh what else we got going on we got profile this we've been working on mostly recently so here we got this page you can see i've been kind of slacking this month comparatively i've been going outside outside cycling a little bit more doing a lot more walking and hiking outside since it's warmer now which is really good so we can see kind of what these look like it's actually look pretty good and then yeah this is like i did all these i'm actually going to do a cycle class later today i think make sure you get one in for the week got our achievements workouts we did our workouts that looks cool pretty good achievements we didn't do that yet that one looks pretty straightforward these are just little scroll views that's just a scroll view with a repeater in there probably not not even worth your time for a collection view maybe probably not maybe hmm we got to see that one's not too bad this one's interesting i'm at 100 rides that's good not 150 rides yet so that's what we're on today let's go ahead and boot up some stuff what i like to do is come in see that one actually pop it's a tab that pops to a whole new page very weird very strange where do i i'm going to click on one of these okay view collection oh that's kind of cool look at that snaps in there interesting look at that unnecessary but nice little it's cause it's just in a scroll view it automatically does that on ios and they didn't really do anything programs and this is the same i assume same view yeah so very oh that's kind of cool week one huh cool like i'm just like oh that's cool hey devoxx oh that that's interesting let's one that's interesting let's just look at i just like to look at it sometimes i can look at ui a lot and see like what their designers were thinking you know like this is a very large day one bubble as well looks like it was a good look at let's look at ui let's do this page just be quick this would be easy so let's uh let's grab a few screenshots always like to do this let's do one and let's call this i shouldn't do it one more time here save desktop we'll call this program one we'll do like two of each just so we get some if people are coming and looking at the app they're like oh i see james actually took a little bit of time oh my gosh come on stepping tool program two boom and then let's go into collections because these are gonna be the same ui duplicated [Music] save collection one power i wish i could bend like that that's impossible impossible well maybe if i took the program it wouldn't be impossible music is a tad loud okay let me look there we go i'll turn down a little bit that's really low has like no output i can hear it fine but i know my output is tiny unless it's coming somewhere else uh squall a scroll view yeah scroll view is when you want to so you wouldn't use a scroll view here because this is a a list of things right you hold a list of objects and see these are like loading on demand and this you have like a cell so when you have cells like similar repeating cells of information inside of here that's when a list viewer collection view could be used uh in general a scroll view is just when you want to scroll content so inside of like this work this is just a scroll view with different content inside of it so they're all different so just one big scroll view of different types of content you have a bunch of items that are stacked up left and right there is um there is though uh every every layout is a repeater xamarin forms um there is is that mine i syndicated okay i was gonna say i like i wrote this blog so i was like i wrote this blog there it is um weird oh interesting anyways so so for example you can have a stack layout and then you can use this bindable layout and give it a data template this thing needs to be reformatted this is very odd and you can you can then do that but you can put those in a scroll view and it could scroll left and right and do stuff too but it's not as efficient because it's not um virtualized so like what blog did i write see collection two do is that better i just i lowered it a bit it's like negative 45 output yeah like if you have like one or two items yep yeah alucard's correct yeah you it's all it's all virtualized like the cells virtualize it and optimize it they recycle them over and over again like this for example each of these would be like very very different cells and it would be very costly to re-draw those instead of just like creating them there so but yeah scrollv just scrolling a bunch of items not a big deal what i like to do then is we're going to come into this class so this is a good good use case of that whereas like pretty much this like this here this would be a this is probably like a collection view but the whole thing is in a scroll view here this whole thing is just one big scroll view you can tell because you do that yeah i would say probably and then there's like a snapper which is like when you get here it just says like if this is above 50 go up else go down which is fascinating like this might not be a collection view they may have done it but they might have just also just repeated over and over again hard to say i'll try to do this page that's cool all right uh let's go into our app over here do i have this view i go here i'm just gonna take a photo of this here in case i don't have it this is the programs programs i don't dang okay except classes okay let's add a new oh uh yeah when it's ready i'll upgrade it i'm gonna upgrade all my apps obviously come on now upgrade all my episode down to maui that would be the plan actually i was talking to david he already said he already did a bunch of them programs page he's already been converting stuff they've been converting stuff as they go which is pretty cool programs view and then um nice collections page it's really different on the cli they're like they're exactly the same week they say something a little bit different collection or program it's funny classes all right cool so [Music] this isn't too far off like this page isn't too far off from the uh profile tonight it's not too far off from this yeah i think it's not too far off from let's look here fitness doesn't say do i have this view already i feel like this is a how interesting they change this view that's also so this this is live and upcoming i see i guess that's very similar to this if i was to come in and look at where do we steal some of that it's not too far off there's just one big image let's go ahead and do this here let's see burn here oh man let me rename these to png yeah i'm waiting a little bit obviously on the maui stuff until probably preview for maybe preview five we're kind of waiting for the uh the visual studio tooling to drop you know and they're still working on controls and changing a lot of stuff so it's doesn't make a lot of sense to kind of like do that just yet um but eventually but eventually okay let's see here dude 431 now i'm not really sure if all of our shared images are actually working or not inside of here they're supposed to be i don't know why it has this stuff because i was shoving them all in here at one point let me just i'm just gonna add them in here just in case just in case all right um shove them in here i think on ios they're working fine i should try to deploy to ios and see what happens uh alucard asks so many questions [Music] let's see uh using xamarin essentials stuff curious if we'll be able to use all that stuff yeah it'll it'll be included in in maui it'll be a separate nougat package but it'll be into the core system that it'll be used is the name of the app i should connect and run xamarin on iphone and settings what is the name of the app i should should connect and run on uh i think what you're looking for goku is the hot restart stuff you just you just there's nothing to like install it just does it for you it'll it'll load up we have our images we have images of people already which is good um i think we're good oh um let's do one thing here let's do a add let's add a new item here let's just do a oops yeah class instead let's call this a program program collection sure pro a program collection uh so we're just going to put in some very simple public string image structure type uh number yoga 13 classes collection image instructor there's like more instructors but um we could do that uh string like more of course then we could do like bool has more there we go has more instructors all right cool so now if we go into our let's go ahead and recompile this up timmy how's it going good evening to you as well i think that's what you're looking for goku let me know uh you just plug your iphone into your into your machine there maybe the strong song was distracting could then i'll turn it i never know because i can only hear what i hear but then in in i'll show you what i see if i go into snipping here uh this is what i see over here so oh where's my zoom in oh my gosh oh i moved my zoom it i moved all my everything i have to the to the to the d drive so this is what i see and when i speak i speak up into here so this is the this is my audio mixer there that's what i see at least but it's hard to know to be honest with you okay cool let's try it oh i wonder if we have the new um uh no not yet well there's no tooling at all time bender well catch errors oh that should be i don't know the vs code extension which is a experiment from clancy that i'm not really sure but there's no like vs support just yet that's what i'm waiting for um to be honest with you so once that happens it'll be there did we put the shirts in here yet i need to ask beth there should be a new the this c sharp shirt will make a return into this store which will be nice because i don't like this c sharp shirt okay cool so classes programs oh okay we got to put it into our shell huh so uh oh it's not in our shell where is it it's in our oh man oh snap oh i didn't even need these pages because these are just uh these things oh cool okay never mind that i forgot that these are these are tabs silly james okay cool let's just put this in here then this would be easy i could have just crushed this code but nope all right so let's put this in here put this in here let's replace this boop and then let's bring in our do we have our models yet what am i bringing into this one strings okay so let's do xmlnss let's do models and then models okay save oh there it is okay cool there's that mostly whatever i've done on my time time and time bender on my youtube is pretty much what i've done most just been exploring and getting up and running i haven't really like been building apps or anything like that with it yet i should do more dog fooding but i've been a little lazy programs okay cool so instead of this what we can do here let's check this out is we can come in and say well we really want we really want this to be model and then this will be our program collection that i call that called models right model modals models models uh that's why i was like why isn't it coming up there we go okay cool so then we can do like this models and then we can say uh image this would be program one has more instructors true image instructor oh and there's images that i have too well don't go to sleep don't go to sleep on me just turned you on there we go uh models um we'll put hannah in here and a png more instructors plus three and then will be collection oh no this is yoga oh yeah we do yoga i think and then type would be collection and then number would be 13. we actually just do that collection and yoga bam and then what we'll do is just kind of copy and paste this boom and then this would be easy peasy this will be we'll put in we'll put alex in yep let's here ally in there and then we'll do program two oh oops we're on the wrong screen boop okay fine easy then program one program two we'll put we'll put alex in here then there we go plus three has instructors will do cycling that doesn't really look like cycling but program and then five weeks so again this one we can say has instructors false that'd be kind of cool so we can do that we'll do we'll do ally on this one nothing strength program for weeks has more instructors is a string yeah me being lazy yeah you depecha you could totally do that that was correct yeah this string or null but you know let's just program it in here true false why do logic well it's all design time stuff so i'm just that's just me being lazy but james being lazy uh-oh oh that's interesting oh it's funny cycling let's just do then strength oh that's the design time data doesn't like that that's funny that's funny oh i wonder if it thinks it's like x name that's interesting okay cool that should be fine then okay cool well anyway there's our array we can minimize that down so we don't we don't want you no mo all right cool item template uh what is what is this that's what this is here uh i don't want any of that really in here it is one big frame let's grab [Music] our what do we have that's similar already this is actually very similar but i don't know if we programmed it correctly or not let's look feature page oops all right i got a fitness program thing that's good okay cool it actually does look pretty halfway decent uh surprisingly and actually have like some resources in here so okay let's look here there's a box view i don't want that so there's a grid so it should just be image let's do source of binding to image i need to save it then we need to do aspect feel okay cool looks pretty good looks pretty good all right and boom james is that machine connected to a mac for ios hot reload no well so this iphone this is an android phone here this is my android emulator this is an iphone i'm just i'm just screen mirroring it here with reflector here but if you plug this device in to your machine then yes you could use hot restart and hot reload together for ios development and you would just plug it into your windows machine not your mac my mac's closed not restart this just have an apple developer account i'm just screen mirroring here because i usually just focus on android because ios is going to look the same so but let's look here okay so we have um this row but we also have surprisingly uh a few call we just have two columns let's do that and then let's do uh column span two and notice that my ui is not changing while i do anything that's because i personally like to have the hot reload set this is off by default but you can say apply xaml hot reload on document save i just like that better that's me personally but that's it that's a james thing that is a james thing so we have this little dot somewhere else in our app right yeah there's that that is on our profile workouts page because i always forget that little dot like what is that dot you know that little dot is i'll see we have so much good stuff here i'm gonna steal so much code that little dot is this here i want to grab a stack layout boom i'm going to put it here boom format xaml we'll say grid.row one let's go back to our classes programs here we go this will be our type oh we need to do a x data type which will be our models program collection there we go type okay so text activity type and this will be our what did i call it number oh yeah okay number that's good that work five weeks all right that was very small so what do we need we need some padding in here this definitely shouldn't be micro maybe just small that's better so if you look at that side by side uh let's fix the strength here so this will be the this will be the name of it binding name and actually it's the same size supposed to be small oops i think this one's just black actually and then i think i'll do 24 in apparently it's not there we go okay this also needs a little buffer on the bottom oh not margin we want let's put padding on here we just do padding zero zeros twelve zero oh zero 12. that looks better program uh actually i think this could be text secondary probably yeah that's probably what it is and this will be text text primary bam yeah it's really funny we have a lot of videos on hot restart and just like debugging directly to your ios device but it seems like it's still not really you know sunk in about how you can do it the ui the ui helps you through it pretty good surprisingly it's a pretty good job looks pretty good get those muscles um almost done okay so there's that this bottom part looks a little bit too big so let's do six on top maybe let's do six or zero on the bottom i guess yeah there we go looks better okay cool so then we have that and then what we're gonna do is we'll have a another stack layout here yep actually just double tap on this and have it closed you gotta go over here so then we'll do another stack layout and we'll say orientation horizontal and then we'll say grid dot row one grid dot column one then we'll go back to our workouts page and we're going to steal this image and we're going to put that right here one more one more all right this will be instructor uh instructor oh oh snap uh row oh and then there's gonna be a grid dot row span too how many rows i have yeah okay so this will be yeah oh interesting yes row two okay perfect oh nice okay um and this will be a padding of 0 0 24 0. boom all right so it looks pretty good actually that might be a little too much of padding that's fine no it's actually pretty good um i think i'm gonna make this image smaller though let's look at that 50 50 50 25 25 24 24. bam all right cool then what we're going to do is we're going to do a a frame and we're going to grab a and we'll put a text label horizontal center vertical center text binding to has more instructors oh no more instructors and we'll say with request 50 height request 50 corner radius 25 and we'll say background color and we'll say i don't know a static resource of text secondary oh my gosh and then that's not correct we'll say with require horizontal and oh no vertical hmm oh this seems to be grid dot rose no that's not right um hmm oh oops padding zero there we go there we go that's better now we're talking it looks pretty good actually just looks a tiny bit big for some reason let's make this like smaller let's do 46. oh this has a small margin on top that's that's why there we go now we're talking it looks good i think this like swears it looks a little bit too big there we go and then all you got to do here is because it's a boolean you're going to say ha or um is visible and we'll say binding to has more instructors and then let's do this we'll say let's do a static resource let's say let's do a color and we'll do x key we'll say more instructor background it's a nice short string perfect cool and then this one will be the background to this and this one will be the text color primary boop all right now we're looking pretty good look at that yeah not that bad not that bad the corner radius can be a tiny bit bigger on this i should really create a reusable that's for sure where's my uh there's my frame up here or corner radius eight let's do 12 maybe too much that is too much maybe eight was correct then yeah that's fine it's fine it's actually a little bit less but similar enough boom look at that look at that watch this all you got to do now is come in copy this puppy and uh slap it in here boom then save it uh it didn't work oh of course it didn't work dang you all right so john you for some reason doesn't like this name thing multiple times let's do yoga and there other stuff in here just all your cross training i don't know i don't know why it's upset about that but it's funny there's only cross-training cycling running they're running two meditation two i don't know why i don't know i was complaining about that let's see there we go all right cool so now we have this in here this would be easy peasy because now all we got to do is come in and change this to instead of doing program we just say collection one collection one collection two and then here we'll just do something like we'll just change some instructor names we like uh hannah and ali and alex and those are the only three instructors i have okay cool and then yeah let's do that i guess and then instead of four weeks five weeks we'll do 13 classes collection collection collection collection collection say 12 11 classes or something like that just copy and paste these things we'll say i don't know 10 classes i am standing i am standing watch routine classes all right cool so there you go boom and we did it um actually it's a little bit why is it oh no there it is just something to recycle bam we did it that was that one's easy they're the same view so that's not too bad you know what i mean the next thing to really be able to do is be able to tap on one of these like this and then go to a new page and then do this page here i think this will be a fun little see this isn't too bad yoga this is just classes but i think that fundamentally the program is actually a different page it's similar the top is but it has these multiple weeks in there ooh that's going to be fun which is actually not a tab view it's just a what is that it is a scroll view it's a scroll it's a it's a scroll view what is it what is that i like to um what is that sticks to the top that's interesting that's that's hard that's a hard one what is that it's like a collection view with a custom indicator ooh it is like a custom indicator view um but it it uh yeah it's definitely like an indicator view and then it it like snaps let's see as you go here see how it it's like a scroll view inside of a scroll view yeah because but then this would be a collection view to oh this could be a collection with a header like um right so this is would be um unless each i'm always like in contradiction it's like can a collection of you have a collection view inside of it you know what i mean like that's always my my my drama but like this is a header and this thing is just the cell i should do one of these um let's start with uh let's start with the collect collection this one's easier so let's start with that one all right cool um this one sounds good okay let's start with this one so let's create a new page here let's do a uh this will be a collection detail page there we go add new item collection detail page boop and then we're gonna go into our shell and we're gonna say register i just did a whole video on this show i said a whole video on this today route routing dot there we go that's what i want routing dot register route name of and this will be the collection detail page type of very cool i was like how do i do this but if you better use one collection view interesting even for this page maybe you think this is like that's just like the header instead of a scroll view yeah that's probably better you're probably right at least for this one like one big collection view with the header it i like their little animation on here though it's cute um it's uh yeah yeah they kind of do that little animation up there i mean we're probably not going to do that in all honesty and see how they also have this sub header on it we can do that we can definitely do that that's good it's probably yeah do you know if maui's going to sport f sharp of course though probably the mvu stuff with clancy's stuff you'd have to like talk to him but then you also have fabulous already so you would look at maybe that too so all right cool so let's do something here let's just go to our uh collections page oh we don't need a collections page or a programs page let's delete those gown i love dissecting ui that's that was like one of my most fun things about like my job yeah um that said though uh parker the f-sharp support is gonna be like the same right so it's not like there's like massive improvements on the xaml side because for xaml and the f-sharp code generation there's that stuff there but like an mvu style stuff fits better in a in a maui world or the code first approach or like the extensions like you would want to look at those the code for stuff um let us name this that way mine the right thing collections okay cool so let's just do a we'll say this is the collection collections let's see let me just say collections there we go and let's do item selected or selected selection changed there we go and let's go into our code behind let's do async weight shell dot current dot go to i guess that just is going to be a name of collection details page should be it actually okay um should push it across and actually this page is just pushed onto the stack okay cool collection detail page is here gonna work on this and yeah we're gonna hard code a bunch of stuff in here see how that goes okay let's see let us see so let's see if that worked or not so i go to uh programs classes select oh no ah oh there we go all right how to do that oh interesting okay so then here i need to do true hey all right cool so there's our title bar and i know on our profile page we have the not the profile page oh profile what is that thing okay i i totally forget this how did i build this app oh yeah okay so then here's this shell title layout let's see if that works again so i do the not profile page i go here can i do this let's go to classes does that work hey oh that does work okay cool um but this just needs to be a another label here that does why is that upset okay i don't even need a margin then this should be a static resource of text primary there we go to be small oh this one does that's why that has that offset if one has a new iphone project app do you recommend maui or is it to too early for it because there's no tooling and stuff like that built into it just yet so you're not it's not quite ready in that regard in my personal opinion oops yeah but definitely keep watching because it's close you can um i'll tell you i'll put out a video hey when i say it's go time but um you can follow along on my youtubes for sure hector and like you can watch like here's like what should you do today you know what should you do that like so i think i'm gonna put out another video that's like it's go time right like hey it's good i mean you know done at six is november so remember like all the stuff you build today will carry over into don and maui like all your ui and things like that so look at my face on this one i'm like real real excited there so definitely you know um follow that subscribe to my channel uh subscribe to the channel brah all right so i guess maybe i do need this uh i just need oh and just need on android because there's a thing over here i'm interesting uh 16. oh i see what i'm doing oh [Music] i see what i'm doing i'm doing that because of why let's do your spacing your dreams come true 3d polywrath thank you so much for the subscription oh my gosh four months coming in three months streak appreciate that i don't stream that much so that's a good one oh my goodness exologists thank you for the follow as well i appreciate that all right so we're just trying to figure out what is going on here no no spacing um so let's do like a margin no i want to do a padding oh yeah this one's a little bit weird because the title there we go okay and we want to do like six the title the this thing doesn't really update very well in the thing there we go it's better what we're going for by the way is this yoga foundation and this should say yoga then we need to go into our classes page i need to find this little dot because i never know how to do this dot oh that's interesting um all right ooh that actually updated pretty good okay cool that looks good um it doesn't look center that is for sure but we can adjust that yo yoga the layout the padding margin oh gosh no padding [Music] hmm um cool did it did it um that looks better yoga cool so we were thinking is that this is one ginormous collection view and you are probably correct so here we can do a collection view and then there's a collectionview.header and then and then like a stack layout and then like we'll put like in an image and then we'll put in a source and we'll say collection1.png okay we'll save that that work [Music] thank you so much for the follow your twitch prime you only get one of those once you get to me oh my goodness i'm so honored thank you so much um how come the let's see here no i'm just not there uh height requests i don't know 100 that way nope okay okay i also spelled classes wrong glasses there we go and there we go 13 classes okay um i wonder if i just need a collectionview.item source and then what if we grab where do i have the other stuff at was our finished workout if i can grab that that's probably pretty accurate of course like the same let's just throw this in here and then let's customize it because the best part awakening is copying and pasting um cool let's put this in here boop once you got one view you got a lot of views okay cool so all right all right all right all right models is it gonna bring in the namespace cool brought it in shrink it down now why isn't it showing up what did i do wrong oh uh i don't have a data type currently that's weird now it has data now it has stuff but i wonder if this thing is messing it up let's just look it's weird that it uh i might be in a weird state here let's let's reboot this thing it's not showing anything i guess i'm not showing it on the screen yeah i think it does need an item source but it should be able to show uh does it need a header maybe it doesn't need a header maybe it needs an item source it should be able to show oh is the header only when it has data oh here's the issue [Music] it's because i didn't bring in this namespace um so that that i'm gonna say i was like i was wondering why that's because it couldn't bring in the name space i didn't check my error output oh my gosh um oh and it's funny okay so maybe copying and pasting isn't the best thing to do oops okay cool let's get rid of that maybe i shouldn't have just copied and pasted blindly that's this is the correct syntax liar liar um liar uh interest in the data temple i don't have to put anything on there i guess i don't have an x data type we'll see if this compiles it's like it doesn't compile that's why it doesn't show anything that could be why let's see okay so classes collections foundation hey oh there it is okay cool so that is there so we need to make it look like this and i don't know why i just copied and pasted these that's fine um let's work on the header first here so the header i want to look like this will be not just in here we're going to do a zero we don't need any of this stack layout we'll do an image source equals the collection one of andy boom amazing uh ship it um okay done um and then we'll do a label we'll say tax we'll say build a solid yoga practice from the mat up in the foundations of yoga with a mix of core poses and tradition traditional flow style classes comma learn how yoga can go beyond a physical practice to help you be the best version of yourself and then we'll do text color and we'll say binding your static to text secondary we'll say font size small and we'll say margin of 12. say text horizontal horizontal center bam can we change spacing height line height that did not work how i wanted it to work that is not correct one two okay it's a little spaced out i didn't know why not even exist that's cool that looks better and then maybe this is medium and then no that's too big is it yeah it's like ah perfect of yourself that's better that's fine copy pasta it's the way it is the way so we have um this here which is going to be these instructors so here's where this is what we're going to do is we're going to do another stack layout okay and we're going to do an orientation actually we're going to do a scroll view here and we're gonna do horizontal see then we can do a stack layout dot or do a bindable layout dot item source like this and let's do [Music] hmm i should have like a instructor let me do that let me just let me stop this let me do it be better let me do a instead of just doing a string we're going to add another class in here let's say add new item we'll say let's do code i'll do instructor instructor and then last name so that we can just like you know fine-tune it there and then here we'll do models colon instructor oh that's cool it's already had that in there okay cool and then we can do it'd be better i think we just do like uh instructor and then we can say you know first name will be um chell c last name will be we'll do jackson roberts and then we'll do image i don't have a picture of uh of chelsea but we'll do ally in there let's just give a few of these here so then we'll do and we'll do hannah and then we'll say alex cruz alex's last name to saint off by one two saint put alex in there there you go cool so i have like three instructors let's do alex again for fun cool so we got that let's load this pup up boom boom and that'll at least be the the this view we can we can just put this here you could make this uh you could you could make that a collection of you too if you wanted to i guess um but we're gonna try to see if this works well with the bindable stuff so go to classes and then programs collections and you really need to unselect that thing cool okay so so far with the instructors in here good good good and we'll do bindablelayout.com item template there's even selectors there's an item template oh my goodness um then we're gonna do a grid now we need to do a data template and then a grid and then a definitions will be auto auto sure and then we need to grab the image oh luckily we have it right here bam and we'll shove that image in there format this will be red dot uh row span 2 save oh there we go cool we got images these are going to be really small though so let's do a 40 40 20 20 19 19. boop looks good all right and then we're going to do actually looks super good look at that not bad and we'll do a label and we'll do text binding first name oh yeah so we can go in here we say x data type and we'll say models structure them then we could do label text binding last name okay and then we're gonna do grid.column one grid dot column one grid dot oops two oh oh bro nope oh oh row there we go yeah that's not scrolling now let's see okay so we're gonna put these let's do [Music] row spacing zero smoosh it oh no vertical options end horizons options start hmm i have this margin on here i was like why are they off center there we go good to see ya it's been a while been doing good but doing good chilling uh let's put a little padding on this puppy up zero yeah eight zero this should scroll no am i wrong maybe this doesn't work how i wanted oh scroll direction now scroll view horizontal right no am i wrong uh okay i'm pretty sure that's supposed to work yeah there we go yeah and then you could do like uh you could put a little bit more space in here get rid of this red i was like i'm pretty sure this works and it does work and it does work i feel like there is actually more spacing over there and then you on the scroll view then you say horizontal scroll bar visibility never and bam and maybe you put like a little margin up top like that and not bad about alex tucson's two alex tucsons why not okay that's pretty good that's not bad all right cool all right so that looks good and then the thing with the uh yeah it looks good so then we're gonna have this big spacing oh snap yes yes okay cool so i put this here but what we really want is a grid and what we really want is like row definitions and what we really want is uh one two three four four auto auto auto star and this will be grid.row one and then grid.row two then we're gonna have a uh scroll v or a stack oh oh gosh yeah down here is it on use it manager i put a scroll view over a stack layout um well if i want it to scroll like this yes yeah so yeah this this this is this is in one big collection view so you don't you never put a scroll view inside of a collection view or a collection view inside of a scroll view but what i have here is a scroll view with a stack layout of these items so i'm binding stuff like um if you're on a page like this page this is a scroll view with a bunch of items inside of it here there's a question uh here so this is just a scroll view with a bunch of uh with the sp of the stack layout inside of in a bunch of items inside of it like on this page i want these to scroll so if i didn't if i didn't put this in a scroll view it would stack them but it wouldn't it would you know cut it off because it doesn't know how to scroll in in general so you need to put that there here's what we're gonna do if that makes sense and here we'll do grid dot row three change anything should have no oh something's broken oh something's broken something's broken i broke something yeah what did i break this app is always it's one thing i've realized like this this is always yelling at you uh and then we'll do xcom static helpers in here what did i make the f a i bet it's regular i feel like i broke something all right let's stop and refresh here did i break it i think i broke it oh there's an error down here and what is it maybe what did i do i broke it did i break it no maybe i didn't break it okay i didn't break it i thought i broke it was it yelling at hmm i don't know what it's telling you oh yeah font awesome is a is a font yes yes i have this blog right here there's an update i've had five five billion blogs yes you can download fun awesome or ion icons or material icons you just put them as an embedded resource then boom you're good to go and down the mountain there'll just be a fonts folder you just shove them right in there that that github here matthew here has a file that you can just download and just put right into your app you get all these all the icons like the actual unicode character that you need to put in there all right let's see put collections here okay uh um okay so it did work view collection i know it broke something broke interesting maybe it doesn't no to fill the page i thought that was going to work i thought i was being clever but apparently it wasn't oh man oh maybe i am being clever [Music] let's look that must be f a solid maybe there it is and we can do like okay then yeah this i should be put text color equals these are both primary let's do font size medium yep you can use any other in fact all of these icons everything you see in front of you is an icon there's an icon this is a font this is a font um there's a font there's a font there's a font all these icons here these are these are images actually that is a font font font font fonts everywhere fonts for days yeah these ones are because i don't pay for the i don't pay for i'm just using the free version of it so that's fine but yes it is pretty bold um things just should be like let's see if this works i really want to be vertical options end and expand no that didn't work okay um it's not really what i wanted i couldn't i don't think the header can like be the full page size of it that makes sense that's a really tricky view in general i mean they're all tricky all right let me be right back i'm gonna get some coffee real quick aidan says wonder if you could calc yeah probably what you'd want to do is set that height pragmatically to a certain percentage i would say for now let's see this yeah it's like it's fine um it it's obviously gonna be different every single device because of how things work but um you know let's see what this uh it's like that is a relatively good oops representation of oh thanks hulu um that's a pretty good representation of this page like not oh that's very fascinating the tabs are still down there hmm oh how do you do that um i think i have to do what do you have to do classes page so we want to do collections if e dot select uh what i do i do um i'd do this literally i could do this i think i'd do forward slash let's try that out i think that's right i think that will up the stack up the stack we can look at the documentation oh oh the global routes cannot be on this page just navigate to now i don't want to navigate just that so what i have to make sure i'm doing here is i do have route okay so it'd be classes page shower navigation [Music] classes oh it's still there let us look see like how i guess i didn't cover this in my video uh this would be a 202 video um [Music] routes monkey slash details animals [Music] um you definitely want i guess you don't want two you'd want one maybe oh maybe i can do [Music] oh night have a good one oh no take it easy oh my goodness oh that that didn't do what i wanted it to do take it easy get some rest oh my goodness xamarin forms shall push page on top of tabs over yeah it's also uh um hmm i'm not actually sure i am not actually sure well hector thank you so much for the boots appreciate it i'm not i'm not sure how to do this i am not i am not positive i am not positive i am not positive pop navigation deferred i don't know i never had to do this before usually the tabs are main but on ios oh i wonder it's an android thing maybe it makes sense on android for it to say i wonder if we run this on ios and actually see what happens i'm gonna do with a single i think a single slash is probably fine i should just add it to the stack i wonder if ios does move it or if it does it inside of it depends on where you're pushing the page from like because normally here if let's say you want to push the page and go on top of it that's not what i wanted okay so oops usually what you would do is say you would say push the page from the parent of the page yeah because yeah because what you really want to do is push the you want to push the page from the in this case from the shell from the tab from the shell shell and how you would normally get that is you would say you they get the parent i don't know well let's let's add in a break point here and let's just see what we can explore in the shell yeah because normally like if you were even doing this in if you were doing this in non in non-shell it has the same issue which is you actually want to push push it from the parent stack not the current stack which is correct because the navigation stack is inside the tabs at this point that is the issue shall oh interesting i wonder if i do this what if i did fit i'm going to try this and see this would be a good video tab bar and i do route and i'll say home tabs main tabs okay yeah you would encapsulate the tab page in a navigation page i think let's try this out um i think what i would do is [Music] let's try this quack quack quack quack quack main tabs it's like i'm saying to push i don't know if this will work or throw an exception but i'm saying like push the collect the details page from the main tabs i think i get a ghost and i got a meeting at 11. oh oh okay oh my god i know i was pushing twice now because it was it was hitting this twice so then i'm setting it to null but it's no longer okay i don't i don't think this does it either you could i could fall back to standard nav no it didn't do it at the funnily enough that still worked literally the same as before man what i could do is you could do this you could do await shell dot current dot current and i think this would be page it's definitely a page navigation push so if we were doing push async let's do new collection detail page and you still have access to it it's that's not ideal parent which would be the tabbed page that that actually it's at a break point here just to see parent parent page is a oh i don't know if that's a uh that is a parent is not that what's the parent of this parent.parent shell section shell item oh oh i see horn um okay hold on is tab bar visible false wow of course it's just like that i think that's correct i think it's just like on the page is that you control the shell which you want to show and then it shows up let's see if this works i'm an idiot of course it's a property on the thing what wouldn't it be let's see and then [Music] why um amazing let's do it [Music] sometimes i love and hate myself at the same time so great there are there we go cool all right um let's commit this it's still stupid all right i love it and then yeah even when you go back oh it's here yep perfect amazing there's probably some pop in and things like that because i think i'm debugging so i think it's a little bit weird but uh not bad there's a lot to be done still i was already walking all right so let's minimize this down i always like to tweet an image i'll say real me oh the paint 3d yeah better real real real clone background fill perfect all right let's copy that yeah i'll never forget it now once you do it once it's like oh of course duh because it's like oh it's gotta be navigation it's gotta be navigation then when it's not navigation you're like oh interesting it's not navigation oh i see um great uh hopped back into some xamarin forms dev today on my stream after a month break um great progress on the peloton app clone and then we'll of course link to the github because people are always like wow where's that thing put that in there boom awesome that was pretty good i'm pretty that's pretty good foundation cool all right let us commit to code i appreciate everyone's help and you sometimes you're just like what is that property oh there's the property that's great um all right let us stop oops oh oh oh i should well i have a moment here let's see if i can get it on my ios device here i have this puppy here my iphone 6. i just got it it popped up a thing that's like uh the the uh the peloton apps like you're no longer going to get updates anymore because you can't get ios 13 or 14. i can't on this phone is an iphone 6 not a 6s so that's a bummer a bummer town let's look at this set of starter projects so plug that in it should be there let's just see if it launches or not it was there it's been a while since i i did i did hot restart yesterday on my other account i resigned in and stuff and i got it deploying for some sample testing oh just flashed [Music] this one's always tricky it looked like it didn't do anything but it is definitely deploying still i'm pretty sure there it goes it takes a little bit of time you got to be patient with it it looks like it's not deploying but it is deploying see i just plugged my iphone into my windows machine and boom the app should come up there it is wow there are some big icons on the bottom pretty good collections all right we've got some issues there oh i don't apparently have a one of the images isn't in there that's okay ew well it's actually pretty good uh this needs to be cleaned up a little bit here for sure on the top because it's not right in the middle but it's kind of cool that the even though that's that's crazy kind of even though the um the phone sizes are completely different like it actually the layout system did a really great job i don't know why the it's so dark on this one too oh oh i didn't set a font color on this that's why and it probably need to set drop shadows to false on this or replace it with a different drop shadow there's someone else has a drop shadow package i definitely need to clean that up what's going on profile oh my gosh look at those oh my goodness all right let's just let's fix that up a little bit um where's my oh my goodness uh where is this the is the overview page all right where's my frame at has shadows false i don't know if that's actually the one that's in or not oh there because i need a i'm i'm screen mirroring so it actually doesn't update because there's not a there's not a pixel change or whatever it shows up on my devices you scroll a little bit then it updates boom that's good that's much better oh that it's a little bit off center on some of these but that's fine um classes it's weird that this image didn't pop in for some reason i wonder if on my oh that's why collection two whoops because i didn't change that so now that'll show up on there let's go back to this collection this uh classes page i really have to go i really got to go oh all right it has shadow false there we go that's better still some weird stuff there but yes there we go that should be fixed all right it's always fun to just hey bill good to see you buddy here we go oh that image came through that's really good look at that boom boom nice not a bad this this phone so old still scrolls pretty good okay cool let us go ahead and push this in we still got to finish that page it's not done yet because the things at the bottom aren't done but it's getting closer um what did we do we did a bunch of stuff we did the programs and collections page and um started on the program or the collection detail page there we go all right let's push this in there we go cool we did it and it's going up to the githubs thanks everyone for tuning in i really appreciate it i hope you have a great friday if you're sick stay inside don't leave feel better take care of yourself thanks all the subscribers the bits of course will be donating a bunch of monies almost the end of the month i'll be back maybe sometime next week we'll see how i'm feeling we got a trip to take real quick um but yeah we're out of here thanks so much everyone have a great one cheers bye do you

Channel: James Montemagno

Views: 1,197

Keywords: live stream, clone app, xamarin.forms, xamarin, ios, android, peloton, peleton, clone ui, streamer

Id: x1Tmz9NnLPA

Length: 114min 53sec (6893 seconds)

Published: Tue Apr 27 2021