Tag Archives: Mobile application development

08
Aug

Mobile Application Testing – A Quality Approach

Software Testing and QA August 8th, 2011

The ever increasing demand of mobile devices has given a push to software developers in taking the traditional web applications to mobile environment. The challenge is to provide user experience as similar and seamless across various mobile devices as possible in spite of the limitations which the mobile environment poses, adopting an agile methodology to develop the mobile applications for a diversified device environment, hardware and networking considerations.

Mobile device markets that includes Smartphones, Tablets, PDAs etc. is growing dynamically making the mobile application developers strive to deliver most robust, scalable applications with quality assurance Every device platform creates a unique testing environment challenging the mobile application developers to follow different testing strategies. Here we shall see how different types of testing approaches can be taken up for a variety of mobile platforms.

Numerous different mobile platforms available for mobile applications to name a few:

  • Apple’s iOS
  • Google’s Android
  • Nokia’s Symbian, Maemo and MeeGo
  • Palm/HP’s WebOS
  • Samsung’s Bada
  • RIM’s BlackBerry OS., and many more.

As mentioned, every platform needs a different testing approach. A combination of manual and automation testing can be done for an effective outcome.

Following are different types of manual testing for mobile environment:

  • Functionality Testing:

Functional testing mainly includes finding device specific bugs and navigational issues of application. This type of testing should be done at the initial stage when the application is under development. In functional testing we can check database or network queries with response times, crashes and memory issues. Functionality testing of a mobile application is a black-box type of testing to assure that the application is functioning as per the business specifications.

  • Usability Testing:

Usability testing encompasses mobile interface testing, application navigation testing, and intuitiveness of the application, consistency, and soberness of color scheme. An ISO standard defines usability as “the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use”.

In Usability testing ease and efficiency of the user and content verification will be tested as defined in common Usability guidelines.

  • Network Connection Testing:

Every mobile application which utilizes internet needs to be tested under different networks. These are a few networks for testing applications:

2G (GPRS, CDMA, EDGE), 3G and WiFi.

This is a necessity because most of the times the server responses are different for different type of networks. This testing helps us check application behavior under different networks.

  • Installation Testing:

While installing, the application should install required softwares automatically on the device. And while uninstalling the application, it should remove all the available content and databases from the device which are used by application.

  • Performance Testing:

Performance testing is required for finding memory related issues in application when data is excessive, due to devices having less memory as compared to simulator, this testing is required to be done on device only. By this testing approach, we can find the stability and performance of application under excessive data.

  • Stress Testing:

This testing is required for getting the application response time while clicking on different buttons regressively and adding more data on device. We can get different crashes and hangings of application while running the application for long time.

In absence of mobile devices, simulators have always played a vital role for testing mobile device applications, although device testing is always the ideal way as it represents more likely end user scenarios, the significance of simulators in testing cannot be ignored. To have an effective testing with the help of a simulator, it’s necessary to explore all the capabilities of simulator.

Simulator versus device testing:

Simulators are mainly used for functional testing of basic flows. Simulators are not used for performance and usability testing, but the final testing is conducted on actual devices so crashes and hangings can be identified. One cannot get quality application while relying only on simulator. Device testing is necessary for all the applications, as with device testing we can understand the application behavior on different networks.

Simulator:

Is a software application that can accurately imitate a mobile phone. Simulator is mainly used by developers to check the functionalities implemented under development phase.

Let’s discuss the pros and cons of using simulators:

  • Pros:

- Helps in isolating issues which are not volatile network connection dependent
- Provides a wide variety of testing over different types of device simulators for the same build
- Allows to test the same build in multiple device screens.

  • Cons:

- Simulators of older generation handsets don’t resemble the device as closely
- Some issues which are hit by the speed at which input was given cannot be reproduced easily
- Hardware/Firmware environment variations detectable in device testing only
- Device testing is always preferred as it represents more likely end user scenarios.

Device: Is the actual handset where application installed and runs.

There are some pros and cons while using real devices for testing as well.

  • Pros:

- Finds actual issues of application.
- Finds crashes, memory leak issues which can not found on simulators.
- Checks application over 2G and 3G and different networks
- Checks application behavior while incoming call, SMS, MMS and alarm.

  • Cons:

- Expensive for compatibility testing of application over wide range of devices
- Consumes more time for adding excessive test data for testing purpose.

Checklist to follow while testing a mobile application:

Following is a basic checklist which is required while testing mobile application for any platform:

1. Installation & Uninstallation: To verify whether the application can be installed & uninstalled successfully.

2. Network Connectivity:

  • The application can use simultaneous connections properly
  • The application follows the GSM Offline profile correctly when making connections.
  • When GSM Offline profile is selected, application cannot take network connection or send an SMS/MMS
  • The application can utilize WLAN, 2G and 3G networks correctly.
  • Performance of application during network connectivity problem.

3. Call/SMS/alarm handling: Verify that Application pauses and resumes for the same state when there is an incoming phone call/SMS/MMS/Alarm notification.

4. Check the look & feel of the application

5. Content: Check if enough information is displayed

6. The application must function as defined in the Help, user’s guide, or functional specification

7. Performance : Application and inner pages load time.

Automation Testing:

Automation testing is usually extended to perform tasks impossible with manual testing in large applications. An automated software testing tool is capable of playing pre-recorded and predefined actions. The results are mapped to the expected behavior and report the success or failure of these manual tests. Once automated tests are created they can easily be repeated. Having experienced the efficiency of automated software testing, it has become an important part of an application testing.

Automation tools available for testing:

Mainly mobile testing is done manually on actual devices. Some of the following tools are available in to test the functionality as well as usability of application.

  1. Robotium for Android
  2. Testquest, try, and digia for Symbian
  3. FoneMonkey for IPhones
  4. Memory sweep for IPhone
  5. Other tools: eggplant, VNC Robot, Hopper and TestQuest.

Advantages and Limitations of Automation Tools:

Advantages:
- Multiple tests can run in less time with fewer resources
- Automated Tools run tests faster than human users
- Can reuse tests on different versions of an application.

Limitations:
- Unable to test all the functionalities and Usability of application through automation tools
- Proficiency is required to write the automation test scripts for application different functionalities
- Debugging the test script if any error is present in the automation test script
- Storing and maintenance of test data is difficult.

I believe that this comprehensive information will be quite helpful to you if you are looking at some methods for an effective approach to test a mobile device application. You can leave your comments and/or questions; I would be looking forward to having an interactive conversation.

03
Aug

Android UI Design Pattern – Action Bar

Android, Mobile Application Development August 3rd, 2011

The previous posts on User Interface tips and Dashboard design pattern gave you a fair idea on how to get going with your User Interface.

In this post, we shall look at the Action Bar design pattern in more detail which will enable you to better understand and execute Action Bars on your user interface.

Introduction:

As previously mentioned, action bar is a bar placed atop the screen that houses all the essential actions used in an application. It contains only those actions that are common to the entire application, and not activity specific ones. It is very commonly used in most applications, some even before it was introduced as a design pattern.

The Twitter Application for Android is a prime example. It has an action bar that provides actions like refresh, search, messages etc. The Facebook app is another common app that uses this pattern. Imagine if every app had an action bar, how useful and user friendly it would be. Navigation can also be added there. For now, this should suffice. Let us take a look at how do you actually go about creating it. Of the 3 patterns this is the easiest pattern to implement. So let us try and implement this step by step in the same manner as described in Dashboard Design pattern. Please refer -Xoriant Source Code for Android Dashboard UI Pattern

Take a look at the images below :

Follow these few simple steps to get going with your Action Bar:

Step 1: Create Action Bar Class

First of all, you need to create an abstract base class that houses all the common functionalities like the lifecycle method and the” onClick” handlers similar to the dashboard. In this, “onClick” handlers refer to actions that need to be triggered when the actions on the action bar are clicked. This should be pretty simple, especially after doing it for the dashboard. But as always the sample snippet is available for your reference.

public abstract class ActionBarAppActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        //setContentView(R.layout.main);
    }

    public void onSearch(View v)
    {
    	startActivity (new Intent(getApplicationContext(), SearchActivity.class));
    }

    public void onHome (View v)
    {
    	return2Home(this);
    }

    public void return2Home(Context context)
    {
        final Intent intent = new Intent(context, HomeActivity.class);
        intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
        context.startActivity (intent);
    }
}

Step 2: Create Layout For Action Bar

You have got your base class ready. That means half the job is done. Now simply create the layout for the home screen along with the action bar. Remember the title bar will not be present in the application. It will be replaced by the action bar. The layout must include an icon for home, the title of the current view and other options to be displayed on the bar. Don’t include more than 3 options as it looks cluttered. Creating layouts by now won’t be a hurdle. All you need is a couple of image views and text views. The necessary icons/images may be stored in the resources and referred to in the usual way. With the hints I have given you the layout shouldn’t take long to make. Anyhow a sample snippet is always there at your disposal. Take a look at the sample above. Just to remind you; it is only a snippet not the entire code.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			  android:orientation="horizontal"
			  android:layout_width = "fill_parent"
			  android:layout_height="wrap_content"
			  android:gravity="right"
			  android:layout_gravity="right">

			   <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/about_click"
            			   android:onClick="onAbout"
            			   android:layout_marginTop = "6dip"
            			   android:layout_marginBottom = "4dip"
            			   android:layout_marginLeft="5dip"
            			   android:background="@null"
            			   android:layout_marginRight="5dip"/>

			  <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft = "5dip"
			   android:layout_marginRight="5dip"
			   />

			  <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/search"
            			   android:layout_marginTop = "6dip"
            			   android:layout_marginBottom = "4dip"
            			   android:onClick="onSearch"
            			   android:background="@drawable/home_bg"
            			   android:layout_marginRight="5dip"/>
	</LinearLayout>

Step 3: Append Action Bar to all Activities and create layouts (Modify action bar in case of search)

Now all that remains is replicating the same layout of the home screen action bar across all the other activities. That is simple replication of the code. Also generate the layout for the remaining activities. In case of the search activity, only a slight modification will be needed to the action bar to include a search box as well. That is as simple as appending an edit text to the layout. Have a look at the code snippet below.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
			  android:orientation="horizontal"
			  android:layout_width = "wrap_content"
			  android:layout_height="wrap_content"
			  android:gravity="left|center_vertical"
			  android:layout_gravity="left">

			  <ImageButton style="@style/TitleBarOperation"
            			   android:src="@drawable/home_def"
            			   android:background="@drawable/home_bg"
            			   android:onClick="onHome"
            			   android:layout_marginTop = "5dip"
            			   android:layout_marginRight="5dip"
            			   android:paddingBottom="3dip"
            			   android:layout_marginLeft = "4dip"
            			   android:layout_marginBottom = "4dip"
            			   android:layout_gravity="center"/>

              <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginRight="5dip"/>

              <TextView style="@style/TitleBarText"
              			android:id = "@+id/title_text"
              			android:text = "Action Bar Sample"
              			/>

              <ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft="5dip"
			   />

              <EditText android:id="@+id/input_text"
              			android:layout_height="fill_parent"
              			android:layout_width="100dip"
              			android:layout_marginTop="2dip"
              			android:layout_gravity="center"
              			android:textSize="10sp"
              			android:text = "search here..."
              			android:layout_marginLeft="5dip"
              			android:layout_marginRight="5dip"/>

			<ImageView android:layout_width="1px"
			   android:layout_height="fill_parent"
			   android:background="@drawable/separator"
			   android:layout_marginLeft="2dip"/>

Step 4: Modifying styles.xml

With this, your Action Bar is ready. All that remains is adding a few lines of code to your styles.xml file. This style must be appended to the manifest as a theme in the application tag. Basically these lines specify that there will be no title bar in the application, and instead will be overlaid by our own custom action bar. See the sample code to understand.

<style name="Theme.D1" parent="android:style/Theme.Light">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

We have successfully implemented the Action Bar by following these 4 simple steps. Now you can create your very own action bar with actions of your choice. With this we have completed 2 of  the 3 design patterns. The third pattern will soon follow. Only if could imagine how attractive your UI would be if you were to use all 3 patterns in an app. Hopefully you have understood and enjoyed learning these patterns as much as I  am pleased to share them.

Source Code

Should you require full source code for Action Bar, please refer Xoriant-Source Code for Android Action Bar.Like always you can leave your comments here and I will look forward to answering them.

There will be the next blog on design patterns for Quick Actions soon. So watch out for the space to complete your User Interface with third and final design pattern!!

28
Jul

Android UI Design Pattern – Dashboard

Android, Mobile Application Development July 28th, 2011

The earlier post here has covered the importance and the basics of developing a user friendly UI, taking this further we will be presenting to you a detailed view of the design patterns discussed. The following post will cover the ‘Dashboard ‘ design pattern along with a step by step process to help you develop a dashboard yourself. The code snippets attached will allow you to learn and build the dashboard in no time.

Introduction:

Trust me when I say it’s too easy. Have you seen the Facebook application for Android? You will see the home screen has image icons for all major features of the application like messages, wall posts, friends, albums etc. This is exactly what a dashboard is. You might have actually used this before without even knowing it is a design pattern. The dashboard lets you highlight key/new features and provide easy navigation to various parts of the app. A detailed description of the same was given in my blog on User Interface Design Tips which I trust you would have read. Even if you haven’t, I would suggest going back to that article and reading it to get a clear picture of the dashboard design pattern. This will make this article a better read for you as it provides simple steps for creating your very own dashboard. So let’s begin!!!

A typical dashboard for any application may look like this:

Full source code for this sample application is available on xoriant’s public github repo - https://github.com/github-xoriant/Android-Dashboard-UI-Pattern

Listed are a few steps for creating a typical dashboard with precise detailing. Follow them to have a clear understanding

Step 1: Create Home Screen

Follow these codes to get your Home Screen in simplest possible way.

<LinearLayout android:orientation="vertical"
      				  android:layout_width="wrap_content"
      				  android:layout_height="wrap_content"
      				  android:layout_marginTop="60dip"
      				  android:layout_marginLeft="40dip" android:layout_marginBottom="40dip">

        	<ImageView android:id="@+id/photoAlbum"
            			 style="@style/Home"
            			 android:onClick="onPhotoAlbum"
           				 android:src="@drawable/photoalbum"/>

        	<TextView style="@style/HomeText"
        			  android:id="@+id/ph1"
        			  android:text="@string/photoAlbum"
        		  	  android:layout_marginTop="10dip"/>
</LinearLayout>
<LinearLayout style="@style/TitleBar"
    			  android:id="@+id/layout1">

       <ImageView style="@style/TitleBarLogo"
       			  android:id="@+id/img1"
                  android:src="@drawable/dashboard"
                  android:onClick="onHome"
            	  android:layout_marginTop = "5dip"
            	  android:layout_marginRight="5dip"
            	  android:layout_marginLeft="5dip"
            	  android:layout_marginBottom = "5dip"
            	  android:paddingBottom = "5dip"
            	  android:background="@null"
            	  android:layout_gravity="center"
            	  android:paddingLeft="5dip"
            	  android:paddingRight="7dip" />

        <ImageView android:layout_width="1px"
        		   android:layout_height="fill_parent"
        		   android:id="@+id/sep"
			       android:background="@drawable/separator"
			       android:layout_marginRight="7dip"
			   />

        <TextView style="@style/TitleBarText"
        		  android:id="@+id/tv1"
        		  android:paddingLeft = "8dip"
        		  android:text="@string/home"/>
</LinearLayout>

The first step is to create a simple layout for the home screen that will house the image buttons. As the name itself says these are simply buttons, which are represented by icons/images present in the resources folder. The layout must have a custom title bar at the top that displays the current location/screen that the user is on, along with a straight link to reach the home screen or the dashboard. All you have to use is the “onClick” attribute of the image view to direct the user to the respective location. The layout is very simple, and all you require is basic knowledge of layout creation which you must be an expert on by this time!!!  Anyway to make it easy have a look at the code snippet for creating an image view for the image icon and the title bar given above. Keep in mind this has to be done in a proper layout.

Step 2:Create Dashboard Abstract Class

Follow these codes to create your own Dashboard Abstract Class.

public abstract class DashboardAppActivity extends Activity
{
    /** Called when the activity is first created. */
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
    }

    //Lifecycle Methods

    //App Click Methods

    public void onSearch(View v)
    {
    	startActivity (new Intent(getApplicationContext(), SearchActivity.class));
    }

    public void onAbout(View v)
    {
    	startActivity (new Intent(getApplicationContext(), AboutActivity.class));
    }

    public void return2Home(Context context)
    {
        final Intent intent = new Intent(context, HomeActivity.class);
        intent.setFlags (Intent.FLAG_ACTIVITY_CLEAR_TOP);
        context.startActivity (intent);
    }

    public void onHome (View v)
    {
    	return2Home(this);
    }
}

By now you will have your home screen ready with you. Now we just need to define the “On Click” handlers that will trigger the necessary action which could be starting a new activity or simply a toast. For this purpose all you need to do is simply define an abstract class, that will contain all the common code like lifecycle methods, On Click handlers for the icons on the dashboard and the title bar(home) as well. In our app we will have to define the handlers to redirect the user to new activities associated with the appropriate image icon. Once done, all your other activities in the application that have representations on the home page will inherit this abstract class. It’s very simple and I am pretty sure you can do this on your own. Just in case, a sample code snippet is available at your disposal as always!!!

Step 3:Create Activities and Layouts

Following are a few codes to help you create your Activities and Layouts.

public class AboutActivity extends DashboardAppActivity
{
	public void onCreate(Bundle savedInstanceState)
	{
	    super.onCreate(savedInstanceState);

	    setContentView (R.layout.about);
	    TextView tv = (TextView) findViewById (R.id.title_text);
	    if (tv != null)
	    {
	    	tv.setText(getTitle());
	    }
	}
}

So now your Dashboard is nearly done. All you need to do is create the activities for all functions that you have listed in the dashboard. Along with the activities you will need the XML Layouts as is the case with any basic activity in Android. These activities must extend the dashboard abstract class. Also, you need to write a few lines of code to display the name of the activity in the title bar.  You can have a look at the sample code given above.

Step 4:Understanding Styles

Finally, refer to the below given codes to Understand Styles.

<style name="TitleBar">
        <item name="android:id">@id/title_container</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">45dip</item>
        <item name="android:orientation">horizontal</item>
        <item name="android:background">@color/title_background</item>
    </style>

    <style name="TitleBarOperation">
        <item name="android:layout_width">45dip</item>
        <item name="android:layout_height">fill_parent</item>
    </style>

    <style name="TitleBarLogo">
        <item name="android:id">@id/title_logo</item>
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">fill_parent</item>
 </style>

So now your dashboard is finally up and running.  Something that you will come across while going through the code is the regular use of styles. These styles are nothing new, and are very similar to style sheets used for  developing web pages. These styles have been defined in the styles.xml file, which is then referred in the app using their ids. A sample of the styles.xml file is given above.

So 4 simple steps and you have your dashboard set up. Now that was unbelievably easy as I had said. Hopefully this tutorial would have provided all the assistance that was required to create your very own creative dashboard.

Source Code

If there are still any problems you always have the complete source code of the app to fall back on Xoriant’s git hub repository. Xoriant- Source code for Android Dashboard UI Pattern

Also you can post your comments here and I will be more than happy to answer them.

I will soon be writing about yet another effective and easy design pattern, “The Action Bar” in my next blog. But till then keep experimenting with your dashboards!!!!