How to implement the Search View Docked mode

144 Views Asked by At

Currently, I am using the Material 3 library to code my application's design. In the official Material 3 website (m3.material.io), in the Search section, at the bottom there is a picture of a Search View that is in docked mode. We could also see the same happening in the Google Messages app which uses the same behaviour. Though I was not able to find any clue whatsoever on how to code this Search View style.

Here is also a link to the official Material 3 website. https://m3.material.io/components/search/specs

Edit: After going through the alpha version of the library I was able to find a jetpack compose library that support this behaviour (it is also called as a DockedSearchBar) but since I'm using MDC-Android this solution can't unfortunately help me.

1

There are 1 best solutions below

5
On

The documentation states that the Search component is not yet natively implemented in Jetpack Compose, but is available in Flutter and MDC-Android.

For details on the MDC-Android implementation you can read the relevant documentation here. If you'd like to use it in Compose you can use the AndroidView composable.

The docked mode search view in the documentation you linked is an example of how it should be used - To implement the docked mode search view, you would have to create your own container with the desired size and behaviour, and have the search view take up the entire size of that container.