TextInputEditText - Material Design Edit Text | Android Studio Tutorial

uh hello there and welcome back to my new video in this video i'm going to show you how to add and use material text fields so this new material design text field is a kind of an improvement for an old edit text and now i'm going to show you how to use it and customize some of its uh multiple properties so to add material a text field first we're going to search here for a text input layout and just drag and drop that right here on our screen and let's connect the left right and top constraint let's add the margins here for the 32 on each and every constraint right here and now you will see that this text input layout contains one text input edit text and now i'm going to show you how to customize this uh text input edit text and make it look beautiful so first let's open up our xml code and here before we continue i just want to add the ids for our text input layout so let's add here text input layout and down below i'm going to add the id which will say uh text input edit text okay perfect so i'm going to remove the hint from our text input edit text and i'm going to add a hint on our text input layout so right here and i'm going to add hint which will say a name and we can choose a different styles for our text input edit text and here i'm going to add a style attribute and i'm going to search for a text input layout so here we have a outline box we have a field box and here i'm going to choose a outline box so this one so text input layout outline box okay so this is how this outline box will look like for now so let's run our app so we can see uh how will that look like in our android emulator so our text input layout only contains this one hint and when i click on our field you will see that this hint will basically go on the top of our text input edit text and here we can write anything we want uh also here we can include one icon so we can use a start icon drawable attribute to link some icons so for example let's run our app to see how will that look like for now and now our text or our edit text will basically get this icon on the left side and now it looks even better next what we can do we can also add some helper text on our text input layout so here let me just add a helper text and here i can say for example required and here i can also add the helper text text color and here i can add the red color so now let's run the app and now you will see that here we have one helper text which says required and it basically means for example that we need to uh fill out this field uh next i want to show you how you can add the character count to your uh text input layout so here we just need to add the counter enable to true and we need to set a counter max length for example 220 so now let's run the app and now let's see uh how will that look like okay so now when we start typing here you will see that this counter will increase and the maximum characters which we can type here is a 20 but of course we can type even further than 20 and when we cross that number of 20 then this text will get this red color which will basically mean that there is some error and of course we can limit our text view or our edit text to 20 characters only so on our text input edit text we can add here a max length and here we can set for example 20 so now let's run our app to see uh how will that work okay and now let's try and type here uh something and as you can see we will not be able to type further than uh 20 characters so that's how you can limit this number and of course you can add here a limit of a 21 so that you can actually see that that the red color on the stroke of our field so let me show you that and here i'm going to type just basically anything and here as you can see when we cross that 20 we're going to see this error color around our edit text and now i'm going to show you how to add the end icon and here we're going to add the one attribute named end icon mode and here we have a couple of modes so we have a drop down menu then we have a non then we have a clear text password toggle and a custom so for now let's choose this text or clear text and let's run our app and now as soon as we type a character inside our edit text we will be able to see this uh and icon at the end of our field and when we press this x icon it will basically remove all the text from our edit text so as you can see that's how it works so next here we also have a password toggle and for example on our text input layout i'm going to add the input type of text password and here i'm going to rename that for example to password and i can just rename some different icons so for example lock icon so now let's run the app so we can check that out and now as you can see uh when we press uh and the type here anything we will not be able to see those characters because we have chose the text password input type for our text input edit text and also at the end of our field we have this i button toggle and when i press that we should be able to see the content of our text input edit text and when i press again we should be able to hide those characters as well now i'm going to also show you how to add a custom and icon mode so for example if we choose here a custom then we can specify our own icon at the end of our field and let's type here uh and icon drawable and here i'm going to choose for example a check mark icon and in order to check onclicklistener for this and icon we will need to open up our first fragment and here we will need to call a binding to get our text input layout so not a text input any text but a text input layout and here we need to call a set and icon on click listener and here for example i'm going to just display a simple toast message which will say for example uh clicked and here i'm going to just set uh toes dot length short so now when we press this icon we should be able to see this toast message so now we have implemented our own custom icon and here of course we can customize this icon's behavior by ourselves and in this case when i press this icon we should be able to see this toast message which says clicked and of course you can customize the behavior of this end icon by yourself this is just an example next what i want to show you is how to actually add a prefix or a suffix with your text input layout so for example here i'm going to choose a different name or different hint for example number i'm going to change here icon to a phone and here i'm going to add a prefix attribute so prefix text and here i'm going to write for example plus one which is a country code for america and here we can also add a prefix text color here i can choose for example let's say maybe a purple and now let's run our app to see uh how will this prefix look like with our text input layout so now when i press on this text input layout you will see that now we have a prefix of a plus one so this prefix can be used for example with the numbers where we can detect the country where user is coming from and we can enter its country calling code right here as a suffix and here we can just add some number as well and of course i can change here uh this input type to a number so now let's run our app again so it will look even better okay so now we can type just the numbers and this is how it can look like of course there is one more attribute to add the suffix and that's basically a text at the end of our text input layout we can just add here suffix text attribute but i'm not going to add that at this moment and finally i want to show you how to enable error mode so here on our text input layout i'm going to add the error enable to true and also i'm going to add the error icon so error icon drawable and here i'm going to just link one error icon so now as you can see we don't see any error icon here and that's because we haven't implemented that error yet so now i'm going to open up a first fragment so just below our binding text input layout i'm going to add the binding text input edit text this time and here i'm going to add the do on uh text change the listener and here for example i'm going to write so if a text length is greater than uh for example 10 then i can just call a binding text input layout dot error and here for the error message i'm going to type for example no more okay and i'm going to also add the else if block and here i'm going to write if a text length is less than 10 and if the length is less than 10 i can just disable this error message by just calling our text input layout error and we can set its value to null and that way we can disable this error so first let's run the app so you can check that out so now we should be able to see this error when we type more than 10 uh characters inside our text input added text so now i'm going to type here uh some numbers so 11 and now as you can see when the value is greater than 10 which is 11 then we should be able to see this error icon at the end of our text input edit text and as you can see we can see the error message which we have already defined which says no more and now if i remove at least one character or two as you can see that error now will disappear so that's how you're able to use this error mode with your text input layout and now you've seen multiple ways of customizing your text input edit text and also there is other style which you can use with your text input layout so in this case i have used the outline box but you can use a field box as well and the field box looks something like that but my personal preference is the first one which is outline the box so there is one more catch which i haven't talked about so if you don't see this character count or this helper text then you should change your layout height on both the text input layout and the text input edit text to wrap content so if your layout height is not a wrap content then probably you will not be able to see those two views at the bottom of this text input layout like this helper text and this account character so that will be all for this video i hope you enjoyed please like this video if you find it helpful of course and see the next my one oh my god if i die i'm imagine when they lay me down to rest

Channel: Stevdza-San

Views: 42,004

Rating: 4.9837661 out of 5

Keywords: textinput, text input, text, input, layout, text input layout, textinputlayout, edit text, edit, edittext, android, material, design, material design, custom, customize, style, filled, outlined, outline, fill, password, show, hide, type, character, prefix, suffix, hint, helper text, error, input type, count, characters, counter, how to, guide, tutorial, android studio, kotlin

Id: IxhIa3eZxz8

Length: 11min 34sec (694 seconds)

Published: Mon Mar 22 2021