Unidev Tech Blog

Archive for the ‘Mobile’ Category

Android doesn’t provide a default horizontal pager view. It appears as though the Gallery and Horizontal Scroll View can provide this same functionality. The solution described below allows for easy left and right swipes to load different screens controlled by a single activity. We’ll look at an example of how to use these classes to provide swiping behavior.

There are few steps to follow when getting started.  We provide the full source code for the sample application discussed in this tutorial.  Use the link to see examples.

Step One

Define a linear layout and add a weight sum attribute to “1.0”, add 2 more linear layouts inside a main linear layout with an attribute layout weight to “.50” and set the orientation to “horizontal”. Doing this will cause the 2 linear layouts to share the screen equally (horizontal). In the example we will display 6 images (with a text below the image) on each view, to achieve this add 3 more linear layouts in each sub linear layout added above with layout weight set to “.33” and orientation to vertical. Add image views and text views within the linear layouts. Find the attached source code panellinearview.xml file for the complete code.

Step Two

Create a custom view Group. Your activity needs a view group to determine users on touch event, motion event and screen switched to left or right event. Override onTouchEvent and onInterceptTouchEvent method you’ll need to implement several key methods. Find the attached source code PanelPager.java file for the complete code.

Step Three

Define a PanelPager view in your layout resource file and wrap with a linear layout. In the example we will retrieve display list from a web service and load images from the web. So you’ll add the child views to PanelPager view programmatically based on the display list items size.

Step Four

Retrieve the data list. In the display list iteration process inflate the panellinearview.xml for every six items then populate images and text views in the panellinearview.xml. After every six items in the display list add the inflated panellinearview.xml to the PanelPager view. Since you are loading images from the web you can lazy load the images using LazyLoadImage.java file attached source code. Find the attached source code UnidevBlogActivity.java and LazyLoadImage.java files for the complete code.

The PanelPager will provide a neat swiping behavior same as swipe between multiple views on the Android home screen. There are also classes I included for lazy load images in the panel view. In the layout resource file and activity file you will find the code for pagination as well. In your activity you can implement onScreenSwitchListener to handle pagination.

1) System configuration

• Eclipse Helios
• Android SDK – Android 3.2

2) Requirement

• Panel view/multiple views and swipe between multiple views
• Pagination with active and inactive dots.
• Image Lazy loading if image need to load from the web
• Work on all resolutions and sizes

i. Tablet 1280X800

ii. Tablet 1024X600

iii. 7 inch

iv. 10inch

• Screenshots

3)      Solution

• panelview.xml
• panellinearview.xml
• UnidevBlogActivity.java
• PanelPager.java
• LazyLoadImage.java

As a senior mobile software developer here at Unidev, with over 20 years of client, web-based, and mobile development under my belt, I have learned one simple truth.  Software development companies are not the same.  Outsourcing overseas, although inexpensive, comes at a price.

Many times clients look for the quick, cheap way to get their app done by outsourcing overseas or to local development companies that outsource.  Many companies out there represent themselves as a local US based company but when it’s said and done they simply contract the work out for pennies on the dollar.

This is a great way to get many things done but could come at severe cost in the long run.  I had a client about a year ago that had a horrible experience.  He had an excellent, “why didn’t I ever think of that?” kind of idea for an app.  He wanted it done quickly and didn’t want to invest much to get it done.

He went through a company he thought coded locally and hired them at a price that was about 50% off of the going rate.  This company delivered as promised and he was initially happy.  The app was submitted and started to rank.  The application made it to number 50 in the productivity category and he was bringing in a little cash.

What he didn’t know was, there was another app that had an uncanny resemblance to his original application and was ranking in top ten for a different category.  The app had a different icon and user interface but the idea was identical.   The revenue of the like app was about 20 times that of the original app.

This client managed to save 50% off of going rate but ended up losing much more in revenue in the long run.

When picking a consulting company to create an app, it is important to know where the work is getting done and how far reaching any non-disclosure documents have to go to be enforced.   Intellectual property is about the most valuable asset that many companies own and should be protected as such.

Here at Unidev, we have an excellent team of local full time employees that can get your app from idea to app store while giving the piece of mind that your intellectual property is protected.

Interested in mobile app development? Contact Unidev

Optimizing for the iPhone “Retina Display” and Other High Resolution Devices

The iPhone 4 and new iPhone 4s come featured with Apple’s “Retina Display”. This is a 3.5 inch screen with a resolution of 960×640 at 326 pixel per inch. Compared to its predecessor, the iPhone 3GS, this display is a very significant improvement. Once you get used to the Retina Display older devices will no longer cut it. The pixelation of graphics with lower ppi devices stick out like a sore thumb leaving high resolution users dissatisfied. Here we’ll show you how to target these devices and optimize to bring users the best quality in web graphics.

Below are identical logos being viewed on the iPhone 4 with Retina Display. It’s quite obvious which of the two below has been optimized for the high resolution devices. As mobile application and websites become more and more common using high resolution graphics it is something developers today need to consider when developing applications and websites.

Identical logos being viewed on the iPhone 4 with Retina Display.

So how do we go about targeting a high ppi device?

When developing an application much of the work is done for us. Create and save two different versions of each graphic we want to optimize. One of them should be saved at 163ppi (iPhone 3GS) and the other should be twice the size and saved at 326 ppi. Applying the suffix “@2x” in the image title of the high ppi image will trigger iOS to use that particular image when a device with Retina Display is being used. An example of this naming convention would be “myimage.jpg” and “myimage@2x.jpg”.

Mobile Safari does not automatically recognize the “@2x” suffix so we have to target the mobile devices with high dpi and query an alternate stylesheet. The following code will do just that:

<link rel=”stylesheet” type=”text/css” media=”only screen and (-webkit-min-device-pixel-ratio: 2)” href=”retinaDisplay.css” />

If you had a 12×12 icon on your webpage in this stylesheet you would load the 24×24 version of the icon and specify its height and width to be 12×12. It is also possible to do this using just your image tag. For example:

<img src=”myImage24x24” width=”12” height=”12” />

The iPhone uses the name “Retina Display” for its new display because the classification of the images displayed by the device is so high the human eye is unable to differentiate its pixels. Beyond the percentage of resemblance of the human eye and the “Retinal Display”, the reality is that nobody has achieved anything closer to human vision prior to this. Apple has come up with an approach that has changed the way we see images on the iPhone.

Interested in Mobile Development? Contact Unidev