safe area demo

build.settings

settings =
{
	orientation =
	{
		default = "portrait", 
		supported = { "portrait", "landscapeLeft", "landscapeRight", "portraitUpsideDown" }
	},
	iphone =
	{
		xcassets = "Images.xcassets",
		plist =
		{
			UILaunchStoryboardName = "LaunchScreen",
		},
	},
}

config.lua

-- config.lua

application =
{
	content =
	{
		width = 300,
		height = 500,
		scale = "letterbox",
		scale = "zoomStretch",
	},
}

main.lua

-- display.setDefault("background", 0.5)

local topGroup = display.newGroup()
local g = display.newGroup(  )
topGroup:insert( g )

local function createThings()

	print(system.orientation, display.getSafeAreaInsets())
	print("SAFE ORIGINS", display.safeScreenOriginX, display.safeScreenOriginY)
	print("ORIGINS", display.screenOriginX, display.screenOriginY)

	g:removeSelf( )
	g = display.newGroup( )	
	topGroup:insert( g )

	local rc = display.newRect(g, display.screenOriginX, display.screenOriginY, display.actualContentWidth, display.actualContentHeight )
	rc:translate( rc.width*0.5, rc.height*0.5 )
	rc:setFillColor( 0, 1,0,0.5 )
	rc.strokeWidth = 2

	local rc = display.newRect(g, display.safeScreenOriginX, display.safeScreenOriginY, display.safeActualContentWidth, display.safeActualContentHeight )
	
	-- local top, left, bottom, right = display.getSafeAreaInsets()
	-- local rc = display.newRect( g,
	-- 	display.screenOriginX + left, 
	-- 	display.screenOriginY + top, 
	-- 	display.actualContentWidth - (left + right), 
	-- 	display.actualContentHeight - (top + bottom)
	-- )

	
	rc:translate( rc.width*0.5, rc.height*0.5 )

	rc:setFillColor( 1, 0,0,0.5 )
	rc.strokeWidth = 2
	rc:setStrokeColor( 1, 0,0 )

	-- display.newCircle(g,  display.screenOriginX, display.screenOriginY, 5 )
	-- display.newCircle(g,  display.safeScreenOriginX, display.safeScreenOriginY, 4 ):setFillColor(1,0,0)
end


Runtime:addEventListener( "resize", createThings )
createThings()

-- timer.performWithDelay( 200, createThings, 0 )





local environment = system.getInfo("environment") 
local platform = system.getInfo("platform")



-- This is only supported on iOS (simulated or device) or Android (device only)
if platform == "ios" or (platform == "android" and environment ~= "simulator") then

	local widget = require "widget"


	-- Create text object to display current status bar mode
	local statusBarState = display.newText( "None set, default", display.contentCenterX, 50, nil, 20 )

	-- This table connects string id to actual status bar mode
	local statusBarModes = {
		["display.HiddenStatusBar"] = display.HiddenStatusBar,
		["display.DefaultStatusBar"] = display.DefaultStatusBar,
		["display.DarkStatusBar"] = display.DarkStatusBar,
		["display.TranslucentStatusBar"] = display.TranslucentStatusBar,
		["display.LightTransparentStatusBar"] = display.LightTransparentStatusBar,
		["display.DarkTransparentStatusBar"] = display.DarkTransparentStatusBar,
	}

	-- When button is pressed, set status bar mode text and mode
	local function changeStatusBar( event )
		local id = event.target.id
		statusBarState.text = id
		display.setStatusBar( statusBarModes[id] )		
		createThings()
	end


	-- Create buttons which would switch to status bar mode stored in id
	widget.newButton({
		label = "Hidden",
		id = "display.HiddenStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 115,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.08,0.28,0.48,1 }, over={ 0.08,0.28,0.48,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar,
	})

	widget.newButton({
		label = "Default",
		id = "display.DefaultStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 155,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.1,0.3,0.5,1 }, over={ 0.1,0.3,0.5,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar,
	})

	widget.newButton({
		label = "Light Transparent",
		id = "display.LightTransparentStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 195,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.12,0.32,0.52,1 }, over={ 0.12,0.32,0.52,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar
	})	

	widget.newButton({
		label = "Dark Transparent",
		id = "display.DarkTransparentStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 235,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.14,0.34,0.54,1 }, over={ 0.14,0.34,0.54,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar
	})

	widget.newButton({
		label = "Dark (legacy)",
		id = "display.DarkStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 275,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.16,0.36,0.56,1 }, over={ 0.16,0.36,0.56,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar
	})

	widget.newButton({
		label = "Translucent (legacy)",
		id = "display.TranslucentStatusBar",
		shape = "rectangle",
		x = display.contentCenterX,
		y = 315,
		width = 278,
		height = 32,
		fontSize = 15,
		fillColor = { default={ 0.18,0.38,0.58,1 }, over={ 0.18,0.38,0.58,1 } },
		labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
		onRelease = changeStatusBar
	})

	-- Android have 'androidSystemUiVisibility' options, which would change how status bar looks like
	-- This can be set with native.setProperty() function
	if platform == 'android' then

		local systemUIVisibility = nil

		-- When 'androidSystemUiVisibility' buttons are pressed, select ui mode and create/change display text
		local function changeAndroidSystemUI( event )
			local id = event.target.id

			if not systemUIVisibility then
				systemUIVisibility = display.newText( id, display.contentCenterX, 75, appFont, 16 )
				systemUIVisibility:setFillColor( 0.7 )
			else
				systemUIVisibility.text = id
			end

			native.setProperty( "androidSystemUiVisibility", id )
		end


		-- Title text for androidSystemUiVisibility
		display.newText({
			text = 'androidSystemUiVisibility:',
			x = display.contentCenterX,
			y = 360,
			width = 278,
			height = 32,
			fontSize = 18,
		})

		-- Buttons to change Android System UI. Mode is stored in button's id
		widget.newButton({
			label = "default",
			id = "default",
			shape = "rectangle",
			x = 89,
			y = 395,
			width = 136,
			height = 32,
			fontSize = 15,
			fillColor = { default={ 0.22,0.42,0.62,1 }, over={ 0.22,0.42,0.62,1 } },
			labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
			onRelease = changeAndroidSystemUI
		})

		widget.newButton({
			label = "lowProfile",
			id = "lowProfile",
			shape = "rectangle",
			x = 231,
			y = 395,
			width = 136,
			height = 32,
			fontSize = 15,
			fillColor = { default={ 0.22,0.42,0.62,1 }, over={ 0.22,0.42,0.62,1 } },
			labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
			onRelease = changeAndroidSystemUI
		})

		widget.newButton({
			label = "immersiveSticky",
			id = "immersiveSticky",
			shape = "rectangle",
			x = 89,
			y = 435,
			width = 136,
			height = 32,
			fontSize = 15,
			fillColor = { default={ 0.22,0.42,0.62,1 }, over={ 0.22,0.42,0.62,1 } },
			labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
			onRelease = changeAndroidSystemUI
		})

		widget.newButton({
			label = "immersive",
			id = "immersive",
			shape = "rectangle",
			x = 231,
			y = 435,
			width = 136,
			height = 32,
			fontSize = 15,
			fillColor = { default={ 0.22,0.42,0.62,1 }, over={ 0.22,0.42,0.62,1 } },
			labelColor = { default={ 1,1,1,1 }, over={ 1,1,1,0.8 } },
			onRelease = changeAndroidSystemUI
		})
	end
else
	local msg = display.newText( {
		text = "Statusbar mode not supported on this platform.\n\nTry simulating iOS Device or building for a mobile platform.",
		x = display.contentCenterX,
		y = display.contentCenterY,
		width = display.viewableContentWidth*0.95,
		font = native.systemFontBold,
		fontSize = 20,
		align = "center",
	} )
	msg:setFillColor( 1, 0, 0 )
	
end