SearchBar: ability to change color of clear button ("X")

[manigorsh]

Please, provide the details below:

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes

Tell us about the problem

I can't change color of clear button on SearchBar.

Which platform(s) does your issue occur on?

Both

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[tsonevn]

Hi @manigorsh, Thank you for contacting us. At this time there is no functionality, which provides a way to change the style of the SearchBar clear button. Regarding that, I will log this issue as a new feature and we will check if there is a simple way to provide a support for similar functionality. In the meantime as a temporary solution, you could review this thread here, where is suggested to create custom SearchBar, where you could provide the needed styling.

Something else, you could also review this thread in StackOverflow and to try changing the button style via the android theme.

[noumaans]

Hi @tsonevn

What would be the parent of SearchBar in NativeScript. Here's my styles.xml under values-v21 and it has not changed the icon. I've also tried parent=

• android:Widget.Material.SearchView
• android:Widget.AppCompat.SearchView
• Widget.AppCompat.SearchView

`

<!-- Application theme -->
<style name="AppTheme" parent="AppThemeBase">
    <item name="android:datePickerStyle">@style/SpinnerDatePicker</item>
    <item name="android:timePickerStyle">@style/SpinnerTimePicker</item>
    <item name="android:searchViewStyle">@style/SearchViewStyle</item>
</style>

<!-- Default style for DatePicker - in spinner mode -->
<style name="SpinnerDatePicker" parent="android:Widget.Material.Light.DatePicker">
    <item name="android:datePickerMode">spinner</item>
</style>

<!-- Default style for TimePicker - in spinner mode -->
<style name="SpinnerTimePicker" parent="android:Widget.Material.Light.TimePicker">
    <item name="android:timePickerMode">spinner</item>
</style>

<style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
    <item name="android:elevation">4dp</item>
</style>

<style name="SearchViewStyle" parent="android:Widget.Material.SearchView">
    <item name="android:closeIcon">@android:drawable/ic_menu_search</item>
</style>

`

[NickIliev]

@noumaans behind SearchBar for Android stands android.support.v7.widget.SearchView

Android source code here

[vakrilov]

This might be a good opportunity to contribute to the NativeScript framework (assuming you want to get your hand dirty with some android-specific styling of course).

The way I see it. Anyone willing to create a PR with such functionality should:

• Figure out if you can change the color of the button dynamically (trough code)
• Create a property of the search-bar component that controls the clear-button color. Reading the documentation article on properties in NativeScript might be helpful.
• Follow the contributing guide and create a PR.

[bundyo]

I can also add that the color of the magnifier button in both platforms can't be changed.

[sourabratabose]

Hey is this issue resolved or still open? If open may I submit a PR to solve this? I would like to get assigned to solve this issue/

[Alonso2002-jpg]

Hey is this issue resolved? I would like to contribute. ¿Could you assign it to me?

[NathanWalker]

Hi @Alonso2002-jpg and @sourabratabose thanks for contribution mention - no need for assignment, feel free to try a PR and if it works, we can include it in the next major release (v9), currently underway.

[muhammadali-se]

hi @tsonevn @NickIliev I want to fix this issue? can I be assigned for it?