Kivy Button filling whole screen

Question

so i created a little Kivy App with a ScreenManager. A Default Screen and a Settings screen. To go and return from settigs i have a button executing: root.manager.current = 'settings' and now the button fills the whole screen. I cant figure out how to limit the button size to only icon size. kv:

#:import Label kivy.uix.label
#:import Button kivy.uix.button
#:import TextInput kivy.uix.textinput
#:import BoxLayout kivy.uix.boxlayout
#:import FloatLayout kivy.uix.floatlayout
#:import GridLayout kivy.uix.gridlayout
#:import Image kivy.uix.image

<DefaultScreen>:
    FloatLayout:
        id: "menuFloatLayout"
        size: 500, 500
        Button:
            pos: 0, 0
            on_press: root.manager.current = 'settings'
            Image:
                source: 'settings.png'
                y: self.parent.height - 50
                x: self.parent.x
                size: 50, 50
                allow_stretch: True
                keep_ratio: False


<SettingsScreen>:
    FloatLayout:
        id: "settingsFloatLayot"
        size: 500, 500
        Button:
            size: 0, 0
            pos: 0, 0
            on_press: root.manager.current = 'default'

            Image:
                source: 'return.png'
                y: self.parent.height - 50
                x: self.parent.x
                size: 50, 50
                allow_stretch: True
                keep_ratio: False
        GridLayout:
            pos: 0, 50
            cols: 2
            Label:
                text: "Serialport:"
            TextInput:
                multiline: False
                id: "serialPortTextInput"

py:

#s======================================================================================================================#
# s IMPORT
# s======================================================================================================================#
import sys
import kivy
import os
# kivyimports
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition
from kivy.app import App




# s======================================================================================================================#
# s Setup
# s======================================================================================================================#
os.chdir(os.path.dirname(sys.argv[0]))



# s======================================================================================================================#
# s settings Button functions
# s======================================================================================================================#

# s======================================================================================================================#
# s kivy
# s======================================================================================================================#





class DefaultScreen(kivy.uix.screenmanager.Screen):
    pass


class SettingsScreen(kivy.uix.screenmanager.Screen):
    pass


class ModeltrainApp(kivy.app.App):
    def build(self):

        MainSM = kivy.uix.screenmanager.ScreenManager(transition=NoTransition())
        MainSM.add_widget(DefaultScreen(name="default"))
        MainSM.add_widget(SettingsScreen(name="settings"))
        #textvardeclaration

        return MainSM

if __name__ == "__main__":
    ModeltrainApp().run()

So far i tried border() but that didnt work here r the 2 pics: return.png settings.png

Answer 1

The issue was, that you did not override the size_hint attribute. As per the FloatLayout documentation, every child of a FloatLayout is assigned the size_hint 1 for each axis. You will have to override this for the size attribute to work.

Note: For the image to be perfectly centered inside the button, button and image have to share the same pos and size values.

Edited .kv-File:

#:import Label kivy.uix.label
#:import Button kivy.uix.button
#:import TextInput kivy.uix.textinput
#:import BoxLayout kivy.uix.boxlayout
#:import FloatLayout kivy.uix.floatlayout
#:import GridLayout kivy.uix.gridlayout
#:import Image kivy.uix.image

<DefaultScreen>:
    FloatLayout:
        id: "menuFloatLayout"
        size: 500, 500
        Button:
            size_hint_x: None
            size_hint_y: None
            size: 50,50
            pos: 0, 550
            on_press: root.manager.current = 'settings'
            Image:
                source: 'settings.png'
                pos: 0, 550
                size: 50, 50
                allow_stretch: True
                keep_ratio: False


<SettingsScreen>:
    FloatLayout:
        id: "settingsFloatLayot"
        size: 500, 500
        Button:
            size_hint_x: None
            size_hint_y: None
            size: 50,50
            pos: 0, 550
            on_press: root.manager.current = 'default'

            Image:
                source: 'return.png'
                pos: 0, 550
                size: 50, 50
                allow_stretch: True
                keep_ratio: False
        GridLayout:
            pos: 0, 50
            cols: 2
            Label:
                text: "Serialport:"
            TextInput:
                multiline: False
                id: "serialPortTextInput"