Wednesday, December 25, 2013

Basic Android UI, Design Patterns & ListView

Here i'd like to note useful ideas, links i referenced during my my month of self learning Android application development. Hope it is helpful to others as well.

User Interface (UI) in Android

An app's user interface is everything that the user can see and interact with. The response to user input is designed to be immediate and provides a fluid touch interface, often using the vibration capabilities of the device to provide haptic feedback to the user.

To design a good user interface we must:
·     Focus on the user
o   Know the users
o   Age, skill level, culture
o   What they want to do with the app
o   What kinds of devices they’ll be using
o   When, where, how they’ll be using the devices
·     Design with a user first mentality
o   Users are generally task driven
o   Test on real users, early and often
·      Make the right things visible
o   The most common operation should be immediately visible and available
o   Secondary functionality should be reserved for the menu button
·     Show proper feedback
o   Have at least four states(<selector>) for all interactive UI elements
o   Make sure the effects of the action are clear and visible
o   Show adequate yet unobtrusive progress indicators
·     Be predictable
o   Do what the user expects
o   Properly interact with the activity stack
o   Show information and action user wants to see
o   Use proper affordances
o   If something is clickable, make sure it looks clickable
·     Be fault-tolerant
o   Constraint possible operations to only those that make sense
o   limit the number of irreversible actions
o   Prefer undo to confirmation dialogues

Views and ViewGroups

The basic unit of an Android application is an Activity. An Activity displays the user interface of the application, which may contain widgets like buttons, labels, text boxes, etc. Typically, we define the UI using an XML file (for example, the main.xml file located in the res/layout folder).

An Activity contains Views and ViewGroups. A View is a widget that has an appearance on screen. Examples of widgets are buttons, labels, text boxes, etc.

One or more Views can be grouped together into a ViewGroup. A ViewGroup (which is by itself is a special type of View) provides the layout in which you can order the appearance and sequence of views. Android supports the following ViewGroups:

·     LinearLayout
o   The LinearLayout arranges views in a single column or single row. Child views can either be arranged vertically or horizontally.
·     AbsoluteLayout
o   The AbsoluteLayout lets to specify the exact location of its children.
·      TableLayout
o   The TableLayout groups views into rows and columns. We use the <TableRow> element to designate a row in the table. Each row can contain one or more views. Each view you place within a row forms a cell. The width for each column is determined by the largest width of each cell in that column.
·      RelativeLayout
o   The RelativeLayout lets us specify how child views are positioned relative to each other.
·      FrameLayout
o   The FrameLayout is a placeholder on screen that we can use to display a single view. Views that is added to a FrameLayout is always anchored to the top left of the layout.
·      ScrollView
o   A ScrollView is a special type of FrameLayout in that it allows users to scroll through a list of views that occupy more space than the physical display.

Android UI Design Patterns

Like a software design pattern, a UI design pattern describes a general solution to a recurring problem. Patterns emerge as a natural by-product of the design process. The design patterns include:


A quick intro to an app, revealing capabilities and proactively highlighting new content. It is the organized way of display to arrange the functionalities of the app.  It highlights what’s new and focuses on 3-8 most important choices. It should be flavorful as it is the first impression of the app.

Action Bar

It is a dedicated real estate at top of the screen to support navigation and frequently used operations. It can provide a quick link to dashboard (or other app home). It is used to bring key actions onscreen and helps to convey a sense of place. It is used consistently within the app.

Search Bar
It is a consistent pop-in search form anchored to top of the screen. It can replace action bar (if present). It is used for simple searches which provides rich suggestions.

 Quick Actions
It is an action popup triggered from distinct visual target. It is minimally disruptive to screen context. Actions are straightforward, fast and fun. It is used when items have competing internal targets. It is present for most important and obvious actions.


A Simple ListView is a view group that displays a list of scrollable items. The list items are automatically inserted to the list using an Adapter that pulls content from a source such as an array or database query and converts each item result into a view that's placed into the list.

In a custom listview, we will create custom ListView where each row item consists of the views we want, and populate its items using custom ArrayAdapter. The Adapter defines how each row is displayed (i.e the layout for each row. We will define layout for rows in ListView in a XML file and place it in res/layout. The adapter provides data to each row in ListView.

We can customize our ListView with image that is not defined in the resource folder in android by loading images from the internet

It's a time-consume task to load bitmap from internet. Whenever we need to perform lengthy operation or any background operation we can use Asynctask which executes a task in background and publish results on the UI thread without having to manipulate threads and/or handlers. In onCreate(), we create and execute the task to load image from url. The task’s execute method invokes doInBackground() where we open a Http URL connection and create a Bitmap from InputStream and return it. Once the background computation finishes, onPostExecute() is invoked on the UI thread which sets the Bitmap on ImageView. The image should be cached in the phone in case we want to reuse it later. If the number of items to be downloaded exceeds a certain threshold(meaning more fetches and memory) we should consider reducing the fetches and also the Runtime memory consumption by caching them. We can choose to save them on Sdcard.

ActionBarSherlock in Android [Latest]

Implementing ActionBarSherlock in Android
ActionBarSherlock is an library designed to facilitate the use of the action bar design pattern across all versions of Android through a single API.

The library will automatically use the native actionbar implementation on Android 4.0 or later. For previous versions which do not include ActionBar, a custom action bar implementation based on the sources of Ice Cream Sandwich will automatically be wrapped around the layout. This allows to easily develop an application with an action bar for every version of Android from 2.x and up

Step 1: Download the ActionBarSherlock Library from the website

(I have downloaded ABS from this site : )
Step 2: You will get the library in ".zip / .tar" format. After downloading the ABS library, extract it and copy the 'library' folder into your workspace.

Screenshot showing library folder
In case you have downloaded the same ABS as I have, then
Replace the 'android-support-v4' jar file inside the 'libs' folder of 'library' folder in your workspace with the latest 'android-support-v4' jar file from .

Step 3: Import the 'library' as a project into Eclipse.

Go to File > Import

Go to Android and select 'Existing Android Code Into Workspace'

Click on 'Browse'

Select the library within your workspace

Make sure 'Copy projects into workspace' is checked and click 'Finish'
Library has been imported

Step 4 : 'Right Click' on 'library' and go to 'Properties'. Make sure 'Is Library' is checked under the field 'Android'.

Clicking on 'Properties' of ' library'

Go to Android and make sure 'Is Library' is checked

Step 5 : Now import ABS library into your project. 'Right Click' on project node and go to your project 'Properties'. Select it and continue with the screen flow.

Click on 'Properties'

Click 'Add'

Select 'library' and click 'OK'

Make sure Is Library is not checked. Click 'Apply' and 'OK'

Step 6 : You might get new error as 'jar mismatch : fix your dependencies'. This error is because the 'android-support-v4' jar file of 'libs' under your project and the 'android-support-v4' jar file of 'libs' under the 'library' is exactly the same. 

So just delete the 'android-support-v4' jar file of 'libs' under your project.

Deleting the jar file of 'libs' under your project 

Step 7: Now go to your project's AndroidManifest file and choose your application theme as android:theme="@style/Theme.Sherlock".


Also goto your project's and extend MainActivity with SherlockActivity.

Now you are ready to access ActionBarSherlock Library Features in your Android Application Project.

Sunday, December 15, 2013

Introduction to Elgg

An Intro on Elgg - How to get started in Elgg Theming ?

Intro to Elgg

Elgg is a social networking framework that helps to build a social networking site in fair amount of time. It's written on PHP. Elgg can be compared to "PHP based CMS" designed for a social networking site so it can called as "social networking CMS" and also is based on MVC pattern. Elgg independently consist of its framework approach and does not depend upon existing frameworks. It can be a plus point and negative point as well also depending upon your existing familiarity with PHP MVC frameworks.

By visiting its official site ,, you can understand a lot about its core codebase and active community. Being a social networking CMS a normal user can also initiate it with minimum amount of time and run it with full flexibility.

Elgg is backed by community support and number of developers working on this platform are increasing. Which has created tremendous resources for learning. Therefore with freely available resources online developers can self learn to extend elgg according to their need. We can find many plugins and themes at the elgg community site. By checking out how these plugins and themes are built you can get much more information about the developmental pattern of elgg and understand plugins and themes better.

Architecture of Elgg

Elgg consists of controller and Modular Plugins System 
Elgg is built on MVC.

Folder Structure of Elgg

The primary folder structure includes

/mod → Plugins / themes stores
/engine → Elgg core files
/views → All views files resides here
/actions → Actions Controller
/documentation → Documentation of Elgg
/pages → Various Pages Controllers
/install → Installation folder ( Can be deleted after the installation )

A glimpse of the folder structure is shown above

Theming / Plugin development

By default elgg contains various important plugins built by the elgg developers itself. But depending upon the custom requirements for our social networks they might not be sufficient. So to fulfill our requirement according to our need we can make our own custom plugin/themes. Themes in Elgg are implemented as plugins. When we talk about building themes - we talk about building plugins.

Folder Structure of Plugins

All plugins are stored in "mod" directory in Elgg installation.
For activating plugins , log in with your administrator account , Administration -> Configure -> Plugins.
Find your plugin in the list of installed plugins and click on the 'Enable' button.

A  glimpse of the folder structure of a core plugin ‘blog’ is shown below

Plugin Manifest

Plugin Manifest is the information file related to plugin. It is an XML file located in the root folder of a plugin (see above picture of blog plugin). This file contains information about the plugin like author and version. The information stored here is viewed in admin dashboard as a plugin identifying information.

Plugin Hooks

Elgg plugins hooks are simple events that are triggered (executed) when an action has occurred and parts of that action can be overridden by a plugin. Though there are more cases when a plugin hook can be used because it is more general purpose than an Elgg event.

To get on plugin hooks first we have to register it by calling reister_plugin_hook() that will resides in start.php file

Simple plugin

A plugin development begins with creation of start.php file. It is very important due to the fact this file contains all the things that need to get operated while going through the plugin.
Among all the the features of elgg, one feature of elgg is that every aspects of the core are extensible.

Elgg contains lots of core plugins and default theme that you can start with . In elgg you can build theme/plugin starting over and in reference of existing plugins. 

Here themes are treated as plugins that override display aspects (views) of Elgg and should normally be placed at the bottom of the plugin list (in administration dashboard) so that the current theme runs last due to the fact that it need necessary component to load.

Overriding default views of “different elements/sections” - menu, header, footer etc

Elgg views depend upon the files located at default view folder. For customizing these views we create the file structures of which we want to extend such as menu, header, footer etc categories according to the folders.
View scripts are mapped to view name strings.
Elgg contains different files related to the design of the page views such as menu, header, navigation footer etc . Depending upon the choice we can extend these files and modify according to our necessity.
For New views use configuration as elgg_extend_view($view_name, $view_extension_name)
The similar files names are created in our own extended component. So if the files exists then the files are executed else the default files containing in mod directory get executed for the similar names.
Be careful with the file names as it should be identical to that of default directory.

Whenever we install a theme, we are overriding all or portions of the default theme.


A Good Overview from Elgg Core devs:

Official Documentation

Useful information


© 2013 Echo "Semicolon Developers"; Kathmandu. All rights resevered @ Semicolon Developers Network Pvt. Ltd.. Designed by Templateism

Back To Top