widget.newSwitch() getting much to small on Android device

[runewinse]

I’m trying to write a settings screen for my app, but I cannot get the switch widget to look good. Here’s a minimized code of what I’m doing (a white screen with a switch (check box) and a text):

local w = display.contentWidth local h = display.contentHeight local widget = require( "widget" ) local rect = display.newRect(w/2, h/2, w, h) rect:setFillColor(1) -- Create the widget local switch = widget.newSwitch { left = 50, top = 100, style = "checkbox" } local txt = display.newText("Checkbox text", 90, 118, native.systemFontBold, 32 ) txt:setFillColor(0) txt.anchorX = 0

Unfotunately, what I get on the simulator and what I get on the actual device is very different:

As you can see, the size of the switch is ok on the simulator, but almost impossible to see/hit on the Android device.

Is there some way of setting the size of this widget? Am I doing something wrong?

[bjsorrentino]

Hi @runewinse,

What is the size of your content area in config.lua?

Brent

[runewinse]

I’ve tried different resolutions in the config.lua (with letterbox scaling) and while the widget scales,  it’s still much smaller than on the simulator:

application = {     content =     {         width = 400,         height = 700, scale = "letterbox",     } }



application = {     content =     {         width = 800,         height = 1400, scale = "letterbox",     } }

Using the same resolution in the config.lua as on the physical device (768x1184 in the case of the Nexus 4) one would think that the widgets would end up in a sensible size, but they don’t. At least the checkbox style switch widgets  end up far too small to be useful on my Android device. They seem to be roughly half the size of the simulator size.

[rob]

This is due to the theme files in use.  In the Android theme file, the box is about 15 px wide.  The iOS 6 check box circle has a diameter of 28 px and the iOS 7 circle (which you are seeing in your samples) has a diameter of around 21 px.  Physically they are all around 32x32 of screen real estate.

If you need to make it bigger, you can use the open source version of the widgets which gives you access to the theme image assets and you can make a bigger square.  Just keep it under 32px.  I don’t have my android tablet so I can check the size that check boxes are expected to be on Android, but I have a feeling our size is appropriate for the device and you wouldn’t want native looking checkboxes that are bigger than the real native ones. 

Perhaps, if you’re only targeting Android, it would be useful to tell widgets to always use the Android theme instead of trying to guess the platform (and for the Simulator, the default is iOS 7)

Rob

[runewinse]

Thanks for your kind reply, Rob!

@rob

This is due to the theme files in use.  In the Android theme file, the box is about 15 px wide.  The iOS 6 check box circle has a diameter of 28 px and the iOS 7 circle (which you are seeing in your samples) has a diameter of around 21 px.  Physically they are all around 32x32 of screen real estate.

Sorry, I don’t understand what you mean by “Physically they are all around 32x32 of screen real estate.”.  32x32 of what? Surely not pixels? 

Without being an expert on Android theme files, I also don’t understand why you are using an Android theme file that makes these widgets so much smaller than on iOS.

@rob

If you need to make it bigger, you can use the open source version of the widgets which gives you access to the theme image assets and you can make a bigger square.

I find it strange that I’ll have to this. Should’t it work “straight out of the box”?

Or am I really the only one in the world thinking that there Android widgets are too small? I don’t get it.

@rob

Perhaps, if you’re only targeting Android, it would be useful to tell widgets to always use the Android theme instead of trying to guess the platform (and for the Simulator, the default is iOS 7)

Rob

Sorry, but one of the reasons I started using Corona was to be able to target both Android and iOS (although I’m only able to test on Android devices at this point).

[rob]

Actually after looking at this, there is something afoot.  I’m looking at one of our unit tests and while the Android square is smaller than the circles on iOS, what you are seeing is significantly smaller than what I’m seeing in my simulator.

Can you load and build the CoronaSDK/SampleCode/Interface/WidgetDemo.  Edit the main.lua and uncomment the line:
 

widget.setTheme( “widget_theme_android” )         – android theme

Save and build.  Compare the simulator to your device and see if you’re seeing the size difference. 

Rob

[runewinse]

Hi Rob,

Thanks for caring. When I ran the example in the simulator and on the device they look as good as identical (see attachment).

But I’ve done on mistake. I had not selected a theme ( widget.setTheme(“widget_theme_android”) ). Turns out that the simulator (even when running on Windows and targeting Android) defaults to an iOS widget theme.

So that is at least part of the reason why the sim image looks so much different than on the device.

[rob]

The simulators really don’t provide an OS Type with the skins.  If you want to simulate a particular widget theme, then you have to pick one.

Rob

[bjsorrentino]

Hi @runewinse,

What is the size of your content area in config.lua?

Brent

[runewinse]

I’ve tried different resolutions in the config.lua (with letterbox scaling) and while the widget scales,  it’s still much smaller than on the simulator:

application = {     content =     {         width = 400,         height = 700, scale = "letterbox",     } }



application = {     content =     {         width = 800,         height = 1400, scale = "letterbox",     } }

Using the same resolution in the config.lua as on the physical device (768x1184 in the case of the Nexus 4) one would think that the widgets would end up in a sensible size, but they don’t. At least the checkbox style switch widgets  end up far too small to be useful on my Android device. They seem to be roughly half the size of the simulator size.

[rob]

This is due to the theme files in use.  In the Android theme file, the box is about 15 px wide.  The iOS 6 check box circle has a diameter of 28 px and the iOS 7 circle (which you are seeing in your samples) has a diameter of around 21 px.  Physically they are all around 32x32 of screen real estate.

If you need to make it bigger, you can use the open source version of the widgets which gives you access to the theme image assets and you can make a bigger square.  Just keep it under 32px.  I don’t have my android tablet so I can check the size that check boxes are expected to be on Android, but I have a feeling our size is appropriate for the device and you wouldn’t want native looking checkboxes that are bigger than the real native ones. 

Perhaps, if you’re only targeting Android, it would be useful to tell widgets to always use the Android theme instead of trying to guess the platform (and for the Simulator, the default is iOS 7)

Rob

[runewinse]

Thanks for your kind reply, Rob!

@rob

This is due to the theme files in use.  In the Android theme file, the box is about 15 px wide.  The iOS 6 check box circle has a diameter of 28 px and the iOS 7 circle (which you are seeing in your samples) has a diameter of around 21 px.  Physically they are all around 32x32 of screen real estate.

Sorry, I don’t understand what you mean by “Physically they are all around 32x32 of screen real estate.”.  32x32 of what? Surely not pixels? 

Without being an expert on Android theme files, I also don’t understand why you are using an Android theme file that makes these widgets so much smaller than on iOS.

@rob

If you need to make it bigger, you can use the open source version of the widgets which gives you access to the theme image assets and you can make a bigger square.

I find it strange that I’ll have to this. Should’t it work “straight out of the box”?

Or am I really the only one in the world thinking that there Android widgets are too small? I don’t get it.

@rob

Perhaps, if you’re only targeting Android, it would be useful to tell widgets to always use the Android theme instead of trying to guess the platform (and for the Simulator, the default is iOS 7)

Rob

Sorry, but one of the reasons I started using Corona was to be able to target both Android and iOS (although I’m only able to test on Android devices at this point).

[rob]

Actually after looking at this, there is something afoot.  I’m looking at one of our unit tests and while the Android square is smaller than the circles on iOS, what you are seeing is significantly smaller than what I’m seeing in my simulator.

Can you load and build the CoronaSDK/SampleCode/Interface/WidgetDemo.  Edit the main.lua and uncomment the line:
 

widget.setTheme( “widget_theme_android” )         – android theme

Save and build.  Compare the simulator to your device and see if you’re seeing the size difference. 

Rob

[runewinse]

Hi Rob,

Thanks for caring. When I ran the example in the simulator and on the device they look as good as identical (see attachment).

But I’ve done on mistake. I had not selected a theme ( widget.setTheme(“widget_theme_android”) ). Turns out that the simulator (even when running on Windows and targeting Android) defaults to an iOS widget theme.

So that is at least part of the reason why the sim image looks so much different than on the device.

[rob]

The simulators really don’t provide an OS Type with the skins.  If you want to simulate a particular widget theme, then you have to pick one.

Rob