How to Build a Multiline Text Field With Hint In Jetpack Compose

hey guys and welcome back to a new little jetpack composer storyline in this tutorial I will show you how you can build a multi-line custom hint text field in Jetpack compose so I think it's best if I just show you what I mean here this is a custom text field very often you have apps with custom UI requirements so you can't use the normal material design text fields and these custom text fields in Japan compose don't support having hints by default so we would need to implement that in our displaying a hint itself is pretty easy because we can just check okay if this text field is commonly focused and empty then we show an additional text on the text field however for multi-line text Fields doing this is quite I don't want to say quite complex but it's not trivial because the hint is a separate composable in this case we also need to make sure that the text Fields expands with the hint if we if you allow to have multiple lines so if we type something here like hello you will see that now it will adjust to the size of our actual text and it will expand as many lines as we want until it reaches a certain amount of Maximum lines and then this text here becomes scrollable so I will show you how we can create such custom text fields and it's really not about this really great text field but rather just a text field you can freely design based on your UI requirements I'll also show you how you can always make the hint perfectly fit into this text field even if the hint spans over multiple lines and while all this sounds very complex the solution to this is actually fairly simple but I think many people don't know that this is a way of using a text field in compose so just empty Jep a compose product I'm going to go to our root package and create our custom multi-align hint text field make it a file put a composable custom multi-align hint text field it'll take a value parameter it will take a modifier it will take an on value changed function which will just give us the new value whenever we type something let's put that as parameter number two we then want to have a hint text which is simply a string and empty by default so it's optional if we want to have a hint or not we want to be able to pass a text Style just from compose the default will be material theme typography buddy one and finally we want to be able to have a number of Max lines which I'll default to four so the max lines will determine how many lines this text field will then expand if we enter new lines and after having four lines it will start to become scrollable and then in here we are going to use a basic text field so in Japan compose we have these different text Fields like the normal text field we have an outline text field but all these are just material design specific text Fields so they already have an Implement design which just looks like these typical Google text Fields very often you don't want that in your apps in these cases you will need to use a base text field which is basically just a transparent container where you can input text and it's completely up to you how you style the transparent container and if you leave it transparent or not let's start to add the value which is very easy and on value changed we can pass our text style directly and we can pass the max lines as well our next lines like this now how do we do this with our hint normally you often see this for text fields that use in hint in compose that just below this you have something like if value is not empty and um oops and is focused for actually is not focused then focused then show some kind of text composer here which would represent the hint the problem with this is that if the hint goes over multiple lines then if this text has multiple lines this won't directly increase the space or text field fills because this text is not really part of our text field and that is the problem with these common approaches of implementing a hint text field and compose and the way we can fix this is we can use this decoration box and that is what I meant with that is really easy to implement the hint but I don't think many people know that this thing even exists and what it does and you can see the parameter we get in this Lambda is another Lambda and we can call this inner text field and this is a Lambda we need to call exactly once in this declaration box Lambda which will basically tell our outer or a real text field where we want to input the actual text but apart from that we can still add other composables inside of this decoration box we can then use to style this and part of that could be our hint because the advantage is that this decoration box is now part of this text field and if this grows that means our text field will also grow so what we can do is we can have a box in here where we pass our modifier because if we want our text field to expand then we also want to grow this decoration box in this case so the style of our real text field and in here we're going to check if the value is empty because then we want to show our hint you could also Implement that the hint is shown if the hit the hint is not shown if the text field is focused um in case you want that that is something I don't know if you would want that but in that case you could add a modifier and say Focus on Focus changed and this is called whenever the focus of this text field changes you get the focus date you can then use to check if it is focused you can put that into a state and then yeah you know if the text field is currently focused or not I'll leave that out here and just show the hint if the text Fields content is empty so in that case we can simply show a text the text will be our hint text and the color of this will be because we want to slightly grade this out it will be local content color dot current and we say that copy because we want to make this slightly transparent with the alpha of content Alpha dot medium so this local content color will refer to well the content color whatever kind of text color we use here we copy this and make this color a little bit transparent the medium one here even if we take a look at the documentation it's recommended to use the medium content Alpha for example for placeholder text in a text field which is exactly our use case here and then after this right here in the Box we show our inner text field above over a hint but in the end we will just show either the hint or our in a text field because if there is some text in our inner text field or real text field then the hint won't be shown and that's really everything we need to do to be able to achieve this type of behavior you can see this is super simple but I don't think many think of this decoration box and have very complex to you maybe calculating how high a specific line is then multiplying that to determine the height of our text field and I've seen very crazy implementations there and this is really the easiest and most reliable solution let's try this out in main activity let's add a column modifier is modifier filmic size let's add a bit of padding of 16 DP I'll enter to import that and then in there we're going to have our custom multi-line hint text field and usually in a real product I would leave all this custom by the way because this doesn't really add any value to this I would just call it multi-line hint text field but I use this just to stress out that this is a really focus on a custom design in here we want to have a text state so we can have a VAR text but remember mutable state of empty string by default Alt Enter to import that Alt Enter import again pass in our text when the text changes we say our text is now the new text we want to assign a hint text something like hello world we then have a new line hello world and let's have one more new line hello world something like this and the way we can now style this is with our deer modifiers so we just assign a modifier for example with fiddlemax with we could clip this to the rounded Corner shape for example 100 you have perfect round corners we could then give it a background color of I don't know material theme colors that surface Maybe we can then give it a bit of padding 16 DP you could add Shadows you could now style this as you like you would also give the border for example um so feel free to play around with that let's just launch this as it is and see how it looks like this is still the old app okay we get a completely black pill here um which is because my device isn't Dark theme and we haven't adjusted the hint color here I would say we just change this to something we can see here um just to see if this works to light gray for example relaunch this and then yeah it's the same color of course this looks super weird with um full rounded Corners we can adjust this to something like 5dp for example and then we can see it looks like in my sample if we now type something here and say hello then it will shrink to just having one line and we can enter up to four lines here if we change our Max lines right here Max lines to something like seven for example and take a look then it will expand up to seven lines so a little bit more and with that you now have a very easy to adjust text field that supports a hint that supports multiple lines and that expands with um yeah when typing so I hope you enjoyed this video and learned something new if so you will definitely also enjoy my more advanced Android premium courses which you can find using the first link in this video's description apart from that thanks for watching and I will wish you an amazing rest of your week see you back in the next video bye bye thank you

Channel: Philipp Lackner

Views: 9,333

Keywords:

Id: pGeaLBGFoec

Length: 10min 31sec (631 seconds)

Published: Wed Apr 19 2023