Hiding and showing a widget in Kivy

lmiguelvargasf picture lmiguelvargasf · Feb 1, 2017 · Viewed 12.8k times · Source

I am working on a Kivy project, and I need to display a label when there is no elements in a list. Otherwise, I need to display a list view.

These are the two scenarios I am describing:

When no friends to show: No friends

When list contains friends: List with friends

This is my Kivy file:

#: kivy 1.9.1
#: import ListAdapter kivy.adapters.listadapter.ListAdapter
#: import FriendItemButton gui.FriendItemButton

ChumMeRoot:

<ChumMeRoot>:
    friend_list_view: friend_list_view
    FriendList:
        id: friend_list_view


<FriendItemButton>:
    text: self.full_name
    height: "40dp"
    size_hint_y: None


<FriendList>:
    orientation: 'vertical'
    friend_list: friend_list_view
    Button:
        height: '45dp'
        size_hint_y: None
        text: 'Add Friend'
        on_press: app.root.show_add_friend_form()
    ListView:
        id: friend_list_view
        adapter:
            ListAdapter(
            data=[],
            cls=FriendItemButton,
            args_converter=root.args_converter)


<AddFriendFormInput@BoxLayout>
    height: '30dp'
    size_hint_y: None


<AddFriendForm>:
    orientation: 'vertical'
    first_name_input: first_name
    last_name_input: last_name
    AddFriendFormInput:
        Label:
            text: 'First Name'
        TextInput:
            id: first_name
    AddFriendFormInput:
        Label:
            text: 'Middle Name'
        TextInput:
    AddFriendFormInput:
        Label:
            text: 'Last Name'
        TextInput:
            id: last_name
    AddFriendFormInput:
        Label:
            text: 'Birthdate'
        TextInput:
    AddFriendFormInput:
        Label:
            text: 'Email'
        TextInput:
    AddFriendFormInput:
        Label:
            text: 'Cell Phone'
        TextInput:
    BoxLayout:
    BoxLayout:
        height: '40dp'
        size_hint_y: None
        Button:
            text: 'Cancel'
            on_press: app.root.show_friend_list()
        Button:
            text: 'Add friend'
            on_press: app.root.add_friend()

and this is my Python code:

import os

from kivy.app import App
from kivy.properties import ObjectProperty, StringProperty
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.listview import ListItemButton

from friend import Friend
from friend_manager import FriendManager


def get_friend_manager():
    db_path = '{}/{}'.format(
        os.path.dirname(os.path.abspath(__file__)),
        'chumme.db'
    )
    return FriendManager(db_path)

def get_friends():
    return [(friend.full_name,)
            for friend in get_friend_manager().get_friends()]


class ChumMeRoot(BoxLayout):
    add_friend_form = ObjectProperty()
    friend_list_view = ObjectProperty()

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.update_friend_list_view()

    def update_friend_list_view(self):
        friend_list = self.friend_list_view.friend_list
        friend_list.adapter.data.clear()
        friend_list.adapter.data.extend(get_friends())
        friend_list._trigger_reset_populate()

    def show_add_friend_form(self):
        self.clear_widgets()
        self.add_friend_form = AddFriendForm()
        self.add_widget(self.add_friend_form)

    def show_friend_list(self):
        self.clear_widgets()
        self.update_friend_list_view()
        self.add_widget(self.friend_list_view)

    def add_friend(self):
        friend = Friend(first_name=self.add_friend_form.first_name_input.text,
                        last_name=self.add_friend_form.last_name_input.text)
        get_friend_manager().add_friend(friend)
        self.show_friend_list()


class AddFriendForm(BoxLayout):
    first_name_input = ObjectProperty()
    last_name_input = ObjectProperty()



class FriendList(BoxLayout):
    friend_list = ObjectProperty()

    def args_converter(self, index, data_item):
        return {'full_name': (data_item[0])}


class FriendItemButton(ListItemButton):
    full_name = StringProperty()


class ChumMeApp(App):
    pass


def main():
    ChumMeApp().run()


if __name__ == '__main__':
    main()

So far, I have found this solution which basically says to avoid removing widgets from the root, and though I have tried it, I lost references and my app crashes. I don't also want to put the element in a position out of the visible screen, so I wonder if somebody knows a way to hide and show widgets as 'self.widget_name.hide()orself.widget_name.hide = True`, or can somebody tell me a good way to achieve this task?

Answer

lmiguelvargasf picture lmiguelvargasf · Feb 2, 2017

As @yogabonito suggested what I did was to set the widget's height in this case to 0dp (and obviously the attribute size_hint_y.

So this is the changes I made in my kivy file:

<FriendList>:
    orientation: 'vertical'
    friend_list: friend_list_view
    no_friends_label: no_friends_label
    Button:
        height: '45dp'
        size_hint_y: None
        text: 'Add Friend'
        on_press: app.root.show_add_friend_form()
    Label:
        id: no_friends_label
    ListView:
        id: friend_list_view
        adapter:
            ListAdapter(
            data=[],
            cls=FriendItemButton,
            args_converter=root.args_converter)

As it can be seen, I have added a Label widget which has a reference in its root called no_friends_label.

This are the changes I made in my Python file:

class FriendList(BoxLayout):
    friend_list = ObjectProperty()
    no_friends_label = ObjectProperty()

    def args_converter(self, index, data_item):
        return {'full_name': (data_item[0])}

class ChumMeRoot(BoxLayout):
    add_friend_form = ObjectProperty()
    friend_list_view = ObjectProperty()

    # __init__ method

    def update_friend_list_view(self):
        friends = get_friends()
        no_friends_label = self.friend_list_view.no_friends_label
        friend_list = self.friend_list_view.friend_list

        if friends:
            friend_list.size_hint_y = 1
            friend_list.adapter.data.clear()
            friend_list.adapter.data.extend(friends)
            friend_list._trigger_reset_populate()
            no_friends_label.size_hint_y = None
            no_friends_label.height = '0dp'
            no_friends_label.text = ''
        else:
            no_friends_label = self.friend_list_view.no_friends_label
            no_friends_label.size_hint_y = 1
            no_friends_label.text = 'There are no friends to show.'
            friend_list.size_hint_y = None
            friend_list.height = '0dp'

     # remaining methods

First, I added the kivy property friend_list which has the corresponding reference in the kivy file. Then I am 'hiding' or showing the label or the list view depending on the user's having friends.