Live Stream: Building a Peloton Clone with Xamarin.Forms Part 5 - App Icons, Gradients, Shell Tabs

hey everyone happy happy friday arthur and aidan in the chat good to see you good to see everyone hope everyone's having an awesome friday it's getting a little chilly here in the pacific northwest but do not fear we are here doing some peloton app cloning as we always do here on my channel uh now this seems like this is my my year thing that i'm gonna do at least try to clone this app fully to some extent it's quite fun it gives me something that i can definitely tune into every single week and maybe i'll get on to that good looking ui over on xavier's get up page we'll see uh i hope everyone's doing good i'm pretty excited i got a new monitor coming in today my wife got a cool widescreen monitor last week so just do it make your dreams hmac coming in for eight months tier one sub thank you so much of course we'll donate some trees six trees planted right there um which is fantastic thank you so much we're gonna have a new charity in february so get those cheers those bits in and we will continue our donations as we always do last year we raised i don't know how much money did we raise last year uh a lot several thousand dollars on the stream for different charities which is awesome and we'll keep that going so yeah i hope everyone's doing good yeah my wife got a new cheers my wife got a new monitor she just wanted like a a widescreen curved and she just wanted a single monitor i have two monitors i have like a 2k monitor which is my main monitor that i run in 1080p mode because i don't know because i have two monitors but one's 1080p and one's 2k and i always just run both of them at 1080p because it just seems easier to me to not just switch dpi between the two but i'm thinking about selling my both of my asus monitors and that i have that are 1080p just on craigslist and then getting you know a newer one because she got this wide screen it's 29 inches so it's not crazy but it is nice and wide and i'd see her put like two full browsers on both you know both sides it's like lovely which i can't do on my normal 2k monitor because it's still just a normal aspect ratio 16x9 um so i costco had a had a says the g9 odyssey no i thought about i thought about it um i saw this on slick deals let me post the one that i got uh there's not that many things on costco on here usually see if i can find it there it is it was uh yeah i would be like the only one here's the one that i got uh it i don't know it's a 35 inch so it's a 35 inch um wqhd hdr10 monitor it should look good to play my xbox 360. uh our xbox one xbox series s games in so this is four hundred dollars which isn't too bad because my wife's monitor was 250 and i thought this was pretty good deal is a hundred dollars off and it's three three thirty four forty by fourteen 1440 and it's 35 inches which isn't too big too bad because i have like a 32 inch 20 89 i don't know something like that i don't have some monitor yeah the the g9 i've seen some uh reviews on it's beautiful but i i was thinking that i didn't want to get something too too big because i would like to keep this dell monitor i have the monitor i have is really nice dell um what is it called it's a dell um it's like one of the topper end dell monitors you know it's really nice so this for 400 bucks i'm like not bad you know it's curved so we'll see how that comes out i don't know how that will pair with my other monitor but then i'm thinking that i can maybe just use my other monitor vertical you know for coding and stuff and then use this one with fancy zones for all my stuff and see how that works with the streaming i'm i'm a little concerned about it um just that's why i always like just uh here's 1920x1080 because that's what i stream on so i'm like here's my full thing so i'm a little bit like okay how is this gonna work so maybe i'll move my camera like this will be my main i don't know maybe this will be in my main like i'll move it over here i don't know i gotta think about it so but yeah i didn't think it was too bad of a price 500 was like out of my price range like 300 like this will be the most expensive monitor that i ever purchased so this is for sure like the most expensive monitor that i purchased ever so we shall see it is thick thicker right i mean it's definitely you know yeah aidan says verticals purely outlook in teams too far off to my left to be comfortable to code on yeah that's my that's my concern is it's like will i even like it right or should i just got another dell monitor to put on it or not we'll see i'm not positive um but it is visa mount compatible so i have it i'll have a monitor arm here that i can just shove it on which is nice and this one the monitor arm i have is a dual monitor arm so i don't know if i'll be able to use it for this because it's very wide so i might need to look at it i'm a little bit i don't know it says hmx says lg has quite okay window management software that can help you snip windows the right place well you know what we use is fancy fancy zones we're all about those fancy zones here on the on the stream um and also i would like to compare and contrast because this is my this is technically my mobile focus one which i only have one zone so i don't really quite quite do much on but yeah you can just hold down shift and then boom i put this over here boom i think this fancy zone actually needs to be like a little bit modified windows tick edit and you can do like i want this here boom but like if i was to do let's say i do a new one and you can do select and you'll be like okay i want this zone here i want this zone here this is this good software and i'd be like i want this here this is the fancy power power tools yeah it's so good look at this and then you're like okay i want this over here and then this over here and you can overlap windows and whatnot and they're like okay cool done so now i could be like hey visual studio like what zone do you want to go in right that's pretty cool i guess i mean zone four very big yeah it's pretty good hey hey joo good to see you yes it's not we're talking about monitors and fancy zones and widescreen stuff so i think this will help because if i can you know i'll talk about widescreen monitors over time today so i can like flip the zones and then here right i could just be like oh now i'm in streaming mode and now i just want everything to be here right and then i want this to be in this area unfortunately the android emulator doesn't work with fancy zones so there's that anyways uh we'll see how that goes and if i even set it up this weekend it's supposed to be cold we'll see if we leave the house and go from there but um we shall see it's it's quite large so i'm a little worried i'm a little worried so i use this is just the google android emulator so you miss you missed the monitor that we were buying ooh here we go let's see i was i picked up this monitor i'll post it again this is the this is the one ooh see 40 this is a tv at this point i swear like when does a monitor just become it looks like a tv just become a tv but that's that's large 40 like i think like 35 will be wide and it'll be crazy but like i mean that was like the size of like my biggest tv growing up you know what i mean so we'll see i i can't even imagine that's like i i should have brought a ruler out my my fear is always where am i gonna put my microphone like where's my microphone gonna be i am excited to code on even like just two two screens like i was coding on my mac in bed last night and i'm just like i'm so less productive with like even here like this screen like i'm so and i have really big code i code a huge fonts like this because i'm crazy maybe not this big but like maybe like 140 i don't know pretty big fonts i love big fonts but um anyways okay here's what we're gonna do today is last week we did this which is super cool this uh we use the tab view as part of uh xamarin community toolkit and we are going to bring that over to this page because this was crashing on ios and that sucks so this was something custom that we built which i still like quite a lot but hey this is built in so why not just use that you know and it has like nicer animations that slide around um and it'll be supported compared to my janky just show stuff so we're gonna do this hey bill how's it going good to see y'all girl we're talking about monitors and new monitors i posted a link here this new costco monitor i'm buying from lg okay so here's what we had last week we did this classes page right and that was this page and what we learned is that we could use this control template which i'm now understanding a lot more by the way i'm starting to understand it why is this gross and why don't i have row definitions auto auto mark learn thank you for the follow we are close to 3 000 followers on this channel we're almost there appreciate everyone that's been tuning in and follow me as well there's people that randomly threw me bit coins uh when i was gone that's weird that's cool though lots of followers all right so we can get rid of this yeah why do i have to sometimes i just forget that like why do i have this old nasty code uh oh this should be auto there we go so i now i'm starting to understand control templates and they're very cool so um all right so i think what we can end up doing is actually moving the style into our app because it'll be shared there we go target type xtc i don't think you can resolve the name because it's embedded so let's bring that in to here and on our challenges page is what we're going to tune up here this should be real simple hopefully so we'll put this in here because we're gonna need that and oh you know what i bet that we can also move this control template in there too because we're gonna reuse this control template oh that's beautiful i love reusing like control templates too so we can move this in here so this control template can now be everywhere which i think is great and what we're going to do is in our challenges page uh we are going to just fix bill found this last week so thank you bill for finding that too appreciate that we're just going to remove everything because why not and we are going to delete all the resources because we don't need them and we are going to go into the classes page and we are going to copy copy paste pretty much all right paste that in there and now we have our tabs which is cool there's no content in here yet but that is okay hey ricardo good to see you stop for thanks for stopping by um all right so then what we want to do is we want to minimize some stuff here so we have some tabs select a tab we can get rid of this collection view that's in here we can get rid of all right we'll just leave yeah we're gonna get rid of this stuff here and then we're gonna get rid of this stuff here then get rid of these tests we have three tabs not four and i'm sure it's probably broken now but ideally what we have here if this is just working correct we have trophy angle double up and award so if we look at the first one this would be trophy trophy all right then we have and that's called i guess i should put this active active upcoming completed active okay this is good then we have upcoming [Music] and upcoming is going to be angle double up which is a these are all the same okay [Music] sometimes i just get lost in get lost in the thick of it unfortunately f a solid solid or car happy about that and then we're gonna have upcoming or no completed which is award award okay solid okay solid cool and then what okay all right so then it says a lot less code if this is correct we just have controls and ideally we rename this to completed completed and then we do this down here so we have active challenges oh yeah this should be easier then so here we should have the tab view the last one should be controls completed challenges oops let's see here the completed challenge control that's good all right then these are oops these are both active challenges let's see if this works all right let's see if this works this should work question mark if so it's a lot less code because we we took all of these controls and put them in a separate page though it's easier to kind of work on them because they're like quite large in general so we're kind of hoping that that moves it out of the way like here's our here's our main content so each of these tab item views inside of here has a icon and a selected icon the only difference is the color between them so that's the biggest part there and unfortunately you can't really style these you can you can create like a pre-made control i think for them you can't really style them it's a little bit of a bummer but let's see if this fixes it if it doesn't then that's also a bummer if that was the case so okay cool so that did work all right ah and it oh nice beautiful look at that now i remember that there's some issue right with this i think it's a bug in i think it's a bug in the thing where it is classes we definitely need this use safe area okay uh let's see i have this 42 margin for some reason so we'll do that for each page i guess it's a little bit weird that might be a bug that we need to fix at some point in the tool kit i think it's when you make this a different height then it messes up so let us put this here put this here and then let's put this on each of them for now and then same with this one same with this one think let's see if this does that or not [Music] the thing i'm going to say instead of death ain't instead i'm gonna say dethane thank you for the follow sort of tutoring let's get close my fancy zones there's tons of stuff i don't use in here i do use the color pickle bigger one in a sheet let's see look at that oh that's cool that's it that's a beautiful picker image resizer uses this all the time this is great keyboard manager i don't think i use this i don't know what this is cute shortcut guide oh yeah they have this thing so if you hold this down oh yeah see if you like hold down windows it'll show you like all the i can be like three anyways challenges okay now we're good so we got a little margin on there bingo bango amazing and it's done and it's like wow all that custom code all those custom things we did that one week don't even need them anymore because now they're literally minimal that's a great control tab view i'll tell you tap view is the future here that's great i love it i love it and now we're looking pretty good so let's bring up the um let me bring up the ios version here good to have reflector if i do all right cool let me plug this in here and let's make sure it works and oops oh gosh it works and looks okay on the ios version here dude what's going on that is what's going on here oh i'm gonna say what is going on oh there we're gonna say oh okay hold on oh my window my visual studio i must have tried to deploy interesting i was like what is happening i was like why is this i must have accidentally hit a five or something on my keyboard oops that is exactly unless it must have happened that's weird okay sorry about that i was like what is going on like what is going on on this thing this thing is being crazy let's try this again [Music] yeah there we go okay let's see this deploys uh let's see so what tool am i using to connect my phone great question so i do use visor for android i use reflector 3 for ios today although he is adding it to visor so ideally i'll just be able to use one tool to rule them all because visor i have it installed it's here i don't know when kush is doing it um what is the old version right yeah oh yeah there you go resurvised earlier should be like a newer version yeah i just use reflector right now there we go there's a new version yeah it's coming soon on windows so we're waiting on that still so cool okay well this is looking good we got this this on a very old phone so it's good [Music] nice yeah no worries there's all sorts of uh all sorts of stuff yeah it seems to be like a pretty big influx of developer tools in and around this which is good so yeah i think we're looking pretty good if i pull these side by side here um i'm pretty impressed i mean this this seems to work really well so far look at that not bad there's a little there's a gap here between these two but that's okay i'm i'm i'm happy happy camper over here it's looking good different size obviously between these two on android there's a wider phone i guess i haven't done any tablet optimizations yet but i got some ideas big glue between these that didn't flip oh i think the hot reload stuff does cause some issues with this control maybe there we go it's a good gradient built into xamarin forms it's just built right in check this out um it's just literally a few colors bam fill right in all right cool so that's good you know what i really want to do is i want to replace the icon let's see fitness it's built right in yeah xamarin forms five gradients built right in go right in uh gradients let's see if it's documented it's right there first one that seo is good look at that stops look at this i just copied it from the documentation yeah that's great linear gradients radial gradients oh that yeah that's good stuff going radial bam built right in it's amazing once you wrap your head around it um it's good um let's see so for the peloton app i want an icon so we're going to save this photo our easy app icon choose a file oh they got ads now that's smart hey goose good to see you let's see if i can i'm going to show you how to easily make their picker tool is not that grand unfortunately because i don't know where it's i don't know what it's looking at right now oh it's looking at the emulator that's funny let's do [Music] there we go thank you for the follow i appreciate that welcome to the crew so release my to-do list abs set myself a target of the app per lockdown nice well how many lockdowns have you had so far let's go right let's do a little padding here we're gonna say download ios and adaptive icons three extract all boom android we got a bunch of good stuff here now what we can do is go into our apps on android resources copy all these in here yes and we should be able to delete all of the old ones it should be anything that is icon related delete these then we're going to go into our android instructions and copy and paste this go into our properties it's really easy yeah so the the difference is that um so you can start there for sure the difference is that you get adaptive icons that are not available in android asset studio unfortunately they don't give you those so one mechanism to do that is if you wanted to create a generic icon and have some like drop shadows or something you could start there and do a generic drop-down but yeah unfortunately they just stopped updating these and they started including everything into android studio but yeah this is the jam basically because it gives you everything correct and adaptive icons and then you can go into your main activity and you can just delete this icon because it'll just use the system icon correctly and we'll do a splash screen at some point so we'll want to do is take the files from here and put that into here like so and then for ios here gives you a app icon app app icon set with everything in it so then what you can do on ios is you get a app icon already here um so this is easier to do let me see if it'll just it's easier to do on uh mac it gives the team some feedback on this though yes you want to do can i rename this okay you want to do import and then is that old dialog picker very upsetting that is what it is click on that import boom and then you can delete this perfect then you go on your info p list and you want to make it i think it's a i think it gets a little confused but let's see if it if i clear clean and rebuild it's on android and i don't need to do anything so if i just go ahead and rebuild the android one and pull this back up [Music] we have the current xamarin one here but we can deploy this and this this one have adaptive icons i don't know if it does so i just have just generic ones you get the adaptive icons if your users are doing all sorts of other stuff i need to put this in backtrack a bunch of other stuff i've been slowly updating a model you don't get to have like fully you know that's the problem with adaptive icons you don't get the full bleed like experience that you can kind of have that hand crafted experience on ios but um it's pretty nice just to drag and drop stuff in i just found this website yeah recently so easyappicon.com this is my jam the boom fitness app done then we'll put a splash screen and stuff here too but bookmark yeah it's super good use it for all your apps so now yeah like this see how this see how the app icon moves inside of it so it's kind of like moving with it's cause it's adaptive so it's actually flowing around it so now if i did uh i don't know if they have a way to do the way of changing it um [Music] i forget where they do it at it's like they've changed it home add new no that's not what i want i don't know icon i don't know if it's on this emulator but some of them is you can change you know the style of them i thought it was on i don't know i can't find anything on android anymore uh the permission stuff no just you need to fill out the new permissions of it was january but you you need to before you release a new version of your app you need to do all the new privacy stuff just fill it in it takes like 5-10 minutes it's not too bad i think that's what you're talking about yeah it's not too bad let's see if this works on ios now [Music] let's clean let's see if the info plus will there's two in here still i think it's i think it's okay we shall see [Music] gene thank you for the follow i appreciate that welcome to the crew coming in we're closing in on 3 000 followers that's crazy we just put in some app icons we're seeing if this is going to work or not or not didn't do that hmm let's try to delete this thing and then it might be cached let us see idf a what's idfa the identifier what is an idfa what is an idfa hmm mm-hmm yeah i does your app use it what what are you using that uses it it says you can use the limited ad tracking i'd imagine it's just a google update hopefully ah so the old icon that's weird all right let's look to see what's going on in our app assets oh no yeah i see it some some problem here i deleted it but it didn't delete it hmm there's around this problem eugene oh cool awesome glad that it helped glad i was able to assist so app icon i don't know why it's mad at me you can also do just delete everything and re-import maybe let's try that okay let's try that out let's reload it does very very epic uh okay add asset cap catalog and ads and assets app icons okay but if we import app icon [Music] that's a different name okay and then we delete app icons [Music] save that can i open it again oh you know what i can do i think let's see let me just see there's some duplicate in here yeah i don't know why it's complaining [Music] i know this works let me go ahead and just do it make your dreams come true my goodness my goodness hmac gifting five tier one subs far too kind do it make your dreams come true 223 245 26 27 28 29 33 132 there we go 190 trees so just do it make your dreams give it out to better better me heikelin p2a aju and tim3210 you all just got brand new gifted subs make your dreams come true um you get some brand new sweet emotes like the just do it emote which is very timely for right now very cool thank you so much hvac i appreciate that we'll make a donation to one tree planted i think it's actually five times 25 50. okay so we're somewhere around 205 i think and then we built this plug-in together so i can click a button and increase the count of trees planted which is timely for this but thank you so much h5 that's very unnecessary but uh super appreciated and thanks to everyone that is tuning in and figuring out why these assets won't work let's delete that again let's try it again maybe just maybe okay we got app icons i'm feeling good about it okay then what if we do um called media okay then we do import and we import maybe the import on windows is broken or something cause i know this definitely works on the mac uh app icon app icon save that and now oh it's weird that's like it's showing a duplicate name let me if we rename this to new it's like when it imports it's like importing it twice or something see that it's like two entries seems wrong i don't know where it's getting those from that's why if you close this and you reopen it it's like oh there's two of them and it won't open yeah okay so it's definitely something weird yeah here's i just copy and paste that in here and then delete this does that work and then unload this okay i think some with the import is off at least i feel like it is because it's not not ideal scenario for whatever's happening here let's reload this okay so then if we go into our info p list we should see only app icons okay so now i think we're good so moral the story is something is there you go now we're good something is weird on the import i i've imported the exact same file in vs for mac and it's fine so i wonder if there's just some bug i need to report with uh the team on that one they usually have to do it pretty not regularly so um cool so far we got new app icons that's exciting let's see if we got a deploy over here to my iphone something you always got to do so especially when you're getting started ideally we're going to see this icon flip if it's working that's [Music] nope no does that work for hot restart oh i don't know if that actually works for hot restart or not i thought it did maybe it doesn't oh maybe because there's an app inside of an app is that how that works i need to clean oh that might be it actually i'm very fascinated it might be that it doesn't another two okay i wonder if it doesn't actually i don't even know how hot restart works to be honest with you because like an app inside of an app so like does it i think it might not i think it actually we're not going to see the app icon because of hot restart how it deploys into a container basically it's like containerized development oh that makes sense yeah you can see here i have like two versions of my cadence installed i did this new screen last night this isn't the final version i need to go into app center and build it but yeah the assets don't get deployed thank you allen that's right um only code can be shipped yes that makes sense stupid james not thinking so i got this new this one this one's not finished yet but like i have this light theme and dark mode going on [Music] avs junk thank you so much for the follow i'm completely redoing the screen i'm very excited about it it looks a billion times better right now um and this is using the new radio buttons i have a blog coming out next week about it and then i also have the top bar working now and and being all responsive and whatnot i'm very excited about it so this is pretty cool uh in general so really bad it's a good one so that is definitely the thing that the assets don't get deployed this makes complete sense that makes complete sense let me be right back because i'm going to go get some coffee foreign uh [Music] and we're coming back cool anyways alan is correct and we're there we're good to go boom this looks so good all right so what do we need to do next um well we haven't done any of the any of these but i am pretty happy about it i'm thinking about maybe doing profile hello dawn bellow done i feel like their tab bar is not standard it's like very small so i think here i think we can use because see there's like there's just three tabs inside of there i'm thinking that we can use um okay so if we go in here and we do views you add new folder and we'll say profile and then we're going to do over profile add new forms we'll call this profile overview page boom and then we have workouts and new item it's going to be our profile workouts page and you can see there their app's not optimized for iphone 6. surprise it works they're close they just need to reduce some padding i don't know what's going on i think and you also have achievements look at that oh that's so good so easy this would be a fun one a lot to do oh my gosh holy holy smokes like smoke's got special events i did do the uh beyonce ride that was good 4 000 rides okay no i was gonna say i'm at 50 rides never going to do any runs i'm more than 50. 75 is the next there's days there we go day street that should be higher like i think kind of oh 60 day streak oh i could do that i'm going to get that 10 week streak i mean that yeah four year streak oh my gosh i guess that's not too bad we just do once a week it's not bad okay anyways what am i doing achievements profile achievements page boop so i think that we should be able to no i got a 30 day streak i got a 30 day streak yeah no it's the 30 day is a different color see that yeah so weird but see how that one's grayed out so 30 and 60 are different yeah that's that's it's very confusing uh we'll see if 10 weeks is different too that is strange yeah odd yeah odd that's what let's see see these get these get deeper in color see how they get like a little bit see hmac thank you so for the gift subs and for the sub itself i appreciate that be back next week of course you can always check out all my videos on youtube as well i never noticed that until you said that um belgium dude which is cool yeah i also took a jess king experience class and i regret it so just wasn't my vibe oh this is a sentry sentry club milestone that's cool i like that not a double century though what's a thousand 1k millennium it's clearly you can see all of them 5k nothing special for 5k you just get 5k that's funny all right cool first ride um okay cool so what i want to do is i think can we not um now go into our app shell right and then if we look at our tab tab tab profile i think can i not do like another how do you do tabs inside of tabs oh so i don't think i have anything to worry about with the idf uh it's hard to say i do have some [Music] that are using i just i guess i need to update the sdks but i think google already did it for admob i thought i thought i'm not positive bottom and top tabs that's what i want shell tab multiple pieces of shell content yes oh so can i just put those in here so if i just do profile this will be profile and then i do more i do oh man see i need to go finish your second video nice yeah they're all out there i've been putting them out every week i think i released uh at least my c sharp nine one recently but next week will be number four and then number three i have a new playlist actually youtube.com james if you go to here view playlist i can see some of them because i'm logged in i need to reorder these one two here's the playlist and i think these are scheduled to go out i forget i need to fill in some details but that's the playlist cause i'm logged in so that's why if i open this in incognito but you should see oh that's i see i have them scheduled but it's like why would they why do they add private videos here that's silly because they're scheduled to go out but stupid anyways thanks for stopping by okay so we could use a tab we could use a tab view here but this thing is built in so i should be able to say profile overview and if i have this correct we should be able to then say uh profile workouts and then profile achievements and then i think nice do it do it this would be overview i guess overview all caps yeah i've been i've been working on my my cadence happened at night um after after bed is there that's there's no more in there which is going pretty well uh uh random question on using xamarin android can you get samsung watch sensor data i guess you would have to create a watch app i guess and then you'd have to do it i think i think you'd then have to communicate that to the watch but i wouldn't say why not because like those apis are the same so just do it make your dreams come true polar 2 8 1 0 coming with a twitch prime did you know you can link your amazon prime account to your twitch account and you get one of those months for free it's free money and free trees being planted five of them thank you so much for the sub you get some sweet emotes there yes you should but you should be able to the the sensor apis inside of ooh not bad not bad uh not ideal but no it's okay i'm in i'm into it it's done boom uh cool you and i could customize this with a tab thing at some point but yeah not bad at all okay so but then i do want to do a tomorrow just do it make your three come true jessic one with the twitch prime sub thank you so much you get one of those a month you give to me and i super appreciate that did you know i gotta take a sushi dragon uh i need a commercial thing did you know that you can link your amazon prime account to your twitch account and get twitch prime for free it's already included and did you know that you get one sub a month for free that you can give to anybody and it doesn't even auto re-subscribe so you can keep giving it to different people every month and he gave it to me and we just planted five trees boom thank you so much welcome on in appreciate that polar says it's 7 30 19 30 local time watching me didn't believe i ever catch you a good time i'm glad that you did i've been doing a little bit earlier which has been fun as well uh desect has has a question when i navigate through a flyout menu back to my main page my images that are svg and the xaml disappear and it reload the path data hey curious happy friday um have you tried to do it in not debug mode maybe like hot reload is messing with it perhaps i think it feels like a good bug if you write it up on the q a when you go to um docs.microsoft.com there's this qa button up here and then in net you can just i feel like that's something that maybe is needs to be fixed up but you can just post a question there it's super helpful that's the the q and a's actually there's support team looks at these so super helpful on there i i've actually answered some recently totally happened to have you tabs um oh i love them this is how i used to draw stuff like this uh i wouldn't say why not yeah sam plug and tab view i think you do yeah interesting all right well this is easy enough i love that this just this just works um if we could probably do some templating here to change the colors you know we really want to do is also put in a uh this would be true actually tab true and then i guess you would put your username oh interesting how do i change the tab tabar's visible right hmm yeah cole uh yeah cole's one of our i think support engineers oh my gosh hype train incoming belgium dude thank you so much for the subscription uh i mean i haven't had a hype train in a long time we'll get five subs in or five trees planted in here my goodness thank you so much for it uh that's twitch prompt did you know you could link your twitch amazon account to your twitch prime account and you can you can give that to me and give me money you can give me money and i donate that money to plant trees and also supports a channel um and we do a lot of cool stuff upgrade the studio we got a plant over here well that was a christmas present from my wife so but did you know you could do that that's a that's me mocking emulating sushi dragon um as well except i train people get some hype train emotes i like that um do need that all right so ideally okay let's say there's a profile how do i get hmm yeah i want this title to say something though look if we can look at the profile maybe we're gonna have to draw this they have a whole thing that like see this has my name there how do i get my name there how do i change the background oh that's going to be a different color too background color is that this what is that color yeah i want to know where this orange okay this is okay all right yeah what the heck isn't this windows or when shift c f f f e f f come on now okay so if we did f f [Music] oh foreground i'm learning so much what app is this oh i'm so glad [Music] aiden 200 that's four trees boom boom boom boom thank you so much for the 200 we got hype train over all right curious ass yeah you just do like what right here boom yeah we're cloning the the peloton app so what you see on uh this screen is the actual peloton app and we've been cloning it so if we go here you can see one is the peloton app and one is not the peloton app but which one is it nobody knows is because the same image is over and over and over again maybe we've done challenges all the code is up on github so i go to challenges over here boom it's pretty cool i gotta complete it completed boom you know oh the exact same images there but they're there that's what we're doing so right now we're working on this profile page and i just figured out how to how to change the the things oh this is interesting so i wonder if tab icon so if i just do black and unselected color and now we're talking look at that that's built right in what ble library that i used for the cadence i did use the zabra one that's great uh i've been thinking of upgrading it to shiny but all my code works and i'm too scared to change anything now so there's that yes actually you can go to i think i have it now on here i just uploaded i don't know where i put it it's like is that it there it is i i created a i like that when you paste stuff in here just like and here's all the people so that's kind of cool i just pasted all the all the things that i use besides my own i don't need to include my own open source license in my own app do i does anyone know the legality there i could but um all right cool what i'm interested in now is why the title doesn't show up shall disabled how do i put a title up there it's intense oh you know i wonder what it is i wonder if it is no i wonder if i just do and so it's like it's the title of this page that will show up there not to title the tab bar so we probably actually need to do something like uh since i want it to be in the center on all of them does ios have similar tablet yes great question let's check it out um so this is what it looks like over there let's go ahead and give it a looksies over on ios i think it's it's nearly identical those are the native native ones over on on on android though that you just saw these ones i don't know if i redeployed this or not uh yeah these ones right these are the native native just normal tabs so that's what it's using there and these are native bottom tabs so it's kind of nice that it has that concept on android of top and bottom tabs uh but this should look like this look at that it doesn't have the line underneath but that's also okay but look at that not bad right that looks great um so yeah that's real cool oh pipe train completed oh success oh i gotta i got one hype fighter nice okay cool so then what we want to do is three subs 200 bits whoa oh because i guess the all those led up to that oh interesting emotes are being delivered okay cool so then what you want to do is um go back over here and i think what we would end up doing is the where is the xamarin forms title view i'm just going to copy this ooh um great question go to my videos i would hit up this uh in general that's a good mvvm101 i'm not an nvu expert you probably need to google an nvu video on it um model view update it's a little bit different the whole concept is that with mvu the architecture with mvvm it's more about did you know that you can link uh so with mvbm it's more about data binding i would say in architecture of having your view model separate from your page logic and having the binding layer of the framework handle a bunch of the stuff um the mvu has the idea right the only difference is that you versus view model is that how mvu works actually no there's a good you know what because you know i'm going to link you to i need to schedule that vlog for today here we go i think this is a good article because timothy outlines it better yeah okay so let's go here [Music] um is more like this model renders the view and then sends messages and then updates which updates the model then it goes in this in this kind of circular pattern but the whole concept really is is that your views are smart enough to sort of diff in the dom to know when to update certain layers of it in general um so when you update a property like account it knows how to update things automatically for you mvvm is a little bit different let's look at an image here um you know what in my video because it's better there we go this is my favorite one this is my favorite representation of it so here there your view is very independent of your model so the the thing is like with mvu it kind of flips it and puts the model here first it's a model first approach where funnily enough mvvm it's vvmmm really if you were to do it this way but the whole concept is that your view you know synchronizes data and updates back and forth with your view model loosely coupled the view sends events to the view model right and then your view model is able to reach into your model and request data so that might be like requiring a database a backend server things like that where here literally the model is kind of controlling the rendering of the view and the view sends a message to the update layer that kind of updates it i'm not an nvu expert but nvu like kind of has immutable state and sort of the bigger advantages of it um but this is a good overview um yeah i would definitely look at this probably first because this is a really good kind of introduction this f-sharp so it's going to be a little bit different both of the concepts apply to it i'm not a i'm not a great mbu expert just because i've just been doing mvbm for so long um there so sorry that i'm not really not super helpful clancy probably is like a better representation of it though of like what i'm almost there again you make sure i stand around i see usually i do navigate our title view right okay so what we'd end up doing here is no is it content page yeah i don't know f sharp but you'll be able to parse it it's not that complicated the f sharp part of it there um yeah what is this is that what it is yeah i would say right now at least if you look at like what's going on with um see if that works does that just work not that i do right [Music] oh i'm not debugging oh that's a good idea yeah see often in a lot of my apps like all you don't really need to necessarily use it but ideally like all these pages they just they are all the same so they just have like the same the same stuff on them just a name so like this would be data bound to like a title or something an ideal scenario so if i did log in then you would see it but if you looked at the peloton app they're all just my name [Music] now we have where's the background color oh that didn't work did not work hmm i don't know why that actually doesn't work or doesn't seem to be working hmm it always puts it there that's odd oh no that doesn't make any sense but yeah it should be centered very strange um can i put it inside of a stack layout maybe maybe it's some michelle to be honest with you like i'm curious if this needs to be inside of a [Music] should work but it's not so but it's inside a shell though so i don't know if that makes any difference like because is it already inside of a navigation page [Music] because just shell content let's see yeah it should work let's see let's see what i did oh there's a way to do this um x arguments we pass it in as an argument could also make it a separate page where you could just load it we're gonna test it out and see what it does if if that's the the reason or not behind it again i'm not positive though may just broke it oh [Music] very interesting sorry to debug failed okay oh oh oh oh oh then i stopped it did i crash it actually no that didn't work that did not work maybe it's just a page uh oh gosh i think it was froze visual studio oh okay there we go come on this would be the child page um oh yeah i guess that's true huh yeah maybe that doesn't make any sense because it would be yeah oh you're right because it would be like that would be the page inside the page that smart i think it's i think i broke it yeah you're right you're right that is not correct i didn't that's not correct you're you're correct that that is not correct now the reason i don't know why it's not showing up though um let's see xamarin shell uh oh okay uh shell.title view interesting let's get rid of this again i guess i didn't know that shell had a title view that could be it then we can get rid of this i guess that makes sense because it's the shells title view so let's try that we also need to clean up the code behind here because this would be a content page yeah that that does actually make sense if that's the case if this is the case of it ah there it is yep so what we need to do is we need to do an actual this is good to know and hey i mean it makes sense because we don't actually have a navigation page we have a um so here we want like horizontal fill and expand and then vertical fill and expand and then ideally i don't actually know if that'll reload or not oh it did where am i at what am i in i'm in this overview page center aha that's cool okay so we need something like this for all of them and then we also need like uh a line that looks actually super good it does need to be a text color black that's so cool that's so cool and then the last thing that we actually need is a line and i don't think that the line is there so we need a line and we can get that from xamarin forms workshop and i have it in here view details page i have a way of drawing a line right here it's called line perfect alright cool i think can we define the header in one place instead of multiple pages yes yeah you could make it a reusable control of course you could you can do anything uh did i do this right [Music] uh i'm not very good at drawing things that's my only pro my only problem is like i'm not very good at drawing things i thought that this worked draw a line because this is line and side of shapes this should work aha so this would actually be zero boom and this would be oh no i think this is working i think that the hot reload of this thing does not work so i think this can be this let's see though my assumption is like the shell part of it is having problems reloading no problem no not positive sometimes you get into weird states where you're like modifying little things like is the hot reload working i don't know it's hard to say sometimes let's see this would be on the overview page should be there it's like shifted up one i mean it seems to be like hmm man i thought this would work [Music] i wish i understood how to draw a line how do you draw a line [Music] line read the documentation james [Music] [Music] [Music] i know i don't want to do i want to do a line that is usually what i do i know i just i forget how to draw there's a way to draw a line that is how i do it that is how i do it um i wonder if i do because it's i mean it does make some sense it's like i really want it like this it makes sense because it's like oh i'm going from here to here what you're doing is i'm saying go from y1 to y1 but the the fill should do it right so like something with it i don't know how reload's not working yeah i don't know uh yeah probably just do a box that's probably i need to ask javier like how do you just draw a line there is there is a way to do it uh maybe it needs to be erecting i just i'm not good at drawing i've i've definitely said that before i wonder if that's what i need to do maybe i do a rectangle box see the bot the reason you don't really want to use a box view is because the he uses a thing oh you actually want this to be in a grid i think it was hiding from us i think that's the main problem with it oh crap there's this back area that's like designated to oh yeah i think that's oh you know what i wonder if that i wonder if it was actually fine i wonder if it's just being hidden from us me yeah i'm curious i think that on android there's like the title view doesn't actually go all the way across because there's room for the back arrow oh interesting hmm this is a tricky one yeah because there's the line over there yeah ios has a line underneath it by default but i think in this case it doesn't might be able to put it on there maybe no it doesn't i mean i can just use box view it's also probably fine i don't know why it's not showing up though is there way on the yeah i think you can now there's a there's a new fly-out background thing that you can do [Music] isn't this showing [Music] let's see can we do it not a microsoft intern are you a microsoft intern oh intern like internal we do have interns [Music] no xamarin forms five doesn't have any experimental flag so everything is good okay so that's good see how there's a this should totally be there okay yeah see there's a thing so you probably need to do like a margin of like negative i don't know i wasn't working before or why it's not working now uh oh maybe you do this whole thing [Music] so this is how you draw lines right i i think the other way should work fine i don't know why it's not um that's what it should look like it should be very subtle i don't know why it's not working let's see what it looks like on ios actually just see if it works over there i you know i use box use all the time i need to ask javier as to why it didn't work though because it should work uh i mean xamarin forms uses native controls and there's some areas in which maybe you don't need to create and use native controls on it um this one didn't seem to show up either hmm but like if you look at like the my cadence thing that i tweeted out like the radio buttons i just drew it kind of depends what you're going for what's your app look like you know what i mean so that's the that's the question all right let's see if we get this line working or not oh there was a bug yeah bug i think they okay interesting oops that's funny the one thing i'm using actually fixed it looks like oh yeah it doesn't it doesn't show on shows fine maybe it's the title vlc no it's not showing anything i think that's in a service release so let's upgrade our nougats because when in doubt we update our nougats okay update then i gotta go because i got some meetings to go to see if this works or not we're getting there i did see that there was a 500 service release so let's clean rebuild yeah like android's bar has that space reserved for the back arrow like it shouldn't and i forget how we get rid of that so huge memory issue oh maybe this is some issue maybe that's fixed up interesting see could yeah i don't like to deploy to both at the same time no real reason no it's not there interesting oh it's there on those oh weird hmm so hmm looks like chris there what do i swear the title view has always been an odd one to me because it feels as though it doesn't do what i wanted to do i'll fix your what was your issue oh nice there you go awesome that's what i like to hear i feel like some of this title view is just off [Music] because like ios already does the thing that i wanted to do funnily enough like this is how i want it to look so it's weird i'm like trying to like you know duplicate it it's kind of weird maybe somewhat this thing is off or maybe because i have the title set [Music] yeah it's so weird do yeah it's like it's not hmm [Music] let's see i think the spacing issue i was having earlier on android at least was because of something else but i think this should work do do i think i did try to use a grid then it caused issues that was the problem that i was having at least it was doing weird things because like this is a grid as you can see and then it was not working uh i don't know i feel like something is off on this thing if i change it to a grid it's definitely going to have as big but then it the content is not actually there oh this label is big like the height of it is yeah it is fascinating behavior i feel like the grid's height is off in a weird way yeah i feel like the title view has something is off on it [Music] because i think something's wrong with the title view i kind of feel like that's the issue yes and that doesn't work if yeah i mean that's that's better something it's like the height of the title view isn't being set correctly for some reason but it seems like this works here maybe similar all right let's refresh this and see then we can see what it looks like on android min height i don't know i feel like something's weird with the title view where it's it thinks it's bigger on certain os's maybe it's hard to say what's going on but this at least looks correct better ish i would say i mean it would be nice i need to kind of customize some of this a little bit but let's see what it looks like on android is like it doesn't have to be perfect but i just want it to work so let's see yeah there's obviously spaces on the left and right which is a little annoying i i think the box is restricted [Music] for some reason as far as like where it can draw on on android and ios [Music] i don't know why though [Music] but yeah conundrum all right cool okay so this looks good i'm happy here at least that is working um i guess like does it can i have more i guess on this is on achievements page yes i can have more on android 12 hmm [Music] my work let's see it's our way to remove margins of non-visible elements i don't know that's a good question okay so closer i mean it's just 12 i don't know why it's not oh there we go 10 no 16 looks better cool all right that looks good all right so now we can just copy paste this and ideally we would just make this some sort of reusable element but i'm at least happy with this i don't know if it's really what i want to go with long term but we at least got some tap sandwiches in there feeling good about that to really make this thing stand out though we should really make it should really go into our solution go into our other pages and make the background this color just because that'll look a lot better here so we can really see a distinguished look there we go that looks better now we actually see it in here cool we're good to go let's push this code up to the githubs uh not to get hubs but uh good clone add icons uh start profile page and what else did we do oh fix challenges page with tab view boom boom save all don't forget that and go alright everyone thanks for tuning in on this friday afternoon let's see who's on the twitch.tv and if we can raid anybody uh let's see what clarkio's doing you know community built up let's go over to the clarkio we haven't rated him in a while uh thanks everyone for tuning in i do archive all my videos over on uh my youtube channel so definitely check that out let's go raid the y'all thanks everyone for tuning in i hope you have a great week and and week and we'll see you next week bye you

Channel: James Montemagno

Views: 2,239

Keywords: xamarin, peloton, app clone, clone ui, xamarin.forms, ios, android, xamarin community toolkit, fitness app clone

Id: Tz0tUiMgZA8

Length: 126min 32sec (7592 seconds)

Published: Wed Feb 10 2021