Today, Android apps have more and more features and more data to show to users. Even with the best user experience (UX), even with a lot of data, it can be difficult for users to find what they are looking for.
One common way to make this easier is to use the search bar. And what’s better than the search bar? — —
Search bar with autocomplete!
If you want to learn how to add a fully customizable autocomplete feature to the search bar, stay with me.
And … use the latest Android UI Toolkit. Jetpack Compose.. :]
The project is mine GitHubPlease feel free to check. (A good option if you’re lazy! Stay here if you want to learn 😁)
As a prerequisite you will need Android Studio Canary.. the current, Jetpack Compose Only works with these Android Studio versions. If you use the last version, it’s ok.
If you downloaded the project, build and run the app.
This will be displayed.
All you need is a TextField and you can do whatever you want. is not a problem.
only Auto Complete It’s not enough, so let’s dive in.
As mentioned above, we’ve talked about “fully customizable autocomplete features”.
What this means is:
- You can decide how you want each single item Auto Complete A box that looks like;
- You can customize Auto Complete box;
- You can use any type as a list of Auto Complete item;
- You can define how and when to filter items.
The design may be simple. However, the implementation is not that simple, so pay a lot of attention to it.
If you use autocomplete, you need to filter the items based on the query.
This means you need to teach autocomplete how to filter them …
Every item you use needs an explanation of how to filter itself.
this is, Interface.. AutoCompleteEntity is an autocomplete item..
This means that you need to extend all the items you want to handle AutoCompleteEntity, And how to filter itself.
ValueAutoCompleteEntityIs a variation of AutoCompleteEntity.. The difference is that the value is also included.Later you will understand why AutoCompleteEntity Not enough.
In essence, I mean autocomplete, you were right!
There are many things to think about here.
What kind of things do you want to save for each Reconstruction??
- To make Auto Complete Track filtered items. You need to make sure you save it.
- You also need to know if the user is searching
- Also, Auto Complete The box can be customized at any time.
Speaking of the developer experience, how would you like to access these properties?
In my opinion, the best way is to focus all these changes in one scope.
AutoCompleteScope It will be our scope.I created to isolate the concerns AutoCompleteDesignScope Separately.
Therefore, the goal here is to be able to change any of these properties. Lambda with scope, TextField Defines the content.
How to save this state?
AutoCompleteState It is used to track the condition.
It implements AutoCompleteScope As mentioned earlier.
At the place of use, “onItemSelected“. This defines what to do when an item is selected. It consists of a lambda function that takes an item as an argument.
Do you remember this?
As you know, we AutoCompleteEntity type.
The problem is when working with non-executable types and implementations as a list of strings.
The workaround was to create this ValueAutoCompleteEntity, This too AutoCompleteEntity, But the value is included.
To convert any type to the required type, you need to add the following extension function:
Examine each item in the list and map it as follows: ValueAutoCompleteEntity.. “filterA parameter, “explains” how to filter this type of item.
Here is a usage example:
The layout is the simplest part.
I have implemented it so I want to shoot any item AutoCompleteEntity.
- item ➡️ List of items you want to use Auto Complete box;
- itemContent ➡️ This is each Auto Complete item Configurable components, corresponding items are available.
- content ➡️ This is where you place the TextField and apply the necessary changes. AutoCompleteScope..
To track AutoCompleteState,Use the Remember the function..
To draw and create your content AutoCompleteScope Available, it Must It is called as follows:
The· Auto Complete The box itself is “itemContent“Layout.
To fill in the LazyColumn items,FilteredItems” Field AutoCompleteState keeps updating according to the filter..
To draw Auto Complete For boxes, LazyColumn uses the following modifier functions:
This Modifier function is a parameter Current AutoCompleteDesignScope Being tracked AutoCompleteState, Apply everything accordingly.
If you want to check the code in a cleaner way, check me out GitHub.. There are also two use cases and an instrumentation test.
If you want to expand your knowledge of Jetpack Compose, check out the following resources:
If you enjoyed it, and if this helped you, you can also consider Pay me coffee.. :]
Thank you very much!