Setting up VIM with better color scheme while working via dark console.

Leave a comment

I spend a lot of time working in the console window as I manage multiple EC2 instances.
At work I use cygwin and at home I use gold old linux terminal. Depending on the configuration, vim color scheme might not be as terminal color friendly.
Look at the image below.
vim1

I could hardly read the comments on this shell script. Luckily vim does provides multiple color schemes to work with.
You can try different color scheme by running “:colorscheme” in vim.

:colorscheme delek

Instead of doing it every time, We can manage the default vim setting by creating a “.vimrc” file on the home directory.
Lets do that:

$ vi ~/.vimrc

Add following lines in the file


syntax on
colorscheme delek

I have selected have the syntax highlighting on and selected “delek” color scheme so its easier to read on my terminal.

vimrc

Now lets look at the same shell script:

vim2

And the output is much readable on the dark console.

You can select other color scheme depending on your preference. You can find the installed schemes at

/usr/share/vim/vim72/colors

Some of the default ones you may find are

blue.vim
darkblue.vim
default.vim
delek.vim
desert.vim
elflord.vim
evening.vim
koehler.vim
morning.vim
murphy.vim
pablo.vim
peachpuff.vim
README.txt
ron.vim
shine.vim
slate.vim
torte.vim
zellner.vim

You can download more online http://www.vimninjas.com/2012/08/26/10-vim-color-schemes-you-need-to-own/.

Implementing Android Status bar notification in phonegap/cordova app.

20 Comments

This is a quick write up to demonstrate phonegap statusbar notification plugin in a cordova (formally phonegap) app.
I am going to run through steps for creating an android application utilizing phonegap.

Creating a Project
I am going to assume that you already have android SDK and Eclipse plugin installed. If not, please follow the developer guide to do so.
We will create an sample application, we are going to name it “phonegapstatusnotificationdemo”.

Importing Cordova
At this point we should have a sample android application. Now, we are going to import the cordova(phonegap) libraries in our application. At the time of this writing Cordova 2.2.0 is the latest version. You can download the library form their website.

After you download the zip file, open and locate “lib/android”, and extract the cordova-2.2.0.jar.

  • Place the jar file into “lib” folder in your Android project. This folder should already be in your class path. If not you may need to do it manually via project properties.
  • Also, find the “xml” folder in the zip file and place it under “res” folder in the android project. The xml folder contains the config.xml that has the phonegap configuration.
  • Create a folder named “www” inside “assets” folder in the android project as well.
  • Place the cordova-2.2.0.js file from the zip into the www folder you just created.

You are now set to use phonegap.

Updating the Activity
Since phonegap places the html as the view in the application, we have to do 2 things.
1. create the html file
2. Update the Activity to extend DroidGap and local the html from step 1.

We are going to do just that. Lets create a html file and place it in the “www” folder inside the “assets” folder in the android project.

  <html>
	<head>
		<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
	</head>

	<body>
		Hello World!
	</body>

</html> 

In your main activity, update it to extend the DroidGap.

import org.apache.cordova.DroidGap;

import android.os.Bundle;

public class MainActivity extends DroidGap {

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.loadUrl("file:///android_asset/www/index.html");
	}

}

Now you can run your phonegap application on your device or emulator. You should see the “Hello World” text on a blank screen.

Using Statusbar Notification plugin
Now, lets use a Status notification plugin. These steps will be same for implementing other phonegap plugins also.
Phonegap plugin work in 2 parts.
1. Javascript: Plugin will have a javascript code that your application can call form your html or js.
The provided js will invoke the back end java code. You shouldn’t need to worry much about the inner workings of the plugin js code. But it is import to understand the framework so you can debug issues.

2. Java code: This is the code that phonegap plugin framework will call when this method is called from the javascript library code.

Today we are going to use the statusbar notificaiton plugin.
Lets grab the plug in code from github.
https://github.com/phonegap/phonegap-plugins/tree/master/Android/StatusBarNotification

README provides steps to import this plugin in your application. We are going to do just that.

Importing Plugin files
place the “.java” files into your android project src package. At the time of this writing there are two files (StatusBarNotification.java and StatusNotificationIntent.java). Make sure you update the package appropriately. I would encourage to use the package name used in these java files for simplicity.

Now, place the statusbarnotification.js into your “www” folder. At this time you can include this script in your index.html by placing the html below in the portion of the html

<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script> 

In your res/xml/config.xml file, place the following script inside the section.

<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>

If you had placed the java files above in different package structure, be sure to change the value filed to appropriate location.
Since phonegap provides a default icons for notification, which is used in the java code, you will have to copy the png files from the plugin into your res/drawable folder. If you want different icon, just be sure to have those icons in the folder and change the reference in the java file. (Watch for “int icon = R.drawable.notification;” references, in StatusNotificationIntent.java)

So in your html file, whenever you want to show a notification, you can call the following javascript function.

window.plugins.statusBarNotification.notify("Put your title here", "Put your sticky message here");

.

You can checkout out my sample application on github (https://github.com/manijshrestha/PhonegapStatusNotificationDemo) that uses this plugin. If you have any questions/ enhancement request to this plugin feel free to PM me.

Thank you,

Building app with responsive design using jQuery mobile and CSS3 (Media Query)

Leave a comment

Having built few mobile apps with HTML5 and CSS, it allowed to build apps quickly with simple text editor using HTML and JS. Recently it has been very popular. There are many really good frameworks such as Sencha, Jo, The-M-Project , KendoUI just to name a few. JQuery Mobile is probably one of the simplest one to get started with.

One of the challenges these days is building an app that works on both phone and tablet  (able to utilize larger screen sizes). Today, I am going to quickly demonstrate building of a simple mobile app with “Responsive” mobile design that would work on both mobile phone as well as tablet. Just to show the end result,  here is what we will have at the end:

Wireframe: To get started let’s starts with code below. You can read more about it on jQuery Mobile website.

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Cool App</h1>
	</div><!-- /header -->

	<div data-role="content">	
		<p>Some Cool Stuff</p>		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

If you crate index.html with above code you will have a mobile app using jQuery mobile:).

Adding Menu: Lets add the menu and some content. To do this, lets create two divs,
“menu-pane” and “content-pane”. These would be the direct child under “content” div.

<div data-role="content">
<div id="menu-pane">
<ul data-role="listview">
	<li><a id="menu-item-1" href="#">Menu Item 1</a></li>
	<li><a id="menu-item-2" href="#">Menu Item 2</a></li>
</ul>
</div>
<div id="content-pane">
 Some Cool Stuff</div>
</div>
<!-- /content -->

You should see a page like below:

Behavior on buttons: Now, Lets add a behavior when if we click on any menu item it will simply pop up ‘Not Yet Implemented’.
you can do so by adding following jQuery block in side the head tag.

<script type="text/javascript">
		$(document).ready(function() {

			//Just an alert to show its not implatemented..
			$("#menu-item-1, #menu-item-2").click( function () {alert("Not yet Implemented.")});

		}); // end of document Ready

</script>

CSS for menu: Let’s add a tiny little CSS so that menu and content page looks better on tablet.

<style>
	  #menu-pane {
		  width: 30%;
		  float: left;
		  }

	  #content-pane {
			width: 70%;
			height: 100%;
			float: left;
			text-align: center;
		}
</style>

At this time you should have a nice looking interface good for tablet. Similar to page below:

This wouldn’t look so nice on a mobile phone, and we are going to fix that next.
Idea here is that we are going to add a menu button on top right which will expose the menu for user on mobile phone and n tablet menu just appears on the left side.

Options Button: So, lets add a button in the HTML that will on click open a pop up with menu items. To do this, we will add a button and a empty popup div in which we will populate dynamically. Add the following HTML inside the header div.

<a id="options-btn" class="ui-btn-right" href="#popupPanel" data-icon="gear" data-rel="popup">Options</a>
<!-- Popup Menu Content -->
<div data-role="popup" id="popupPanel"><!--Empty for now--></div>

Populating Popup Menu: Now since we have an empty div for popup, lets populate that with the menu we have on the screen. Based on your implementation, you may choose to do it differently.

Add the following javascript in the document.ready function. This will just copy the HTML from #menu-pane in to the #popupPanel

$("#popupPanel").html($("#menu-pane").html());

You can see the ui would look something like below:

Making it “Responsive” with Media Query: Now finally we want to make it “Responsive” by using media query. What we would want to do is that,
when its on a tablet, we want to take off the “Options” button. And, when we are on a mobile phone we want to remove the menu from left and show the “Options” button.
Let’s do that by adding media query css.

  /* Hide the menu-pane when on mobile */
		@media screen and (max-width: 480px) {
	      #menu-pane{
			display: none;
		  }

		}

Also lets update the existing css we had before and wrap it for tablet view.

/* Hide Options button on tablet */
		@media screen and (min-width: 481px) {
		  #menu-pane {
			  width: 30%;
			  float: left;
			  }

	      #content-pane {
				width: 70%;
				height: 100%;
				float: left;
				text-align: center;
			}

			#options-btn {
					display: none;
			}
		}

At this time we have have a working app that works on both tablet and mobile! On the browser, you can change the browser and see it in action :).

Complete source code of this could be found in github at: https://github.com/manijshrestha/jQueryMobileResponsiveDemo

Final output: The final HTML would look like one below:

<!DOCTYPE html> 
<html> 
<head> 
	<title>Cool App</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1"> 

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function() {
			$("#popupPanel").html($("#menu-pane").html());	
			//Just an alert to show its not implatemented..
			$("#menu-item-1, #menu-item-2").click( function () {alert("Not yet Implemented.")});
		
		}); // end of document Ready
	</script>
	
	<style>
		
	  /* Hide the menu-pane when on mobile */	 
		@media screen and (max-width: 480px) {
	      #menu-pane{
			display: none;
		  }

		}
		
	  /* Hide Options button on tablet */
		@media screen and (min-width: 481px) {
		  #menu-pane {
			  width: 30%;
			  float: left;
			  }
	      
	      #content-pane {
				width: 70%;
				height: 100%;
				float: left;
				text-align: center;
			}
			
			#options-btn {
					display: none;
			}
		}
		
	</style>
	
</head> 
<body> 

<div data-role="page">

	<div data-role="header">
		<h1>Cool App</h1>
		<a id="options-btn" href="#popupPanel" data-icon="gear" data-rel="popup" class="ui-btn-right">Options</a>		
		<!-- Popup Menu Content -->
		<div data-role="popup" id="popupPanel" >
			<!--Empty for now-->
		</div>
	</div><!-- /header -->

	<div data-role="content">
		<div id="menu-pane">
		   <ul data-role="listview">
				<li><a id="menu-item-1" href="#">Menu Item 1</a></li>
				<li><a id="menu-item-2" href="#">Menu Item 2</a></li>
		   </ul>
		</div>
		
		<div id="content-pane">	
			<p>		Some Cool Stuff		</p>		
		</div>
		
	</div><!-- /content -->
</div><!-- /page -->

</body>
</html>

Hope you enjoyed this post. Thank you,

Decompiling an Android apk file to view the underlying code

Leave a comment

Few weeks ago, I saw a question posted on linkedin Android group, asking if we can view the application code of a complied apk file. There were interesting responses stating it is possible. Today I am putting it all together in this post about how you can do just that.

1. Obtaining the “apk” file: There are many ways that you can obtain the apk file. You can probably find it on the Internet. Or the best way is to get it from your phone. In this example, we will tear apart facebook android app 🙂

The apk file of the application that is purchased from the android market is stored in ‘/data/app’ folder on your phone. To access this directory, you need super-user access.  If your phone is rooted, follow the steps below to obtain the apk file if not, you might be able to get one from the Internet.

$ ./adb shell
$  su
#  cd  /data/app
# ls com.facebook*
# com.facebook.katana-2.apk
# cp com.facebook.katana-2.apk /sdcard
#

Copy over the apk file on to your computer from the sdcard.

2. Obtaining the “.dex” file: Open the downloaded apk file as a zip file. You can use “Archive Manger” on linux or “WinZip” on windows. You can also change the file extension to “.zip” and have the OS automatically open it as a zip file.

In there, you should see “classes.dex” file. This is the byte code of the complied application. Extract the file on to your computer.

3. Dex2Jar tool: You need dex2jar tool to decode the dex file to a jar file. The dex file is the Dalvik executable file. You can get the latest and greatest version at

http://code.google.com/p/dex2jar/downloads/list.

Download and install the application in your computer. I extracted it out on my android installation folder.

Once you have it run the “dex2jar” command to decompile the “.dex” file extracted in step 2.

You can run the following command on linux, on windows you can run the “dex2jar.bat” instead of “dex2jar.sh”


$ ./dex2jar.sh classes.dex

You should see an output as follows.

4. Decompiling the jar: You can now open the decoded “.jar” file from step 3 on a java decompiler of your choice.

There are few out there. I choose JD-GUI. You can download one from their site at: http://java.decompiler.free.fr/?q=jdgui

Install the tool and open the jar extracted on step 3. Boom now you can see the application code!

Yet another way to Install Nepali/Devnagari font on Android devices

15 Comments

In my previous post about Installing Nepali/Devnagari Font in Android. I showed how we can install Nepali font in android device using Android ADB. I received a lot of comments from users stating that they were having issues installing Nepali font and following those steps.

So, here is yet another way that should work for most of the devices. Please feel free to comment and thank if this works for you.

Steps on Installing Nepali Font:

1. Rooted Device: Your device must be rooted prior to being able to perform these steps. Rooting steps varies based on the device/manufacturer etc. So your best bet is to google search steps on rooting your device.

Note: The reason we need rooted device is to obtain super user access. You can tell if your device is rooted by locating “Superuser” app. Icon should look similar to one below.

2. Installing Terminal Emulator: You will need the “Android Terminal Emulator” app. You can find this app on the Android Market.

3. Installing BusyBox: You will also need to install “BusyBox” app. You can also find this app on the Android Market as well.

After you have installed the BusyBox, open the app to complete the installation. You may see a screen like below:

Now you have all the tools you needed, lets get rolling.

4. Download the font: You will need to download the following font on your device. If you do not want to use a computer, just open this site on your android device and simply click on the following link. (it should download the font in /mnt/sdcard/download/DroidSansFallback.ttf)

DroidSansFallback.ttf

5. Terminal Emulator: Now after you have downloaded the font, simply open the Terminal Emulator app that you had installed in step 2 above.

You should see following screen:

Now following steps are important. Pay attention to the details here.

in the Emulator screen simply type “su” and press enter.


$ su

#

You will notice a pop-up asking for super user access. Simply click “Allow”. If might be prompted for this access multiple times, just click “Allow”.

You will notice that your prompt changed from “$” to a “#”.

Now, simply type the following command in the terminal and hit enter. If you have this open in a browser in the device you can simply copy and paste it from here as well.


mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system

If everything went fine you should see “#” prompt right after that.

If you had downloaded the font from this post within your device simply copy paste or type the following command and hit enter in the emulator.


<code>cp /mnt/sdcard/download/DroidSansFallback.ttf /system/fonts</code>

Your screen might look similar to one below:

Thats it!, If everything went fine then you should now be able to see Nepali font without any issues.

Before and After Screen shots:

Git: “git pull” vs “git pull -rebase”, a cleaner way to pull

Leave a comment

I have been using GIT for my personal projects for a while and I absolutely “LOVE IT”. One of the many reasons is that, I could simply create a project and just do a “git init” to have a full fledged  version control for my code! I did not have to setup of any servers, nor I had to have a “network” connection to do things. Another one is that I could simply put my project in the Dropbox and could work on the project from different machines without having to worry about setting up anything else and still have my version control.

As I worked on my personal projects, I was the only one committing to the repo and things were simple. I could have a feature branch, do merges etc and history of the project would be clean.
Recently I started using GIT on a project that involved more than 2 developers working and often committed changes to the same branch and the history started looking ‘dirty’.

Here is an example.

I am going to setup a simple project called ‘GitExamples’.

$ mkdir GitExamples
$ cd GitExamples
$ git init
$ git checkout -b test

Now to mimic two different users I am going to create two different clones. Just to make things clear I am going to create two directories UserARepo and UserBRepo and clone the repo.

$ mkdir ~/UserARepo
$ mkdir ~/UserBRepo

Let’s setup UserA’s repo

$ cd ~/UserARepo
$ git clone ~/GitExamples
$ git config user.name 'UserA'

Now. UserB

$ cd ~/UserBRepo
$ git clone ~/GitExamples
$ git config user.name 'UserB'

This sets up my playground.
When I am in UserARepo and do a commit I should see “UserA” and likewise for B.

Let me make a quick change from UserA’s repo


$ cd ~/UserARepo
$ echo 'First Text' > UserA.txt
$ git add UserA.txt
$ git commit -m "User A's First commit"

Here is how my history looks:

I am going to push this change up to the remote master repo

$ git push

Let’s say UserA makes another change

$ echo 'Added Some good stuff' >> UserA.txt
$ git commit -am 'UserA Added some content'
$ git push

Things are simple and clean so far,
Here is my working tree:

Let’s jump to UserB to mix things up a bit.

$ cd ~UserBRepo/GitExamples
$ echo "B's First text">UserB.txt
$ git add UserB.txt
$ git commit -m "User B's Fist commit"

If I just did a simple push at this time, it should error out as the HEAD in remote has moved on by few commit pushed by User A.

$ git push
To /home/manijshrestha/deletethis/GitExamples/
 ! [rejected] master -> master (non-fast-forward)
error: failed to push some refs to '/home/manijshrestha/deletethis/GitExamples/'
To prevent you from losing history, non-fast-forward updates were rejected
Merge the remote changes (e.g. 'git pull') before pushing again. See the
'Note about fast-forwards' section of 'git push --help' for details.

Here is a better view of how things are

As you can see the ‘master’ in remote has gone its own way since I pulled from it.

Let’s do a pull and then push our changes.

$ git pull
Merge made by recursive.
 UserA.txt | 2 ++
 1 files changed, 2 insertions(+), 0 deletions(-)

Here is how it looks

Here you see the working tree represents what happened but this looks ‘dirty’ with merges, specially since both users worked on different files, it could look cleaner, follow on.

$ git push

From UserA’s side lets do a pull so both users are at the same base.

Lets run through same scenario this time but we will use “–rebase” while doing a pull and you will see how the tree will look a lot cleaner.

So, I am going to do two commits from UserA’s repo

$ echo 'Some more good stuff' >> UserA.txt
$ git commit -am 'User A added good stuff'
$ echo 'Even more good stuff' >> UserA.txt
$ git commit -am 'User A added more good stuff'
$ git push

Going back to UserB’s repo, we will make some change and commit

$ echo "Some good stuff" >> UserB.txt
$ git commit -am "User B added good stuff"
$ echo "Yet Some good stuff" >> UserB.txt
$ git commit -am "User B added yet more"

Unlike before we will do a pull with –rebase flag.
What it does is that, it will get the changes from remote then “re-apply” the changes the user made locally, so things don’t look deviated.

$ git pull --rebase
First, rewinding head to replay your work on top of it...
Applying: User B added good stuff
Applying: User B added yet more

Git just told us what it did, and here is how the tree looks:

You can see the working tree now looks a lot cleaner.

So we have a one straight branch rather than merges etc.

So If i do a push here is how things look.

Will share some move git love in the future…

Mahalo,

Working with Camera on Android SDK

9 Comments

I wanted to write a quick custom camera android app.
Before we start to write your custom camera app, here are the things we have to aware of.
1. Detect and access Camera
2. Create a preview class
3. Build a preview layout
4. Setup Listeners for Capture
5. Capture and Save files

Lets Start…
Detecting and access Camera
In the Android project, we will have to add Camera permission and feature.
Add following lines in the Manifest.xml

<manifest> 
 <application>
 .....
 </application>
 <uses-feature android:name="android.hardware.camera" />
 <uses-permission android:name="android.permission.CAMERA" />
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
</manifest>

This will get the Camera permission for the application.
(we are asking for permission to write to external storage so we can save image there)
Devices running android 2.3 or higher, we can access specific camera as devices could have more than 1 camera. In this example we will use the back facing camera.

Create a preview class
We create a preview class that simply extends “SurfaceView” which will allow us to show what the ‘camera’ sees.
Also, in order to capture the callback events for creating and destroying the view, which are needed for assigning the camera preview input, we will implement “SurfaceHolder.Callback” interface.

Here is the code for preview class

public class CameraPreview extends SurfaceView implements SurfaceHolder.Callback {

	private SurfaceHolder mSurfaceHolder;
	private Camera mCamera;

	//Constructor that obtains context and camera
	public CameraPreview(Context context, Camera camera) {
		super(context);
		this.mCamera = camera;
		
		this.mSurfaceHolder = this.getHolder();
		this.mSurfaceHolder.addCallback(this); // we get notified when underlying surface is created and destroyed
		this.mSurfaceHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS); //this is a deprecated method, is not requierd after 3.0
	}

	@Override
	public void surfaceCreated(SurfaceHolder surfaceHolder) {
		try {
            mCamera.setPreviewDisplay(surfaceHolder);
            mCamera.startPreview();
        } catch (IOException e) {
          // left blank for now
        }

	}
	
	@Override
	public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
		mCamera.stopPreview();
		mCamera.release();
	}

	@Override
	public void surfaceChanged(SurfaceHolder surfaceHolder, int format,
			int width, int height) {
		// start preview with new settings
		try {
			mCamera.setPreviewDisplay(surfaceHolder);
			mCamera.startPreview();
		} catch (Exception e) {
			// intentionally left blank for a test
		}
	}
	
}

Build a preview layout
Let’s create a Layout where the preview is displayed and the user can click on a button to take a picture.
Change the content of the “main.xml” under the layout directory in your android app.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
  <FrameLayout
    android:id="@+id/camera_preview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    />

  <Button
    android:id="@+id/button_capture"
    android:text="Capture"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    />
</LinearLayout>

Now, lets wire up the Camera Activity

public class DVCameraActivity extends Activity {
	
	private Camera mCamera;
	private CameraPreview mCameraPreview;
    
	/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        mCamera = getCameraInstance();
        mCameraPreview = new CameraPreview(this, mCamera);
        
        FrameLayout preview = (FrameLayout) findViewById(id.camera_preview);
        preview.addView(mCameraPreview);
        
    }

    /**
     * Helper method to access the camera returns null if
     * it cannot get the camera or does not exist
     * @return
     */
	private Camera getCameraInstance() {
		Camera camera = null;

		try {
			camera = Camera.open();
		} catch (Exception e) {
			// cannot get camera or does not exist
		}
		return camera;
	}
}

At this point if you run your application, you will see what the camera sees.
To make something meaningful, lets add listener to capture the image.

Setup Listeners for Capture
In order for us to take the picture, we will have to setup the listeners.
Lets make a inner class inside the Activity we created above,

PictureCallback mPicture = new PictureCallback() {

		@Override
		public void onPictureTaken(byte[] data, Camera camera) {
			 File pictureFile = getOutputMediaFile(MEDIA_TYPE_IMAGE);
		        if (pictureFile == null){
		            return;
		        }

		        try {
		            FileOutputStream fos = new FileOutputStream(pictureFile);
		            fos.write(data);
		            fos.close();
		        } catch (FileNotFoundException e) {

		        } catch (IOException e) {
		        
		        }
			
		}
		
	};

It is using a helper method called, “getOutputMediaFile”, here is the code for that

/** Create a File for saving the image */
	private static File getOutputMediaFile(){

	    File mediaStorageDir = new File(Environment.getExternalStoragePublicDirectory(
	              Environment.DIRECTORY_PICTURES), "MyCameraApp");

	    if (! mediaStorageDir.exists()){
	        if (! mediaStorageDir.mkdirs()){
	            Log.d("MyCameraApp", "failed to create directory");
	            return null;
	        }
	    }

	    // Create a media file name
	    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(new Date());
	    File mediaFile;
	        mediaFile = new File(mediaStorageDir.getPath() + File.separator +
	        "IMG_"+ timeStamp + ".jpg");

	    return mediaFile;
	}

Let’s wire up the listener onCreate method

 //Adding listener
        Button captureButton = (Button) findViewById(id.button_capture);
        captureButton.setOnClickListener(
        		new View.OnClickListener() {
					
					@Override
					public void onClick(View v) {
						mCamera.takePicture(null, null, mPicture);
						
					}
				});

After you have all this wired, the application i ready to fire up some pictures.

Resources:
http://developer.android.com/guide/topics/media/camera.html
http://developer.android.com/guide/topics/media/camera.html#custom-camera

Older Entries Newer Entries