you're reading...


Supporting multiple screens at Android – Part II

This writing is a continuation of my previous blog with the same title. Android’s support for multiple screens across devices is great, but sometimes we need more. I realised when coding with Android 2.3.3, the support given is not as smooth as promised. When my application is displayed in Samsung Galaxy S3 and Samsung Galaxy S2, the display is not the same.

So I tried to work things around by coding screen elements based on the screen percentage ratio. I have completed in making my app versatile enough to be displayed in Android screens which are normal, large and extra large. I tested it using the emulator on Samsung Galaxy S, Galaxy S2, Galaxy S3, Galaxy Ace, Note, Note 2, Google Nexus 7, HTC One X. I do not want to support for smaller screens since I found most of the devices with small screens are running Android OS lower than 2.3.3.

My approach is basically the same with the post I made on the 16th of Jan. But here I would like to discuss about coding TextView and EditText, so their display will be based on the screen ratio. My approach might not be perfect, but I see it is sufficient enough to make my app versatile.

1. Decide the dimension of a label you want to display. Its height or width. Lets say based on the screen below, I want to display the word ‘Yellow’ around 15% of the screen width, and for the display ’00:00′, I want the first ’00’ to be 24% of the screen.

Screen Shot 2013 01 29 at 9 19 08 PM

2. Resize the dimension of the current TextView or EditText. You can only resize the elements once you call the setContentView() method.
a.Get the dimension of the screen.

		WindowManager w = getWindowManager();

		Display d = w.getDefaultDisplay(); 
		int measuredwidth = d.getWidth(); 
		int measuredheight = d.getHeight(); 

b. We are going to resize the TextView or EditText using the below method. I don’t want to be too precise in creating the dimension. The method has three parameters. The first is the element to be resized, the second is the minimum ratio of the element, the third parameter is the maximum ratio of the element.

Screen Shot 2013 01 29 at 9 31 13 PM

c. Call the method above and update the text elements. I only called the previous method once or twice, then I just resize the other text elements based on the returned value. I found my application loads a lot faster when I do this.

Screen Shot 2013 01 29 at 9 31 33 PM

3. Share the standard size between Activities. We will need to do this, because we want the size of the screen header, footer, labels to be consistent between screens.

Screen Shot 2013 01 29 at 9 32 14 PM

That’s it. Below are the screen displays when I try to run my app on Galaxy Ace, Galaxy S3, and Google Nexus 7. I got the configuration from http://en.wikipedia.org/wiki/Comparison_of_Android_devices#Smartphones

Display on Galaxy Ace emulator, the screen display is 480×320 HVGA, with 3.5 inch size.

Screen Shot 2013 01 29 at 9 46 01 PM

Display on Galaxy S3 emulator, the screen display is 1280×720 HD, with 4.8 inch size.

Screen Shot 2013 01 29 at 9 19 08 PM

Display on Google Nexus 7 emulator, the screen display is 1280×800 HD, with 7.27 inch size. Please don’t mind the Devonthink label displayed on the left. It is from my own system.

Screen Shot 2013 01 29 at 9 49 42 PM

It hope it helps on you development :).

Aireen Deviani

Avoid Delays and Rejections when Submitting Your App to The Store!

Follow my FREE cheat sheets to design, develop, or even amend your app to deserve its virtual shelf space in the App Store.

* indicates required

When you subscribe you’ll also get programming tips, business advices, and career rants from the trenches about twice a month. I respect your e-mail privacy.


No comments yet.

Leave a Reply