TextField very small on the screen

#1

Why is my TextField so small on the screen when targeting Android?

image
image.png903×442 29.1 KB

#2

Check your project.xml, what’s settings?

#3 
<?xml version="1.0" encoding="utf-8"?>
<project>
	<!-- NMML reference: https://gist.github.com/1763850 -->
	
	<!-- metadata, make sure 'package' is at least 3 segments (ie. com.mycompany.myproject) -->
	<meta title="HelloOpenFL" package="com.leocavalcante.helloopenfl.HelloOpenFL" version="1.0.0" company="Leo Cavalcante" />
	
	<!-- output -->
	<app main="com.leocavalcante.helloopenfl.Main" file="HelloOpenFL" path="bin" />
	
	<window background="#ffffff" fps="60" allow-high-dpi="true" />
	<window orientation="portrait" vsync="false" antialiasing="0" if="cpp" />
	
	<!-- classpath, haxe libs -->
	<source path="src" />
	<haxelib name="openfl" />
	<haxelib name="actuate" />
	
	<!-- assets -->
	<icon path="assets/openfl.svg" />
	<assets path="assets/img" rename="img" />
	
	<!-- optimize output
	<haxeflag name="-dce full" /> -->
	
	<android target-sdk-version="23" />
	<architecture name="x86" if="android" />
</project>
#4

I think you’re emulating a device with very high resolution. Text fields use font size 12 by default and you didn’t change that size. When you display size 12 font on a huge screen, it takes up a very small fraction of the screen.

To fix this, you want to increase the font size based on either the screen DPI or the screen width/height. (A case can be made for either.)

If you use Advanced Layout, this is easy. Add using layout.LayoutCreator; after your imports. Then call text.simpleTextSize() once you create your text field, and your text will automatically scale with the stage.

Actually, you may need one more step. Text fields are 100px wide by default, and increasing the text size may make the text go out of bounds. Type text.simpleScale() to make the text boundaries get bigger along with the text itself.

2 Likes
#5

Thank you very much. I did noticed that is something about managing DPI, then I was willing to port Feathers ScreenDensityScaleFactorManager, but first will take a look at AdvancedLayout.
Cheers!