Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

My input text is cut off halfway on some Android devices!! PLS HELP!
Started by Lava Level Feb 03 2013 03:22 AM

- - - - -
100 replies to this topic
[TOPIC CONTROLS]
Page 1 of 5 1 2 3 »
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Lava Level

[GLOBAL: userInfoPane.html]
Lava Level
  • Contributor

  • 274 posts
  • Corona SDK

Yikes!! One of my testers says they see this on their galaxy II. I dont have an Android device other than this Kindle-Fire and the text size on the input box looks just fine.

http://www.questlord.com/screenshots/TextBug.png

1.How do I fix this.
2.Is there a comprehensive fix for this? To make sure it just sets the font size TO THE SIZE OF THE INPUT BOX?

This is holding up my release for Android devices other than the Nook/Kindle Fire. I would like to release on Google Marketplace, but not with this sort of thing happening.

I've spent 14 months on this project so help a guy out!

uid: 100299 topic_id: 35589 reply_id: 335589


[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

native.newTextFields fonts don't scale like graphics and display.newText do.

How to solve this depends on your config.lua and the screen resolution of the problem device. Post your config.lua and lets see if we can figure out the math needed to calculate your right font size.

uid: 199310 topic_id: 35589 reply_id: 141442


[TOPIC: post.html]
#3

Lava Level

[GLOBAL: userInfoPane.html]
Lava Level
  • Contributor

  • 274 posts
  • Corona SDK

native.newTextFields fonts don't scale like graphics and display.newText do.


I dont understand why this isn't easier. I think Corona needs to make this part fit in line with their 'code less play more' slogan.

But anyway...

-- config.lua
application =
{
	content =
	{
		antialias = false,
		width = 320,
		height = 480,
		scale = "zoomStretch"
		
	},
}

uid: 100299 topic_id: 35589 reply_id: 141456


[TOPIC: post.html]
#4

Lava Level

[GLOBAL: userInfoPane.html]
Lava Level
  • Contributor

  • 274 posts
  • Corona SDK

This is what I am doing with my TextBoxes...

It is modified from the sample on Corona. Which...sigh... looks out of date...

		------------------------------------------
		-- *** Create native input textfields ***
		-------------------------------------------
		-- Note: currently this feature works in device builds or Xcode simulator builds only

		-- Note: currently this feature works in device builds only
		local isAndroid = "Android" == system.getInfo("platformName")
		local inputFontSize = 18
		local inputFontHeight = 30
		if isAndroid then
			-- Android text fields have more chrome. It's either make them bigger, or make the font smaller.
			-- We'll do both
			inputFontSize = 14
			inputFontHeight = 42
		end
		myText = display.newText( "GJYyp@^", 20, 40,0,0,  "QuadratSerial", 36)
		myText:setTextColor( 255,0,0 )
		defaultField = native.newTextField( 10, 120, 300, 30, fieldHandler )
		-- o:addEventListener( 'userInput', listener ) 
		-- WARNING: The 'listener' argument to native.newTextField( left, top, width, height [, listener] ) is deprecated. Call the object method o:addEventListener( 'userInput', listener ) instead.
		defaultField.font = native.newFont( "Quadrat Serial", myText.height / 1.8 )
		defaultField.align = "center"
		myText:removeSelf()
		myText = nil
		-- Add fields to our new group
		fields:insert(defaultField)
		native.setKeyboardFocus( defaultField )
		local bkgd = display.newRect( 0, 0, display.contentWidth, display.contentHeight )
		bkgd:setFillColor( 0, 0, 0, 0 )		-- set Alpha = 0 so it doesn't cover up our buttons/fields

What I did with my buddy in Corona irc to modify the IOS text is to get the height of the text printed to the device and scale based on that. I don't really understand it, we got it working on iOS so that if it is on an iPAD the text in the textInput area is really small. But really small is better than cut off, so I shipped with it.

Now I really want to get this working for Android users. The fact that this is not automatic is maddening. I think it should default to always be the height of 1 line of textbox, unless you specify for some reason you want gynormous text in your textField.

I guess a lot of Corona Apps do not have an 'Enter Text' feature and there isnt a common FIT ALL solution to this.
uid: 100299 topic_id: 35589 reply_id: 141459


[TOPIC: post.html]
#5

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

The reason this isn't easier is because there are two different systems in use. Corona's graphics engine is based on OpenGL. Drawing images, sprites, display.newText etc. is all done using OpenGL. You can think of it as it's own layer for the screen's display. All of Corona's scaling facilities, rotating things operate there.

Anything that has a "native" in front of the API call are using features of the native operating system and are separate from the OpenGL canvas. You would run into this same issue building an app in Objective C or Java for Android in trying to mix the two systems.
Actually looking at your screen shot again, the font looks like a good size. I wonder if something else is going on. How fonts are rendered depends a lot on the operating system and the font.

Can you try a different font? Try native.systemFont and see if it behaves any differently?
uid: 199310 topic_id: 35589 reply_id: 141466


[TOPIC: post.html]
#6

Lava Level

[GLOBAL: userInfoPane.html]
Lava Level
  • Contributor

  • 274 posts
  • Corona SDK


Ok. that makes a lot of sense now.

hmm... Trying a different font would have actually been a good idea.

What I ended up doing thanks to the wonderful advice from the guys in freenode irc chat was to just double the size of the input box to cover all sizes. It's acceptable. you only name the player once.

Thanks for looking into this Rob. Definitely thanks for taking the time to look this over for me. I would love to pick your brain about this stuff in the future.

SHIPPED! on accident, but got this fixed, er.. acceptable in time. I had no idea Google Play had zero review period. Going to write my announcement message. :D
uid: 100299 topic_id: 35589 reply_id: 141491


[TOPIC: post.html]
#7

jalemanyf

[GLOBAL: userInfoPane.html]
jalemanyf
  • Enthusiast

  • 70 posts
  • Corona SDK

Hi Lava,

 

I have the same problem. Do you found a better solution for this problem?

 

Regards.

 

Josep Alemany



[TOPIC: post.html]
#8

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

+1 for a fix.

 

I've had the same problem on my HTC devices, and I think i've seen it on a Nexus 7 too. I've seen lots of posts in the past with people saying that the text is incorrect on a native text field.

 

I know that for me, even if I do something like:

 

local idealFontSize = 30
myTextField = native.newTextField( _W * 0.5, _H * 0.42, 220, 30 )
myTextField.font = native.newFont(native.systemFont, idealFontSize/display.contentScaleX)

 

which should scale the font size based on the display.contentScaleX, it doesn't always resize correctly.

Assuming the config file was set to 320*480, this should give:

 

iPhone 3gs =  15

iPhone 4 = 30

iPad 1 = 32

iPad 3 = 64

 

Which should be about right, but instead I get text that is twice as big / small on some devices.



[TOPIC: post.html]
#9

mtindall89

[GLOBAL: userInfoPane.html]
mtindall89
  • Observer

  • 3 posts
  • Corona SDK

Same issue here. Seems like it justed started with the latest free build possibly.



[TOPIC: post.html]
#10

AlanPlantPot

[GLOBAL: userInfoPane.html]
AlanPlantPot
  • Contributor

  • 733 posts
  • Corona SDK

Do we have any more info on this issue? 

We have some work for hire which is just about to be released, so we need to fix this issue asap.

 

For example this is how it looks on a Galaxy S2:

https://www.dropbox.com/s/f2fyylz691csbbt/WP_20130419_001.mp4

 

And this is the code to create the textfield:

 

insightTextField = native.newTextField(100, 100, 50, 150)
insightTextField.font = native.newFont( myfont, 20)
insightTextField:addEventListener("userInput", onInsightTextField)           
insightTextField.text = ""
 

 

Nothing out of the ordinary as far as I can tell, yet the majority of the text is offscreen. You can see in the video that the text field has some kind of bounding field (depending on the device I've seen this drawn in blue, green and orange) going through the middle of the text field.



[TOPIC: post.html]
#11

jack95

[GLOBAL: userInfoPane.html]
jack95
  • Contributor

  • 190 posts
  • Corona SDK

For example this is how it looks on a Galaxy S2:

https://www.dropbox.com/s/f2fyylz691csbbt/WP_20130419_001.mp4

 

It appears almost exactly the same on a Galaxy Note 2 (orange instead of blue). I don't mind that it's "broken", I mind that there's no best practice/workaround but rather a gamut of choices, some of which are of wildly varying quality and compatibility with current releases. =/



[TOPIC: post.html]
#12

jack95

[GLOBAL: userInfoPane.html]
jack95
  • Contributor

  • 190 posts
  • Corona SDK

So the issue of the strange colored boxes is that the Native device is trying to highlight the input field with a font that is larger than the field will allow (larger meaning needs a higher pixel height). The native OS doesn't apply the same scaling as Corona, so 12pt to the system is different than 12pt in corona, scaled. If you increase the height of the input field...a lot, like 120 and or decrease the fontsize of your input field, you will find a happy medium. Using a custom font that looks good small (get it down to 9pt and see what I mean) and you can probably get away without the field changing size at all or not enough to notice.



[TOPIC: post.html]
#13

chevol

[GLOBAL: userInfoPane.html]
chevol
  • Contributor

  • 292 posts
  • Corona SDK

Is there a work around for this, other then making the input boxes real big or the font real small?



[TOPIC: post.html]
#14

jack95

[GLOBAL: userInfoPane.html]
jack95
  • Contributor

  • 190 posts
  • Corona SDK

I branch my logic so if it's in a simulator it looks/acts one way and in a phone, another. Making the font really small is a matter of perspective. In my phone it looks decent so I don't really care what font I need to assign, as a value, to make that happen.



[TOPIC: post.html]
#15

mmcdonald1

[GLOBAL: userInfoPane.html]
mmcdonald1
  • Observer

  • 2 posts
  • Corona SDK

Are the Corona devs working on a fix? Is there at least a best practice solution for this? My company is making business apps with Corona pro and I've found myself having to hack together work arounds or write custom code to make things work on different devices. It's frustrating when the SDK you're using doesn't have solutions for common multi-device problems and you can't get down into the SDKs native code to fix the issue yourself :/

 

To be fair, Corona does a lot of things very well and I will continue to use it. The shortcomings are becoming a bit maddening though.

 

Edit: For clarification, the issue we're seeing is that the top half of the text gets cut off. However, the vertical area of the textbox is large enough to fit the text in. Problem is that the bottom of the text lines up with the middle of the textbox and the top of the text gets cut off before the top of the textbox area. So you end up with white space above and below the cut off text. We're using the default font now, still broken.

 

If working with native textboxes are so difficult, why not create a Corona text input object with cursor and selectable text that we can use for all devices?



[TOPIC: post.html]
#16

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

Do you have the same problem if you use native.systemFont?



[TOPIC: post.html]
#17

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

Can you guys post some screen shots?



[TOPIC: post.html]
#18

mmcdonald1

[GLOBAL: userInfoPane.html]
mmcdonald1
  • Observer

  • 2 posts
  • Corona SDK

We were using native font. Though I believe that the device we were testing on had an older version of Android installed because I tried taking a screenshot with power button + volume up and it wouldn't work. We were, however, able to solve the issue by making the textboxes twice as tall as they needed to be. Since we hid the background, this solution didn't look bad... was just odd that we had to do so.



[TOPIC: post.html]
#19

jack95

[GLOBAL: userInfoPane.html]
jack95
  • Contributor

  • 190 posts
  • Corona SDK

My happy sizes on my samsung galaxy note 2 are

 

84 height native textField and Courier New @ 16pt

 

72 height native textField and Courier New @ 9pt

 



[TOPIC: post.html]
#20

robin.ngoui

[GLOBAL: userInfoPane.html]
robin.ngoui
  • Observer

  • 9 posts
  • Enterprise

I have the exact same issue on Android handsets. Here is how I fixed the problem.

 

if (system.getInfo("platformName") == "Android") then

  local userIdInput = native.newTextField(5, 5, 150, 40) 

 

  userIdInput.font = native.newFont(native.systemFont, 14)    
  userIdInput.size = 14
else
  -- create a similar set of specs for iOS devices
end
 
The key is the specification for the "size" field, and make sure that it matches with the "font" field. You can play with different height specifications/combinations inside the newTextField() function and size specifications in the "font" & "size" fields to get the optimum effect you desired. This technique should work for both systemFont and other fonts. 


[TOPIC: post.html]
#21

Fidelis

[GLOBAL: userInfoPane.html]
Fidelis
  • Enthusiast

  • 30 posts
  • Corona SDK

@Rob sir here is my screenshot:

Please help us find some workaround for this! thanks

Attached Thumbnails

  • Screenshot_2013-06-26-18-23-16.jpg


[TOPIC: post.html]
#22

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

what is your config.lua like? 

What device are you running on? 

Can you post your code that creates your native.newTextField?



[TOPIC: post.html]
#23

Fidelis

[GLOBAL: userInfoPane.html]
Fidelis
  • Enthusiast

  • 30 posts
  • Corona SDK

Thanks for the response Rob.
Btw, I am using your "Ultimate Config.lua" code. And I am building it on Nexus 7, so I can tweak it into different resolutions.
Here is a part of my code: 

yearIF = native.newTextField( (display.contentWidth / 2), 180, (display.contentWidth*0.45), 35)
yearIF.font = native.newFont( native.systemFont,  _G.fontSize )
yearIF.size =  _G.fontSize
yearIF.text = ""
yearIF:setTextColor( 81, 81, 81 )
yearIF.inputType = "number"

 

my _G.fontSize is like this: 
 

_G.fontSize = 12 / display.contentScaleY


 



[TOPIC: post.html]
#24

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Moderator

  • 25,781 posts
  • Enterprise

Is that working for you?



[TOPIC: post.html]
#25

Fidelis

[GLOBAL: userInfoPane.html]
Fidelis
  • Enthusiast

  • 30 posts
  • Corona SDK

Too bad, it is still not working well for me. I tried to change the font size formula to 10 / display.contentScaleY , but still the text is cut off halfway.. please help!
 




[topic_controls]
Page 1 of 5 1 2 3 »
 
[/topic_controls]