1

I use the same theme to build iOS and Android. But the android version looks weird compared with iOS. The padding of the button(marked with red) on iOS and Android are left:1mm right:1mm top:1.5mm bottom:1.5mm but they look different. The fields have the same issue on both devices. The height ratio of the component on android is more than on iOS.

The button "登入" UIID = "TestButton" Derive setting enter image description here Padding setting enter image description here

Button with TestButton Style on Android device- Galaxy A31 enter image description here

Button with object inspector and TestButton Style on Samsung S7 skin enter image description here

Daniel Tsai
  • 729
  • 4
  • 10
  • Is this on a physical device or simulator? Millimeter is a physical screen measurement so you would need more pixels on a higher DPI device to represent the same amount of millimeters but the size would appear similar when looking at the physical devices side by side. Having said that MM sizing isn't 100% accurate. – Shai Almog Nov 21 '22 at 03:20
  • Both of them are from physical devices. The iOS pic is from iPhone 7 Plus with 1080 x 1920 pixels 401 ppi The Android pic is from Samsung A31 with 1080 x 2400 pixels 411 ppi The pic of iOS looks more likely to the pic from the simulator compared with the pic from android. How do I make the button of the Samsung A31 look like iPhone 7 Plus's button with the same theme? – Daniel Tsai Nov 21 '22 at 06:31
  • Check the density numbers and actual resolution on the Samsung. You might be falling into this problem on the Samsung device: https://stackoverflow.com/questions/61752978/codename-one-app-running-in-lower-resolution-android – Shai Almog Nov 22 '22 at 03:17
  • LG also has this issue. I think this issue is related to android devices running my app. I try to solve this issue by setting the native scheme on cn1 designer from iOS 6 to ICS. and saving the theme file. But the setting changed back to iOS 6 when I reopened the theme file. – Daniel Tsai Nov 22 '22 at 14:02
  • My Samsung device resolution on spec is 1080 x 2400 pixels. And The called value on my Samsung device getDisplayWidth()=1080 getDisplayHeight()=2282. The called values are the same as the real device resolution. – Daniel Tsai Nov 22 '22 at 14:58
  • You didn't override the inherit native theme functionality right? What are the density values returned from the device? Try this app on the devices to see what we detect from the OS: https://www.codenameone.com/blog/device-tester.html – Shai Almog Nov 23 '22 at 04:43
  • Sorry, I don't know the meaning of "override the inherit native theme functionality". I have overrides padding left:1mm right:1mm top:1.5mm bottom:1.5mm for the weird button. The output of device-tester app is attached to the question. – Daniel Tsai Nov 23 '22 at 11:01
  • The numbers look right. Density HD seems to be the correct value here. As far as I can tell this is reproducible on the simulator. So when you inspect the component in an iOS skin vs. an Android skin what do you see? What is occupying that area? Also try disabling the round border as a test to see if it's the source of the problem since it has its own padding override. – Shai Almog Nov 24 '22 at 03:46
  • I add three pic Simulators with iPhone 7 skin, the Simulator with the Samsung Galaxy s7 skin and the Samsung A31 device with a line border. This issue is on an Android devices. I also add two pic with a calculator arranged by tablelayout on a iOS device(iPhone plus) and a android device(Samsung A31). You can see a big difference. – Daniel Tsai Nov 24 '22 at 11:41
  • I'll try to create a new skin so it will be easier to reproduce in the simulator. I couldn't find a decent A31 PSD but I found one for S21 Ultra which I guess will produce even more of an issue than the physical device. Will that help? – Shai Almog Nov 25 '22 at 03:38
  • I will try the S21 Ultra skin after you send it. – Daniel Tsai Nov 25 '22 at 04:35
  • It's [here](https://github.com/codenameone/codenameone-skins/blob/master/OTA/SamsungGalaxyS21Ultra.skin?raw=true) – Shai Almog Nov 26 '22 at 03:43
  • How do I add the skin? The skins option of the simulator menu occupied all the y space of the window I can't scroll down to the add new in the menu. See the screenshot in the question. – Daniel Tsai Nov 27 '22 at 07:43
  • This seems excessive but we need a better way to express skins. Try deleting some skins from your system as a workaround. They are probably under the `~/.codenameone`. – Shai Almog Nov 28 '22 at 03:15
  • I added two pictures of the Simulator with Samsung S21 Ultra. See the screenshots at the bottom of the question. – Daniel Tsai Nov 28 '22 at 11:24
  • Can you inspect the buttons on the simulators for iOS/Android using the component inspector to see why the size difference exists. I'm assuming the iOS version has greater padding. You can then experimentally change the CSS to see what's causing the padding. Is it a difference between the milometer unit or something else. Since the problem is reproducible in the simulator it should be reasonably easy to understand the root cause by playing with the device and the inspector. – Shai Almog Nov 29 '22 at 03:01
  • I inspect the button "登入" on the iOS/Android skin. I also show the padding of the UIID = "h3lbtn". The "登入" button uses the same UIID = "h3lbtn" on both iOS and Android. – Daniel Tsai Nov 29 '22 at 14:20
  • In both cases you see the same padding for the buttons? If you make the zoom 100% are they both sized the same (sans different font sizes)? Assuming not. How is the css style defined? – Shai Almog Nov 30 '22 at 03:11
  • Yes, I see the same padding for the buttons in the simulator. The paddings for the buttons are different for comparing the simulator(both run on iOS/android skins) with the real android devices. How do I get the css style? – Daniel Tsai Nov 30 '22 at 04:54
  • The paddings for buttons on real android devices are different from those on real iOS devices, android skins in simulators, and iOS skink in simulators. – Daniel Tsai Nov 30 '22 at 05:33
  • So the Android simulator works correctly but the Android device doesn't? The simulators seem to behave as expected. I see a 7 pixel difference which would make sense for density calculations. – Shai Almog Dec 01 '22 at 03:19
  • Yes, the Android simulator works correctly but the Android device doesn't. The padding of the button issue is only on Android device. – Daniel Tsai Dec 01 '22 at 03:33
  • I had a detailed answer and suddenly realized it's wrong. Look at your padding in the designer: 1.5, 1.5, 1, 1. So horizontal/vertical padding should be different. But on the simulator they're identical. It's hard to tell what went wrong but I guess there's a conflict in your styles and the right one isn't applied. If you selected to inherit another style turn that off as inheritance is flaky. – Shai Almog Dec 02 '22 at 04:36
  • The padding setting Left:1 Right:1 Top:1.5 Bottom:1.5 The button is contained in a box layout; So the button expands to the whole space. I design a new style 'TestButton' which doesn't inherit another style. The result is the same. Android real device padding is different from others. Pls. refer to question. – Daniel Tsai Dec 02 '22 at 13:57
  • Padding size won't change because of layout. How does the component look in the Component Inspector? Is the padding still symmetric? – Shai Almog Dec 03 '22 at 05:58
  • I think it is. Pls. refer to the pic attached to the question. – Daniel Tsai Dec 03 '22 at 14:11
  • Thanks for reporting this. The problem was that it was rounding padding values to integers. I have fixed this in git and it will be part of the next release next Friday. – steve hannah Dec 03 '22 at 15:01
  • Notice that this will fix the discrepancy in the horizontal/vertical padding but not the difference between Android and the simulator/iOS. We'll need to reproduce that to investigate. – Shai Almog Dec 04 '22 at 03:03
  • How can I help you reproduce the issue? – Daniel Tsai Dec 04 '22 at 03:29

0 Answers0