Material 3 Search Bar with Jetpack Compose - Easy Tutorial

🏆 My Online Courses
stevdza-san.com
☕ Buy me a Coffee
ko-fi.com/stevdza_san
📝Medium
/ stevdza-san
💻 Github
github.com/stevdza-san
📸 Instagram
/ stevdza_san
💎 Become a Premium Member
/ @stevdzasan

[@tonnie7079]

Wow, great stuff, I like how the SearchBar Compoent expands and shrinks, super good stuff.

[@RichardMaidenCG]

Clear and concise. Thanks a lot! 🤓

[@muhammadirvan8655]

Great tutorial, thanks for sharing Stevdza-san!

[@StevdzaSan]

You're welcome 😊

[@marcelacharry]

Hello, great tutorial.Thanks

[@user-sx8re4gc7l]

Hi, how can I modify the text style of the input user types in search bar?

[@erpanpamuji9462]

thank you sir

[@abderrahimelgomri1626]

I'm working on your course todoapp , and I tried to work with this searchBar or DockedSearchBar but I had a problem which is that I get a view with suggestions I tried to disable it but I couldn't , do you know how to do it ?

[@aimtodev9009]

Thanks for what you do!
Can you share how you did the auto fill of parameters in 1:08, please?

[@jaelsonwagner]

Amazing tutorial, @stevdza-san. Very objective.

[@metromancn]

Nice job

[@elzubairelseddeg4047]

Thanks

[@Noor_alden]

🤩🤩

[@greensquadz7651]

Nice, Could you make a tutorial about implementation of admob ads ( banner, interstitial and native ) in jetpack compose cuz its still rare in YT 😊 thanks

[@victorsokoluik4573]

It's awesome idea!

[@fedro2439]

Hi, can I ask. How can I use this SearchBar on bottom of screen? my problem is when the searchbar on focus, it goes up out of screen.

[@pigua7705]

good job

[@user-ed8xj1py6w]

Hello! Where can you get the source?

[@AndrewDChristie]

Thanks!

[@StevdzaSan]

Thanks Andrew!

[@kevalkanpariya]

Please make video on Oauth2 Authentication with Webview using Jetpack compose
How the CallBackUrl retrieved from the api and retrieve access token to make api calls.

[@Revitalish]

what if i use this searchBar above a list of items and I don't want it to hide my list or to show me the searchbar menu with history searches? i want the bar to stay as it is and simply filter my list when I press the search button, how do I prevent it from changing it's presentation once I click on it to type something?

[@maiaman3610]

How can I add padding to the Search bar without changing the padding when it expands?

[@erayagdogan3389]

My best workaround so far is adding this modifier to Searchbar:
Modifier
.padding(if (isActive) 0.dp else 16.dp)
.animateContentSize()
edit: This method is not efficient in terms of performance . Use this instead:
val searchBarPadding by animateDpAsState(targetValue = if (isActive) 0.dp else 16.dp)
SearchBar(
modifier = Modifier
.padding(searchBarPadding)
.
.
.

[@chandra_83]

How to place SearchBar with Title in Scaffold ? Can you provide an example for that ?

[@user-ed8xj1py6w]

How to connect Search Bar ?

[@ww6670]

Hey, I have a question about the SearchBar function. Did you code your own or can we inherit it from somewhere? If it is your function, where could I get the entire code? Thank you in advance

[@StevdzaSan]

That's a composable function that comes with the compose material dependency.

[@ww6670]

@@StevdzaSan Do you mind sharing which dependencies you added for this code?

[@StevdzaSan]

@@ww6670 material3 compose

[@vickramodero6971]

@@StevdzaSan SearchBar compose is not available currently

[@muratcakr1264]

@@vickramodero6971 added after 1.2.0-alpha01

[@YeldarRating]

hello, how can I add some spacing vertically and horizontally?

[@maximkarassev1016]

Just use modifier

[@wm9dz]

How to save history of search in database in app ??

[@StevdzaSan]

Use ROOM database.

[@Sj-yf2jg]

make a video about search in lazycolumn list, using searchview

[@StevdzaSan]

It's not that different. You just need to connect the dots. 👌

[@Sj-yf2jg]

ok i will try

[@Sj-yf2jg]

Where is the this video project source code link?

[@StevdzaSan]

@Sj I didn't include it since it's quite simple.

[@Sj-yf2jg]

@@StevdzaSan ok

[@ghrafkly]

Can you please provide a list of your dependecies? I can't seem to find the correct material3 one for SearchBar

[@StevdzaSan]

Every default compose material 3 project template in Android Studio has it.

[@ghrafkly]

@@StevdzaSan mine doesn’t. I am using Flamingo

[@StevdzaSan]

@@ghrafkly Try using the latest Compose BOM version: developer.android.com/jetpack/compose/bom/bom-mapping

[@ghrafkly]

@@StevdzaSan Looked like I had to update my Kotlin in build.gradle to 1.8.10. Still have an error on app load, but the app seems to be usable atm

[@bhartendukumar]

implementation platform('androidx.compose:compose-bom:2023.05.01') change into to this one

[@abderrahimelgomri1626]

I prefer adding an IconButton instead of a simple Icon with an onclick modifier .

[@StevdzaSan]

True.

[@khaderel-truk7790]

first like🎉

[@top10channels31]

Can you make a video how to open a dialog when fcm notification received in app whether app is closed or open. Any one interested in this topic leave a like