I need a search icon and some UI buttons placed next to the search icon. When user clicks on the search icon I would like it to expand into a searchbar hiding the adjacent UI buttons.

The other alternative I am looking for is to have a searchbar (instead of search icon) and UI buttons overlaid on the search bar. Again when user clicks on search bar, the buttons get hidden.

I want something like this:

_____________________________
| SearchIcon      Button      |
 _____________________________
| ListItem1                   |
| ListItem2                   |
...

And when the SearchIcon is clicked, I would like the Button to be hidden and Searchbar to appear like this:

 _____________________________
|         Searchbar           |
 _____________________________
| ListItem1                   |
| ListItem2                   |
...

An alternative:

_____________________________
| Searchbar       Button      |
 _____________________________
| ListItem1                   |
| ListItem2                   |
...

And when the Searchbar is clicked, I would like the Button to be hidden and Searchbar to extend to the screen width like this:

 _____________________________
|         Searchbar           |
 _____________________________
| ListItem1                   |
| ListItem2                   |
...