I use the height to draw the lines and locate the text (in this case yellow for dc.getHeight() and purple for Sys.getDeviceSettings().screenHeight). Notice how the lower points are at the top of the button bar right at the screen edges. What I think will happen on the actual device is the height includes the button bar, so the lines appear to be from the actual bottom of the button bar (the lower corners of the physical screen) and the text is hidden by the button bar.
Here's the source for the app. You should see what I do on the sim, and if you sideload it to an 820, it would really help to verify what I think is happening (it may be worth trying this on an Edge1000 too, as it's also got the screen button bar)
using Toybox.Application as App;
using Toybox.WatchUi as Ui;
using Toybox.Graphics as Gfx;
using Toybox.System as Sys;
class XApp extends App.AppBase {
function initialize() {
AppBase.initialize();
}
// onStart() is called on application start up
function onStart(state) {
}
// onStop() is called when your application is exiting
function onStop(state) {
}
// Return the initial view of your application here
function getInitialView() {
return [ new XView() ];
}
}
class XView extends Ui.View {
var height,width;
var dheight,dwidth;
function initialize() {
View.initialize();
width=Sys.getDeviceSettings().screenWidth;
height=Sys.getDeviceSettings().screenHeight;
}
// Load your resources here
function onLayout(dc) {
dwidth=dc.getWidth();
dheight=dc.getHeight();
}
// Called when this View is brought to the foreground. Restore
// the state of this View and prepare it to be shown. This includes
// loading resources into memory.
function onShow() {
}
// Update the view
function onUpdate(dc) {
dc.setColor(Gfx.COLOR_BLACK,Gfx.COLOR_BLACK);
dc.clear();
dc.setColor(Gfx.COLOR_WHITE,Gfx.COLOR_TRANSPARENT);
dc.drawText(22,height-22,Gfx.FONT_SMALL,"Sys",Gfx.TEXT_JUSTIFY_LEFT);
dc.drawText(dwidth-22,dheight-22,Gfx.FONT_SMALL,"dc",Gfx.TEXT_JUSTIFY_RIGHT);
dc.setColor(Gfx.COLOR_YELLOW,Gfx.COLOR_TRANSPARENT);
dc.drawLine(0,0,width,height);
dc.drawLine(0,height,width,0);
dc.setColor(Gfx.COLOR_PURPLE,Gfx.COLOR_TRANSPARENT);
dc.drawLine(dwidth/2,dheight/2,dwidth,dheight);
dc.drawLine(0,dheight,dwidth/2,dheight/2);
}
// Called when this View is removed from the screen. Save the
// state of this View here. This includes freeing resources from
// memory.
function onHide() {
}
}
If possible, could you post a pic if it looks different on a 820? Thanks!