TOA 10: Handle Login Success And Tweaking UI

and now we can go back over here and check on this build wait for this to build waiting and waiting waiting classic android stuff anyone uh i know i'm working on anything exciting this week or got some fun stuff we got rocket league coming back this weekend nhl hockey came back yesterday rangers are playing tonight my hometown team the red wings their first game is tomorrow night um i'm excited to watch some sports this week i'll probably go watch some sports whenever we're done streaming media why is this taking so long this actually should not take that long i don't think um we like barely changed anything and it's such a small app but gradle gets confused sometimes so what is component activity that is a great question um this i have no idea because i just use the uh compose template oh i think that's a compose thing yeah it is a compose thing and that's where the set content method comes from i think that's the short answer um yeah you need to use component activity to be able to use jetpack compose um i think unless there's another workaround but uh when i launched this i basically use the android studio wizard to create a template and i clicked compose template so that's what we got all right so i think i remember seeing this last time uh we have a little bit of bug here and that this progress bar seems to always be visible um yep we looked at this last week and let's go over where that's happening so uh it's basically here um we have this circular progress indicator that we're basically just always showing so instead let's wrap this in an if statement if you state is long ending state that loaded submitting so if we're submitting show it otherwise it should not be there so if we run this again now we should not have um our indicator visible oh and because i love it we can check things off we can say that we did the hilt stuff um just waiting for this to run again so let's now it's running let's kind of manually test some of what we've been working on um so like the first thing i'm going to do is try to click submit and if the app works correctly i will see input errors for submitting with empty values look at that please enter an email please enter a password and if i start typing the error goes away only for email likes and then i should fix this so that this doesn't come up when i'm typing on the password view and then when we log in um huh okay well actually i can tell you why this is happening so because we never handled that success case um it basically transitions into the submitting state and then never leaves i actually should not be able to interact with the ui when it's um submitting i should disable these as well uh interesting catches there but let's ignore those little ui bugs for the moment and let's say that we were successful in connecting the viewmodel to the ui we can launch the app and see the login screen so we're going to call this part dot creating login screen and showing it from activity uh what's that look just laughing at that twitter message sorry we will fix later we will um we can fix them um maybe we will fix now because i have documentation on this but i think documentation deserves its own dedicated stream so i might just keep moving forward with a little bit of stuff um and then next week can be a documentation focused stream i think that's what i want to do um okay let's go to pull requests by moving the login screen into our activities content um guessing some enhancement kind of and we'll throw this in the onboarding project and let's get the pull request uh this will yell at me about merging i'm not 100 sure why i guess it will have some conflicts let's see if we can fix those right from the other so one is we added this new implementation so that's a merge conflict that's resolved okay um let's see if i can do this all from the ui so we need to keep that import statement um we got rid of this code in favor of just showing login screen and then we got rid of all of this that should fix the merge conflicts we'll hope for the best um cool so let's do a good poll and get those updates um i might because i don't want that to keep happening i might um wait for i might just chat with y'all while we wait for this to finish um oh we need to update our stream history for this one uh or it'll yell at me if i don't um we also took that login implementation and used it to display the login screen when our main activity starts up just to clarify that's what we did here so pleasing the stream history gods with every pull request um and yeah i think we will hey cp thanks for stopping by hope you're doing well um we just got done i'll give you a quick little recap so we just got done adding hilt to the project and then using that to actually create uh our login view model that we've been working on and then plopping that in our main activity so when i run the app i actually see the login screen that we've been creating and with that i've got a couple ui quirks that i want to resolve and i think maybe that's what we'll do next i know i have documentation on here but great questions um let me read all these uh can you tell us about your professional experience how do you make code how to communicate with your teammate especially the colleagues junior intern thank you for your awesome videos well thank you for the compliment bob i'm glad the videos are helpful um how do i write code uh not to go with the easy answer but just like i'm doing today um i don't typically talk out loud to myself typically but it happens but you know a lot of what i am trying to show off in this application and my process for development is what i do every day i think that's something i appreciate about live streaming like i said maybe it's a little different because i'm talking to an audience while i do it um but i really try to make my style of coding here match what i do every day i like to you know go to the documentation take something i'm learning drop in an id see how it works i like to do things really iteratively like break them down bit by bit and i think that's actually um kind of how i approached like talking with um like colleagues who were junior and trying to think unfortunately i like i don't uh my like co-worker right now is ah thank you for the follow eric gabs our grabs i hope uh thank you for following um yeah that's hard to answer because it's been a while since i've worked with like a junior developer but i tend to try to take the same approach like working through a problem telling dream developers like trying to solve it bit by bit start with what you know about if they're trying to solve a problem i have them walk me through like what they know to where they get stuck and then kind of go from there um i don't know that's that's a tough question because it's hard to answer like very directly um i know maybe if you have like a more specific question or scenario that you're thinking of um that's a very vague answer but um you know i do even my co-worker who's a senior engineer like we um well i guess not like this because i mean kind of because you all do talk back to me but even though we're working remotely right now we do a lot of like uh paired programming over zoom when we work on really tough problems we kind of do the same thing here we hop on a zoom hill one of us code shares the ide and says here's what i want to do here's what i tried why isn't it working and then we just kind of go back and forth talking about like what we think the problem is we sort of hypothesize something we try a fix we run it it works or it doesn't we just kind of keep going back and forth like that um you know really like a lot of what i do here um that's something i want to do when i started streaming because i wanted this to emulate how i do my job i wanted to be able to share that sharing my perspective to development and how i approach coding and i want that to be like what i do every day um and i hope that in a way like i hope that like demystifies some of the imposter syndrome for people uh because i think it's very easy for us to feel like we don't know a lot or like um yeah it's very easy to just feel like overwhelmed as an engineer and i'm sure that i am not perfect in that goal i'm sure that i've approached some complicated topics very quickly but that's what i like about chat is people can stop and ask me those questions and you know i'm not afraid to have like compilation errors when i do this and for people to realize like oh i make all the same mistakes um and actually that's really important like how do i like solve those mistakes kind of just rambling and i don't know if i even remotely answer that question but i hope that somewhere in that ramble i gave you a close enough answer to what you were interested in knowing and i appreciate it if anyone else if you have follow-ups or anyone else's questions because like i said i i for this particular pull request before i move on i kind of want to let the github action finish which means like i need to kill like 10 minutes or maybe like another five to 10 minutes and if there aren't questions we can at least talk through what i want to do once that build passes um i've kind of got like a few things um the first one being okay well um the first one being that even if we don't handle a um success case for logging in uh i would like to make it so that um this goes away eventually maybe even shows like a snack bar that says hey um you logged in or something uh i want to make it so that these are disabled when you are submitting um what's the best read read all of them um i prefer like about six to seven e's in my wreath that's what i think is best um hope that answers your question tim um the best movie i have watched recently that's a good question what is a movie i have really enjoyed um uh one night well i'm i'm only two episodes in but i am kind of enjoying squid game uh i love dark twisted moral thrillers um squid game is one of those even though i'm two episodes in um that's hard like i haven't been to the movies in a while so i haven't watched something good recently i'm gonna think on that if something stands out to me but i remember um what else was i yes there's a lot of ui quirks there's a submitting there's these being enabled um there's all sorts of problems with password so actually part of it being uh i want this to have like i want this to actually scroll up better so i can like see the whole password window um i need to fix why these dots look like they're for ants um i want to modify it so that the keyboard doesn't show me what i'm typing even though they're in dots the keyboard shows me what i'm typing and i don't they're like up here i need to get rid of this autocorrect is what i'm saying um and then i'd also like to look at a accompanist insets again and try to make this like an edge-to-edge ui experience is another thing i would like to do becomes even more interesting around episode four okay okay i will finish it um i do want to i just i haven't made made time to do so arrival interesting all right cool this all passed so let's splash and merge this real quick um and this is the only bullet point we care about creating login screens showing it from activity so that means we can take out 50 was closed nice um how do we watch new berlin in london android talks good question i don't you might have to check their websites because those conferences are happening in person um typically in the before times when in-person conferences happened the only way you could see the talks live was to be there and then what will happen is they're all recorded and then usually like three to four weeks after the event the conference will post them on youtube or on the droid count website for anyone to watch um if those conferences have any sort of like live feed i don't know um you'd have to check their websites but if not you basically will have to wait till about a month after the conference is done um before you can see the videos if that makes sense cool uh okay so we're not going to backup an app architecture um i don't know if i want to make tickets for the ui tweaks that i want to make or if i let's let's no let's just do it uh we'll do it offhandedly today um which one of those things do we want to start with i think i would like to start with um [Music] simulating a successful login so let's do that simulating a successful login so there's a couple steps to that the first one is figuring out well how do we want to display uh that a user logged in and this is tricky this is actually uh something i can see being a debate um and let me tell y'all what my idea is well so first there's okay well there's a couple things to think about here it's like well what happens let's say what happens when a successful login occurs what code what code path does that go through well the where that goes is here we have this i really should call this like i should pull this out into a private function because this is inside login button and that's weird um really this should be inside its own function let's do it we'll call this handle login result and um how does that yeah that's fine it keeps creating credentials so then this updates our view state based on that login result so what we need is a additional check here for is login result.success and actually that can remove the else block um so there's a couple things here so well first this is expecting a view state um so let's just say return the current view state for now but interesting to think about because when a successful login happens i don't i don't just want um i don't really want to change anything about the view state ideally let's say for today what i want to do is i want to show like a snack bar um and um i don't want to worry about navigating i want to just show a snack bar that says hey you've logged in i guess that kind of changes the view state um i'm wondering if i'm over complicating it by not thinking about navigation let me talk through this and i i'm making a cup okay let me talk through where i'm afraid of getting stuck and then maybe y'all could help me so this code path comes in we get a successful result something needs to happen here to tell a listener that login was successful what that is i don't know yet but i know that that's where it's going to happen so whatever you want to do you need to express it as a view state um i think that makes sense but let's let me talk through this whole thing because i i don't know um if modifying the view state is necessarily how i want to do it so let's say that's happening okay so another thing is all right we've got in our main activity let's say that eventually we're going to have like a math host here that controls navigation and when the user logs them successfully i'll want to tell the nav host to go to the home screen and the way i would do that here in the activity is i basically have like okay i'm logging completed tell math host to move on move to home that's what we would do here right so i think this part makes sense so then what we would do is inside our login screen this is where we could say you know um login completed this would basically just be some callback so now i need a way for i guess maybe i've tucked myself through it so next as i need a way for login content um oh no not quite so i've got this login screen that has this on log and completed callback i need a way for the view model to call this and i don't know the right way to do that um if it were in the view state you know i could be like if you state you know is completed then i could say i'm logging completed you know or something uh i don't necessarily know if that's right this feels wrong to me but has anyone done this raphael are you still here you've thought about net you've worked on the navigation library so um i thought about that tim but because we're using hilt like the view model creation isn't happening inside the nav graph you know it doesn't really make sense why does it feel wrong um because i'm using the view state which is the view state to me is a representation of what is on the ui like that is its responsibility and now i feel like i'm changing that and i'm taking a representation of the ui and turning it into an action no pass the function that's the vm constructor oh you're saying like here when i create the view model when i call hiltviewmodel there should be a way for me to pass individual params here i don't know what it is but i'm sure it exists you're saying that like here i should call it line 22. um oh so this this makes sen i kind of see what you're saying you know um you know it would make sense but the problem is actually like you know the login content also has no idea that like when login is completed it's just displaying stuff to the ui so like i said that's why this feels wrong like um it just feels like it's weird to show this and then never um i don't know if i like that either so what i've seen done in the past as like a potential solution um what i've seen done in the past is using like a channel um which is like kind of like a flow except like it suspends as you're writing and reading from it so we could have like um [Music] yeah there's no it feels like there's no clean way so let me show you what i've seen in the past it's actually kind of what i do at capsule it's like we basically have like a channel and we can just like make it a type unit because i don't need to send any data this is just a way of saying something happened and a more robust way that some people do it is rather than like login completed they might use like an event bus so this is like a channel that um yeah an event bus might be a better way to think about this like having the view model consume some event bus and then emitting a login completed event right and then what can happen is like maybe this screen listens to the event bus and when it consumes that long and completed event that's when it emits same idea as a channel but maybe a little more robust um let me show you let's go down this rabbit hole actually and let's um let's follow this thought through because i can make this um and then we can see how to make it like a little bit better so we've got this login completed channel and then what we would do is when we have the success case we would basically just send something to that channel oops and this needs to happen inside a co routine so when we have success let's launch a currency and send to this channel that's one way of doing it and then the way we would receive that is um i think we basically need like here we basically need to keep the co-routine scope and then we could do currency scope.launch and then um whoops um vlogging complete channel dot and do i want receive i think why is this yelling at me should it happen inside of launched effect and not is that how i do it this is experimental isn't it um how do we do this do i want side effect is that that's another thing i could do maybe side effect is what i want apparently side effect works so one way to think about it so this will suspend until something is received and then once it's been received we invoke this and so we can test this for now by basically doing let's do a slot um let's log something let's run this and let's see if this works why is this better than the previous idea is there's still logic in the login screen that you don't want right um kind of like technically yes there's logic happening here um what's the word technically yes there is login there is logic happening here but i mean technically like this alone is logic right but i'm pulling out uh i was gonna say i'm like i'm trying to pull out logic that's difficult to test but i'm wondering if yeah maybe there's a better way let's first try to figure out if this even works so let's test uh uxb thank you for the follow really appreciate it um i really should work on like the pass-through information here um okay our simulating oh god um okay so technically this was okay this was called um but uh now i'm thinking back to something cp said it's like well okay so i would navigate away but i kind of think that before i navigate away i'm wondering if i would want to basically show like a like what would a completed login state look like um and maybe we want to make that um i'm thinking of is like think of going into login view state oops i'm thinking about adding another thing here um like completed and this would extend login news date you can basically say like okay well once it's completed show empty credentials um and buttons enabled would be false like so this is what you would see before you navigate away it's an interview metal that's what we would want to return here let's see how this would look um yeah i suppose i keep thinking about what tim said um yeah i'm just thinking in the context of the login screen itself the login due state doesn't really matter but i guess it would be nice to see like an empty state before moving on um so let's let's try this again um so if this works right what we'll see for now is um okay yep the submitting goes away and then we kind of see this default screen so okay i'm going to commit this real quick um handling successful login flow so this is a working solution um pending in the production case what we yeah exactly they're not gonna see it but um or maybe they'll see it's disabled briefly before it navigates away um so pending the production case where instead of a log statement here this would actually do some navigation this is kind of the flow of data that we want um [Music] oh my god cm griffin thank you for the raid welcome everyone thank you all for coming where we're doing some android devs tonight hope you're all excited wyomer hope it's wildlife thank you for the follow appreciate it um you guys are awesome how was your stream once again we got owen codes thank you for the follow quick silver gotta hydrate how's everyone doing oh my god more follows thank you all for the follows i will try to keep calling them out as they happen um billing stuff that sounds almost more fun than the login screen almost um we've been working on our login screen all night uh and today we are getting into alt f4stream thank you for the follow we are getting into the woods on um thinking about navigation uh we don't have gens thank you for the follow uh we don't have like a home screen set up yet but we're thinking about how to model the flow for getting into um the home screen when it happens messy thank you for the follow or mess messages i know i love the happiness this is amazing i appreciate everyone coming to hang out um you're all amazing welcome to the stream we do android development every wednesday right now it's just once a week but hopefully we are soon i'm going to try to move to doing it twice a week and maybe more if i could have my way i would do it more but you all know how life is ah yes don't worry we we have our back button here so if any of y'all are unfamiliar with android or maybe kind of familiar we technically did uh demonstrate how we would handle logging in um but we are now trying to decide whether or not we did it the quote-unquote like right way um and really that's just like where all the code should live so how do i where do i start to try and explain what we just did um well so part of the problem where was i at where is so we've got this class right here which is um [Music] our login screen and originally take all this out for a second originally what this class was doing is it basically just had some view model that's responsible for giving us a login view state and it passes it through to this other function which generates the ui easy very simple well not very simple but like this class just a handful of lines all of the logic for what the viewstate should be and how to display it as elsewhere in this class this function is just to be like get the state and show it but now we've got like this problem of well i need to surface when i want to navigate away from this screen and there's all sorts of ways to look at that one way i did that was um we expose a function which is do this thing when login is completed and then we've kind of got this aptly named side effect that will listen for basically an event saying that login is completed and once that event has been received it will invoke our login completed function and now that i've said it and kind of walked through it this isn't a terrible solution um but one downside is what i showed y'all previously where this class was just take the view state and pass it into login content i liked that because there was no logic inside this function it's intended to just basically be a proxy of data but now i've introduced a side effect and it's just thinking about how we test that side effect and is that the best way to do things um i don't know um i think there are plenty of other ways we could do it we talked about like how some apps have like an event bus um ah i've been waiting for griffin to stream i don't know how long you're gonna be waiting it might be a while but thanks for hanging out in the in his waiting room um yeah i think there's a lot of different ways to do it like another potential idea was like an event bus and i actually think a cool approach to that idea is we could leave this function here as basically being empty or just doing the proxy um yes this is android studio which is built on top of intellij and is then very similar to all the other jetbrains ids but if we did like an event bus we could leave this empty and then here where we have well which will eventually be like our navigation controller we could have this just like listen to events that tell me what screen needs to be shown and then it just works and i don't really have to worry about like was login completed i just need to listen to some navigation event um i think that might be like a future stream sort of refactor again but uh yeah i think that we've got a start here for like how we would at least process data for um signing in so now we can um thank you uh but actually speaking of looks um the other thing i wanted to work on tonight was a couple tweaks to this login screen um that i want to work on and so let's let me make a quick pull request for the work that i just did and then we'll switch to a new branch and we'll do some more ui work because there's a little more that i want to work on login happens commitments to the main activity so i can navigate in the future all right let's get that running um so one of the things y'all can join us in is um so this state you're looking at uh if you missed it this is actually supposed to be like when i start when i type some information in the login screen um and i simulate logging in um we're just using a dummy repository so it returns really fast but this is like the login was successful and i want to navigate away and we don't have that navigating away yet but this is like the state that you would see beforehand um and one of the things i don't like is that this these inputs are still enabled um and i would like it to be that they are disabled uh when i don't want you to interact with them so i'm going to make a new branch here and we're going to make sure that those have a disabled state and yeah send that to me tim i'll i'll ping you about it tomorrow uh if you don't find it today uh but i'll ping you over in the chat room and see um yeah let's talk about disabling inputs and i actually think um this shouldn't take a ton of heading like the cursor disappear when you're not on the keyboard partially x60 thank you for the follow um not just the cursor disappearing but also if this is supposed to be the submitted state i should not be able to go in here and start typing again or another problem is like if i'm in the loading state this you can't see it but this happens if i'm in the loading state like i'm making that request to sign in uh this we disable the buttons so you don't like smash the button and make a bunch of requests but um the user can still start typing that doesn't make sense you shouldn't be able to type while the request is being made i think you should have to wait for it to finish um so let's kind of work backwards into how we would make that happen and the first step um is let's go down to the component level and figure out how we disable that component in the first place so we have a we already have a we have this custom composable that we have ourselves if you're quicksilver i'm not sure if you're an android person but um we are using a new ui framework for android called jetpack compose and that's why all these functions are labeled composable but this is basically like a ui component is what this boils down to it's android's new declarative ui framework and we've got this composable that we've made which is like our own text field and i what i want to check because i don't know the answer is here we're using a outline text field which is coming from the android library for compose this is this outline oh well let me know if you have questions along the way i'm happy to answer them but this outline text field this is coming out of the box from the standard library and i just want to check if this even supports so it does have its own enabled property so what we need to do is have our own text field have an enabled property that we can consume so this would be a boolean and we'll default to true okay so we've got a text field that can zoom a property for whether or not it's enabled so let's go to the places where this is used um more specifically here where we create the email input um it consumes text error message etc and let's have this also taken a boolean for enabled and we will proxy that through to the subclass and we'll do the same thing for the password input we want to know is it enabled cool and then pass that through into the custom text field now we're going to have some other compilation errors further up where we then call those methods so here's this for context this is the column of the column is like a vertical stack of items of everything on the screen here app logo email input here we need to say enabled now um our viewstate thankfully already has a property for enabling and disabling buttons and i think the way that i would think about this is if the buttons are disabled so should the inputs like we disabled the buttons because we intended that the user would not interact with the ui during this moment so actually i think enabled would be not viewstate that buttons enabled and we would take that same logic and apply that on our password input or wait sorry i don't want to not it's enabled if our view state says buttons are enabled yes tim got ahead of me so i'm going to rename this to inputs enabled a button is input i typically talk about it as like text but input could be any sort of user input i think that includes a button so we'll add that there um and what i'm going to do to test this actually um actually i don't i don't need to add a i was going to add like a delay but what we'll do is we'll just have it um when we get into that completed state we should see that everything is disabled and while that's running let me just go pop oh i have to update that pull request with stream history i'll do that after um so let's we'll just make a string of pull requests and i will merge them all after the fact also part of this is part of what i want to do this screen is make it easier to tab through these inputs anyway so we log in next everything cleared and everything was disabled so what should happen in reality is this will not be a problem because once this happens we um words will navigate away so let's go ahead and commit this um disabling text fields when buttons are disabled or rather with same logic as buttons and what i'm going to do real quick is i will make the pull request but like i said i'll kind of move along a little faster now now that we have some guests hanging out and uh i will clean up these pull requests after the stream but uh if you're new here if you want to follow along with the project exclamation point github will give you a link to the project uh and to clarify why i'm sort of ignoring the pull request at the moment let me make this one and then i'll show you [Music] so when we are loading or in a submitted state let's disable the text fields uh let's call this design work and we're going to throw this in the onboarding project so in this repo we have a stream history markdown file that i put in every stream there's a little hyperlink to it and for each one we have the pull requests that were made that day any notes of like documentation or blog posts that are referenced and then when it eventually gets up on youtube i'll post the youtube links in here as well so i tried to stay on top of this and actually enforce myself to stay on top of it because i have an automated pull request check uh that will fail the pull request if i don't update that stream history markdown file so that's why this pull request failed and that's fine i'm just gonna keep coding uh hang out with all of y'all show you what we're working on and then i'll clean those up separately but this is a way that i guarantee that if someone misses a stream i have good notes uh for people to dive in or even if they don't miss a stream if they want to go back and find a particular topic that we looked at they can find that information um i did want to before i moved on to other thoughts for this screen i wanted to simulate another test case for this which was around um the loading state so we have um an error state in here where if you submit without any credentials we show you this error state and what i'm going to do is i want to simulate that this takes a while to load um so we can see that like everything is disabled while it's loading and then comes back so we're going to go into prod credentials login use case here and basically what i'm going to do is right at the front of this let's just say delay 1500 so delay for a second and a half oh thank you tim that's such a great compliment i appreciate that so let's add that delay and let's see um how this goes oh you're you're all too kind i try to i try to be helpful i'm glad that it's working means a lot okay so here we log in we see it's delayed everything was disabled for a moment and then we saw the error so we're pretty confident that this works now there's probably some uh actually i don't think there's much unit testing we need to do we should have already done tests to verify that when we're in the submitting state the buttons are disabled so we should be good um kwa thank you kwa i don't know thank you for the follow i appreciate it um we haven't written any sort of ui simulator tests for this app yet we'll do that eventually but i think for that what we just added there um we should be good um gonna do one small thing on this same branch though actually because it's loosely related so the password screen or the password input all right well there's two problems here um let's move on let's let's make a new branch that's fine um um i'm going to call this password input updates because i've got a couple here um okay so what are my complaints well the first one being i don't like that this is cut off when i focus it and i think well okay so yeah this is bad um let's talk about the easier part so if we look at this even though they're really small dots which i still haven't fixed that they're like not even noticeable um that there are dots here where they're supposed to be text um they're dots but i can see via autocomplete um that like i can see what i typed in it's like trying to autocomplete my password i don't like that so how do we fix that well on our text field in the outline text field there is a keyboard options parameter and if we were to look at the um implementation we would see that it has this keyboard options.default let's look at what that has for us so this keyboard options class has a few properties it has cap sorry capitalization information cheers megan does this mean you're home is that why you're redeeming hydrate i hope you made it home safe um so we've got capitalization which is like cap words sentences etc um autocorrect or keyboard type which would be like text number phone and then ime action that's this little guy at the bottom right so here this is like enter um which should i think make like a new line um i did drink the water i'll drink another one just for you um so actually this is in interesting um because when i look at this function right here you would think the solution is to turn off autocorrect um but and maybe that's true but there's also a keyboard type for password and um i think this turns off autocorrect for us um and it might do some other things so i'm gonna use this keyboard type so now here's like um so here's what i'm gonna do so let's have this consume keyboard options which will be keyboard options.default as the default and we proxy that through and so what we need to do is go to where we create the password input and then right here because the specific password kind of like this visual transformation we'll put in our keyboard options right here just like keyboard options and here we say keyboard type will be keyboard type that password and so this should change it so that we don't have autocorrect when we're typing in thanks for lurking quicksilver thank you again griffin for the follow and for the raid and all the new followers i really appreciate all of you um go follow on twitter and youtube as well information's right there exclamation point twitter exclamation point youtube and all the socials should have something that should have a command um wow yeah we gotta fix the thing okay but even though it's not visible which is like the main problem we can see it's actually it's the full thing i should shorten it but it's full like youtube um we can see even though i typed in password the keyboard is no longer giving stuff away so that's helpful let's push this up and we'll say handling password keyboard type now let's figure out why um [Music] someone finally found the easter egg i'm so glad tim's the first person to do that um so that was great i made that like ages ago and prince knows about it but like no one uh no one else has tried it until today that's great in case anyone doesn't want to click on that because they might sound like it's bad but this links to a twitter joke from my friend prince said he should have bought only fans that dab and have it redirect to the android studio download link because we we all know the feeling the second you fire this thing up your computer is spinning um oh no i'm already seeing my like dropped frames go up a little bit which it's actually been fine all night so i'm hoping that that stays really low um all right before i get distracted or again uh welcome to my stream we get distracted a lot coding with people with adhd but we get through it eventually um okay i want to figure out why the heck this doesn't work so there's actually like um for some of you so here let me jump into where where we can find a solution is why isn't autocomplete automatically turned off into typing password why would somebody want this um well so it should be turned off the reason it's not automatically turned off is because the out of the box text field this outline text field right here it's very unopinionated it has everything you need for creating a text field right so it's got like the value the value changed a label a shape is an error state a visual transformation um it's got all those properties but it's very unopinionated about um any sort of configuration like it doesn't know that it's a password field so i have to configure those password-specific states now this is kind of a concern i have with this new ui library i wish that there was maybe some sort of default where i could say i want a password text field and i want to do that the visual transformation that's what replaces this with like little dots you know i want that out of the box i want audit to bleed off like i wish i didn't have to configure that myself but the reason for that is so that the standard library doesn't have to be opinionated about things um whether or not that's the right solution is a fair debate um but that's kind of the answer is they wanted the library to be unopinionated so that it by default it would just consume some input then you have to configure those situations um and thankfully like this keyboard type you know uh all these values this is in the standard library so i don't have to like design the password keyboard or anything but i do have to tell it use this keyboard type um yeah not great but it is what it is um oh so i want to talk about this resizing so a way to think about this is um yes exactly um out of the box all it does is text input and i have to adjust it to specific scenarios so like for example if i wanted this to be like um if i wanted this to be purely numbers i could do that as well but that's an override i would have to make yeah no problem great question um so we got this file this android manifest and we rarely go into this file as developers i mean maybe that's subjective to the project we haven't looked at it a lot for this project everything in here has been defaults um there's something we can specify so the activity is kind of like the root container for this screen what we see here this all exists inside of an activity specifically this main activity and so here is some xml code where we could figure some information about this activity we give it a theme which is irrelevant and jetpack compose a label which also isn't showing up so there's not a whole lot that happens here like but there's like this intent filter what this means is hey this is the activity that launches when you click on the app icon but it also has a property called soft input mode windows soft input mode now soft input refers to that virtual keyboard that comes up from the bottom so the soft input mode is what should happen when the keyboard is shown and there's a lot of um sorry just checking messages making sure everything's good um my partner just got home from work so i wanted to make sure she didn't have any issues with the dog or anything i'm not going to go through all of these the one i want is adjust resize and what this means is so right now um when this keyboard comes up everything's hiding behind it right like it's not really moving uh we can see it shifts a little bit but uh what i think i want to do i think we'll see how this works is adjust resize we'll say when the keyboard comes up resize the screen so that's basically between the top of the keyboard and the top of the screen like it like resizes the height and now i'm thinking about the way this is set up and i might not actually like this but let's run it and let's see what it looks like we're all about iterative development on our stream so what i'm afraid is going to happen is everything is going to shrink or it will fit but no welcome yes i think we'll we're still going strong i don't know if it'll be another five hour stream this week but we're still going strong um so what i'm afraid is going to happen is this is going to shrink the activity and then and therefore like shrink by column and smush it all together that's my hypothesis and that's exactly what happened uh we got like smushed um and actually it's weird the sign up button entirely went away now it fixes the problem i guess right like we um we can now see i can see my inputs uh this is like better uh but for this one specifically this is weird like i don't when i click on email i don't want the whole thing shifted up so um [Music] some interesting ways to look at this so another one another option here is adjust pan which says okay instead of resizing what's on the screen shift it uh like pan it forwards backwards so basically when i click on it it will keep that focus and ideally it shifts everything upward with it um and i don't know if that works here um okay so i think that's what it was by default so you can see when i select password it tries to shift but it doesn't quite work right um actually it kind of works but maybe the issue is that um uh i'm wondering why the keyboard comes up right onto the alignment that the button went yeah this is definitely a radical um yeah maybe there's a solution with adjust the pan but i think i remember looking at a google library for like inset animations and in order for that to work you needed to be an adjust resize so i want that to work now let's talk about let's go down the rabbit hole about why adjust resize is behaving the way it is so i mentioned that like it's it's resizing the whole screen right so it's trying to take everything and it's trying to squish everything onto that available space at least when it can a hat tim you're like you're cutting off the teacher you're both cutting off the teacher um so yes like window insights could work but it doesn't solve the root problem which is that our login content is a regular column and for those who are just joining us today a column it's a vertical stack of information but it's like it's fixed it's not scrollable and that was fine here because i wanted it to fill that space but that means when the keyboard comes up i can't scroll um so a potential solution is to replace this column with a scrollable version now you could use a lazy column uh if you're unfamiliar a lazy column is kind of like it lazy loads items this is really good if you have a long list of data and you don't want to load every list item into memory you just want to have a handful at a time uh but actually a shorter option here is i could just give a modifier for like a vertical scroll um and just give it this default scroll state um so this tells my column it can yeah i was like would be on steroids but here let's let's just say i want this to scroll vertically and i don't really care about lazy loading but it will support scrolling if necessary now i'm curious what this will mean for the default i wonder oh damn thank you for the sub really appreciate it you're amazing so i'm actually i'm not 100 sure what this will do um okay so right now nothing scrolls because we're on the full screen but if we do this we resize okay and it's scrollable but it's still huh all right well there's there's a lot going on here um there's a lot of stuff going on here like uh i guess it's better but i'm just thinking like i wish it only scrolled i wish it only scrolled to the point where password stayed like where the keyboard was almost like i kind of preferred the way a just pan did it but i wish that it um handled itself better um okay there's like there's a lot going on here it emulated a smaller screen ignoring the space used by the keyboard yeah basically um so oops message we're good um i'm thinking about a lot here well one being like not only does this resize funny are your weights on your spaces becoming smaller due to keyboard making yes yes they are and that's why this um big icon is basically there's like no space between that and the email now but notice it's keeping the same size but the space above and below it is basically shifting um and that's fine ish i think um kind of intended there's also you see this big white space right here so this is the column i've set on the or the or a min height interesting we could do something like that um that would help a little bit but it wouldn't necessarily fix all of our problems um the best way to modularize a project scale well i feel like that's a very loaded question um i don't typically use a lot of app modules but if i did i would say try to split them by like individual responsibilities i guess if you have like yeah buy features for like not not even by feature but maybe even other responsibilities like services like analytics could be its own module um error reporting could go in its own module and then you could have like your login module your home screen module stuff like that uh so anyway i want to point out also we can see our login button gets cut off by this little bar right here and the reason for that is because we have this padding around the column and that fills the screen and there's an accompanist by google solves this problem uh this is a library by google that does some compose stuff for us and it talks about um uh where is that oh like content padding so the padding here it's being applied on the whole screen so that's why it's cutting off the button but ideally the padding is not really around the screen but on the content itself think of it almost like i wish it was like a margin below the sign in button and i think that if we use like this accompanist insets um i think there was something in here um where we could put content padding on other stuff oh maybe it's only on certain things um huh i thought it was there maybe it's not or i think it i can't remember where it's at now remember this was this document i'm looking at was where i learned about um so it shows like uh so here's a cool example which shows like the keyboard animating as you scroll which is only a thing on like android 12 or whatever but they do call out in order for this to work you need um adjust resize anyways um i know lots of different ways to think about this if i made this a lazy column i'm wondering if it really makes a difference um i actually wonder if the spacers would work right if it was a lazy column i don't know if they would well one thing i want to do so let me briefly look at uh like web shark's idea here is um for this space they're setting like a min height default min size yeah so like what's that min height let's go with 48 that seems like a nice round number um oh and gotta hydrate thanks see how that looks um regarding insects maybe kind of killing two birds with one stone here um i want to add like an end-to-end experience with this i want to get rid of this bar i want like this to go all the way up right um now that didn't work um when that work do i need to set the min size before i set the weight because order of modifiers can matter i'm surprised there's just no spacing there um i'm also open to like rethinking this entire login screen too it's like this was just something i hacked together back um problem integrating paging library yeah i hear that a lot uh can you tell me more about what you're trying to do with the paging library i think i think i'm gonna i fixed i fixed sort of i made it so that this becomes visible but i introduced a new set of problems as a result but um actually i wonder i wonder now that i've made whoops okay why are you yelling at me now that i've made this scrollable um i don't think i tried these together i wonder what scrollable looks like with a just pan i wonder if that allows it to pan better as a result uh does default mid height need just a height and not a minimum height um [Music] i didn't think it did well let me go back and look at in a second i want to see what the scrollable modifier gives me when i also have a just pan okay this actually doesn't do anything for me that's interesting ah cutting us do you think let's let's go with the resize for a hot sec and let's revisit those other problems a little later um maybe it will be easier to talk about them once we also fix this sort of end-to-end experience maybe it's related um is there anything else so let's say moving through the just precise um is there anything else around password input updates that i wanted to make before i go to the edge to edge ui idea um actually yes let's see if we can figure out why the heck those little dots are so small uh so let's let's talk about it so um here's how i'm going to dig into this concern so i want to look at the outline text field i want to look at its source code specifically i want to figure out what text style it uses um i think the answer to this oh my god it uses a local one local textile dot current this really uses yeah lazy column might be a good solution um we could try it real quick um it wouldn't take terribly long let's let's see what happens so um i won't even like i won't even commit this but unless it works let's make it as a lazy column and the biggest thing is that okay now everything's going to yell at me because it needs to be wrapped in an item isn't there a wrap with um that's what i want isn't there like a way to like wrap something their keyboard shortcuts does anyone know it the surround surround with command option t is that what i want surround with widget interesting okay whoops that's all i want step by one item do they i guess there's oh god that's not what i wanted trying to find out oh why why is this yelling at me now oh because okay well that will pose its own problem um lazy lazy column is more optimized to lists yes i talked about that earlier but i kind of want to run it and just see what would happen um just experimenting here because we're all about that but what i'm worried about is um so after i wrap everything in an item here uh i'll talk about what i'm worried about oh my god there's so many things in here but it would give me so one other benefit to you did miss me integrating hilt but you'll be able to catch it in the youtube video um so one other thing we get from the lazy column is i get the padding fix out of the box because i can instead of using the padding modifier i can use content padding where i can create the padding values there um thank you for the follow um how many people use the words good soup to you right now oh no enabled great catch finn really paying attention out here um okay so these spacer modifiers uh they no longer work uh because we're like we're in a lazy column and i don't like i could put another column here but i feel like this is weird um i'm actually wondering if um and i'm wondering if i should instead of using maybe this maybe something that would have also fixed the problem even in a regular column is maybe i shouldn't use um yeah maybe i shouldn't be using like a a weight here like i guess it's nice because it makes it look a little nicer but i honestly wonder if i should just like hard code some padding values or something um so like what if we got rid of the spacers and but we set it really high like a modifier we could do like padding we could do vertical like 88 dips or something as like the spacing around our app logo let's try that out uh just for kicks let's set like let's hard code like that 88 dip spacing around the app logo and see how it looks all right i'm like uh wait i'm surprised this is scrolling um i guess i'm not because um until you're ready to support live screen devices this is the way that's fair so but i guess like that's the so one of the risks here is like if i have a small phone then like these buttons they won't always be visible and that's what i don't like i want i like what i liked about the column as i was able to fix these at the bottom of the screen um that's what i liked about it and now i actually can't guarantee that like even though this looks really close it's scrollable because it just doesn't quite line up you have an excessive spacer at the bottom uh i don't think so there's nothing below the sign up button so what it is is it's like um it's this so even though it looks like it's really close by adding 88 above and below this i'm actually pushing the sign up button down a little low and so it's scrolling up because of that padding like here let me scroll it down line 161 no this isn't oh what get out of here tim it's not being correct yeah damn it one day y'all are gonna come on and it's just gonna be tim on the webcam uh doing things right um but okay so you were right here but in theory what i've described is still a potential problem if i have a phone that is shorter than the pixel 5 um we could still have this scrolling problem so but okay for the pixel 5 it this is better uh so let's see what happens here okay so email that didn't need to re didn't need the slide what just happened it doesn't work what the heck the keyboard just straight up closes let's um let's go back let's get rid of this for a second i just want to try everything out oh that's what i did wrong with the sign up button got it that makes sense the true mob programming experience okay this doesn't this just pan still doesn't do it oh well i guess that's how i wanted to huh um that's still so weird what the is happening let's google this and adjust your size not working let's see what they're talking about i'm scrolling down to the answers um can you not use required size i don't know what required size is is that a thing let's double check how this lazy column looks like yeah i don't think a just pan is what i want either yes we fill max size here do i want fill max size i mean i want fill max width what happens if we just do that i'm just curious i don't think this is really any different but maybe this will do something different um if we're not forcing the height to fill up required size as a modifier and then which component do you think i would use that one yeah why the heck doesn't this so we tried that we tried that earlier cp if i do i get reset that's exactly we're gonna end up there yeah this is just it's just annoying i had this problem in my work too and i don't remember how i fixed some of this i remember i know that my work app is using adjust resize but i don't remember how i got the screens to work right um well so i have this box that's filling max site max size um and so is there something there so is it the fact that i have this column inside like a box is the issue with the box resizing um i was looking at something yes i was looking at that but i didn't read the answer oh look i have it open why i have two taps um but i wasn't looking at it very closely um okay but i'm composed up on a just resize i manifest through the gankmate the keyboard continues hiding the footer um nope that's fine so so here's that footer that they mentioned and when the keyboards open oh you want to look at so how do they okay so they have a column that fills max size app bar they have a box has a footer in it so let's look at the answer the problem is in your lazy column modifier if you set weight to one it will work ah so that's basically saying like that should feel so i'm thinking back to okay so okay let's sorry i'm not articulating what i'm thinking right it says to fill the viewable port in some way i'm gonna do a hard reset i don't think thank you for the follow um i don't think the lazy column is necessarily the problem here so i'm doing a hard reset back to where we were with um hopefully this is where we were okay so we were at a column with vertical scroll and we saw like the same problem happen um kind of but let's let's actually go back to what happened here um and what i think might be related it's like um so we've got this column that scrolls when i click password it comes up and it's like it's almost like i said it's weird it comes up higher than i think it should and i think the reason for that is because of still because of those vertical spacers um that they basically go away and so this pulls up the whole screen with it uh if that makes sense like i wanted password to come up where that this was and i think it would if um words if um it was necessary like if there was enough scrollable space but because there's not because the spacers are shrinking it's kind of coming up right yeah better way of saying it the whole screen would scroll so i'm actually going to go back to something we tried in that last run which is what if we instead of those filling the space spacers what if we instead put like some vertical padding on the icon that will always be there saying i want this amount of space above and below the icon no matter what um does that work okay so we take that modifier um and let's try this i think this might help us out because yes now everything as it's laid out originally will scroll as it was laid out originally it is weird but it also kind of makes sense okay so when i select email this one's okay so we've got that content padding issue which we knew about but see i can still scroll as expected so let's close that and if i select password why don't you focus is this like a separate issue like i thought that it would i thought that when it resized that this would come up with it like that's what happened in an xml layout that this focus would bring it up yeah focus control suck but this is definitely like a lot closer to what i want um i wanna i don't like this padding issue um i hate it and i don't know slap a sign with google button and call it a day oh raphael's got an issue is this a known problem ladies and gentlemen scroll shift state should automatically update according to the window um yep okay oh my god these are back in august when will the system get dissolved um okay looks like they do something with provide window insets that's from the accompanist library oh but they have a custom text field that has some relocation oh my god there's so much here i'm just scrolling through really fast but um i think the short answer so what we're seeing state visible adjust size i have not i can look at it what we're seeing as the issue um obvious in hindsight but just to clarify the uh issue being like so the resizing seems to work but the problem is that this focused view is not coming back up the screen when the keyboard comes up um and so with some of those code snippets that i scrolled through really fast we're doing but that doesn't work cp great try though what some of these compose snippets were doing is they were using this thing called a location requester um like here we can see a a relocation requester and we basically have this launched effect so okay if the keyboard is physical visible i don't know what this interaction source thing is um oh maybe that's like is it being interacted with okay so if the keyboard's visible and this text field is being interacted with we wait 300 milliseconds and then we say bring into view so this is probably what would slide it up and make it visible um and uh yeah like i don't know if that's great there was another snippet let's see that made this a little shorter but it looks like they just create a relocation requester and we put it on the modifier oh and then when the value is changed it calls bring it into view bring it to view um let's try their solution just a quick hack let's let's try their solution here um oh my god i'm sorry i was reading that and i should have zoomed in for y'all um let me show you their solution so they have this relocation requester and it's a modifier on the text field and what they do is anytime the values changed they call bring into view this won't necessarily work for us i wanted to come into view when they like open it so i guess it's not so much on value change but maybe like unfocused um which we can do actually um let's try it out again we're just kind of spitballing here let's go into toa text field yeah we're just we're just uh we're spitballing here and seeing what happens why are you yelling why are you yelling at me of course it's experimental um because why wouldn't a potential solution be experimental so we'll add that relocation requester um let's is it here it's not here um on the modifier we can do and focus changed um and then let's say if i t equals oh this is change um if it is focused relocation requester.bringing to view so that's how we're going to try this on focus changed if we are focused bring into the i'll try anything this sounds like a working solution but we shall see and if it does i'll actually move this into um compiler argument as well all right it did not bring it into view that's weird okay another one with a relocation requester oh oh it's not just enough for me to call bring into view but i need to put that on the modifier sorry so let me do that um relocation requester that's what i missed um i'm telling it to bring it into view it doesn't know what to bring in the view because i never assigned that modifier ah that kind of worked for the email one okay come on it was kind of working it's like once this is open it kind of works um which i wonder if that's fine because the user's gonna hit email first um there's also i hate like when i hit tab um so yeah that does some weird stuff i want to move to the next item but it doesn't give me the next action okay this is wait well all right so that's a bug um we don't we don't want oh god oh my god this is ridiculous i wanted that quarter radius to stay the same uh but no it's a 50 so it just material you fab yes that's exactly what it looks like oh my god this whole screen is just a mess um top down we just got a mess i hate the padding's broken the input field's broken okay okay um all right um where do we even start which one of these do we want to fix first y'all um try max well so the issue is not max lines the issue is the shape changes this will actually be a quick fix let me show you so we've got text field shape it's a rounded corner shape where the percentage is 50. okay that's fine when it's flat um but now let's but that's not great all the way around thank you for clipping that prince but that's not great when this grows so actually a better way to think about it is well this has some sort of like fixed height which i think out of the box is like 56. let's see if we can find the answer to that if you look at outline text field um somewhere in this rabbit hole of code i'm gonna find it for you there is a height configuration where is it at so it has a min height of 56 dips so okay what we could do with that is if we want a 50 radius we basically want this to be 56 divided by two now it's not about the keyboard type um it's literally just this shape this rounded corner shape being 50 that's what's wrong it's going to keep that 50 no matter what so what we'd be better off doing is we figure out what that radius is at the starting position which would be 56 divided by 2 which is 28. um and what this will do then is this will keep the height of the input right and we'll start with 28 so it will look like a pill shape when it starts and then as this grows it keeps the corners at 28. so we'll get kind of a rounded square um i mean you're right if it's always going to be one line that's fair um we could set max lines to be one um but i guess i would want to support something that could be multiple lines uh in the future um so this is actually better even though it still doesn't it still doesn't scroll but this is what i wanted to happen uh this actually works great so this is what i think would be the solution but yeah email technically would never grow more than one line but now that we know that if it did our radius is gonna work out um yeah fixing radius um what did we change in login content at this run we none of this works um okay i also really want to fix the padding on this because it's driving me up a wall i hate that when this comes up that i can see the padding here so let's talk about uh how we can fix that so one way when we use lazy column if you saw that earlier and it has this property called content padding the way that works under the hood is instead of applying it on the column itself it calculates it for each item so it basically will like look at the first item and be like ah you get the top padding and then it looks if something's the last item and it's okay you get the bottom padding so like one way we would do that if i were to hack this without specifying it like what i would do here is um uh words so let's like look at it this way let's say we want to do content padding ourselves this will be padding values and it will default to padding values with this guy this screen padding um so one way we could think about it is instead of if we don't want to apply to every item and we don't um we could get a little hacky like we could say um okay here we want padding but on the column we're just gonna do the horizontal uh which i don't have so actually wait can i not how do i get information from content padding do i really only have content ah okay i want to get like the start but it looks like i need layout direction um which is fine how do i get the local layout direction that current that's what i want sorry let me close something to make room so on the column we could put the start and end padding to whatever gets passed into this function right like that's one way to do this and then what we need to do is um apply the top and bottom to the first items in our list so this is a little tricky um because the app logo is first so um let's say this is 88 oh my god i'm gonna have magic numbers yelling at me wait hold on oh yeah hold on i need to put god date hold on um what's happening here so my bottom i'm just going to type it out um can i use the spacer here i guess in this case i could use a spacer because the issue earlier wasn't so much the spacers but it was the width of them or with the weight of them but you're right i could just um throw spacers at the top so like here i could use vertical spacer um and this would be content padding dot top calculate top padding easy great idea um so then we basically take the same idea and throw it at the bottom uh but here we do calculate bottom padding so let's run this and this should fix this should simulate like some content padding for us and avoid seeing things cut off when the keyboard is open like that yep so now as i scroll i no longer have now as i scroll i no longer have that weird like white bar and then if i scroll all the way up i see like there's you see between the ripple and the keyboard that's our that's our content padding and action there so i just we can't figure out can't figure out why i bring into view doesn't work um i wonder if someone in here had um ah so other people posted ah they did it here um they keep it currency scope they delay for 300 milliseconds i think the reason for the delay is for the keyboard to open is i think what's happening here and that's why this other answer way up here was a little more complicated uh around this launched effect because it sounds like they are this is a way for them to ensure it's open oh no they also have the delay okay let's try so passwords not coming up let's try to also add a delay ourselves and see if that's the issue is that we need the keyboard to open up first so that's back over here in our custom text field let's create a currency escape and then here we will do um launch um delay 300 and then bring it into view i'm also gonna take this and i'm gonna comment this in here just so i know why we why the hell we did this uh and let's see if this fixed it this would actually be really nice then we are getting close to a nice working input hoping for the best why why doesn't this work everyone else said it worked why does this work for them am i missing something uh let's keep looking through the issue to see if there's someone else a lot of people arguing that it needs higher priority um oh yeah they're just pointing out that it's different than um the composed version that was the last comment that was like 10 days ago um okay why what am i missing why does why do they claim this works is this even being triggered that's another thing um it should be yeah okay it is um oh god so what happens if i like okay there it worked you can see when the keyboard was already open it comes into view so this kind of hints at like the idea that the focus requester works but for some reason when we're like here it doesn't what if we delay longer i'm going to delay for a whole second just to try to narrow down the delay being yeah yeah great idea yeah we're gonna delay for a whole second just to verify if that's the issue and if it is maybe we consider doing um this much more complicated like launched effect thing uh i think we could probably do an on click on the text view but that's kind of what's happening here k float thank you for the follow um well so both of you are kind of on the right track so even though i'm not doing click unfocused change should effectively be the same thing when i tap on it it collects focus so i'm saying cool we have focus let's launch the sky routine delay and then bring this into view and i think the delay even though no one said it i think this is like a delay for the keyboard um and that's exactly it with that longer delay this worked so sounds like 300 milliseconds wasn't quite the best delay here um so the question is well do we want to keep this you know let's try even we could even try like 500 which be a little closer to friendly but i don't like knowing that this is a magic number um i'm actually curious if we can try well right so tracks that's what i think this answer does let's talk through it so they've got a focus manager they've got all these like i don't know why interaction source is relevant i don't think that's relevant to our thing but um here they get a reference to the ime this is what does it stand for input method something the soft keyboard so they have this launched effect i don't know what the difference really launched the fact that the side effect is but basically if this is visible then we delay and i think that that is um i'm just wondering why they need interaction source why that's relevant and i wonder like i wonder if i try launched effect without the interaction source if this would still work um yeah so even 500 wasn't fast enough so so let's let's try okay hold on we're going to put this at a thousand again and i'm just going to commit this because we know this works one second works just going to throw that out there we know this works it's not great but let's run it all right let's commit it and then let's try to find a better solution so um how are we going to do this i'm going to take their code i'm going to copy it real quick and uh just paste it in as a code comment for reference um okay so we've got a relocation requester and currency scope so let's try to ime equals local window insets this is from the accompanist library isn't it i bet you it's from the insets library that's why i can't find it yep um okay so let's let's add this um let's add in set cy uh 0.19 that's here i wanted it eventually because this will help with the edge to edge experience that i want to add to this project okay so here we want launched effect oh the key is like what triggers it i guess you could have like oh god not what i wanted that i wanted sorry um basically imei that is visible and then block launches oh interesting this is a co-routine scope so can i just like do it in here i'm gonna follow their answer maybe they know something i don't um let's take what's coming up and then so let's remove this on focus changed and so let's try this launched effect let's see if this does it um no idea if that works i have no idea why the person over in the google issue was referencing the interaction source i almost never touched the interaction source property maybe they had a reason if this doesn't work i will try to add it in um oh i might also need to make sure i add provide window insets otherwise nothing might happen okay hold on let's do that and main activity um yeah allows the library to send a listener that listener updates the composition local local window insets um okay it didn't do anything so okay it didn't do anything but i don't want to call op a liar just yet let's add the other properties that were not that we were not using where does focus manager get used uh it doesn't okay um let's add the additional stuff they have um and let's update our launched effect to be the same as theirs um and the biggest thing is okay um we need to set the interaction source let's try this if this works why does this matter i don't remember what interaction source is for this looks like it's just another like the state of things i don't is it the delay again is the emulator just slow it is what the heck so this solution also works um but it's like it's too fast that's weird okay so i'm gonna take a step back and it seems like even though this we thought this was more robust because i had to change this delay i think we've kind of got the same problem so i'm actually going to do another hard reset and go back to the code we just had because that was less code and i thought it was like a little more robust or a little more readable that way um but we definitely need to figure out why uh we needed it to be so long um moving the delay should help as it waits for it to come up i guess well the delay is happening no matter what right um i don't think that it's it's actually weird that invisible is true but it doesn't work but maybe there's just something about like it triggers visibility before it's fully popped up and i actually wonder if 300 milliseconds would work on a physical device this is another hunch i have that we've got the classic like emulator lag and i wonder if a physical device would not have this problem i don't know make this would work and a physical device something to look into and actually i think before i do this i think my static analysis yelled at me um probably did something somewhere to add a magic number yep where did we add a magic number oh right here so we're just gonna ignore that that's intended here um yeah weird stuff oh i drink too much water next day i don't want to stop so it might might be a break we will see um what else is on the screen though or for password inputs uh the other thing was the god wait why didn't that work ugh i know why they used interaction source or i think i know why so okay if i'm if i'm here go away if i'm here this gets focused and after the delay comes up now if i close this i'm still focused so when i click on this it will not re-trigger and i wonder if the launched effect actually is better for that can i go back even though i did a hard reset can i control z my way back i can i want to see if this solution now actually handles that um and allows me to like click on it anytime oh i need to add this back in classic android yeah and then once i figure this out i want to fix the font size on the input and figure out why that looks so small um maybe it's an issue with the font family maybe it's i don't know i might remove my custom typography and see how it looks by default it didn't come up why not i thought we fixed this i thought this worked last time i swore this worked last time we ran it am i crazy i'm gonna do it clean anything can happen i'm going mad i tell you i will try this one more time and regardless of whether or not it works i'm moving on to the freaking text size i just wanted to know that it worked interaction source is set yeah um but it's entirely possible that there was some weird caching in the way that i switched branches like that nope it just doesn't i'm gonna work all right well i'm i'm moving on let's figure out why the heck this is so small well first i'm gonna commit this um i know i committed the solution that's not working but i need to move on um for my own sanity um let's talk about this so what i wanted to do um just out of curiosity is i want to why oh i know why magic number again i want to remove my custom typography and see what this visual transformation looks like with the out of the box typography um and see if it's an issue with like maybe my font family or the font size that i use um i'm not really sure let's go here let's just comment this out and let's run this with the defaults [Music] okay text definitely looks larger okay these dots are bigger like way bigger so let's um let's see if we can figure out why so i wanted to figure out i think the text field i think it uses the body textile by default so i actually want to look at that so our body we set the font size at 13 we also use light now wonder if this is the problem like i wonder if i should use regular well let's look at what the default is so the default sets body one so it's a font weight normal it also has this letter spacing 0.5 and the font size is 16. so we're setting our body text a little small compared to the defaults so what i think i might do um why is subtitle bigger than body i followed an old project or followed one of the uh android dev challenge typography guides and maybe that was a mistake um honestly i wonder if i i wonder if i could if there's a way oh you can okay i'm gonna try um i was thinking the default family to be used for the textiles provided because i'm actually thinking i wonder if i could just use the out of the box text styling and then just change the font family to our urbanist font family and it seems like that is possible so yeah it does that it does everything with default let's try that let's as much as i enjoyed all that hard work um here's what i'm gonna do now before i make an executive decision on that um i'm going to comment it out before i make an exact decision i'm gonna say typography will be typography and then we'll say default family urbanist let's use regular although i think this gets a little more complicated because i don't want everything to be urbanist regular now it looks like family has the ability to take in multiple fonts but i don't know if like order matters okay so we can see this again looks a little different the text is larger but um ah oh my god the dots are still very small like i like you can't i don't even think you can see them on the stream um this is really annoying i wonder if there's like um okay well i kind of want to keep i might keep with this solution for now um let's look at another thing um what if we didn't use the dots what i mean by that is over in our login content where we create the password input um password visual transformation takes a char value for what to replace them with so what if we did like a hyphen and like would that show up better than an asterisk let's find out and then we'd still have that sort of like privacy it wouldn't be what we're used to seeing but okay i like this this is actually better this this fixes this allows me to use this font style this urbanist font that i found but then still have the password be like hey there's characters here um and it's clear that there are characters here um i like this okay we're rolling with that um what they think is typography uh yeah you know what let's i don't trust my own i'll trust my own font style so updating typography using hyphen for password mask one other rabbit hole i want to look at real quick is um the fonts so construct a font family that contains a list of custom font files like that's fine but um poppins and rubik are those fonts are those fonts i'm not familiar with them um i'm just wondering like if i have a list of fonts how does it know which one to use like oh because they have like weights and styles that makes sense um look at that but then okay so how does i'm just going down this rabbit hole because like okay if i can pass all of these um ah so it sets a light so does this then like i'm wondering under the hood if this then looks up uh i'm wondering if this just does like a look up to find the font weight from like the this might answer my question oh this is cool we could specify like let's try that happens rubik ah this is cool it gives you um oh wait this is the example type scale but um oh code this is what i want oh they only have it via xml but i could still run with this um those are interesting um where did you pick those like have you used those two before um interesting we could probably try those out um but you can add via android studio that's a thing android studio has a download fonts i did not know that existed i did this all by hand last time um hey before i go down there let me continue down this rabbit hole a little bit which is um i want to see okay so i want to put these all together um or actually wait i need to put okay here here's what we're gonna do we're gonna get rid of all of these um so those are just the fonts and create like a fun family and stuff i want to put the uh i want to put these all together and i think then that it would why is my build sale there i don't know um we'll find out later um but i think it must be able to like look at the fonts information to figure out like what the weight is it's probably something in like the font metadata um that could figure this what that failed why did that fail um exception initializer hey what was the error am i not allowed to use that font family listing yeah take a look at that in a second oh this is from the android samples i see so they use them together oh they put the thought wait oh interesting so the it's not there it's um so it's probably yelling at me because um this checks for font weight so these all have to be different so i need to specify that that's my extra bowl this is my semivolt this is my bold um i just want to see so i appreciate the suggestion and i probably will look at those because this was just a fun one on google fonts but i want to go down this rabbit hole just like understanding how flat weights work all right um and that's really cool to see like how you could define like a font family of a bunch of different things and then just set like a single default font family and it would handle them for you um it's hard to tell if anything on the screen like i'd almost need to show um i almost need like a demo screen of all the typography so i could see them together um but actually i think we can kind of see it now that these are all different um interesting this is cool i wonder so just looking at typography from defaults oh this is cool oh so i didn't know that um there's let me zoom in sorry so basically it sounds like the way the sample does it which is kind of cool that um so this typography from defaults they send a text style and they basically put hey here's what um we care about for like this textile and then here it gets the defaults and it does like a merge which i assume will basically take properties from the defaults and then copy them which i kind of wish that that like came out of the box because i might want that right like i might want like the default textile solution does this like okay what if i want body one but with a different text size but i want everything else to be the same like there's no good way to do that other than like this solution here um interesting okay i think actually i'm going to play i want to play around with this as we go play around with this solution we're kind of using the out-of-the-box typography with the urbanist style and i want to see where that gets us and see if we have issues down the line before i overhaul the whole thing um we'll see how it goes but i'll keep puppets and rubik in my [Music] for the future uh cool is that oh that's not everything i wanted to do um but it is enough for password input updates so let's throw that pull request up um in the chain of pull requests that i'll merge all of them after the stream and fix this to password input this includes um fixing the adjust resize i don't know does this include address resize yeah just for size change as well as fixing the radius and some typography updates uh was there anything else also updates password mask um let's be design stuff and then we'll throw that in onboarding and i'll clean up the pull requests after the stream let's keep this going um but i want to play around with um edge to edge ui here so let's do that and then i think after that we might end up calling it a night we'll see and let me just check in with megan real quick one sec um okay so edge to edge ui what do we need to do to make that happen um um i'm gonna time max like 15 minutes to see if i can pull it off sorry i'm going to time back like 15 minutes to see if i can pull something off um so the first thing is well how do we get rid of these system bars well i think um that needs to be done at where is it at i think part of this is um in the activity i need to like um speed round okay um i think part of it is i need to um set like transparency ah here we go uh disabled decor fitting so for your view hierarchy to be able to receive insets you need to make sure to call window compat that set decor fit system windows from your activity let's just copy that line you also need to set the system bar backgrounds to be transparent which can be done with our system ui controller library i could do that that i might just do um do i want to do that okay well let's do the first part so main activity um we're going to call this um and then you know what i know i can do this via xml but screw it i'm going to follow their library too we are going to take this implementation um and we are going to set the system our backgrounds to be transparent let's do that um go to our app drop this in 0.19.0 okay um how do we do that uh we go here we go uh copying this then we basically need to put that all in here and let's go and set content so if we're in light theme we want dark icons that makes sense as we'll have the light background um we're getting rid of comments okay let's run this let's see what this gives us and if i'm if it's what i expect we will see an end-to-end experience but it won't be pretty for example the button will basically come down by the [Music] too close for comfort to this uh navigation bar maybe even draw on top of it um so let's see oh actually it didn't draw on top of it because um yeah okay so this worked out kind of by luck um and i say kind of by luck because we don't have enough on the screen to like have interacted with anything um but let's say let me show you what could have happened first all right let me commit this and then and let me show you what would have what could have happened here um as an error we need to think about so let's go back to our login content and just um uh let me put it below here so i just want to show like a similarities i'm going to put a spacer and i'm going to give this a weight of 1 to fill up the space which goes back to what we had earlier where everything gets pushed down at the bottom of the screen right so in an edge-to-edge situation um what that will do is um sorry you'll see is ah so like this so i sign up button you see it is like aligned with it's showing behind this status bar and then i can scroll actually this is scrollable but um there's not enough content so actually like it really can't like i just i can't get to this button i mean i guess i can click there why did that close but uh yeah we don't like that right we want that to have some spacing there so what we want is we actually want to use one of the pattern tools that comes from this accompanist insets so you can see it provides some modifiers easily use modifiers so we have like status bars padding navigation bars padding system bars padding ime padding navigation with ime padding so in or yeah so in this case with this thing at the bottom this is actually called the navigation bar so what we would want to do is basically on the button uh where is it at so actually this vertical spacer which we have as like the bottom padding um we actually want to rework this to let's put in uh let's just do a regular spacer here so we can use the modifier what i want to do here now i could put this on the sign up button i kind of like spacers but technically i could put this on the sign up button because the button is the last thing um but either way we'd have a modifier and we'd do padding and actually what's really cool so we could do bottom is equal to content padding dot calculate bottom padding and then we can do navigation bars padding i think that's what i want yeah um and what this does under the hood is it's kind of like a composed interesting i think what this will do is it will it won't override my previous bottom padding i think what it's supposed to do is take that bottom padding and then also add the navigation bar's padding so if i run this now i'll remove that vertical spacer later but i think this will make sure that we um don't have any issues with the status but the navigation bar at this point and that didn't do it why not is that not do i need to put it on let me try putting it on the button because maybe spacer is weird here um um i think that's right i don't want to put it on the column itself although i could no because then i might have the weird issue again when the keyboard comes up so i want it to be on the button um what the heck maybe i want do i want navigation bars with irony padding maybe oh this could this actually idea might help our other problem he doesn't what happens here okay you know what i think my vertical spacer is screwing us up or am i like this weight modifier i think that's what's screwing everything up where do i how do i get rid of that let's get rid of this spacer i think that's what's screwing it up um why do i always run it with it have a good night raphael we'll see you next week i'll be wrapping up soon so you won't miss much um honestly it's just kind of habit i don't have any breakpoints set right now but it's just kind of out of habit um wait what the heck so why is this scrolling anymore what did i break oh no okay i'm hitting my time limit i don't know what the heck i broke by adding these insets um i might need to look at the broader git diff and figure this out but i don't think i have time to go back and figure out what the heck i did wrong here okay so forget the edge to edge part of this we will pick up next week next week we'll either do edge to edge or we'll focus on documentation i actually think next week we're going to come out with documentation first so it looks like a lot of you who just tuned in for the first time thanks to griffin's rape um are new here let me recap exclamation point github in the chat if you haven't seen the source code for this um this is an android app i started recently for doing um sort of we want to get to a wholesome task management application there is the top of the readme there's not a blog post on my blog i have um a blog post where i kind of explained why but um we're not too far into this project recently the last few streams we've been working on the login screen that's why the title of this is like will we ever finish the login screen um we did do that today for the most part we were playing around with the ui of it but we technically did finish like the core functionality of the login screen so now that we've finished a screen from end to end my next stream i actually want to kind of do a recap of the code base and also document how it works because the login screen is going to be the scaffold for every screen coming forward and i think that not only will i recap the project but i want every stream to be kind of a learning exercise so we'll also go over like what makes good documentation um i think that it's i wouldn't even call it a soft skill documentation is a technical skill that we don't really teach or knowledge share on but it's expected of all of us documentation is part of our job but how many blog posts and tutorials out there on writing technical documentation so next week if you can join us next wednesday night uh i'm gonna take a stab at that and share my process for writing documentation both within the code itself code comments but also like broader markdown files and architecture diagrams how do we make sure those are helpful um how do we document sort of the processes in the app i think we could spend a whole night just on documenting and the goal of that stream will be for anyone who joins in to sort of learn about documentation but then also as we continue down this project um and we bring new people along the way i want them to be able to go to this github repo and i actually want to add something and say you know here's the documentation folder i want it to be if you spend an hour reading this that you're up to date on the project and you don't write docs i don't a lot of people don't um and so hopefully you know i can change that or make it so that the ones we do write are helpful so uh yeah that will be the plan for next week um tell your friends i'll probably share this like it won't be obviously we'll be documenting an android app but i actually think it'd be really good for anyone who likes hanging out with the you know software and game development streamers um to learn about documentation um so that's what we'll do next week so yeah thank you all for joining me i've just hit my limit so before we hop off let me see if there's someone we can raid uh i know lando is on if there's not any other okay i actually don't have any other science and tech streamers on right now so we're gonna go raid lando he's a professional rocket league coach one of my favorite streamers to watch so let's go show him love and uh i will see you all next wednesday and thanks for coming by i i do this every time i hype up the end of the raid and i forget that it takes 10 seconds to start a raid so then i sit here for 10 seconds trying to fill space until we can go by all right see you all next week you

Channel: Adam McNeilly

Views: 477

Keywords: Android

Id: WnBlasYi6us

Length: 164min 2sec (9842 seconds)

Published: Sat Oct 16 2021