Buttons not showing in ActionOverFlow area of Action Bar

[Shoumik Das]

Hi, I have setup some buttons in an action bar and used images as icons. The buttons get displayed when the app window is maximized but they are not visible in the overflow area when the app window is resized (made small). I see only blank black boxes. Can you please help?

Kivy Code:

<SivaStatusScreen>:
    name: 'status_screen'
    canvas.before:
        Color:
            rgba: 255/255, 255/255, 255/255, 1
        Rectangle:
            pos: self.pos
            size: self.size
    BoxLayout:
        id: status_layout
        size_hint: 1, 1
        orientation: 'vertical'
        BoxLayout:
            id: actionbar_layout
            size_hint: 1, 0.1
            ActionBar:
                id: status_actionbar
                pos_hint: {'top': 1}
                background_image: ''
                background_color: 195/255, 60/255, 35/255, 1
                ActionView:
                    use_separator: True
                    ActionPrevious:
                        title: 'S.I.V.A'
                        with_previous: False
                    ActionOverflow:
                    ActionButton:
                        important: True
                        icon: 'images/communication-96.png'
                    ActionButton:
                        important: True
                        icon: 'images/key-96.png'
                    ActionButton:
                        important: True
                        icon: 'images/services-96.png'
                    ActionButton:
                        important: True
                        icon: 'images/shutdown-96.png'
        BoxLayout:
            id: status_display
            size_hint: 1, 0.9
    AnchorLayout:
        id: status_add
        anchor_x: 'right'
        anchor_y: 'bottom'
        ImageButton:
            id: status_addbtn
            source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]
            size_hint: 0.2, 0.2

Additionally, I have defined a custom class called ImageButton which is inherited from the Image and ButtonBehavior classes. Can I use those buttons in the action bar with distinct images for "normal" and "down" states of the button?

Please advise.

Thanks in advance.

[Elliot Garbus]

I have defined a custom class called ImageButton which is inherited from the Image and ButtonBehavior classes. Can I use those buttons in the action bar with distinct images for "normal" and "down" states of the button?

 

I expect you could do this with an ActionButton.

 

The buttons get displayed when the app window is maximized but they are not visible in the overflow area when the app window is resized (made small). I see only blank black boxes. Can you please help?

 

For a number of reasons I set a minimum window size in my apps.  That may solve this issue.  If you create a runnable example, I’ll take a look.

--
You received this message because you are subscribed to the Google Groups "Kivy users support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/43e66764-5fae-482c-abd0-1ff386ef15f1%40googlegroups.com.

 

[Shoumik Das]

Hi Eliott,

I did not understand the minimum windows size suggestion. I am sharing my running code below. Kindly take a look and advise as to what I am doing wrong:

Python Code:

from kivy.config import Config
# Config.set should be used before importing any other Kivy module.
Config.set('kivy','window_icon','images/sivalogo1.png')
# Config set for resizing image button
Config.set('graphics', 'resizable', True)
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
# from kivy.graphics.context_instructions import Color
from kivy.uix.label import Label
from kivy.uix.actionbar import ActionBar
from kivy.uix.textinput import TextInput
from kivy.properties import NumericProperty
# from kivy.lang.builder import Builder


class CustomTextInput(TextInput):
    # Numeric property defined for use in both Python and Kivy (binding)
    max_characters = NumericProperty(0)
    # Override the default behaviour of the insert_text method
    def insert_text(self, substring, from_undo=False):
        if len(self.text)==self.max_characters and self.max_characters>0:
            substring=""
        TextInput.insert_text(self, substring, from_undo)


class SivaLoginScreen(Screen):
# Canvas initiation at instance level. Not necessary if the canvas is defined in the kv file.
#    def __init__(self,**kwargs):
#        super(SivaLoginScreen,self).__init__(**kwargs)
#        with self.canvas.before:
#            Color(253,253,152,1)
    def twitter_authentication(self):
        App.get_running_app().root.current='verify_screen'
        App.get_running_app().root.transition.direction='left'

    def linkedin_authentication(self):
        App.get_running_app().root.current='verify_screen'
        App.get_running_app().root.transition.direction='left'


class SivaVerifyScreen(Screen):
    def back_to_login(self):
        App.get_running_app().root.current='login_screen'
        App.get_running_app().root.transition.direction='right'

    def code_verification(self):
        App.get_running_app().root.current='status_screen'
        App.get_running_app().root.transition.direction='left'


class SivaStatusScreen(Screen):
    pass


class SivaScreenManager(ScreenManager):
    pass


class ImageButton(ButtonBehavior, Image):
    pass


# Tell Kivy to directly load a file. If this file defines a root widget, it will be returned by the method.
# root_widget = Builder.load_file('siva.kv')

class SivaApp(App):
    def build(self):
        # Initialize root widget
        # Screen Manager Instance
        sm=SivaScreenManager()
        # Login Screen Instance
        ls=SivaLoginScreen()
        # Verify Screen Instance
        vs=SivaVerifyScreen()
        # Status Screen Instance
        ss=SivaStatusScreen()
        # Create widget tree. Screen Manager is the root widget.
        sm.add_widget(ls)
        sm.add_widget(vs)
        sm.add_widget(ss)
        # Return root widget
        return sm


if __name__ == '__main__':
    # Run application
    SivaApp().run()

Kivy Code:

<ImageButton>:
    keep_ratio: True


<CustomTextInput>:
    use_bubble: True
    use_handles: True


<SivaLoginScreen>:
    name: 'login_screen'
    canvas.before:
        Color:
            rgba: 195/255, 60/255, 35/255, 1

        Rectangle:
            pos: self.pos
            size: self.size
    BoxLayout:

        id: login_layout
        orientation: 'vertical'
        size_hint: 0.4, 0.8
        pos_hint: {'center_x':0.5, 'center_y':0.5}
        Image:
            id: login_logo_siva
            source: 'images/sivalogo1.png'
            keep_ratio: True
        BoxLayout:
            id: login_slogan_box
            orientation: 'vertical'
            Label:
                id: login_label_space1
            Label:
                id: login_label_siva
                markup: True
                font_name: 'roboto/Roboto-Medium.ttf'
                text: '[color=#FDFD98]S.[/color][color=#B29DD9]I[/color][color=#FDFD98].[/color][color=#77DD77]V[/color][color=#FDFD98].[/color][color=#779ECB]A[/color]'
                font_size: '40sp'
            Label:
                id: login_label_space2
            Label:
                id: login_label_slogan1
                markup: True
                font_name: 'roboto/Roboto-Regular.ttf'
                text: '[color=#FDFD98]SLOGAN TEXT[/color]'
                font_size: '13sp'
            Label:
                id: login_label_slogan2
                markup: True
                font_name: 'roboto/Roboto-Regular.ttf'
                text: '[color=#FDFD98]HEADLINE TEXT[/color]'
                font_size: '13sp'
        BoxLayout:
            id: login_button_layout
            orientation: 'horizontal'
            spacing: 1
            ImageButton:
                id: twitter_button
                source: {'normal': 'images/twitter-circled-96.png', 'down': 'images/twitter-96.png'} [self.state]
                on_release: root.twitter_authentication()
            ImageButton:
                id: linkedin_button
                source: {'normal': 'images/linkedin-circled-96.png', 'down': 'images/linkedin-2-96.png'} [self.state]
                on_release: root.linkedin_authentication()


<SivaVerifyScreen>:
    name: 'verify_screen'
    canvas.before:
        Color:
            rgba: 195/255, 60/255, 35/255, 1

        Rectangle:
            pos: self.pos
            size: self.size

    AnchorLayout:
        id: verify_backbtn_layout
        anchor_x: 'left'
        anchor_y: 'top'
        ImageButton:
            id: verify_back_button
            size_hint: 0.1, 0.1
            source: {'normal': 'images/chevron-left-96.png', 'down': 'images/chevron-left-96.png'} [self.state]
            on_release: root.back_to_login()
    BoxLayout:
        id: verify_layout
        orientation: 'vertical'
        size_hint: 0.6, 0.6
        pos_hint: {'center_x':0.5, 'center_y':0.5}
        Label:
            id: verify_label
            markup: True
            font_name: 'roboto/Roboto-Regular.ttf'
            text: 'Verification Code'
            font_size: '16sp'
        BoxLayout:
            id: verify_textinput
            orientation: 'vertical'
            CustomTextInput:
                id: verify_inputbox
                multiline: False
                focus: True
                hint_text: '1234567'
                font_size: '30sp'
                max_characters: 10
            Label:
                id: verify_space1
        ImageButton:
            id: verify_button
            source: {'normal': 'images/lock-96.png', 'down': 'images/privacy-96.png'} [self.state]
            on_release: root.code_verification()

Kindly advise.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

[Elliot Garbus]

Hard for me to see what is going on with out the images…

What I see is below.

The action bar changed behavior based on the size of the bar.  As it gets small things will be stacked.  Perhaps it would be best if you shared some images, and described how you would like it to work.

 

 

Small window

 

Stretched:

 

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/e19de471-6bba-4a19-bee3-9b068adbd6e1%40googlegroups.com.

 

[Shoumik Das]

Hi Eliott, here are some screenshots of the action bar behaviour.

All icons are visible when the app window is large:

This is what happens when I reduce the window size:

The icons do get stacked in the action overflow area when I reduce the main window size but they are not visible. I only see black boxes. I want the icons to be visible in the drop-down of the overflow area. It works fine when I use text buttons.

Only the image buttons don't get displayed.

Badly stuck :-(  Please help.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/e19de471-6bba-4a19-bee3-9b068adbd6e1%40googlegroups.com.

 

[Elliot Garbus]

One simple thing to do is set the minimum window size, so icons remain visible.

 

from kivy.core.window import Window

 

In build:

…

Window.minimum_width =   # your min width
Window.minimum_height = # your min height

 

This will set a minimum size for the window.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/449df7e9-a278-49c6-b5d7-c7a873673477%40googlegroups.com.

 

[Elliot Garbus]

Looking at the docs:

 

https://kivy.org/doc/stable/api-kivy.uix.actionbar.html?highlight=actionbar#kivy.uix.actionbar.ActionButton

It says:

For icon: Source image to use when the Button is part of the ActionBar. If the Button is in a group, the text will be preferred.

 

If you need to support the narrower layout, set the text for each ActionButton.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/449df7e9-a278-49c6-b5d7-c7a873673477%40googlegroups.com.

 

[Shoumik Das]

Hi Eliott,

If I set the minimum window height and width, the app cannot be resized below the minimum width. But that would still not enable the button displays. Besides, I would like to use the app on mobile devices powered by Android and iOS.

I did try your suggestion with having text labels along with icons. That is working fine. But I intended to use images as buttons to enhance the end user experience in mobile devices.

I tried to tinker with an existing ImageButton class derived from the ButtonBehavior and Image classes. Then I created a derived class called CustomActionButton from ImageButton and ActionItem. The image icons are now getting displayed in both app view and overflow areas but the icon size and position are a bit messed up. I will be sharing the new code here. Kindly review the code and advise.

[Elliot Garbus]

Will do.  Glad your making progress!

 

From: Shoumik Das
Sent: Friday, May 8, 2020 8:30 AM
To: Kivy users support

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/ff9b1ea0-0588-4042-8d18-2e5dac254cf2%40googlegroups.com.

 

[Shoumik Das]

I am really grateful for the advice and guidance you are giving me. Kivy is a great platform and has huge potential. I really look forward to learning more.

This is what happens with my modified code. All buttons are default ActionButton(s) except the last one (right-most) which is my CustomActionButton. It appears enlarged and extends beyond the action bar. It is a square image of 96px.

If I resize the app window (reduce the width to simulate a mobile device), the custom image button moves to the ActionOverFlow area as expected and retains button behavior. The Logoff button icon is not displayed but the text label is displayed because it is defined as a default ActionButton.

Now, something strange happens. If the resize the app window again and increase the width, the custom button appears resized and aligned appropriately with the remaining buttons (which was not happening earlier). The only issue being that the image button has a lot of space on its left and right which is clickable. This may be due to the image size but I am not sure. I think it might just need a bit of tuning in the Kivy rule or Python code to get the desired behaviour. Unfortunately, I have limited knowledge of Kivy. Can you kindly take a look at the code and advise?

Python Code:

from kivy.config import Config
# Config.set should be used before importing any other Kivy module.
Config.set('kivy','window_icon','images/sivalogo1.png')
# Config set for resizing image button
Config.set('graphics', 'resizable', True)
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.uix.tabbedpanel import TabbedPanel
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.button import Button
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image
# from kivy.graphics.context_instructions import Color
from kivy.uix.label import Label

from kivy.uix.actionbar import ActionBar, ActionItem

from kivy.uix.textinput import TextInput
from kivy.properties import NumericProperty
# from kivy.lang.builder import Builder


class CustomTextInput(TextInput):
    # Numeric property defined for use in both Python and Kivy (binding)
    max_characters = NumericProperty(0)
    # Override the default behaviour of the insert_text method
    def insert_text(self, substring, from_undo=False):
        if len(self.text)==self.max_characters and self.max_characters>0:
            substring=""
        TextInput.insert_text(self, substring, from_undo)

class ImageButton(ButtonBehavior, Image):
    pass


class CustomActionButton(ImageButton, ActionItem):
    pass

class SivaLoginScreen(Screen):
# Canvas initiation at instance level. Not necessary if the canvas is defined in the kv file.
#    def __init__(self,**kwargs):
#        super(SivaLoginScreen,self).__init__(**kwargs)
#        with self.canvas.before:
#            Color(253,253,152,1)
    def twitter_authentication(self):
        App.get_running_app().root.current='verify_screen'
        App.get_running_app().root.transition.direction='left'

    def linkedin_authentication(self):
        App.get_running_app().root.current='verify_screen'
        App.get_running_app().root.transition.direction='left'


class SivaVerifyScreen(Screen):
    def back_to_login(self):
        App.get_running_app().root.current='login_screen'
        App.get_running_app().root.transition.direction='right'

    def code_verification(self):
        App.get_running_app().root.current='status_screen'
        App.get_running_app().root.transition.direction='left'


class SivaStatusScreen(Screen):
    pass


class SivaScreenManager(ScreenManager):
    pass

# Tell Kivy to directly load a file. If this file defines a root widget, it will be returned by the method.
# root_widget = Builder.load_file('siva.kv')

class SivaApp(App):
    def build(self):
        # Initialize root widget
        # Screen Manager Instance
        sm=SivaScreenManager()
        # Login Screen Instance
        ls=SivaLoginScreen()
        # Verify Screen Instance
        vs=SivaVerifyScreen()
        # Status Screen Instance
        ss=SivaStatusScreen()
        # Create widget tree. Screen Manager is the root widget.
        sm.add_widget(ls)
        sm.add_widget(vs)
        sm.add_widget(ss)

        # Return root widget # Necessary when explicitly returning a root widget using 'Builder.load_file(<filename>)'.

        return sm


if __name__ == '__main__':
    # Run application
    SivaApp().run()

Kivy Code:

<ImageButton>:
    keep_ratio: True


<CustomTextInput>:
    use_bubble: True
    use_handles: True

<CustomActionButton>:
    size_hint: None, None

                text: '[color=#FDFD98]HEADLINE TAG[/color]'

                        text: 'Status'

                    ActionButton:
                        important: True
                        icon: 'images/key-96.png'

                        text: 'Accounts'

                    ActionButton:
                        important: True
                        icon: 'images/services-96.png'

                        text: 'Settings'

                    ActionButton:
                        important: True
                        icon: 'images/shutdown-96.png'

                        text: 'Logoff'
                    CustomActionButton:
                        important: True

                        source: {'normal': 'images/lock-96.png', 'down': 'images/privacy-96.png'} [self.state]

                        text: 'IBtn'

        BoxLayout:
            id: status_display
            size_hint: 1, 0.9
    AnchorLayout:
        id: status_add
        anchor_x: 'right'
        anchor_y: 'bottom'
        ImageButton:
            id: status_addbtn
            source: {'normal': 'images/plus-96.png', 'down': 'images/plusblue-96.png'} [self.state]
            size_hint: 0.2, 0.2

Thanks in advance.

On Friday, May 8, 2020 at 9:04:59 PM UTC+5:30, Elliot Garbus wrote:

Will do.  Glad your making progress!

 

From: Shoumik Das
Sent: Friday, May 8, 2020 8:30 AM
To: Kivy users support
Subject: RE: [kivy-users] Buttons not showing in ActionOverFlow area of Action Bar

 

Hi Eliott,

 

If I set the minimum window height and width, the app cannot be resized below the minimum width. But that would still not enable the button displays. Besides, I would like to use the app on mobile devices powered by Android and iOS.

 

I did try your suggestion with having text labels along with icons. That is working fine. But I intended to use images as buttons to enhance the end user experience in mobile devices.

 

I tried to tinker with an existing ImageButton class derived from the ButtonBehavior and Image classes. Then I created a derived class called CustomActionButton from ImageButton and ActionItem. The image icons are now getting displayed in both app view and overflow areas but the icon size and position are a bit messed up. I will be sharing the new code here. Kindly review the code and advise.

 

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

[Elliot Garbus]

Here are a few things to try.

You are setting the size_hint: None, None in CustomActionButton.  Try removing that line.

There is an attribute called inside group, that looks like it indicates it the item is inside the group drop down or not.  Could you use that knowledge to change the image size? 

 

To provide more help I would need the art and an executable example.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b724be1c-dace-4f68-82c0-353951532e90%40googlegroups.com.

 

[Shoumik Das]

Hi Eliott,

I have shared the code with you separately as an attachment. Removed the old size_hint attribute and added 'size_hint_x: 0.1'.

Kindly take a look and advise.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/b724be1c-dace-4f68-82c0-353951532e90%40googlegroups.com.

 

[Shoumik Das]

Eureka! I fixed it. 🙂

Following are the small changes:

<CustomActionButton>:
size_hint_x: 0.05
size_hint_min_x: 48

Setting the width of the widget along the x-axis and minimum pixel width for the icons did the trick. The buttons are now working as per expectation. Woo hoo!

On a side note, I was unable to change the font style for the title of the action bar. The way I did it for the labels didn't work here.

Is there any way to load a custom font for the entire app and not just for a specific label?

Thanks

[Elliot Garbus]

Congratulations… I just downloaded your zip file… so your timing is perfect.

 

To change the font everywhere re-define the label:

 

<Label>:

    -font: ‘your-new-font’

 

The leading ‘-‘ re-defines the attribute.

 

From: Shoumik Das
Sent: Saturday, May 9, 2020 7:18 AM
To: Kivy users support
Subject: Re: [kivy-users] Buttons not showing in ActionOverFlow area of Action Bar

 

Eureka! I fixed it. 🙂

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/765f52ea-1a3e-4873-8149-4f491f7a9cc6%40googlegroups.com.

 

[Shoumik Das]

Just a query. I understand that this will set the font for all Labels in my app. Will it also change the font in widgets which are not Labels? E.g: Title bar, body text, etc.?

[Elliot Garbus]

Yes.  Typically all the text in the app is derived from label.  So making this change will change all of the  text.  Give it a try.

 

From: Shoumik Das
Sent: Saturday, May 9, 2020 7:24 AM
To: Kivy users support

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/6a89daa0-6c43-4f8d-bc4a-539d60c02c32%40googlegroups.com.

 

[Shoumik Das]

The <-font_name: 'font name'> worked like a charm. Thanks a lot for the help!

On Saturday, May 9, 2020 at 7:59:35 PM UTC+5:30, Elliot Garbus wrote:

Yes.  Typically all the text in the app is derived from label.  So making this change will change all of the  text.  Give it a try.

 

From: Shoumik Das
Sent: Saturday, May 9, 2020 7:24 AM
To: Kivy users support
Subject: RE: [kivy-users] Buttons not showing in ActionOverFlow area of Action Bar

 

Just a query. I understand that this will set the font for all Labels in my app. Will it also change the font in widgets which are not Labels? E.g: Title bar, body text, etc.?

 

--

You received this message because you are subscribed to the Google Groups "Kivy users support" group.

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-...@googlegroups.com.

[Elliot Garbus]

😊

To unsubscribe from this group and stop receiving emails from it, send an email to kivy-users+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/kivy-users/df9dd8a2-92bc-4586-b5fc-74402d8d8f74%40googlegroups.com.