Android - getting screen height minus the navigation bar / obtaining dimensions of a view

One of the problems I faced when creating simple slide puzzle was trying to work out the exact dimensions of a layout/view. Many of the game pages had elements along the top or bottom of the screen and I needed to know the dimensions of the remaining free screen space in between before I created the game board.

I also had a similar problem with android versions 3.0+ as there is a software navigation bar that displays over the top of your app, even if your app requests full screen mode. When I wanted to setup my app for a full screen puzzle, I was using the displayManager to get the screen resolution and using those values to setup the game board. This was no longer a valid solution in android 3.0+ as the navigation bar was eating into some of these pixels, effectively reducing the screen size I had to work with and causing some of the puzzle board to be hidden behind the navigation bar. I somehow needed to get the size of the visible screen space.

What people sometimes try to do (or admittedly, what I tried to do)

One might think that in the activities onCreate() method, you could perform the following to get the size of an element. For example, with an ImageView:


If you try this, you will probably notice the dimensions will be something like 0, 1 or -1. These represent the attributes 'fill_parent', 'wrap_content' etc. that you will have specified earlier, most likely in your xml layout file. Why does this happen? simply put, the layout has not been created yet. The onCreate() method is the first thing that is called when you start a new Activity. The values 0,-1,1 are there so the layout creator knows how to size everything correctly later on.

How to do it

The way in which I solved the problem was to implement an 'onGlobalLayoutListener'. This provided a call back as the layout was created. As it is created, the dimensions of each element have been calculated and you can easily obtain these values.

I will demonstrate with an example of how to obtain the dimensions of a single layout that you would like to fill the entire visible region of the screen. (The same method can be applied to any view you wish). This is done by first specifying a single xml layout element that is set to fill the entire screen.

XML (mylayout.xml) :


In the activity's onCreate method you then need to add a listener to the view tree observer. Once the view is created, the code inside onGlobalLayout() will be called. By removing the listener straight away, you can ensure the code is only called once each time the activity is created.

Activity:


There you have it. This method should give the correct height and width. On my galaxy tab, this correctly returns a value of 768 rather than 800 for the height of the screen, as the navigation bar takes up 32 pixels.

I think this is quite a useful thing to do. In Simple slide puzzle, I display an advert at the bottom of the page, some imageViews just above and the rest of the space is for the puzzle board. Using this technique, I can make sure the puzzle board remains completely square and can set it to fill, for example, 90% of the empty screen space.

Simple Slide Puzzle

Finally, my first Android app is finished and ready for release on the market. It is not the greatest game ever, but it is a nice remake of an old classic - 15 puzzle. It's one of those games I'm sure everyone has played at least once in their lifetime, albeit most probably in real life rather that on a computer.

It's got a number of cool features too.
- pre loaded images to choose from (animals, landscapes)
- use pictures from your phone, or take new ones with your camera.
- crop the images before you use them to make sure they don't stretch badly.
- choose from many different sizes (3x3,4x4, etc.)
- keep track of your best times

Check it out on the marketplace. It's free - https://play.google.com/store/apps/details?id=app.slidepuzzle