hey everybody! how do you guys create a SearchView in Compose, you know, the one that is in the top ...

# compose

[Manuel Lorenzo]

hey everybody! how do you guys create a SearchView in Compose, you know, the one that is in the top bar? is there a native function for this?

[rsktash]

You can animate Text And BasicTexField within TopAppBar

[Manuel Lorenzo]

oh, what do you mean? text for the hint and basic text field as an EditText?

[rsktash]

Yes Text for title and basic text for querying

[Manuel Lorenzo]

cool thanks! I will also investigate about that animation, because I still haven’t worked with animations in compose

[Siyamed]

I think it deserves to be a component out of the box, but we don't have it.

[Adam Powell]

I think we'd have to get the UX community to agree on one 😄 most of these search experiences are highly custom, but I agree we should have plenty of helpers and recipes for doing it

[Siyamed]

True

[Siyamed]

:)

[Siyamed]

Actually lately a lot of searchviews became an icon opening a new screen with a textfield

[Adam Powell]

Yeah. It's also situational whether results are shown in a pop-up window anchored to the text field or in the primary content region below it

[Manuel Lorenzo]

erhm kind of stupid question but, how do you guys do the addition or the showing of the Basic text so the user can type their query? so clicking on the search icon and showing a basic text field in the top bar

[Adam Powell]

generally something of the form:

var isExpanded by remember { mutableStateOf(false) }

if (isExpanded) {
  BasicTextField(...)
} else {
  Button(onClick = { isExpanded = true }) {
    Text("Search...")
  }
}

user input updates state, and state updates drive recomposition

[Manuel Lorenzo]

Thanks a lot Adam! I have an app entirely made in compose but just not doing any programming in a couple of weeks made my brain entirely forget about declarative UI style 😄

[Piotr Prus]

@Manuel Lorenzo did you get it working? I am struggling with background colors, focus,etc.
Also, did you make a drop-down list of suggestions?