App view Python vs Android

[Steven Gerber]

Hi there guys & gals...So I am at the end of my app build and have found a strange behaviour when running on android as apposed to normal python run...


Referencing attached image...

LHS is way app should work as per python running...
RHS is way app runs from Android after compile...
Taking into account this is my first venture and a total newbie to python & Kivy...
My python snippet for launch screen, carousels etc here and string snippet

  class EzLaunchScreen(Screen): image1 = StringProperty("") overlay_height = NumericProperty(szH) overlay_opacity = NumericProperty(0) def __init__(self, **kwargs): super().__init__(**kwargs) self.max_height = szH img_path1 = os.path.join(main_path, 'Images/Carousel') img_path2 = os.path.join(main_path, 'Images/CarouselF') img_path3 = os.path.join(main_path, 'Images/LaunchScreen.png') # Funtion get images into carousel from path...Bottom layout = FloatLayout() # launch screen image self.background_image = Image(source=img_path3) layout.add_widget(self.background_image) self.carousel_widget = Carousel(direction='right', size_hint=(None, None), size=(szW, self.overlay_height)) # with self.carousel_widget.canvas.before: # #Color(0, 0, 0, 0) # self.rect = Rectangle(size=self.carousel_widget.size, pos=self.carousel_widget.pos) # Load images into carousel from path... for img_file in os.listdir(img_path1): if img_file.endswith(('.png', '.jpg', '.jpeg')): if not self.image1: self.image1 = img_file.split('.')[0].upper() print (f"image name is '{self.image1}'") print (f"image file is '{img_file}'") img = Image(source=os.path.join(img_path1, img_file), size_hint=(None, None), size=(szW, self.overlay_height)) self.carousel_widget.add_widget(img) layout.add_widget(self.carousel_widget) # Function to create an overlay container (StencilView to clip) self.overlay_container = StencilView(size_hint=(None, None), size=self.carousel_widget.size) # with self.overlay_container.canvas.before: # Color(0, 0, 0, 0) # RGBA values for transparent (0, 0, 0, 0) # self.rect = Rectangle(size=self.overlay_container.size, pos=self.overlay_container.pos) self.carouselF_widget = Carousel(direction='right', size_hint=(None, None), size=(szW, self.overlay_height)) # Funtion get images into carouselF from path...Top for img_file in os.listdir(img_path2): if img_file.endswith('.png'): if not self.image1: self.image1 = img_file.split('.')[0].upper() img = Image(source=os.path.join(img_path2, img_file), size_hint=(None, None), size=(szW, self.overlay_height)) self.carouselF_widget.add_widget(img) self.overlay_container.add_widget(self.carouselF_widget) layout.add_widget(self.overlay_container) self.add_widget(layout)

<EzLaunchScreen>: name: 'EzLaunch' val_text: ToT_label slide_text: slider_label tot_text: slider_tot FloatLayout: # This is the slider control for alcohol levels... Slider: background_color: 0, 0, 0, 0 background_width: 1 id: slider_widget min: 33 max: 794 step: 0.25 value: 0 cursor_image: 'Images/slider.png' cursor_width: self.width * 0.75 cursor_height: 15.05 orientation: 'vertical' size_hint: None, None size: '368dp', '794dp' pos_hint: {'x': 0,'y': 0.027} on_value: root.slide_it(*args) on_value: root.update_overlay_height(self.value)

Anyone have any ideas at all... This maximises on Android with below code... if(platform == 'android'): Window.maximize() else: Window.size = (szW, szH)  

[elli...@cox.net]

I can't read your code.  It appears all of the formatting has been lost.  If you are pasting code into the website, right click and select "paste as plaintext"

My guess would be there is an issue with scaling.  Did you use dp() when specifying sizes?

Read: https://kivy.org/doc/stable/api-kivy.metrics.html#module-kivy.metrics

---

From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> on behalf of Steven Gerber <ezs...@gmail.com>
Sent: Wednesday, April 9, 2025 5:23 AM
To: Kivy users support <kivy-...@googlegroups.com>
Subject: [kivy-users] App view Python vs Android

 

--
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 visit https://groups.google.com/d/msgid/kivy-users/c5fc1838-cede-4af3-a0e1-a2af854ee46bn%40googlegroups.com.

[Steven Gerber]

Hi ElliotG

Thank You for your response...
Let me try again...Right Click, paste as plain text...
Seems the layout is not scaling as the window size increases...

[Steven Gerber]

So I managed top get this output below...Seems the problem is most certainly with the scaling of the two carousels...

This is the report when running the app...
04-09 17:09:58.462  9824 10082 I python  : CarouselF widget size: "[368, 794]"
04-09 17:09:58.462  9824 10082 I python  : Overlay container size: "[368, 794]"
04-09 17:09:58.464  9824 10082 I python  : [WARNING] [Window      ] maximize() is used only on desktop OSes.
04-09 17:09:58.652  9824 10082 I python  : Window size: "(1080, 2107)"
04-09 17:09:58.654  9824 10082 I python  : Background image size: "[100, 100]"
04-09 17:09:58.655  9824 10082 I python  : image name is 'ABSOLUT'
04-09 17:09:58.655  9824 10082 I python  : image file is 'Absolut.png'
04-09 17:09:58.665  9824 10082 I python  : CarouselF widget size: "[368, 794]"
04-09 17:09:58.665  9824 10082 I python  : Overlay container size: "[368, 794]"

So I need to make provision for this increase???

[elli...@cox.net]

I would suggest changing the fitmode of the image to fill.  

Share a minimal runnable example and I'll take a closer look.

size: '368dp', '794dp'
pos_hint: {'x': 0,'y': 0.027}

These kinds of sizes and pos hints are an anti-pattern.   They suggest you should be using a different layout to position and size the widgets

---

From: kivy-...@googlegroups.com <kivy-...@googlegroups.com> on behalf of Steven Gerber <ezs...@gmail.com>

Sent: Wednesday, April 9, 2025 7:38 AM

To: Kivy users support <kivy-...@googlegroups.com>

Subject: Re: [kivy-users] App view Python vs Android

 

To view this discussion visit https://groups.google.com/d/msgid/kivy-users/0ca1e523-47ca-4dd5-a8c6-0b8f40981913n%40googlegroups.com.

[Steven Gerber]

So I added a snippet...

if(platform == 'android'):
    szW = Window.width
    szH = Window.height
else:
    szW = 368
    szH = 794

which gave below output...

Close...Somehow now need to just get the carousel images to maximize when screen maximizes...

On Thursday, April 10, 2025 at 8:23:33 AM UTC+2 Steven Gerber wrote:

Hi ElliotG

That would be amazing...Thanks for offering to take a look...
Minimal not possible...All is required to make app work...
Works as should with python run...output for android apk is issue

[Steven Gerber]

So...some progress...

I changed my img code snippet to this...

 img = Image(source=os.path.join(img_path2, img_file), allow_stretch = True, keep_ratio = True, size_hint=(1,1))

which gave me this output below...

This is so so close...Only issue now is the overlay image and the cursor do not align...

[Steven Gerber]

I know it has to do with this settings but have no idea how to change these to accommodate increase in window size...
# Function to clip overlay image to view underlay image to create liquid level variation...
    def update_overlay_height(self, value):
        slider = self.ids.slider_widget
        mapped_value = (value - slider.min) / (slider.max - slider.min)
        self.overlay_height = mapped_value * self.max_height
        if slider.value < 316.50:          
            self.overlay_container.height = slider.value - 15.5
        else:
            self.overlay_container.height = self.overlay_height    
        self.overlay_container.pos = (0, slider.y) 

[ElliotG]

The problems is that all of your widgets are in a FloatLayout.  The FloatLayout simply honors the size and pos of its children.  The layouts are tools that automatically size and position the widgets for you.   To create a layout that will maintain the same visuals across different size screens, you want to use  layouts to dynamically size some of the dimensions.  

I put together a quick (incomplete) example using the screen you have shown.  My objective is to show you how some of the layouts works. I have done this in kv, because I find it much faster to work in kv.  I added a few comments that describe the layouts.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image

kv = """
BoxLayout:  # top level box layout holds all the widgets, canvas holds the background image, and yellow outline.
    orientation: 'vertical'
    padding: dp(5)
    canvas.before:
        Rectangle:
            source: 'Images/LaunchScreen.png'
            size: self.size
            pos: self.pos
    canvas.after:
        Color:
            rgb: 1.0, 0.957, 0.310
        Line:
            width: 5
            rounded_rectangle: (*self.pos, *self.size, 10)
    BoxLayout:  # horizontal boxlayout holds the title and prev/next buttons, not the height is fixed not the width.
        size_hint_y: None
        height: dp(48)
        ImageButton:
            source: 'Images/left.jpg'
            fit_mode: 'fill'
            on_release: print('Prev')
        Label:                   # the width of the label is fixed, the images will scale to fill the space
            text: 'Absolut'
            size_hint_x: None
            width: dp(200)
            color: 'white'
            canvas.before:
                Color:
                    rgb: 0, 0, 0
                Rectangle:
                    size: self.size
                    pos: self.pos
        ImageButton:
            source: 'Images/right.jpg'
            fit_mode: 'fill'
            on_release: print('Next')
    RelativeLayout:  # I use a relative Layout to position the bottle in the center of the Layout.
        Image:
            size_hint_X: None
            width: self.texture_size[0]
            source: 'Images/Carousel/Absolut.png'
            pos_hint: {'center_x': 0.5, 'bottom': 1}  # pos hints to position the bottle
    ImageButton:           # Image button at the bottom, fixed size.
        size_hint_y: None
        height: dp(40)
        source: 'Images/home.png'
        fit_mode: 'fill'
        on_release: print('home')
"""


class ImageButton(ButtonBehavior, Image):
    pass


class ScreenLayoutApp(App):
    def build(self):
        return Builder.load_string(kv)


ScreenLayoutApp().run()

I have attached the code below, so you can experiment with it.

Here is the window stretched to a few different sizes.

I would recommend  that you take a different approach with the background image.  I would want the white space in the center to stay a fixed width.  You could take a full image of the background bar scene and overlay a white rectangle of a fixed size, or create a left and right background image that you put on each side of fixed width layout.  This will allow the image to scale to fill the screen, while keeping a fixed size for the rectangle and bottle.  I would also remove the yellow border and draw it with the canvas, this way it will not stretch and distort on a larger screen.

The layouts are powerful tools and can take a while to learn.  In the kivy-example directory:

.venv/share/kivy-examples/demo/kivycatalog/main.py  the "kivy catalog" example has some interactive tools for playing with layouts.  You may find this useful.  

When initially learning layouts it can be nice to use buttons, it makes it very clear how the layouts are sizing the widgets.  

I hope that helped.

[Steven Gerber]

Hi Elliot

Thank you for your input...i will most certainly go through all of this and advise...

[Steven Gerber]

Hi Elliot...
This was extremely helpful thank you...
I managed to perfect the alignment by changing the layouts and positioning...

Appreciate the input...This is the only kivy platform that offers assistance...
Thusfar over the past 7 weeks I have posted on various others and zero responses...
Kudos to you guys...

[ElliotG]

Happy to help.

The kivy discord and the kivy sub-reddit are also quite active.

When you are working with layouts there is a tool that can be very help.  The inspector.  Read:

https://kivy.org/doc/stable/api-kivy.modules.inspector.html#module-kivy.modules.inspector

https://kivy.org/doc/stable/api-kivy.modules.html#module-kivy.modules

Run it by entering...

python mymain.py -m inspector 

You can look at the details of widgets and layouts in a running program.

[Steven Gerber]

Thanks again...I wish there was a commercial services section...