TextInput with clear button included

[Thomas Schulz]

Hi,

I would like to create a searchbar with an clear button included (like google.com).

I tried something like:

TextInput:
    hint_text: 'Eingabe'
    Button:
        text: 'x'
        x: self.parent.x
        y: self.parent.y

Unfortunately the button never shows.
Any hints?

regards
Thomas 

[Thomas Schulz]

No hints at all? Maybe my question is too simple!?

[Aaron Bell]

Your question isn't too simple. Someone who knows Kivy could spot and correct the issue from a mile away.

We just don't have enough contributors on this forum, it seems, because my question from January 23rd is still unanswered, too.

That said, here's my answer:

Principle you violated in your code:

You can't store elements (like the Button) in non-layout (non-container) elements (like the TextInput)

Where to go from here:

Here's a sample code I created, to get you started. There's more to be done with it, i.e.

• having the buttons at a longer width, instead of two tiny buttons when the screen is small
  
• center-aligning or top-aligning the code
  

But I think this'll get you in the right direction.

 

#! HintApp.py
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.textinput import TextInput

class GoogleLikeSetup(BoxLayout):
pass
class HintApp(App):
def build(self):
GoogleLikeSetup()

if __name__ == '__main__':
HintApp().run()

#! HintApp.kv
GoogleLikeSetup:
<GoogleLikeSetup>: 
id: test
size_hint_y: None
height: '160dp'
padding: 20
spacing: 20
orientation: 'vertical'
BoxLayout:
size_hint_y: 
id: google_search
TextInput:
hint_text: 'Eingabe'
size_hint_x: 85
BoxLayout:
spacing: 40
padding: root.width * 0.20, 0
Button:
text: 'x'
Button:
text: 'x'

For more information on layouts check out: 

• Creating Apps in Kivy (book)
  
• The overview of the User Inferface/Experience widgets
  
• SentDex's Kivy course

Thanks for posting on the Kivy forum. Be sure to pay this back by answering someone else's question sometime :) 

[Thomas Schulz]

Thanks a lot Aaron for your detailed answer. You have put me on the right track ( Í think).
I know about layouts. But I thought it should be possible just to put widget into widgets (and it is sometimes).
I have come up with an new approach and it looks promising:

Here is the working example code:

from kivy.app import App
from kivy.lang import Builder

root = Builder.load_string("""

<MySearchBox@Widget>:
    txtinput: _txtinput
    TextInput:
        id: _txtinput
        multiline: False
        hint_text: 'Search'
        size: (300,50)
    Button:
        text: "X"
        background_color: (1,1,1,0)
        color: 0,0,0,1
        size: (20,20)
        x: self.parent.txtinput.width - 1.5*self.width
        y: self.parent.txtinput.height - 1.5* self.height
MySearchBox:

""")

#class MySearchBox(Widget):
#    pass

class MyApp(App):
    def build(self):
        return root

if __name__ == '__main__':
    MyApp().run()