Thursday, December 27, 2012

Android Tips n Tricks

Putting together some android tricks that I had to adopt to make my application work on all the different screen resolutions.

One of the first troubles I had with android was making sure that the header we had developed looked the same for every screen resolution in both the portrait and landscape mode.

The header image we developed consisted of 3 parts

  1. Logo on the left
  2. Logout button on the right
  3. Page heading at the center.

Sample shown below:

Now that you have seen the image, lets come to the problem. Even if we generate the image in the 3:4:6:8 ratios that android suggest we still face the problem on screens with different resolutions with the image being stretched and looking awkward. < br/> In order to overcome this we simply split the images into 3 parts. You can split it into 'n' parts depending on your requirement.
The three parts corresponding to the three things we needed to display as as follows.

Now to get a consistent header all we had to do was use a Relative Layout and arrange the images as follows:

1. Arrange the image with logo to the left of the screen.
2. Arrange the image with logout to the right of the screen.
3. Arrange the blank background image such that its left edge touches the right edge of the logo and the right edge touches the left edge of the logout. Thus stretching the plain image on every screen resolution.

Simple enough. Use similar techniques in your projects to get consistent look and feel across various screen resolutions.

No comments:

Post a Comment