Material 3 Search Bar with Jetpack Compose - Easy Tutorial

foreign design component which is called a search bar so let me show you a demo of this component that I have prepared for the demonstration purposes so let's click on this search bar and whenever we click the search bar then it will basically fill the whole screen a new trailing icon here will appear that will allow us to basically remove the text from the search bar and we are going to see here some items in this drop down we can also of course type here anything for example kotlin programming we can also just remove data text if we press this x once again after we have removed the text then this search bar will change its active State also of course we can specify here some query we can press this search button and then a new item here will appear and there you go so without further Ado let's get started here as you can see I have a simple composable function and a scaffold now inside our scaffold I'm going to call here a composable function with the name of a search bar now this search bar contains multiple different parameters from which a couple of those are actually mandatory or required so before we start adding those parameters I'm going to open up the source code of this composable function so here we have a multiple different parameters the first query is basically a text or a string that will be dynamically changed whenever we type something inside our search bar the second one should basically update our query whenever we try to type something inside our search bar next here we have our own search so whenever we press search ime action then this Lambda will be triggered next here we have a active Boolean value which basically indicates whether our search bar is opened or not then we have our own active change so this land will basically update our active value or a state then we have a modifier we have enabled Boolean value so whether our search bar is actually enabled or not then we have here a placeholder which represents basically a text that should show up on our search bar when our search bar is empty we have here leading icon and a trailing icon so the leading icon will be displayed on the left side of our search bar and the trailing icon will be displayed on the end of our search bar hour next we have our shape so we can customize the shape of our search bar we can customize the colors of our search bar a tunnel elevation we have a window insets interaction source and we have a Content that will be displayed inside a drop down that will be triggered whenever we press on our search bar so now let's go back to our main screen and here I'm going to create for now two different states the first one will be named a text let's call Hero by remember to remember one simple and mutable state which default value will be an empty string right so that will be our default query we can also just copy that and pass that to our query parameter and the second one will be named the active and it will represent an active state of our search bar a default value here will be false specify that are right here on our active parameter the next thing let's handle here on a query change so whenever we type something inside our search bar then we want to update our actual text so so just type here text equal to it which is referring to our actual text that we are typing in our search bar next this on search lamp that will be triggered whenever we press the search ime action on our software keyboard and in that case I want to change here this active state to false so that we can actually close the data drop down of our search bar right okay and here we have our own active change so whenever we change the active state of our search bar then we want to update this active State as well okay here we also have a warning so let me just here add an experimental material three uh annotation there you go and for now we have a specified here all those required parameters now we can run our application and check out to see how this search bar will look like for now okay so here we can see our search bar and at the moment we don't see any placeholder whenever we press on this actual search bar then that the search bar will basically expand to fit the whole screen in this case is okay we can just click here this is a bank button to change its active state so whenever we press this search bar then this on active change listener or lamp that will be triggered and this active will be changed to a true and of course whenever we press here this is a search ime action then the active will be changed to false okay and that's how we are able to uh change that active state of our search bar what we can do here also we can specify a modifier to fill the maximum width of our component so fill the maximum width and now our search bar will take the full width of this parent now of course a default shape of this search bar is a rounded Corner shape but of course you can change that anytime all right so now let's proceed with some other different parameters of this component let's add here a placeholder for a placeholder we can just specify a simple text which will say maybe search just like that let's specify here also a leading uh leading icon let's call here icon with the image vector and as an image Vector I'm going to call a default icon which will be named search there you go here we can just write a search icon perfect Let's uh also launch our application to see how now this search bar will look like so now we should be able to see here a placeholder that says a search there we go and we can also see that the leading icon search icon okay and there we go okay so everything works here perfectly fine we can change the text state of our search query there we go next I'm going to also implement the trailing icon or the icon that will be displayed there on the end of our search bar now let's here write a trolling icon and then I'm going to show you one trick so for the icon to just copy this same composable function and change here this icon to be close icon here close icon as well and I'm going to add here also one more parameter for uh on click listener so let's add here a modifier clickable and whenever we press that close icon we want to change our text query to an empty string right and also I'm going to add here one if check and check whether this active state is true so only when our search bar is in this active state only then we want to display this close icon on the end of our search bar all right there we go and now whenever we click this search bar and it changes its state to active to true and then this a trailing icon will appear okay and now if I type here anything and press this close icon and then this text query will change to an anti-string and there you go what we can do here also we can Implement one more logic so whenever we try to remove here any text from this search bar and we actually remove it and if we press this X or close icon one more time then we also want to change basically the state of our search bar back to false to actually close that okay and for that I'm going to implement here a logic in our clickable modifier so I'm going to say here if text is not empty then I'm going to change that text to an empty State and in else case if that text is already empty and we are trying to click this icon then I want to change here this active State back to false and now let's launch this application to see how all this look like so now let's type here anything press this x icon it will remove that text and now if I press that icon once again then the search bar will close all right let's proceed now with our search bar to add some of other different parameters or actually the content of our actual search bar so for the content I'm going to first declare here one more state that will hold a list of multiple different strings in this case those strings will act as a data that will be displayed here in the drop down of our search bar okay so let's hear the clear items let's hear a remember this value I'm going to call here a mutable State a list of because here this will be actually a list of multiple Different Strings right the first string will be named let's say [Music] um my YouTube channel name okay and the second one will be a Android development okay and now uh inside the the content Lambda or content parameter for search bar I'm going to add for each Loop so for each and every item in our list I'm going to call here a for each and I'm going to display here one composable function to reflect those items in that drop down so here I'm going to add two different components inside a row I'm going to add here a padding on each and every side to be maybe let's say um 14 DP and inside the row I'm going to add the one icon is the image Vector I'm going to call here icons default dot history so this is a history icon is not available in a regular material dependency which is why I have added here an extended version of those icons okay uh all right so let's just here write a history icon and I'm going to add here a simple modifier uh padding on the end side so that we can separate this icon with one more component that I'm going to add right now and that component will be a simple text so here is a text I'm going to just write here it which will be referred to that same item from this list okay and also uh I just now actually launch our application so we can see now how this is a drop down of our search bar will look like so now if we press this search bar then the drop down will appear and we are going to see here those actual items that we can specify right here now in most real projects you are going to fetch that actual history data for example from a local database or even a remote database so that's how it will work this is just for the demonstration purpose and also I'm going to show you how you can actually add more of those items in that list whenever you click this search icon so let's just Implement here one more query so on a search so whenever we press the search we also want to add some more items to this items list so items dot add and just specify here the text okay all right and now let's launch this application once again so now whenever we try to type here something in our search bar and press that search icon for example let's type here uh kotlin programming and now if I press here this is a search icon then a new uh item or a new element here will appear okay and what we can do here also whenever we press it says search we can also clear this text and specify its default value to be an entry string and now our search bar will look quite beautiful and quite functional so let's here open that up never mind about that the third item that hasn't appeared here because uh in this case we only have two of them that we have persisted right so let's here just write again kotlin programming let's press a search and our search is now actually closed and we have here a new item and there you go so this is how that the new material 3 search bar looks like and works in Android application with a Jetta compose so if we have any questions or doubts about this component feel free to comment down below and of course be sure to like this video but only if you find it helpful for this video that will be all oh my God if I die I'm a legend when they lay me down to rest

Channel: Stevdza-San

Views: 19,400

Keywords: search, search bar, bar, widget, android, kotlin, android studio, compose, jetpack compose, material 3, design, how to, guide, tutorial, implement, use, close, query, dropdown, items, android development

Id: 90gokceSYdM

Length: 12min 21sec (741 seconds)

Published: Mon May 15 2023