Introduction

Desktop systems gained prominence in late 80s and they derive their name from the concept in which the entire computing unit can be placed on top of a desk. There are various uses of desktop computers dictated by the desktop users and their requirements.

• A student or business user might use the desktop for their daily activities like creating Word documents, spreadsheets, presentations or a calendar application to schedule events for the day /month / year.
• A home desktop may be used for storing multimedia files like images, mp3, videos or browsing World Wide Web.
• A person might be having some specific requirement depending on the job at hand and may use a software suite to do that. A good example would be photographer or designer using Photoshop for image editing Or a music artist using an Audio mixing setup for music recordings.

Desktop Systems:

Desktop systems are nothing but desktop computers but available on the cloud.Today internet connectivity and computers  have become quite inexpensive and are widely available while Mobile phones have moved beyond as a texting and calling to a ‘must have’ device, featuring giga bytes of Ram, giga htz of processing power and 4 ~ 7 inch displays.

With the multiple platforms available in the market, currently the convergence between different platforms is done by developing apps for each of the platforms. Let us take an example of a simple application – Dropbox.

Dropbox allows you to save your file on a remote system; it is your dedicated space on internet.  Dropbox offers a free space of 2 GB and it will automatically sync all the files that are in your Dropbox folders across all the devices that have Dropbox client installed. This is a typical example of SAAS where you dump your files on a system which gets replicated across all the devices (if they are connected and switched ON). There are many other cloud based services where not only software but platform and infrastructure also as a service.

A few more services available in the market are:

• For documents, spreadsheets etc – Docs by Google, Office 360 by Microsoft.
• Music – iCloud by Apple and Google music by Google.
• Books – Amazon Kindle, Google books and iBook by Apple.

These applications can be installed on your current desktop system, mobiles and tablets. Space of your “device at use” will be used only for caching purpose to sync timely with cloud in case the application offers offline storage model. This makes your system pretty much a client in the SAAS model.

A cloud OS or desktop in Cloud is a concept that tries to provide an integrated space for all the services from within your browser either on desktop systems or on mobile devices. These systems will offer one stop solution for your daily computing needs whether it may be word processing, games, music or running development tools. Though still immature they try to mimic the current desktop offerings via a web browser.  Let us take a look at two such products –

EyeOS – Your desktop in the cloud

EyeOS is an open source initiative; Give it a try. It requires Apache and PHP 5 and doesn’t require a database. It is nowhere near a  professional OS, but it will give you a look and feel of native desktop running in browser and it does comes preloaded with few applications like word processing tools, calendar, IM to name a few. As the name goes – right now it is just eye candy.

CloudMe

Initially called iCloud, CloudMe is another company that is developing their operating system for the cloud since 2000. And yes they have made a pretty cool interface, it is best among the competitors. It is a clean, carefree, zero-configuration XML-based OS, running within browser.  They offer a suite of 40+ applications that you can install on your desktop in the cloud. It offers tools for SAAS application development that will run on their internet-OS.  Currently the registration is free and it also offers 3 GB of free space. You can try it here.

There are three other major players which have recently done great cloud services and it would be worth taking a look at these.

Google cloud solutions – Applications from Google require an active data connection and are pretty fast. Google is targeting the future where internet will be available in every corner of the earth and they all run from within any browser. The data is stored in Google servers. Although the model is great and holds a lot of promise, in current scenario for people who are already connected with internet 24×7, its full potential however will be realized only in near future with unlimited and uninterrupted connectivity being a reality.

Apple iCloud – Apple has recently launched iCloud, it offers seamless data syncing between all the Apple devices. Data sync capabilities are built into the applications. Apple solution is good for current scenario where people do get disconnected with internet and have to rely on offline storage model for completing the task at hand, be it making a spreadsheet or listening to music.

Microsoft LiveMesh – This is a product from Microsoft using which you can create a mesh of all the systems owned by you and having a browser running on any system to perform task on any system. It is like a refined version of Remote desktop. To add to this Microsoft also offers 5 GB of free storage – Windows Live Skydrive in the Mesh, that can be synced with all or a selective set of devices.

To Conclude

Desktop as a cloud is still immature, but yes it holds a lot of promise. To gain user acceptance, it has to provide the rich experience of desktop system and a facility to install majority of application or application clones that are currently used by a desktop consumer.

Pradeep Sharma– Technical Lead – Mobile CoE

So far with all the previous blogs we have been quite familiar to various aspects like Dashboard and Action bar for a user friendly Interface for Android mobile application.

In this post we shall discuss about the Quick Action design pattern in more detail with which you will be  have a clear understanding of the significant parts of a typical user friendly interface.

Introduction:

As previously mentioned, Quick Actions are basically actions/functions in a popup bar that are triggered by specific visual elements/buttons/items on the screen. Quick Actions are used to display contextual actions typically used in list views but not limited to it. You can imagine a phone-book or contact list on the phone. Now, there are certain set of actions that will be common to all contacts in the views like; make a call, send message, edit contact or may be even transfer files by  Email, Bluetooth etc. Basically these functions that are common to items in a context can be put in the Quick Action bar. This way the screen is uncluttered and simple and more importantly we needn’t sacrifice on the actions needed.

After having learnt about  detailed source code for an Action bar, next let us begin with the creation of the Quick Actions bar. We will make this short and simple, so just follow on…

To begin with, the demo snaps look like this:

Step 1. Create Actionable Items

The below code snippet is used to create an actionable item i.e. the actions you would want to place in the quick action bar. Creating an actionable item involves specifying the title, setting an icon that represents the item which will help you relate to the action, and finally set a Listener for the action. The term itself is self-explanatory. Yes, it is used to determine the action to be performed when clicked or pressed. As far as the icon /image goes, it can be easily set by referring to it from the resources as is the case with any external resource set in android which you would aware of, I am most certain.

final QuickActionIcons edit = new QuickActionIcons();;

 edit.setTitle("Edit");
 edit.setIcon(getResources().getDrawable(R.drawable.edit));
 edit.setOnClickListener(new OnClickListener()
 {
 public void onClick(View v)
 {
 Toast.makeText(QuickActionSampleAppActivity.this,"Edit Contact",Toast.LENGTH_SHORT).show();
 }

 });]

The above actions can be repeated depending upon the number of actions to be put in.

With this, you have successfully created your actions. Next we shall create the quick action dialog that should be displayed on clicking some button or tab.

Step 2: Create Quick Action Dialog

This part is even simpler. Like in this example, when an item in the list view is clicked / pressed, a new quick action bar/dialog is created. Then all the actionable items that you have created in the previous step are appended one by one to the quick action bar. After this you simply have to specify the animation style i.e. how do you want the dialog to be displayed on screen.

resultPane.setOnItemClickListener(new OnItemClickListener()
    {
		public void onItemClick(AdapterView<?> parent, View view, int position, long id)
		{
			QuickActionBar qab = new QuickActionBar(view);

			qab.addItem(edit);
			qab.addItem(call);
			qab.addItem(send_data);
			qab.setAnimationStyle(QuickActionBar.GROW_FROM_LEFT);

			qab.show();
		}
    });

And then finally you display the created quick action bar.

Step 3: Create Animation Files

All animations that you specify will have to be supported by corresponding XML files that allow the animation to play out. These XML files will form a part of your resources. It‘s really not that difficult to create these animation files. Have a look at a sample below.

<strong></strong>

<set xmlns:android="http://schemas.android.com/apk/res/android">
 <scale
 android:fromXScale="0.3" android:toXScale="1.0"
 android:fromYScale="0.3" android:toYScale="1.0"
 android:pivotX="50%" android:pivotY="100%"
 android:duration="@android:integer/config_shortAnimTime"
 />
 <alpha
 android:interpolator="@android:anim/decelerate_interpolator"
 android:fromAlpha="0.0" android:toAlpha="1.0"
 android:duration="@android:integer/config_shortAnimTime"
 />
</set>

Step 4: Create Layouts for actionable Items and Quick Action Bar

Some additional things that you would have to do are create layouts for the quick action dialog and the actionable items. It’s as simple as the layouts that you are so used to creating in android day in and day out. Go on and have a look at the snippet for the quick action items any way.

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:gravity="center_vertical|center_horizontal"
 android:paddingTop="0dip"
 android:paddingBottom="0dip"
 android:paddingLeft="20dip"
 android:paddingRight="20dip"
 android:clickable="true"
 android:background="@drawable/button_state">

 <ImageView
 android:id="@+id/image"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"/>

 <TextView
 android:id="@+id/caption"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:gravity="center_vertical"
 android:textSize="12sp"
 android:textColor="#ff000000"/>

</LinearLayout>

You may try out the quick action dialog layout by yourself. If you’re stuck you can refer to the complete source code on Quick Action that is available anyway.

By following these 4 simple steps , you are all set and ready to have quick action dialogs zooming around in your app. So go on and try them out.

With a few design guidelines on User Friendly Interface for Android followed by:

• Android UI Design Pattern-Dashboard
• Android UI Design Pattern-Action Bar
• Android UI Design Pattern-Quick Action Bar;

I am most certain that you can now design and develop an efficient interface. Should you have any questions on any topic, I would be pleased to answer them.

Pradeep Sharma– Technical Lead – Mobile CoE

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!!!!

Pradeep Sharma– Technical Lead – Mobile CoE

As most of you all know, the two key candidates for personal Git servers are gitosis and gitolite. The major differentiator between the two is the language in which they are written and the way they handle repo permissions.

The primary focus of this blog will revolve around how to setup a central server for git using gitolite to get started with project development. It is a Perl-based rewrite of Gitosis, is a more sophisticated Git server with more powerful features that has a lot more configuration options. With Gitolite, it’s possible to specify who is able to force a push to a Git branch, an operation that perhaps is challenging when working in teams.

Items that will be covered are:-

1. Git server setup
2. Contributors’ and Repository creation.

Git Sever setup:

Using Ubuntu and Gitolite to do the server setup and my workstation is a laptop running Windows 7 OS, let’s get started by following a few simple steps..

Step 1.

Logon to server and add gitolite on the server, you must be in the list of sudoers. If not ask your system administrator or the person who is having sudo rights.

sudo adduser  --system   --shell /bin/bash  --home /home/gitolite gitolite
sudo passwd gitolite
exit

Step2:

Install msygit on your windows workstation from – http://code.google.com/p/msysgit/ .  I have picked up a portable installation and changed my home folder to point somewhere in E:, I didn’t like everything to be in my default windows home folder. I followed this blog – http://markashleybell.com/articles/portable-git-windows-setting-home-environment-variable

It is not necessary though, a standard install will also work.

Once you Fire the git bash shell and run git –version; you should see something like this

Step 3:

Create the ssh public/private keypair on your workstation. This will required a password less login into remote system. As of now do not put a passphrase. Hit enter key for an empty passphrase.

ssh-keygen

Step 4:

Now go to your home directory by typing the following command

cd ~

Step 5:

Copy the public key to remote server into gitolite account, key in password when asked. The key will get saved as pradeep.pub on server in /home/gitolite

scp .ssh/id_rsa.pub gitolite@ubuntu:~/pradeep.pub

Step 6:

Logon to ubuntu as gitolite

git clone git://github.com/sitaramc/gitolite
cd gitolite
src/gl-system-install
cd
echo 'export PATH=$PATH:$HOME/bin' >> $HOME/.bashrc
. $HOME/.bashrc
echo $PATH
gl-setup $HOME/pradeep.pub

Step 7:

Finally  go to git bash shell on your workstation and clone gitolite

git clone gitolite@ubuntu:gitolite-admin

Contributors’ and Repository creation.

After having set up the git server on your workstation let’s move further to create a repository.

• The admin is already set with userid pradeep. So will now try to add a user who is having only read/write access to one of the repositories .
• Ask your team member, in this case Fahim, to send his public key over email or you can take it on a pen drive.
• Put the key inside gitolite-admin keydir and edit the conf/gitolite.conf to make an entry for the user. Here, I am going to create a helloworld repo and add Fahim to have RW access to it. We just need to edit the conf/gitolite.conf file. Put a new line
• Once you check status of the repo, it should show you: git status

• Commit and push it to central server.

git add conf/gitolite.conf
git add keydir/fahim.pub
git commit –m ‘adding new user having read/write access to helloworld repo’
git push –all gitolite@ubuntu:gitolite-admin

So, It’s done ! We got our repository created and added to Gitolite with the help of these simple steps. Hope this serves as a complete guide to setup a git server.

Pradeep Sharma– Technical Lead – Mobile CoE

The user interface plays one of the most important roles in determining how successfully you can attract and retain the users by making the UI easy to use, efficient and enjoyable. With decision making being increasingly influenced by the online medium, it’s scope is extended to mobile internet. So, it is required to enhance the user experience by developing user friendly interfaces for the apps on the go.

We all are well aware of what all features will be available on the mobile version of a product at hand.  But we are usually not sure about how to arrange them on screen(s), or decide on what framework controls to use to optimize the full potential of a particular product feature. At the end, the most important thing that must not be lost in the process is the simplicity, elegance and the vision, which invariably determines the success or failure of the application i.e. the application rank  in the market(read: popularity).

A good user experience is critical to any application, more so for mobile applications. A good UI will lead to better quality and user experience, eventually translating to popularity and profits. In such a scenario where the users are of utmost consideration in the design and planning of your application, a clean user friendly, simple and yet an innovative UI might just turn a whole lot of users to your application.  Doesn’t it sound appealing as to how something as simple as the aesthetics of an application can do?

Now, this is what we call as “Need of the hour”-But here comes the problem, does anyone know – what is a good UI? How should it look? What should it do? What should it not do, not contain!!!

In such a scenario where you know the problem but not the apt solution, it is always good to have a quick research on how others  got it right.  Abstraction of the problem statement and its respective solution when accepted by a community becomes a pattern. Earlier we had Design patterns for solving design problems of application architecture. “Evolution happened in UI” and now we have a similar set of patterns for the UI. Patterns have emerged as a natural by-product of the design process. Like Software Design Patterns, they too provide a solution to a common/recurring problem. Developing a good and an effective UI requires usage and understanding of these Design Patterns. The best of applications, , are focusing on the use of these design patterns including Twitter Apps, Facebook apps etc.

In this article I shall mainly be discussing these design patterns along with their applications and advantages in use for Android applications and in subsequent ones we shall have a look on how to go about actually creating them.

Dashboard

It has been used in applications even before it was officially introduced as a design pattern. For example, Facebook application has been providing a dashboard of its key functions before it was officially recognized as a design pattern. The Dashboard can be used in apps to highlight the key features of the application. In essence, it is an introduction to the application.  It can be used to reveal new content and capabilities to the user. The dashboard typically occupies the full screen to ensure that it stays out of the way, i.e. the user’s attention is not diverted to any other aspect of the screen/app. The Dashboard may be organized as:

• Accounts
• Features
• Categories

The secondary functionality may be reserved for the Menu options. Thus by making the most common/important operations visible, it ensures that the right things are made visible to the user.

The Good

• Highlight key features to user
• Provide one stop access to all the major functions
• Draw user attention to new capabilities or features introduced
• Easy navigation around the app.

The Bad

• All features cannot be represented on the dashboard
• Some lesser known features not represented, may not get the desired user attention
• Some represented features may not actually interest user, leading to loss in popularity.

Quick Actions

Quick Actions are basically actions/functions in a popup bar that are triggered by specific visual elements/buttons/items on the screen. They have minimal disruptive influences on the screen context. Quick actions ensure that the screen is not cluttered too much with icons and buttons, and at the same time these options are available to the user only when required. They are very straightforward, can be fast and fun to use. Only the most important and obvious options must be presented in the quick action view. When Items have competing internal options, quick items are typically used. In case of contexts that can/may have multiple selections, quick actions must not be used.

The Good

• Uncluttered screen, free of too many icons and buttons
• Minimal disruptive influence on the screen
• Ensures that key functions can be present when needed
• All operations/functions common to multiple items on a given screen can be placed in quick action bars.

The Bad

• It cannot be used if context allows multiple options to be selected at once
• Operations in the quick action bar are specific to one activity only.

The Good

• Uncluttered screen, free of too many icons
• Easy access to key features at all times
• Easy navigation
• Indicates current location/state of the app.

The Bad

• It is always present on top of the screen, taking up valuable space
• It cannot include all functions of the application, jus t the important ones
• Too many options (>5) in the action bar might make it clunky and heavy.

Thus ,we can summarize that the design patterns is the need of the hour which  will go a long way in providing a unified and consistent methodology for developing UI’s that will create a lasting impression on the users.

Keeping these fundamental points in mind while designing any user interface, you can get a kick start to your dream to develop the most user friendly interface.  But what about the design patters for Dashboards, Quick Actions and Action Bar?  I am looking forward to soon share these design patterns. So stay connected to have an interactive information sharing.

For more information, you may want to refer to Google’s session on Android UI Design Patterns

Pradeep Sharma– Technical Lead – Mobile CoE