Exposed Drop-Down Menu - Forget about Spinner | Android Studio Tutorial

uh hello there and welcome back to my new video in this video i'm going to show you how to create a drop-down field and we're going to use a material designer library for that so this drop down menu will kind of be a replacement for an older spinner because the old spinner is not that customizable like a new exposed drop down menu so in order to create a drop down menu here uh first we need to search for a text input layout so text input layout and let's just add here uh on our screen so as you can see inside our text input layout we have a text input edit text and we need to replace this text input edit text with the autocomplete text view so let's search here for autocomplete textview and let's add that here inside our text input layout and let's remove this text input edit text so uh now let's just select this text input layout and let's connect the left right and the top constraint so all constraint margins should be for example 32 okay so something like that and now i'm going to open up this xml code and here for our text input layout we need to add the custom style so here i'm going to search for uh x posed uh drop down menu so here as you can see we have four different styles we have a outlined box exposed drop down menu then we have a field box expose the drop down menu then we have field box dance expose the drop down menu and outline box dance exposed drop down menu so of course you can choose whatever style you want and for this case i'm going to first select this first one so outline box expose the drop down menu and now our autocomplete text view will basically get a new look so now as you can see this is how it should look like and now for our autocomplete text view we need to increase this layout width to match the parent and the layout height to match the parent as well okay so it looks very nice and of course we can remove this default autocomplete text view text and we can write here for example maybe english okay so this is just for the example purposes and i'm going to rename this autocomplete text view id to just autocomplete text view so let's refactor that okay perfect and now let me just run the app so i can show you how this uh expose the drop down menu will look like and of course we're going to customize that further more so now as you can see it looks very nice and here when i click that as you can see we have an option to actually type inside this autocompletetextview but that's not the case because we want to create a dropdown menu instead and we don't want to be able to actually write here inside and don't worry we're going to fix that easily by adding just one attribute inside our autocomplete text view so here we need to add the input type to none and now whenever we run our application we will not be able to type inside this autocomplete textview so as you can see now when i click nothing will happen and now we need to create basically items uh inside this drop down menu and for that first we need to open up our strings xml and here i want to create just a simple string array and here the name should be for example languages okay and here i'm going to add just the three items so the first item will be english the second item can be for example german and the third one can be for example chinese all right perfect so now we can close that so uh instead of just adding that string array to our autocomplete text view or to our text input layout we need to create arrayadapter so for our array adapter we're going to need to create a new layout resource file so let's add here a drop down item just press ok and here we just need to add the one simple text view so now i'm going to basically remove this constraint layout and just add this a simple text view so here i can remove basically everything and i can just copy this one line of code then remove this constraint layout and here i can just import some of those things let me just remove those uh two lines okay perfect let's just zoom in and so i'm going to customize this text view a little bit because this text view will basically represent one item inside our drop down menu so here i'm going to add for example a padding on all sides to for example 14 dp width can be a match parent here so it can look like a row okay next i'm going to add here a text color to black then a text style to bold and the text size can be for example a 16 sp okay so something like that and basically this is how our simple text should look like inside our drop down menu so now we can close that as well and we need to open up our first fragment to actually create array adapter for our drop down menu so here i have already enabled the view binding to my project and inside the oncreate view i want to create a new variable name the languages and here i'm going to get the resource which we have created which is a string array so get a string array and here i'm going to pass r dot array dot the languages then down below i'm going to create another variable named array adapter and here i'm going to call array adapter and inside i need to pass a few parameters so the first one is the actual context the second one is the resource or our layout which we have created so r dot uh layout.dropdown item and the third parameter is the actual uh string array resource so let's pass here a languages variable which we have created the earlier and down below i need to call our autocomplete textview to set that adapter so here let's pass our arrayadapter and now let's run our app to see uh how will that look like okay so now as you can see when i select this drop down menu we will be able to see those items and as you can see we have three items which we have defined inside our string array and those items have this unique style which we have defined inside our dropdown itemxml layout file and of course we can select each one of those items okay as you can see it works perfectly fine so of course you can use a different style for this expose the dropdown menu so for example uh in our case we have used this outline box so we can now remove that and let's uh type here drop down and down below we can select one of those four so we have outlined box field box and as you can see field box danced and outline box dance and in this case i'm going to select for example this field box drop down menu and of course for this autocomplete text view height i'm going to select the wrap content okay so now it looks even better and this is another style of this exposed drop down menu so you can use this field one as well so you can see it looks something like that and now you might be wondering why this text is actually not centered with our exposed drop down menu well i don't know if it's a bug or something but in order to fix that we will need to add basically a padding to our autocomplete text view and here for example let's just add a padding top to for example let's say 16dp and padding a bottom to 16dp as well and now as you can see this text will basically be centered with our exposed dropdown menu so now it looks even better so there is only one more thing which i want to show you so it can happen sometimes for example uh when you have this exposed drop down menu inside for example first fragment and then you navigate to a second fragment and you get back to first fragment and in that case you might not see this exposed drop down menu right here with all those items and in that case you just need to to put those three lines of code inside the on resume function so let's override on a resume here and here we're going to add those three lines of code so for example if we don't add those three lines of code inside this on resume let's see what will happen so let's just undo everything and here i'm going to just rerun this activity so now as you can see this drop down menu will show only this english and in order to fix that you just need to basically add those three lines of code inside the own resume function and now when we launch this activity only you will see that we will be able to get all those items and finally i want to show you how you can add the custom icon and the label on your expose their drop down menu as well so first i'm going to open up this fragment first layout file and here i'm going to use a different style because uh personally i like using this uh outlined version so uh exposed drop down menu outline box so this one and now i'm going to show you how to add a label to your exposed drop down menu so here on a text input layout we need to add a hint attribute and for example here we can type languages and let's run the app so you can check that out so now as you can see our expose the drop down menu contains this label or a hint it looks even better so finally i'm going to show you how to add the icon so here on your text input layout we need to add a start icon drawable and here we need to link our icon so for that i'm going to just add here a simple vector asset and here i'm going to search for a language icon so this one just press ok and let's rename that to a language click next and finish and here let's just add here this new icon and let's run our app and now you have an icon as well so there are more attributes which you can customize inside this text input layout those were just a few so basically that will be all and i have shown you how to add that exposed drop down menu which is a replacement for an older spinner and also i have shown you how to add an array adapter and of course how to change some of its properties like icon hint input type and so on and that will be all so i hope that you have enjoyed this video please like this video if you find it helpful of course and see you next one is

Channel: Stevdza-San

Views: 35,786

Rating: 4.8797326 out of 5

Keywords: exposed, drop-down, drop, down, menu, spinner, outline, outlined, fill, filled, material, design, android, studio, tutorial, how to, guide, kotlin, custom, customize, list, change, color, onclick, adapter, array adapter, autocomplete, textview, auto, complete, text, view, autocompletetextview, replace, instead, select, one, from, item, drop down, label, hint, stroke color, icon, start, end, component, components

Id: 741l_fPKL3Y

Length: 10min 43sec (643 seconds)

Published: Mon Mar 15 2021