Monday, October 07, 2013

How to put content on a lock screen image so it doesn't overlap with the text

I'm posting this for me own reference as much as for anyone else. ;)

When wanting to add lockscreen support to your app there is lots of useful information available about how to do this technically. Unfortunately there is little information about what you should put on the lockscreen or how you should position it to avoid it crashing into the text that may also be displayed over the lockscreen.
Today I'm going to look at the second of those issues.

Fortunately there are some values you can use to be sure your content won't overlap the text you can't control.
The values you need for WVGA screen devices are:
Left margin: 24px
Top margin: 56px
Space to use: 288px by 288px

If you're creating larger images for bigger screens that you don't want to be autoscaled then the values you need are:

Left: 58px
Top: 90px
Space: 460x460px

For 720P:
Left: 36px
Top: 84px
Space: 432x432px

Here's an image to show the 720P values in situ.

At some point in the past I grabbed the above from a screencast. Sorry, I can't remember exactly where it's from but I think it was the Windows Phone design team. If anyone can help me point to the source that'd be great. Thanks :)

Of course, you may need to allow for variations due to language differences:


Post a Comment

I get a lot of comment spam :( - moderation may take a while.