Clean Architecture Social Network With Jetpack Compose - Twitch Recording

hey guys welcome back to new video in case you have missed it i am now doing regular live codings on twitch so on twitch i want to show you the whole process of building an app i can't show you that on youtube on youtube everything is perfectly cut together and you don't really see me struggle you don't really see me um test my code you don't really see how i approach my problems how i fix my bugs how i google for stuff and that is what i want to show you on twitch live so you can live interact with me and we will build an app together from scratch to play store right now the plan is to do two live streams a week so i'm still getting into this routine of doing these live streams so maybe that won't be two lessons a week from now but in in the next weeks i will get into this routine and have these two live streams and these are actually quite long these will be about four hours per live stream at least that was now the case for the first two live streams and these are also more meant to be watched without having a full concentration you know if you watch tutorials then you need to be fully with your mind in that tutorial to understand everything but the live streams here you can just lean back watch these and you will surely learn some things there you will see how i approach problems and that is just um much more slowed down than tutorials and obviously you can also interact with me live i can much better answer your questions there you can leave me feedback for what i do we can help each other to learn and that will also allow you to actually affect the outcome of the app that i will build in these live streams and the app that we will build is a social network for you for my community using ktor as a backend and yeah we will do all of that in the live streams right now i already had the first two live streams which i also recorded and this will be the recording here i just want to give you the short info here about this in case you've missed it that i am actually live streaming and also the announcement that in future these recordings will be available only on youtube here for channel members for a very small monthly fee um that will be 4.99 a month so i think that is affordable for most of you but yeah that is that is just the way how how i can keep doing these live streams because with the streams itself i don't earn anything and they take like a whole work day a week so that is how i try to pay my bills with that and of course when i'm twitch partner then i can also have these subs donations and stuff like that but i am not there yet and i think it will take a while until i'm there so the first two streams will be available for free so you can just watch this here free on youtube you see how they are you will also find a link to my twitch channel down there i will soon publish my streaming schedule there so you can just check that out of course watching the live streams live will always be free just watching all the recordings will be paid here on youtube for as i said 4.99 a month so i will be very very very thankful if you could check out my twitch profile click on follow and actually check out my next stream so we really want to make this the top coding stream on twitch because there are not that many already and yeah let's do that guys we will make a really cool and sick app in the first live stream you will see the mock-ups how i created these and the second one that i will also publish in the next days um i think i also just prepared this video here before the next one and there you will see how we start coding jetpack compose stuff testing everything how i basically build apps so now lean back and enjoy the stream one more issue is with the first stream 30 minutes of recording are gone sadly because yeah because of some technical issues my software didn't record these 30 minutes but three and a half hours are not lost so most of the stream is actually um you can you can actually watch that so lean back and enjoy it have fun thanks for watching hello hello can you hear me would be cool to see that in chat that looks good yeah so welcome to my first live stream have some mercy with me if some weird things happen here um i'm quite new to all this twitch stuff but in case you have missed this a little bit what the goal of the stream here is on the in the future streams i plan to do this on a regular basis is that we basically build an app together from scratch without having any mock-ups without having any planning to finally probably release it in play store or at least get it to a state that is releasable i would say and yeah that's what we're going to do you can see i have adobe xd open and in this first stream my plan is to design some mock-ups because i never start coding without having some mock-ups that just helps a lot to to build the app because if you don't know how it looks like then it will just look bad yeah the goal is just to have some interaction here if you have any feedback just leave that in the chat if you just um want me to implement a specific feature um yeah just tell that in the chat and then we can discuss about it it shouldn't become too complex because the more complex it gets the the faster i probably have to go through it and or rather the less i have to explain i can explain so yeah the goal is actually i made a survey on youtube the goal is to make a little social network with jetpack compose with ktor and that should be a social network for my community so for you so you can use it you can make simple posts there probably similar to instagram probably i will add a little chat in there because a lot of you wish that and that is pretty much it so i will show you the whole process designing the mock-ups planning it developing it testing it yeah that's basically it and releasing it i don't know if i can show that on stream there's quite a bit of sensitive stuff to show but at least um getting it to that state that would be pretty cool so i have no idea i haven't planned anything here and i'm just here with this blank project if you have any suggestions as i said just put these in the chat and i try to take a look here every now and then and also if you have any questions regarding coding regarding android put these in the chat and i hope i i see them and i see this is working ai 8 bet is now following thank you so usually when i start designing i take a look at dribble because i'm a shitty designer and there's a drill yeah i'm actually designer and i have no idea how to do good designs if you have great design files on dribble send me these but apart from that i would just search for a social media app here oh no i don't want to sign in can i search here yes ah social network for example so first of all we actually have to think about which screens do we actually want to have um so dribble is great for inspiration but i don't want to implement a design here as it is on dribble i want to have my custom branding on it um probably in my in my typical color theme but well obviously we need some login and registration that would be usually the first screen we want to have some kind of feed so like this one here for example this is very similar to instagram i don't want to make it too similar to instagram but we have a main feed we can post photos we can give them descriptions give them likes comments and stuff so that's already a similarity um but i don't want to look at like i don't want it to look like that um today what are you going to build yeah so for those who joined i will build a social network for you for my community um today won't be any coding just mock-up design because that will take quite some time and i want to show you the whole process uh figma has better yeah i like adobe xd but it's so similar um let's take a look uh i think i need to be logged in here give me a minute let's do it like this okay yeah so i was i was at the screens we we need a feed we need a login register screen we need some kind of profile we need what do we need we need a screen for for chat channels we need a screen for messages what else um to to edit your profile there probably some more when we when we build this but yeah that's that's the main screens i would say um let's take a look these always look so cool on on dribble but it's so hard to do this in practice um but with jetpack compose it's actually easier than with xml you can do much more customized layouts yeah i also want to make this a little bit coder style so rather social network for programmers so just that you can put your programming languages that you know on your profile and stuff like that because i guess most of you are programmers is search bar hard to implement uh search bar for what for profiles yeah that's that's true we need a search screen that's not so hard to implement unless you use firebase that sucks but we don't use firebase here no worries markdown support yeah would be a thing i used markdown in one of my courses for my node app course that's actually not too difficult to implement in android but i don't know how it is with jetpack compose can we watch a recording of the stream once it's over yes you can i will upload all streams on youtube i don't know when if i will directly upload these like afterwards but they will be uploaded will the app have notifications hmm yeah then it gets much much more complex because here we could do this with like one signal or so for the the chat stuff um i have to think about that i mean it usually belongs to a social network app but yeah it's difficult to do these things on stream i think um because there is always so much sensitive information involved like api keys that i can show here so if i just built my custom backend that runs locally here then that's not an issue but if i do one signal of firebase fcm stuff here um then the chances are that i accidentally show something i don't want to show thanks for the follow yams b6 now let's take a look here um i like some dark design definitely that's also a question do we want to have a light and a dark theme or just a dark theme because i prefer just dark theme um yeah they have a that's more like a chat app and voice calling and stuff i would say let's just jump into it and then you can just tell me if it sucks or not so so let's start with the the login screen um i usually let these always look very similar because i'm not too creative with these kind of things but let's let's let's start um we obviously login we just want to use email i guess email and password so let's have our email text here give it a little rounded cornice i don't know um and yeah let's let's make it in dark mode so we give this a background of maybe this that's too dark i don't know um and then these text fields um we can make these not have a fill and maybe yeah that that could be the idle state with a gray border and if we enter something we could give it this green that i always use it actually looks very similar to the social network that i uh you used to have a premium course about which is now free but i want to make it look better than that i'm not too happy with with what i did back then um and let me to let me check that link oh okay that's for for colors just yeah adobe actually also has that color tool adobe colors which might be cool for some of you color.adobe.com um no so the other stuff starts where i have no idea about how to do this for your app i mean you can just you can just drag around these things you can select color theme either um one of these modes for example just similar colors but i have no idea which one is the best for an app i'm not an ui expert um can you move your camera position your camera border in screen what do you mean you mean my my camera box make it a little smaller okay i can do that like this is it better put put a one in chat if it's better and a two if not one two one okay yeah it looks like you like it more or not i don't know i'll leave it like that um looks like yeah um yeah let's head back to adobe xd because someone also asked that which software i use it's adobe xd you can also use figma it's so similar um let's take a look we want to have a login here and yeah that should be like some kind of very very light gray you usually don't want to put um total white here on on the dark background it's from a ux perspective it's a little bit better to read if it's a little bit more gray so i think it's ee what i always used that looks fine um look at this get a bit bigger now next question is what kind of font do we use um so what i like is happens i'm gonna use that on my website what i also like is monsterat yeah that looks a little bit better in my opinion so let's give this a little bit of hint um email make this a little bit thinner roboto is also cool that's true let's try roboto um yeah yeah that looks cool use text input layout and set i i will do this in jetpack compose there is no text input layout but jetpack compose has these um what's it called i think it's just text field and they they are basically material design text fields so it comes down to the same but that would be in the end just in this outlined text field from material design so when you want to tap something then the the hint jumps to this top left corner i would say and the hinge shouldn't be white it should be some dark gray like this and also this shouldn't be green by default only if it's selected um let's make it this this this looks like it's disabled that doesn't look good um i have no idea i'm so bad at your ex design and ui design what if we take the same color here i guess that looks okay yes i will upload this on youtube and yes this will be in jetpack compose what do you think about quicksand font i don't know that let's try it out quick sander also looks cool and the bottom was this it's not a big difference but i like this actually yeah let's let's stick with that make it green what should i make green put some shadow yeah we could also that's true we could also make this have like a fill but shadows are difficult if we have a dark background what if what if we take the same white as a background this looks cool in my opinion so we don't have a border at all but how can we make this look elevated i have no idea how you do that with a dark background um so if if there is some ui expert among you text field green i think that's i don't know green background i think that's a little bit too much yeah i bought a green i think i actually like oops actually like this one let's stick with this we can always change it later copy this make the simple password and then we can make a big green button here to log in um yeah between stroke but uh we can make the green stroke when we are actually typing something how would that look maybe a little bit thicker i mean we need some kind of highlight when we're typing something but do we really because it already gives us the highlight with the cursor thanks for the follow daniel jesus um now i don't like this border i like this and i like having a green button here with but i bought a border here we can make it now let's let's give it the same [Music] for the radius as these two how do they look if we give them a little bit less boiler that looks better just five can we include motion layout but in compose um i don't think there is already an composable for that to to give our stuff the the motion behavior but you can of course write that on your own i don't know if you want that um yeah another reason why i don't want to start coding today is also that but i've heard compose gets stable in three days on july 28th and i don't want to start this project on cannery and then directly need to update all this all the stuff for the next stream would you teach k tour in stream yes of course that's part of the stream so let's give this a nice little green like this i mean it will always look a little bit different in the app in the end um yeah let's say login make this white a bolt doesn't look good like this maybe a little bit more like this maybe a little bit more like no not like this i think that looks decent um you can choose another color or text and button put your logo on top what are prerequisites for these streams not really anything i mean if you don't know that much about android then chances are that you won't understand everything but i can promise you that you will learn a lot especially once the the actual coding starts um but yeah let's i don't know if if i want to change the color here let's make it dark like this yeah that that looks a little bit better i think a bit darker green for the button um i like the screen that is actually my my color theme my green that i always use um so yeah let's leave it like that we can always change it later if we if we don't like it i already see the hard part about streaming is that i have to work and communicate with you at the same time um let's let's have a link here for signing up because yeah that's the login screen and we can say something like don't have an account sign up give this some kind of white or ee checkbox for remembering my information i think we just leave the user logged in until they log out i think that's easier i have some accent colors after the primary ones yeah the question is which one so we can use now we can use complementary colors to green which would be like orange or valid i think um yeah obviously i want to make this highlighted with but i i'm not sure if i want to highlight this in green because that could be a little bit confusing i don't know because then we have two green highlights here and the user doesn't really know where to click will we see firebase no this doesn't use firebase we will write our own custom backend will next live be on next sunday yes that is the plan sign up should be at bottom of page here it is at the bottom of the page oh what do you mean looks awesome thank you first person who said that shared element transition is very very difficult right now with compose sadly maybe they include that in in the stable build but i don't think so actually because that would probably be needed in the navigation library of compose yeah that's true that's a good guess and with the password toggle we should do that um we have some where can i get icons here um how do i search this eye yes this looks good having this icon here a little bit smaller and give it same color as this hint yeah that looks better we should also make this for the registration to be honest so we then we can actually we don't need this confirm password functionality because the user can just toggle it and see what they entered let's do it like this um i'm not too sure about this link color here if you if you come up with a with some cool accent colors apart from this green maybe some darker ones i don't know i don't think we should use complementary colors here let's just let's just leave it like that i will oops i will actually make this a group ctrl g this one as well and this one when will the stable build for compose be up uh yeah i think it's in three days what's the name of this platform it's adobe xd or i don't know if you mean the social network app then yeah you can come up with a name and we see i just called it twitch social network right now um i could also put my my logo in here as someone said um let me take a look that is a little bit big like this and then move this down a little bit and this i'm not too sure maybe try having the whole piece of text for cena be green no i wouldn't do that because it should this would be too big of a highlight in my opinion so then we have two big highlights on the one hand the login button and the sign up and i think this is a little bit more readable some green shadow i don't know how green shadow would look like where can we add shadow here um i think there are some effects here which oh that's a group yeah here's shadow it's a green shadow it's a very decent but if we increase it and i'm not too sure that is too strong are you going to explain every code line or just the essentials i i won't explain every code line this is not a tutorial here this is more like you see how i work of course i explain stuff but we also want to get this actually done i already see how long it takes to design such a simple screen here because of the interaction with you that i don't know do you like to get the green shadow the green glow if you like it put a one inch yet if not two nope okay that's also an answer then yeah let's head over to the registration i would say i don't i'm not too sure about the logo either that's too big um now let's get rid of the logo let's just center this leave this down there i think that looks decent let's uh how can we copy this here let's give this a name of login screen and sign up already so let's call it register screen this will be very similar actually register we could also say register with a register a new account make this a little bit smaller i don't know then here log in with an existing account um now let's leave it simple and for the registration do we need some extra info i mean we if we have some profile creation here then maybe we need some kind of onboarding i mean we have to think about what we want on our profile i mean we could register and then the user could do that manually later or we could force the users to to give some default info like profile image like maybe some programming languages they know i don't know should have a confirmed password field too um the other thing is we have this password toggle not i don't know if it's really necessary to have confirmed password field if we if the user can actually check what they entered no i don't plan to add google sign in this will be basic author o art no i don't implement oath here most likely jwt let's we obviously also need some kind of text to get back to login i already have an account sign in like this we have a plan to publish that training at that measured weight uh that will be part of my next premium course it's it's not a full app it's just um where i show how to use canvas and these the scale and this height measure thing will be part of it here of course register what do you think username that is that is a good catch we we should actually give people usernames let's um let's add that here then we could also log in with the username yeah but let's take email for uniqueness and the username which should also be unique but for for display reasons yeah well let's try how that looks like let's make this a username hmm you will need the email for forget password yeah i don't know if i implement program password here that would also then involve that we set up some email server with a lot of credential stuff that i don't need to show here on stream yeah probably not but i mean it's a start how do you like this in general can you give it a grade from from one to five five would be awesome one would be bad as bad as hell i don't know if i can curse here and stream yeah three four oh we got a five there thank you yeah i think we can definitely improve this um adding a splash screen yeah we could do that that's that's easy and there we can show the logo that's true so um that is register screen you can do it like this oops how can i move this uh i don't know let's make the splash screen here drag it from the title okay thank you um remove this and i will add my logo so that will be the the splash screen make it a little bit smaller yeah that's a good good catch we should change this to username or email just give the user more options and this should also be a little bit smaller i think these texts these hints so what is it 17. and here as well oops add title to splash screen which title i don't even have a name for this how long do you think this stream will last um yeah so it would be cool if we get the mockups today so it will last i guess a few hours um so i would really like to jump into the more practical part in the next stream like coding maybe like a database design i don't know if i already do that in the next stream but just yeah outlining the architecture in the next stream and starting the code i think that's what's interesting for most of you i also get a lot of requests to make ui tutorials i have no idea of ui as you can see but i mean i still have to make mock-ups here let's see what else do we need if we really make a network for programmers here then yeah as i said we either need we then need some kind of onboarding to let the user choose a profile picture and maybe some programming languages or skills or we'll leave that completely up to the user so once they registered they have a completely empty profile i need to assign the rest philip gangs yeah that's cool um yeah i like that one but let's let's uh continue designing the name is not too important right now let's take a look at dribble again so i want users to be able to post posts with an image and a description and if we want to make something we want to go crazy we could also add hashtags but that already adds quite a bit of complexity so i would say we first just make normal posts with an image and a description or maybe leave it optional to personal image so we could also do twitter like posts i think i need to be here yeah i'm logged in man this all this looks so great yeah that looks that looks cool i think this post here um but i don't even know if that is a pose so i don't want it to look exactly like instagram posts i want to have my my kind of own thing um so one idea i have in my mind right now i don't know if that looks decent is let's copy this let's just start designing one piece of post so that will be the main feed i would say yeah home screen with bottom navigation that sounds good that is simple and good ux do not add hashtags if you want any social network to be any good yeah i mean instagram has hashtags i don't know if any twitter has that as well but i anyway think that it would add too much complexity now let's take a look at how we design a post it should be wide obviously um we should make this in dark mode obviously let's remove the border first we should make this like a dark gray but not as dark as the background like maybe this yeah pretty fine text that would also be an idea so let's if there's also border radius of five i think you should always stay kind of consistent with your border radius so not that this one has suddenly like 15 and these text fields have five let's stay consistent with that um like this that's a decent radius and what i thought about we have some example image here let me take a look yeah without kermit no i don't want this like this and we also have to think about do we make this which format we use do we make this squared like instagram then we have to crop it really be able to add fellow users yes you somehow need to add some other users to your feed so you see their posts that is the main feed screen so i plan that it's not instagram so just those posts of those people you follow will appear there um so what i thought about maybe we can also give this a little bit rounded corners and then do i have some image of a use of a profile image take a look yeah man let's say that is the profile image of whoever made that post what if we make this like in the middle here then i mean it it covers a little bit of the image and not so big maybe and then we can give this image maybe a bit of shadow we can even see that shadow and yeah we could let's leave this make this a little bit bigger um why like this and then we can extend this down here with an with a description how do you like this um that post thing it needs to be a little bit tall like yeah i mean we need to think about which aspect ratio do we want and is this yeah that is around corner but i went away oh there's also around the corner i don't want ronnie corners at the bottom so let's remove that so we actually just extend this here with some just as an instagram we have like or is it heart here now do we make this no not this one do we make this white or red yeah the user can obviously have as many posts as they like or or do you mean per post i think purpose we just we just leave a single image for now green heart i don't know if a green heart looks good that's not the typical heart color i think it's either white or it's it's uh red but now i don't like this red on this dark background i'll leave it at also our font color ee and make it a bit smaller you really like red more let's make the other icons because i think only the heart would make sense to be in red and i don't know if it looks good if the others are not in red and also decrease the border size a bit can you double tap yeah we can do that that's not too difficult um so we also need some kind of comment option so my plan is actually to to only show the description here of this of this post let's get some lorem learn text i know there's a plugin for xd but i don't think i have it how can i yeah like this and then we make this our font color ee yeah it looks a bit bad because of the text let's just remove this word so that would be the post description um we obviously want to have an option to share now we have this typical google share icon this arrow we can also just do this and we want to have comments username should be added to you that is a good catch i will add that something like this and the question is where do we add the username and also there are no rounded corners let's add these here how many likes on the image yeah that of course also needs to be needs to be displayed um how it should be filled i mean shouldn't it be filled once the post is liked we someone need to indicate that if the post is liked or not these icons here they can be a little bit smaller that's true like this and i mean in the end it will look kind of similar to instagram but it's okay let's add some text for the username um like this and we of course need to change the font size here because i don't think it shows which one did we use here quicksand yes the username should be bold and quicksand is there even a difference no okay we have to select this no there's no difference looks like there's no bold version i don't know hmm and where do we add how many people like this post change color username to green yeah that could be an idea yeah i actually like that we could also take this let's group these and drag them over to the right side like um like this and maybe a little bit more down and then we can i don't know where to display the list of people who liked it having the dark beef at the heartbeat filled would make the icons more consistent that's true let's see how it would look like if it's if it was filled yeah how do you like this here's the username size let's try this as well and this description obviously needs to be cut off at some point um question is how many lines do we show what if we do like this and then we can add something down here and i also want that you can click on this post to see everything so there's also post detail view and there you can then add comments yeah three lines is cool what if we add down here how many like this let's try this liked by whatever 15 16 people and can we quicksand there's also quicksand this summer needs to stand out and sadly i can't make this fun bold the question is if we really want to use quicksand if we can't make it bold with more button yes that is we could do that down here we don't want to use a real button for that rather just a label just text i think a button would be too much for for each and every post but i'm still here at this text how do how do we make this text stand out i don't want it to be green because we already have the username in green let's see if we make all of this in rubato do you like this font more so i think we can make this one bold yes then it stands out a little bit and i don't know if we should we show comments in the main feed or should we show comments once we click on the post i mean we can add a little comment count here what if we do it like this and say like seven comments and then if we if we click on these comments then it's basically the same as if we click on the post it would be kind of gray but darker um you mean this text or other read more but nothing let's put this down and yeah where do we add this read more button maybe center it i don't know if we say read more and make this a little bit like this and then move these up move this up i don't know if i like it being centered at the end of the text yeah it's probably best if we do it like instagram yeah let's do it forget about that so we let's let's do it like this and then say read more should we capitalize it i don't know yeah let's do it and then we make this a little bit darker like this and then we still have this profile picture here which which differentiates us from instagram i think the size is actually okay for that so if we either click on this profile picture or on the name we get to the user's profile here we have the obvious actions and for the rest we actually get to the post where we can then add comments looks good okay looks like you like it then let's think about what else do we need we have story no probably not i mean we can always extend the extenders later i really want to make sure that we actually make an app that we also get done in the stream so this shouldn't take like half a year to finish because yeah it really takes a long time if i code and interact with you let's care about the bottom navigation i would say i will group this move it a bit to the top it's also the question if we want to have a toolbar not sure let's care about the bottom navigation first um yeah let's no let's also make this a bit darker here like what did we have for zero for zero for zero so just as the post and so which screens do we have i would also like to have a floating action button in the middle of it too to create a post um i don't know how we can do this in xd let's try this so i want to cut out an error here i think we can somewhere i hear these these actions but i can't do this the picture should be some kind of border green that would also be an idea actually let's try that oh yeah of course it needs to be round like this i think i think this this puts a little bit too much focus on the picture and not too much on the actual pose to make this oh that is already the the thinnest version of the of the border we can try this in compose later there we can make the boiler thinner but i'm not too sure about this um let's try to fix this if any one of you knows how i can use these intersection options here i think i need to oh okay i need to select both how do i do this yeah that's it um let's let's make this a bit bigger so we cut out a little bit more i like this and then we can make another one that fits in there and that can be green should not have a border how do you like this i mean with compose we can also make our complete custom bottom navigation so we don't need to use this bottom up bar i think it's called um that would allow us to do this the tuba cutter looks a bit too sharp yeah we could round the corners can we i don't know how this works but can we do this now yeah you see i don't often work in xd here let's leave it like that for now and add an icon here this one i think that actually looks okay we could also um not cut it out and just have this floating action button in the middle and with a shadow i'm making the icon white no i like dark more we also have here i have this dark and green here as well so i would stay consistent with that let's add some icons for our screens so so we have our home feed do we have icons for that posts you could just give it a home icon but this and give it the border color of ee and when we select it we make it green like this so when it's selected it would look like this i think it's yeah it's better if we if we do it more more gray and maybe a little bit smaller i don't know should we add text here or just leave the icons let's add some more let's have one for the chat this now let's try this one and which color did we choose let's copy it yeah that's fine so what else do we have we need something for a profile home chat profile settings i don't know if i want to put the settings in the bottom navigation view we could have that just in the profile screen search is a good keyword we need a search um i also want these icons to be a little bit smaller like this notification button that's also interesting that we have an activity feed home search notifications profile but where do we put the chat we can put the search in a toolbar actually so if we take this pose drag it a little bit down have a toolbar swipe left to chat that is too instagram like man we want our own social network um have this this color and here we can then add a search icon um let's take this so i think this would be okay i think this with our um ee a little bit thinner um oh that's not that's not the border what if we give it a border oh let's pick a different one ah why not make profile into about that would also be an option but i mean we have to ask ourselves which actions are probably used the most and i think you rather want you're more frequently on your profile than you are actually searching someone so the profile should in my opinion be in the bottom navigation view because that's just what you need the most um how does this look like it's a little bit thinner and that's okay i think a little bit smaller yeah also do we want to put some some text in here for the toolbar no i most likely won't add stories in this app um let's add some text like your feet and this is roboto that's fine have this a bit bigger that's okay in my opinion and if we never get somewhere we can add a back arrow here yeah that's okay let's get back to the bottom navigation um so we had an activity feed can we get an icon for that um which i can should we pick for an activity feed actions hi david i'm using adobe xd and welcome the bells notification that's a good idea let's uh not belts bell let's also pick the outline one um like this that looks cool and finally profile um a person yes just the material design one or yeah actually i would like to have an outline person because we only have outline icons this can also be a little bit thinner but there oh here is a person outline here we have one yeah we would need to make this a little bit thinner in our code but i can't change that here next d now because it's not considered a border but i think this is this is fine and because we're here in our main feed we need to highlight this green waiting for the fun part yeah same here i want to code but this is just what we need to do before starting do you think this is enough for highlighting it or should we add some maybe text or background you can add underline let's try how that looks like yeah that could be decent and yeah i like this how do you like this background circle hmm let's try struggle now i think the the underline is better i like this let's group these and i mean that already looks fine we're improving this looks very basic here the login and register but i like this feed but let's copy this and have another post down here and this down we could also give this this thing here a shadow add some numbers on bell yes of course we can do that um yeah we can also do it here just having should we make this now in green on red let's try green first and then having like a six in here yeah i like this yeah yeah let's leave it like that maybe put this a bit up here i mean we can we can worry about the details later let's get to the next screen what else do we have we have a chat screen what if number goes to double digit i mean double digit should fit here right we have to make it centered it would fit and would this fit for that we would need to make it a little bit smaller so that would look okay i think nine plus would be a little bit too less for for cutting off something i think this looks okay with a 99 plus let's get to the next screen we want to get done here we want to get it done here today um so we no let's first add the screen if we click on a post um then in this screen i don't want to show the bottom navigation view and i want to have a back arrow like this make it smaller question is what do we put on the for the headline here for the post detail and i think here we also don't want this posts to look like in the feed are you going to make a video calling option no way i do this here no sorry when will the session end oh it's it's kind of open end i have time today uh it will last quite some time because we it takes some time maybe if we don't get this done today then i will continue the the ui part here in next sunday but yeah i want to get done as much as possible today so i kind of want this to fill the whole screens with and this looks bad like this and i think i stretched everything here let's just stretch the image and move this a bit downwards yeah of course we we need to show comments that will be implement here let's but the question is how do we display this do we want this background for everything this little bit lighter gray or do we want this main background here for everything so we could do it like this i think this looks better and if we do it like this no this does not look better i would leave it like this that we have the still the dark background on top of that let's take a look at the comments first of all if we have more text here then we want to remove the the read more so we just want to display the whole description here in this view we don't want to display the comment count because we display the comments here we want to display how many liked it derek looks good so you mean this normal dark here this this background of a wrap see if we oops did i do um like this i'm not sure because here we have this this um a little bit lighter gray for our post background then i can i kind of also want this here so how do we get this bag redo is not working let's make a new one i kind of like this more to be honest but we could also think about is that we reduce the size here but not of this that we do it kind of like this now that looks bad that looks bad let's not do it like this i think it looks okay let's worry about the comments so for the comments um the question do we want to show a profile picture for every single comment or just use a name [Music] let's try having proper pictures and can i do this yes i will hit record again but now we are missing like 30 minutes i don't know how far twitch saves these i know that twitch can save these that you can also watch these on twitch later and i hope i can download these from twitch oh yeah now it's recording again it's well um 30 minutes is like not on my pc right now now i am smart up for the next time but i will take a look at that anyways let's let's take care of this um but i don't know why it just stops recording in streamlabs i mean i i just look the the video file is just 1.6 gigabytes that's not too big for a video file um yeah i think it's we make the text a bit bigger or not let's add some lauren text here will you have unsend option no most likely i won't like this and we would like to also have some some time we could put this here like like this think that looks okay maybe a little bit darker i think we should first of all only implement text messages here um this is already very complex what we do here um but clean architecture is something that allows us to easily extend it later so if this actually turns out as something that you really like these streams and if if these streams could uh consistently get quite some viewers and i'm totally open to extend this app let's do the same for the other message i don't think i can modify this now oh i can perfect uh center this make this now that color give it a shadow this one should also have a shadow isn't the green on text too bright i don't know i mean it's kind of the theme if we zoom out i think it looks cool um let's design some messages first and then we can take a look make this like oops didn't want to move it something like this this should actually be earlier and we add the text here we can try around with the colors let's just add some messages i will group this move it up a bit and then let's just extend it here and also make take this thing here it and no and this one um enter a message so let's let's play around with the colors i see there's quite a bit of discussion going on there let's also do it like this with this here like this um yeah so i definitely agree that this is bright question is if it's too bright so someone said it should be a teal color where do i get teal um that's but that i don't know if i mean that's not teal what does it exactly look like or color code um um how do i get the color code here seven five four times f um but that's i mean it is it that yeah that's totally different from the rest of the app okay someone sent this color code a teal is a little bit darker actually this one yes that what if we take a green but a darker green like we had this one and what if we take this and then we can make this white and would that look all right at this background of the message box should be lighter yeah if we it means something like this and this how do you like this no i mean compared with the rest of the app the the thing is we only have green dark and white we kind of need some extra color for that what if we what um what if we use this kind of white this only like this the sent button is just um in this color as long as we didn't enter a message once we enter something and we are ready to send i will make this green in the app so it looks like white is better let's let's leave it like that yeah that looks cool and then we also if we enter something and this is green then this kind of stands out to actually send something so that's fine i think overall this this actually looks decent right now i mean login registration is very simple and basic but these four screens are okay in my opinion can you make arrows smaller whichever the top one ah the triangle thing okay yes let's try that yes that's better thank you it's quite thick yes it is i think it's cool let's let's leave it attack like that which other screen so we have we have notification we have search left we have profile left and maybe edit profile so let's do the activity next i would say so we take the chat screen and copy it welcome noodle man thanks for the follow um let's do the activity next the stream is being recorded right now there's just 30 minutes that weren't recorded but you still should stay in the screen in the stream um the notification screen will be similar to the chat activity will it question is what kind of notifications do we want to show and that will be really complex i don't think we should have an image there let's just copy this and modify the rest i don't want an image here it should be similar to instagram i think that we don't show too much information here just hey this person liked your post hmm yeah let's so for example like your post then we don't need this text let's first duplicate it uh i really want to make this a little bit more simple so even if someone comments i don't want to show what the exact comment is i just want to show hey this is what happened someone like you post someone commented and that's it yes i don't need that second line that's true i want to remove it so like this when we click on this then we get to the corresponding post and commented on your post we need to make this a little bit smaller look like this it looks okay remove this one i think it's it's really as simple as that what if we highlight this a bit and your post a bit so we can click on the post to get to the post or we can click on the name to get to the profile are you going to use ftp again i don't think so the name should have more emphasis yeah we i think green would not fit too good here because if we have a lot of notifications here the whole screen will be of green text what if we make this just bold and the rest not bold this looks okay yes that's the plan to to click on username open the profile click on your post open the post i think it's cool so oh we should add uh we should edit this your activity your yeah i don't know i think this looks okay kind of like this it fits to the rest of the app also i wonder if this is a little bit different gray than this so i wonder if we should pick this gray for everything or this gray what is this let's try this here do you like this more i think we should stay consistent here let's make these chat bubbles in this gray yeah now it's consistent okay next up will be profile um so what are you missing the search the profile and editing a profile but that's pretty much it then so i will take a five minute break now and then i will be right back and we will implement the rest so see you guys okay welcome back so let's implement the profile next um let's first rename this to activity screen so i think the profile will be a little bit more work depending on what information you want to show there um which do we copy um let's copy the main feed um okay now let's put it down here how long will be the stream until we're done here so yeah we still have the search which shouldn't be too different from the chats chat screen i would say except we don't need to show the last message and the time so just use us basically and we need to implement the profile which will probably take a little bit longer because there are quite some details and the edit profile stream screen that's it so i guess like 45 minutes from now and i will also make a little q a round at the end like for 10 minutes or so so just general q a like i do on instagram but here i can probably answer some more questions so that will be the profile screen actually do we need two profiles screens so we need to think about does it look different when we're on someone else's profile than when we're on our own are there many differences a github profile that's also an idea yeah that's actually cool we can we can make a little github icon okay let's let's try that let's remove this let's highlight this remove the underline okay um then how do we do this let's let's take this just for copying stuff what we could do is take the pen here what if we do something like this something a little bit round um that won't be a hundred percent symmetric here but let's try that just having some kind of background here how do i give that a background what if this stays dark and this no this should be if it's on top of it it should be lighter so this one and it should be on here then i thought that we take this profile picture i mean it's not totally symmetric in the app it would be and we make it like this something like this maybe not this shape greenish background now we could also do that yeah that doesn't look bad light green no this is too bright let's try that i kind of want to show a bit more information this is very very simple here let's search for profile screens um like this oh come on okay um now you had this one i think and like this oh it even shows your skills html by the way should we also have a screen that shows a list of who you follow i think we should but that's also very easy it's just a list um yeah but i want to have profiles here this is a cool one we could also have such a profile banner like an image that we can choose how do you like that let's let's see we remove this [Music] that should be out of the group and we say we have like a banner here and let's add a photo in there like this and we put this down there okay that looks bad because of the photo let's take a look if i have a better photo i think i do this one how do you like this and we could even do it like well not like this um how can i make sure that it oh i even want this yes that's true but i need to copy this first like this and then we can make this a bit smaller can you use alpha value for which background you mean this one or i don't know why we should reduce the alpha value there but i kind of like this what if we give our image a border maybe not green but white then we even don't need to crop it so if we make this a bit bigger gray that's probably better that's true not this um the body it's also not what that's not what i want i think it's because the image is not perfectly corrupt it doesn't matter here in the app it will be so we could make it like this yeah gray looks cool it's over yeah it is i don't know why let's let's try that again and let's oh can we remove this again let's revert all of that remove this like this and now make a perfect circle for our image that looks better now it's perfect look at that beauty um so is it too big a little bit smaller i would say uh yeah and then we have our name it's not in center you are right questions do i don't think we should leave the name in green here we should just make it kind of white and bigger and centered cool i mean we can even leave these um these posts here because we also want to show the posts in the profile uh let's not worry about that for now let's just have a text for the bio without read more here we can just limit the the character count and yeah we can add some social links as someone said with github that was a cool cool idea do we have github icons here oh we even have one here perfect so let's add this um don't know where to add these yet let's just make it white yeah i want to put a link in this bio i just want to have a github icon when we click on it we get to the profile like this and we can also add for example instagram we should make this center to your right question is if we want to center the text like this and like this yeah we'll get to the posts in a moment we will then take care of this image and stuff so what else we want to show some skills i guess just some programming languages for now predefined ones linkedin that's a good idea [Music] um probably this one i think that's okay for the social icons here on top we want to have like an edit option only fans yeah we shouldn't forget about that um take this that's fine change your feed to profile that is correct your profile i mean we have to um keep in mind that this is now not only our profile but we will adjust the information if we visit someone else's profile then we of course don't want to show this edit option and we want to show the profile image here yes for other people of or do we i mean if we're on the profile anyways i don't think we need this so like this and but first of all i want to show some skills like this put skills in here and then we have some some kind of a list i think i have some vector graphics for programming languages um yeah i do we could make the skills or we could make it top skills so we could say we only always show like five skills that are all listed here as some kind of badges or we could make this a horizontal scrollable row edit should be replaced with settings i don't think so because settings is more like you want to change how the app works and not you want to change your profile let's take a look which other languages we have no i don't want to put java in here javascript is better this we have good old kotlin best language in this world this we have what else that is python yes that's all i have i mean for now i can add something like android but this is not a skill that i will probably list there i mean we can easily edit this it's just a pretty fun thing um let's add some more space make this i want to center this why i didn't pick category on twitch i have no idea how twitch works this is my first stream what should i pick there is there a category for coding here on twitch because it always wanted me to to select a game or so yeah that was just about to do that that's better and that will just be a scrollable row so we add some more i think that is something i will just do off screen that i just research all these vector graphics and put them server side when we're actually at that point science and tech category yeah i will choose that for the next time i just hope that twitch records my stream or actually saves it [Music] so we can now actually have the post here questions do we want to have yeah we want to have some posts or some texts you need a place for settings yeah questions which settings do we even have so what we do need is a logout option we could just add this also as an icon here but i don't know which settings we should add here and do we want to add some background to these images i'm not sure i kind of like this and do we want to have something like phillips posts like this log out on long click on pro like i think that's a little bit hard to guess so if you don't know that how should you possibly know that you log out if you learn click on the profile picture videos are not recorded by default on twitch uh that's not good so i hope then next time i can make sure that it is and this time we're missing uh 30 minutes sadly on profile and bottom navigation view i think that's still kind of confusing i would just add up and add an option here in the profile screen on top of the in the in the menu bar so like is there a logo i can yeah like this thanks for the link i will take a look at that later now it's too late anyways i guess or is it maybe let me check that you can't see the whole link and i don't want to open it now i'll check that later added i can write your profile image that's also an idea you mean like this maybe here like this yeah i kind of like this setting setting okay now i give you your settings icon um like this but i think we should swap these or we make this simply an extendable menu so we just have these uh how's it called just these uh three dots we click on it we have settings and logout so then we directly know what that that actually does so i think that's better usability wise um so menu what this how is it called their names for these menus not menu designs i wanna oh hamburger menu that's the with the bars right this one do you know how this menu is called with the three dots so you can search for that hamburger man you know that hamburger menu is the the long one hamburger menu i don't want this i want this this typical android menu is there i think it's keep up menu not what i was searching for uh more about menus ah doesn't matter let's let's make our own one ellipses is it called ellipsis menu or what here this one it is called keep up menu so i wasn't wrong about that keep app okay it still doesn't give us that um and menu is yeah it doesn't matter let's make our own one because we are independent just like this that's probably too big oh like this i mean in the app it will look fine anyways and i think i want to center this i think yeah how do you think that looks like someone said that's clear that it's phillips posts i agree with that please record next streams with different qualities can't you pick a quality level in twitch or can you only see what i stream only option okay yeah i have to have to look into that i think there's quite a lot of stuff that's not optimal right now but it only gets better by actually doing so i will actually write that down as a little feedback so things i need to look into give me a moment um open my notion here so on the one hand we had i have to look into recording streams and on the other hand showing streams different quality so but is there an option to pick a quality level so if i set that up correctly so do other screen streams have that youtube offers 4k too yeah i think with streamlabs i can also just show i can also just stream to youtube and twitch so maybe that would give us a little bit more views um do we need that post keyword i don't know do we thing is how does it look without i think it's yeah it's cool just like this i think this looks actually decent the the profile i like this banner here on top the language icons would be better smaller which language program languages let's try that yeah you're right that looks better think like this so yeah is that actually it for the profile screen i think so now we also want to have the option to edit it when we click on this pen follower isn't following you're right thank you and also we want to have a send message button question is where do we add that i would add it quite on top so probably below either below the bio or we make it as in as an icon in this bar in this row we also kind of want to show how many followers this person has right follow us to the left following to the right yeah that's the one thing but we also want to have a button to follow and we want to have a button to send a message let's let's try that just have a random number here and like follow us that's i don't like this if we have some kind of bar that goes that just lies over this overlay a little bit and over this background a little bit and there we put in the followers there i don't know that is experimental let's try that i mean like this and obviously it needs to connect here um let's let's do like this and nope like this this doesn't look that good no no no we don't do that well we add just one more row here what will happen when we scroll i think it's just an asset scroll that we implement here i don't even know how difficult that is with compose but it is possible i think so just that everything scrolls to the top we could surely have some cool animations here but that would probably also make it quite complex i know motion layout but it's we will use compose so let's let's just try something let's just move come on let's just move this down and have an extra section here or better move it a little bit oops together then we have followers following and posts yeah it's kind of difficult that that doesn't look that good can we move links onto the banner um you mean like youtube does it yeah let's let's just try that if we have these links we could have some here and some here and then have some gradient you know just uh how do we do this no i think i need to need an overlay here so we say we have a linear gradient here from the lag to transparent and we make this why is this white i don't know why it it makes that white yeah but i don't think that would look that good i mean moving that onto the banner would look fine as long as we make sure it has a dark background at that part so gradient would work but we could also do it like two here and two on the other side that's something like facebook or so but i'm not too sure about that to be honest [Music] i think this looks good what exactly do you mean when it's on the banner or as it is now let's also yeah let's first add the buttons and then we see how we get these here links in toolbar i think that's too much of the tool but to be honest um let's take such a button i'm not sure if we want this in green but a little bit smaller hello where do we put this center it thing is we also want the button to send a message we could also make a message icon i mean what we can do is we can just take the send message icon instead of the pen icon because that will display when we're in our own profile and the send message icon will when we're on another profile do you like that i think that's how i will do it um if we do it put this here and the follow button here ah that's difficult but this might actually look good in the app we just make sure that we have a little bit of gradient here hollow button in two but i don't think so i think that looks doesn't look that good can i either like it like this or we center it so we do it like this centered oh it is but this is not centered it is okay doesn't look like that this is not centered like this i think i will leave it like that for now we can still add this later uh edit this later um i have the skills here i will edit here this is better you think that we should move the skills maybe to the other side how about that then we have to limit the skills obviously maybe to like three top skills that looks fine let's let's just say we we add the top three programming languages like this and then just have the posts here yeah i like it that looks good now that's cool let's let's get to the edit screen so we can actually get this done copy this and that's basically just a bunch of edit text i would say i mean we have the profile image to edit it we have the username let's not do it like this instead have edit text for that take this put it here like f the username probably a bit like this what else do we have we can add uh edit what can we edit we can edit the banner if we click on it we want to add skills i think i would just have like a a row here for the for the skills and then we can just check them like a checkbox so oh we we just chips something like chips so we say we have something like this make it fully rounded and let's say we have a border for those that are not selected that's too bright just a bit like this and say for example kotlin yes we should give this other circle the same color and then we just have a bunch of chips here let's take java so for example c sharp let's add one more just to demonstrate this you can also make this more like this if the text is short and let's add c plus like this and if we if we select one of these then we actually highlight it in green we should also align this properly um so let's say we select kotlin then we want to make this green and for example c sharp yes i think that looks cool we should also put a headline what it actually is so let's move this over select three top skills obviously in the in the actual app there will be more skills to select then we want to have um text fields for the links so let's do it like this and here we have instagram profile url i will probably add these texts edit this text later but just for now that we know what belongs in there linked in and github bio2 that is correct like this and that's pretty much it i think i think we should also center this because we did this here as well like this yeah and maybe put this here this here and it's not centered man why why is it giving me the feeling that it's not centered but this this is definitely centered now but this is not now it is okay i think it looks cool here we want to remove this menu and say edit your profile add a back arrow like this i can prefix this yeah we can do that we can add some of these urls here should we we can make this maybe put this here i think that looks better outline text box thing is if i add a text box then i want to stay consistent i want the text boxes to look the same in my entire app and here we have tried around with that with outline text boxes and in my opinion this looks better we should we should stay consistent with that i will just drag over the icon here not this one come on give this put it here come on you actually have to perfectly click on the contour come on okay now that is linkedin and this one should be here like this okay we can remove these so i think this looks cool yeah this is still running that is that is real business here let's show florian what we did here look at that that's not an app i don't know we can put skills in scroll view yeah we could do that i don't even know how many skills i will add here maybe like 10 to 20. i think then it's okay not to do it in scroll view so what are we missing just the search i would say flow layout yeah we we can do that all then in the app save button i mean i would just save the changes when we click back or or we do something like a safe button here i think that's better that is true i like a check mark is better i think put this here yeah that looks fine make it a bit smaller yeah let's let's just get to this church now here we don't want the search icon so the search will be very similar to the chat screen search screen and this is this is our edit pro file screen search for users here we don't want this bottom navigation view we can keep this we don't need any of these so just name which we can make a bit bigger i don't know it's a very simple search and we of course need a search bar let's take this one bio or status in the search bar we could do this the bio is quite long we would need to cut it off after like one line follow button at the end that makes sense i kind of like showing the bio a bit let's take this put it here and we cut this off after like two lines hmm i'm not sure if i want to add something to directly follow here i think i'll leave it like that for now put this here and duplicate it um you really wanted me want me to add this follow button okay let's do it follow person that one here yeah i fully agree that this is better but i still have to keep the complexity of this app in mind because we will still do all of this on stream but i'll do it let's make this a bit shorter like this before we leave the bo the bio out completely no i don't add a search button we will just make and make a search as we type just with a little delay we can we can yeah we could make this green when we want to follow this person and we can make it red but then this plus should then we need to swap this icon out with i don't know i don't like the screen to be honest i will just leave this and when we follow someone then we will have a check mark i will take this now we will have a check mark we have here so when we follow someone it will look like this and we can then click on the check mark to unfollow or i don't know if we want to unfollow here wish you a good night's scroll um why can we replaced with followers and following i kind of like the biomore because it tells you something about the person followers and following is just doesn't tell you anything about the person i think i'll leave it like that and we also need this we have the same for when we click on on such a an element here we want to see the the following people follow us i mean it's the question if you want to see that and also we want to see the likes the people who like the post i'm going to click on that this is going to take a long time to go oh yes i have no idea what i'm doing here but the co the coding is actually fun and it doesn't matter if you um watch this from the beginning on or if you just jump into it when we're already in the middle of the project you will still learn something so yeah so the the chat and messaging stuff is definitely something i will do at the end because that is quite complex because it involves web sockets and stuff um that button screen still needs to be designed which add button yes i want to make everything in compose yes at post one oh you're right ah that is so much um yeah let's do it um which is the most similar one none of these i would say i think the edit profile screen create post screen but that's simple that one is simple pretty new post the the check mark will stay the same this is not necessary this is not necessary these are not necessary we want to have a picture here for the post image let's remove some of these and give this rounded corners on every corner and then we can just give this post a description like this remove this remove this and there's our opposed screen yeah i mean what else do we need nothing right i know i i won't add a gallery section here that's that's too much i will just open the the gallery from from the device in an external app um the the bio is not important when we actually make a post because we know our bio of course it will show when no it won't show for other posts it's not relevant i mean it's relevant on profiles but not on posts oh that's what you mean you're right um yeah your description i would say thank you yeah but that's fine and if if the post is not showing then yeah let's let's remove the image here how do we do that let's just make a new one so we know how our image looks like we just make the water radius here i don't want it to have fill i want it to be like this and we add an icon to add something here i think this looks cool this and it's the question do we yes i think it's lighter it's a bit better like this maybe we add an image cropper from an external library i don't know yet what makes sense here and i don't like the circle one actually just this one yeah that looks fine okay so now we can create posts so the only thing that's missing is a list of people in the end that is what we have on our search screen because no matter if we click on following followers or on like buy it will always display a list of people and a list of people will just be this so that's just a screen with a list of people yeah there is a lot of empty space that's true because we don't add much information for each post but yeah what should we put in that empty space i don't know but i will copy the search screen now just make this a like person list screen here we can uh just adjust the headline for example liked by we don't need the search bar but we just want this list oops like this and is isn't that it would maybe center it yeah we could think about that like around this yeah now it's centered i'm not sure setting screen i don't know which settings we want to have here i don't have any settings i want to implement i'll leave it like that everything beyond this makes it makes it too complex it is already too complex for for his live stream but we will do this we will do this it's fun and coding will be much more fun so here is a little bit of a screen a typo what is it um post detail screen no also no no categories that would also be too much um i wonder here if we should make this smaller like this and give it rounded corners and put this like up here no let's leave it like that a light or dark theme toggle is missing you have that in your phone i'm not going to implement that now and i also don't want to let them here because that would require us to make all that again with another theme but it looks cool if you ask me so i will consider this this these markups done for now maybe we changed some details later in the app but i really don't want to add anything more in terms of functionality to this just if i change something then just to change something and not to add something will you jump into back and after design i will do backend and the app probably simultaneously but probably the first thing we do is just implement the design in the app just all the composables and stuff that's usually what i do first but i'm also quite new to compose so yeah i will also learn a lot with this project so what database will you be using that's another question probably mongodb that's simple do an xml uh no sorry i made a survey on instagram people wanted me to use compose either mongodb or postgres postgresql one of these i'm not sure if we need very complex queries here then an sql database would be cool but mongodb is just so flexible you can just change stuff and nothing breaks yeah so i will i will now answer some questions for like 10 minutes or so and then i will end the stream so it it was a lot of fun to design these markups i hope for you as well so if you have any questions as long as i can answer these it shouldn't be something too specific but yeah similar q and a as on instagram would be cool what are you going to use for hosting heroku um no probably my my own ubuntu server i like that because it's just it's cheap it's simple and on heroku if you want to use databases on heroku i think you need to use these you need to pay for that a lot of work for you with the chat that's true that's why i do that last so i can barely estimate how long this will take at all but i also plan to make more frequent streams so not only like once once a week um so this week uh the following week i can't because i'm i'm not at home the entire week but from the week afterwards i can maybe do like just more streams maybe like three a week for the first first few weeks and if these streams are really all like three or four hours long we can really get this done um what days will you be streaming good question so i think we can keep sunday for now as as a day so next sunday i will be streaming but then i will also stream yeah which days i i think i will just i will just post about that in my instagram story once i thought about that is there an alternative to android city yes you can use intellij but it's not recommended because right android studio is just specifically made for android development and intellij is a little bit lighter so if you have a really shitty pc then it might be worth trying out but i would always use android studio if you can and you can if you use flutter and stuff you can use visual studio code put your stream scheduled instagram yes either instagram i think i can also put that on twitch itself will you updating in github yes i will put this in github and i will also take a look at how i can set up a stream bot so you can just get the github url here in this stream chat with commands you're going to take pull requests um no i think i will do this project here alone in the stream but i will always consider your feedback as you probably noticed in this in this video in this stream because yeah i really like that because we really made this together there were there was a lot of stuff that i made that didn't look good but i didn't realize it doesn't look good so you told me that and we figured out a way that actually now looks quite decent what is the best resource for android development there's a lot of stuff on youtube is old yeah i mean what should i say check out my youtube channel my cotton playlist isn't deprecated my android fundamentals playlist is mostly not deprecated it has some deprecated videos like intent service i think but most of the videos aren't um it was a good stream experience yeah glad you you liked it thank you the next streams will be more fun i promise that we will actually get into coding and you will learn more because i of course know the coding part much better than the designing part but this is just something we have to do here data store instead of shared preferences yes i like data store and i'm not sure is it already in is it already stable i think it's at least in beta so for production apps i still use share preferences you can't go wrong with that but to in personal projects i use store it's just cool to to use these with flow it's an uh release candidate okay it will be soon stable i guess compost versus xml 2021 xml i made a video about that if composer's production already and right now i don't think so let's see how it is unstable i don't know if they add some more features into it or if it's just officially considered stable but there are quite some things that you like to have in apps in many apps but you can't edit and compose like for example shared element transitions or diffutal animations for recyclerviews so if i do freelancing apps i always use xml and probably will do that for quite a while unless it requires me to build really custom ui because for that compose is much better i'm already stuck between flutter and kotlin let's see an extreme and i will decide about it see the stream and you will decide for kotlin wouldn't it be easier to use firebase for a database no i hate firebase it will backfire because it just comes with some weird limitations like for example we couldn't do this simple search with firebase it's not possible it's only possible if you use third-party providers like algolia but you can't make files to queries where you just check if a string in a document contains a specific value so if i just search for lucknow here then in firebase there was there would not be any way to find this profile that sucks will you do a cache in the app nope that would be too much compose will take time for developers to get into that is true same for me i also take this stream here as a learning opportunity to actually work on real projects while still putting out content let's make videos on building customer with compose yes that is on my list my next paid course will be about canvas with compose but i'm also waiting until it's stable with that any plan for kotlin multi-platform content uh not really plans right now but it is in my mind so i plan to buy a macbook once the new macbooks get out the new macbook pros 16 inch i probably want to get one of these and then i can also make km stuff but also it doesn't make sense before composer stable i've tried it here on windows and it's a pain to get the versions right is it okay to use deprecated functions or classes and no way i wouldn't say so otherwise it wouldn't be deprecated they will work but deprecated just means hey there's a better way to do it and in future these functions might be removed what will we do next week we will um implement we will think about the database design that we need i have to think about if we use mongodb or an sqldb if we have an skldb then we will make the database schema for mongodb as well then we just don't have relations and then we will jump into coding think about the architecture bye bye red death bk thanks for watching and hello yakko vmm um you are pretty late i'm going to end the stream in like five minutes but the next one will be next sunday have you ever been to croatia no but that is on my list it's not too far from germany didn't get the notification what did i miss you missed how we make made these mock-ups for the app that we will build in future streams it's a social network for you guys for your community we have a main feed with some posts of your of those you're following we have a post detail screen chat screen messages activity like an instagram and yeah profile and stuff like that will be quite a bunch of work actually i'm glad that she decided to come back to endodev with composed content yes of course android is android is the best with kotlin single activity pattern yeah that's that's how you do it in compose compose only needs one activity creator of great i must die in hell yeah well that will also be a pain in the stream we could always make q and a's when when gradle is building that's cool i hope it doesn't drop frames or so is the streaming going to be available to review yes theoretically but for some reason um my streamlabs didn't want to record one part of the stream like half an hour of it is gone but for the next streams i will take care so i recorded everything except for like half an hour and that will be on youtube what are you using for di i will use hilt and for ktor i will probably try using coin never tried that with kator but makes sense yeah alright guys looks like that's it thanks for everyone who watched all of it and also thanks for everyone who just joined and yeah checked out the stream i'm very happy to do these future streams i think it will be a lot of fun it's also some additional content for my youtube channel which is cool so everyone who missed it will also get to see it and yeah thanks a lot i wish you an amazing evening morning wherever you are and i hope i'll see you then in the next streams on next sunday probably same time 4 p.m central european summer time but i will announce it on instagram and probably on youtube as well so bye guys was a lot of fun have a nice day

Channel: Philipp Lackner

Views: 10,887

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: aIGY1tWekGw

Length: 199min 25sec (11965 seconds)

Published: Tue Aug 03 2021