CODEWITHSUNDEEP
pythonkivyiconstextfieldkivy-language
SpectTwo
SpectTwo

Reputation: 15

Give a function to an icon in KivyMD

I want to give a function to an icon entered in a TextField, I want to give it the typical function that has the 'eye-off' icon of passwords that when you press the icon change the function 'password' to False and the icon change to 'eye-on', and if I press it again, change to True and the icon returns to 'eye-off', let me explain, this is my main code:

from kivymd.app import MDApp
from kivymd.uix.screen import Screen
from kivymd.uix.button import MDRectangleFlatButton, MDIconButton
from kivy.lang import Builder
from helpers import *



class DemoApp(MDApp):

    def build(self):
        screen = Screen()
        self.theme_cls.primary_palette = 'Yellow'
        self.theme_cls.theme_style = 'Dark'

        btn = MDRectangleFlatButton(text='Confirmar', pos_hint= {'center_x': 0.5, 'center_y': 0.35},
                                    on_release= self.show_data)

        self.username = Builder.load_string(username_helper)
        self.contraseña = Builder.load_string(contraseña_helper)

        screen.add_widget(self.username)
        screen.add_widget(self.contraseña)
        screen.add_widget(btn)
        return screen

    def show_data(self, obj):
        print(f'Usuario: {self.username.text}\nContraseña: {self.contraseña.text}')

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

and here I have my files in string mode which is the helpers module that I imported:

username_helper = '''
MDTextField:
    hint_text: 'Usuario'
    required: True
    helper_text: 'Enter text'
    helper_text_mode: 'on_error'
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
    size_hint_x: None
    width: 200
'''

contraseña_helper = '''
MDTextField:
    hint_text: 'Contraseña'
    password: True
    icon_right: "eye-off"
    pos_hint: {'center_x': 0.5, 'center_y':0.43}
    size_hint_x: None
    width: 200
'''

With this configuration, when typing in a password, some string appears with asterisks, but I want that by pressing the 'eye-off' icon that is on the right, I can see the string I am typing, and if I press it again hide again with the '*' and so on.

Upvotes: 0

Views: 3279

Answers (1)

John Anderson
John Anderson

Reputation: 39052

You can do that by extending MDTextField like this:

class MyMDTextField(MDTextField):
    password_mode = BooleanProperty(True)

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            if self.icon_right:
                # icon position based on the KV code for MDTextField
                icon_x = (self.width + self.x) - (self._lbl_icon_right.texture_size[1]) - dp(8)
                icon_y = self.center[1] - self._lbl_icon_right.texture_size[1] / 2
                if self.mode == "rectangle":
                    icon_y -= dp(4)
                elif self.mode != 'fill':
                    icon_y += dp(8)

                # not a complete bounding box test, but should be sufficient
                if touch.pos[0] > icon_x and touch.pos[1] > icon_y:
                    if self.password_mode:
                        self.icon_right = 'eye'
                        self.password_mode = False
                        self.password = self.password_mode
                    else:
                        self.icon_right = 'eye-off'
                        self.password_mode = True
                        self.password = self.password_mode

                    # try to adjust cursor position
                    cursor = self.cursor
                    self.cursor = (0,0)
                    Clock.schedule_once(partial(self.set_cursor, cursor))
        return super(MyMDTextField, self).on_touch_down(touch)

    def set_cursor(self, pos, dt):
        self.cursor = pos

This over-rides the on_touch_down() method of MDTextField and checks if a touch occurs in the vicinity of the icon. If so, it toggles the icon and the password setting of the MDTextField.

You can use this in your kv as:

contraseña_helper = '''
MyMDTextField:
    hint_text: 'Contraseña'
    password: True
    icon_right: "eye-off"
    pos_hint: {'center_x': 0.5, 'center_y':0.43}
    size_hint_x: None
    width: 200
'''

Upvotes: 2

Related Questions