adblogcat.com

Fragment transition animations while hiding the previous fragment and using backstack

guitarbaka — Thu, 25 Apr 2013 00:37:43 +0000

This article will explain how to create fragments inside an Activity, how to dynamically add a fragment to an Activity, how to create transition animations between fragments, how to hide the previous fragment and finally how to use the fragment backstack.

You can download the code here

So first lets get started. We need to create three layout files, so create main.xml, fragment1.xml, fragment2.xml.
main.xml:

We will be using the FrameLayout to do the fragment swaping.
fragment1.xml:

fragment2.xml:

With fragment2, I want to show that you do not need a Layout View in an xml, you can inflate any View you want. In this case, a TextView.

Now we need to create a class Fragment1.java which extends Fragment. I have put comments in the code so its understandable, the code:

public class Fragment1 extends Fragment {

	// my custom listener
	private OnFragment1ClickedListener mOnFragment1ClickedListener;

	// Must always call onCreateView and inflate your layout.
	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		super.onCreateView(inflater, container, savedInstanceState);

		View view = inflater.inflate(R.layout.fragment1, container, false);

		// I want the whole view to be clickable, but I could have called the textView or ImageView only.
		view.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
                                // call the listener's abstract method, the implementation of the method happens in the Activity.
				mOnFragment1ClickedListener.onFragment1Clicked();
			}
		});

		return view;
	}

	// in onAttach we must instantiate the listener
	@Override
	public void onAttach(Activity activity) {
		super.onAttach(activity);
		try {
			mOnFragment1ClickedListener = (OnFragment1ClickedListener) activity;
		} catch (ClassCastException e) {
			e.printStackTrace();
		}
	}
	// This is my own custom listener so that the Activity and fragment can communicate.
	// If you are not familiar with this, google "observer design pattern".
	public interface OnFragment1ClickedListener{
		public void onFragment1Clicked();
	}

}

This fragment has the click listener to call my custom listener’s abstract method onFragment1Clicked().

We now create another class Fragment2.java in which we do the exact same thing. However, this fragment will not call another fragment, so we do not have the interface and abstract method. Instead we just call a toast. Code:

public class Fragment2 extends Fragment {

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container,
			Bundle savedInstanceState) {

		super.onCreateView(inflater, container, savedInstanceState);

		View view = inflater.inflate(R.layout.fragment2, container, false);
		view.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Toast.makeText(getActivity(), "THIS IS FRAGMENT2 BEING CLICKED!!! PRESS BACK TO GO TO FRAGMENT1", Toast.LENGTH_SHORT).show();
			}
		});
		return view;
	}

}

Now, we need three animations. I created one animation that fades away and another one that appears as the other fades and finally one that just appears so when users press the back button, they don’t have to wait for the fading animation; it doesn’t make sense. We need to create a folder inside the res folder “anim” and inside create three xml files: fragment_animation_fade_in.xml, fragment_animation_fade_out.xml, fragment_animation_no_fade_in.xml.
Notice that with fragments we now have to use objectAnimator.

fragment_animation_fade_in.xml:

fragment_animation_fade_out.xml:

fragment_animation_no_fade_in.xml

So this was the easy part. Now we need to put everything together. We do this by creating an activity, Main.java, which will do all the work. Here is the code with comments and then I will explain further:

public class Main extends Activity implements OnFragment1ClickedListener {
	// This is needed in order to manage the fragments.
	public Stack mFragmentStack;

	@Override
	public void onCreate(Bundle savedInstanceState){
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		mFragmentStack = new Stack();

		// Dynamically add a fragment to an Activity
		FragmentManager fragmentManager = getFragmentManager();
		FragmentTransaction transaction = fragmentManager.beginTransaction();
		Fragment fragment = new Fragment1();
		String tag = fragment.toString();
		mFragmentStack.add(tag);
		transaction.add(R.id.fragment_swap, fragment,tag);
		transaction.addToBackStack(tag);
		transaction.commit();

	}

	// Notice how this class implements OnFragment1ClickkedListener? Well this causes us to
	// implement the abstract method onFragment1Clicked() from Fragment1.java.
	@Override
	public void onFragment1Clicked() {
		Fragment newFragment = new Fragment2();
		Bundle args = new Bundle();
		// by doing newFragment.toString(), I am taking a unique identified of that object.
		String tag = newFragment.toString();
		newFragment.setArguments(args);

		FragmentTransaction transaction = getFragmentManager().beginTransaction();
		// setting the animations here. the fade_in animation for fragment1 and fade_out for fragment2
		transaction.setCustomAnimations(R.anim.fragment_animation_fade_in, R.anim.fragment_animation_fade_out);
		// I find what the current fragment from the stack is, take it and hide it
		// using transaction.hide(currentFragment);
		Fragment currentFragment = getFragmentManager().findFragmentByTag(mFragmentStack.peek());
		transaction.hide(currentFragment);

		transaction.add(R.id.fragment_swap, newFragment,newFragment.toString());
		// This is important, we must addToBackStack so we can pull it out later.
		transaction.addToBackStack(tag);
		// Instead of using replace we use add. Why? If we use replace, then the previous
		// fragment will always have to be re-created. What if you don't want to do that. In
		// my case, I didn't want it to be re-created all the time because I had a position
		// set and by re-creating it, I would have lost the position or had to use static flag.
		mFragmentStack.add(tag);

		transaction.commit();
	}

	@Override
	public void onBackPressed(){
		// from the stack we can get the latest fragment
		Fragment fragment = getFragmentManager().findFragmentByTag(mFragmentStack.peek());
		// If its an instance of Fragment1 I don't want to finish my activity, so I launch a Toast instead.
		if (fragment instanceof Fragment1){
			Toast.makeText(getApplicationContext(), "YOU ARE AT THE TOP FRAGMENT", Toast.LENGTH_SHORT).show();
		}
		else{
			// Remove the framg
			removeFragment();
			super.onBackPressed();
		}
	}
	private void removeFragment(){
		// remove the current fragment from the stack.
		mFragmentStack.pop();
		FragmentTransaction transaction = getFragmentManager().beginTransaction();
		// get fragment that is to be shown (in our case fragment1).
		Fragment fragment = getFragmentManager().findFragmentByTag(mFragmentStack.peek());
		// This time I set an animation with no fade in, so the user doesn't wait for the animation in back press
		transaction.setCustomAnimations(R.anim.fragment_animation_no_fade_in, R.anim.fragment_animation_fade_out);
		// We must use the show() method.
		transaction.show(fragment);
		transaction.commit();
	}

}

So basically I keep a stack of fragments that I am using so I can use as many fragments as I want. I am only using two right now, but this will work with 3 or more as well as long as the code in onFragment1Clicked() is used (slightly modified for other fragments of course). Also I am using the FragmentTransaction method hide() to hide my previous fragments and instead of replace() I am using add(). That is all, happy fragmenting?

Custom View to draw, rotate, erase and convert images to black and white.

guitarbaka — Thu, 03 May 2012 18:09:43 +0000

This article describes how to create a reusable class that can upload images from our Gallery or take a picture, put them on a canvas and move them around the screen, resize them, erase them and convert them to black and white. This tutorial uses a class that extends View and uses onTouchEvents. This is class also takes care of the VM Budget issue of loading images from the gallery by optimizing the memory each image uses. It uses android 2.2 and above.

Before buying this article, you can download the apk file here: http://ece301-examples.googlecode.com/files/CanvasView.apk

This is a class I created as part of an application I am working on where I need users to select images and put them onto the screen, move them around and resize them. So lets get started.

First, we create a project “CanvasView”. The package name is com.canvas.view.library. We create two classes; Stye.java and TouchView.java. Style.java will be the activity.

The main.xml will contain the following code:

Now we will start modifying TouchView. TouchView will extend View, thus allowing us to create custom views that we can draw on and do different things. First, I will show the variables that will be used and the constructor.

public class TouchView extends View {

	private static final int INVALID_POINTER_ID = -1;

	private final String TAG = "TESTESTEST";

	private Drawable mImage;

	public void setmImage(Drawable image){
		mImage = image;
	}
	// width and height of original image
	private float mImageWidth;
	private float mImageHeight;

	// when image is scaled, we use this to calculate the bounds of the image
	private int mImageWidthScaled;
	private int mImageHeightScaled;

	public float mPosX = 150;
	public float mPosY = 300;

	public float getmPosX() {
		return mPosX;
	}

	public void setmPosX(float mPosX) {
		this.mPosX = mPosX;
	}

	public float getmPosY() {
		return mPosY;
	}

	public void setmPosY(float mPosY) {
		this.mPosY = mPosY;
	}

	private float mLastTouchX;
	private float mLastTouchY;

	private Paint mBorderLeftLine;
	private Paint mBorderTopLine;
	private Paint mBorderRightLine;
	private Paint mBorderBottomLine;

	private int mActivePointerId = INVALID_POINTER_ID;
	private ScaleGestureDetector mScaleDetector;
	private float mScaleFactor = 1f;

	// this is to tell Style what view number I am in the array.
	private int mNumberView;

	// this is what draws the red line around the TouchView to tell the user
	// this one is currently selected
	private boolean mSelected = false;

	public void setmSelected(boolean mSelected) {
		this.mSelected = mSelected;
	}

	private Style mStyle;

	// this is to keep a reference to the original image, so when we ship, we can tar
	// the images that are needed.
	private String mUri;

	public void setImageLocation(String path){
		this.mUri = path;
	}

	public TouchView(Context context,Style style, BitmapDrawable image, int count, float scaleFactor){
		super(context);
		this.mImage = image;
		mImageWidth = image.getBitmap().getWidth();
		mImageHeight = image.getBitmap().getHeight();
		mImageWidthScaled = (int) (mImageWidth*scaleFactor);
		mImageHeightScaled = (int) (mImageHeight*scaleFactor);
		this.mNumberView = count;
		this.mStyle = style;
		this.mScaleFactor = scaleFactor;
		init(context);
	}

Lets only focus on the constructor right now. The constructor passes a Drawable which will be the image for this view. The imageWidth and Height must be defined in the constructor. What these values will do is give me the actual image width and height used in the view. Later we will use these values for when we have different views and the user clicks on individual ones, that view consumes the onTouchView event. Intrinsic Width and height did not work well for me.

The mNumberView will define which View I am. In Style.java I will have an ArrayList with the list of views. This is how I manage the views.

mScaleFactor is the scale factor for zooming in and out the image.

Next piece of code initializes values for drawing to happen when onDraw() is called.

private void init(Context context) {
		mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
		mBorderLeftLine = new Paint();
		mBorderRightLine = new Paint();
		mBorderBottomLine = new Paint();
		mBorderTopLine = new Paint();
		setBorderParams(Color.RED,2);

	}

	private void setBorderParams(int color, float width) {
		mBorderLeftLine.setColor(color);
		mBorderLeftLine.setStrokeWidth(width);
		mBorderRightLine.setColor(color);
		mBorderRightLine.setStrokeWidth(width);
		mBorderBottomLine.setColor(color);
		mBorderBottomLine.setStrokeWidth(width);
		mBorderTopLine.setColor(color);
		mBorderTopLine.setStrokeWidth(width);
		mImage.setBounds(0, 0,mImage.getIntrinsicWidth(),mImage.getIntrinsicHeight());

	}

	public void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		canvas.save();
		canvas.translate(mPosX, mPosY);
		canvas.scale(mScaleFactor, mScaleFactor);
		mImage.draw(canvas);
		if (mSelected){
			canvas.drawLine(0,
					0,
					mImage.getIntrinsicWidth(),
					0,
					mBorderTopLine);
			canvas.drawLine(0, mImage.getIntrinsicHeight(),
					mImage.getIntrinsicWidth(),
					mImage.getIntrinsicHeight(),
					mBorderBottomLine);
			canvas.drawLine(0,
					0,
					0,
					mImage.getIntrinsicHeight(),
					mBorderLeftLine);
			canvas.drawLine(mImage.getIntrinsicWidth(),
					0,
					mImage.getIntrinsicWidth(),
					mImage.getIntrinsicHeight(),
					mBorderRightLine);
		}
		canvas.restore();
	}

The constructor calls the method init(context); Because I am drawing a red rectangle around the image that is currently in use by a user, I create Paints for each line and setBorderParams(); sets the color and stroke width of those lines. ALSO, very important is mImage.setBounds(); If I do not do this, the image (Drawable) will not draw when onDraw() is called.

onDraw() method simply calls canvas.translate() to move the image around the screen by using mPosX and mPosY values. These values are set in my onTouchEvent and we will see how later.
OnDraw() also uses canvas.scale() to scale the image depending when a user uses multitouch to stretch the image.
OnDraw() also draws the a red rectangle around the currently selected image by a user. This is done with a boolean, mSelected.

I think so far, things are simple. But the difficult part of this class is the onTouchEvent method. onTouchEvent is used for the following:

1. Find out when the user does multitouch.
2. Move the image around by setting the values mPosX and mPosY
3. Check if this view is the one being selected because we can have more than 1 of these views on the screen at any time. (In the picture for this article I have 4. Each image represents an object of this view).

public boolean onTouchEvent(MotionEvent event) {
		//ImageView view = (ImageView) v;
		mScaleDetector.onTouchEvent(event);
		boolean intercept = false;
		//boolean defaultResult = onTouchEvent(event);

		switch (event.getAction() & MotionEvent.ACTION_MASK) {

		case MotionEvent.ACTION_DOWN:
			mLastTouchX = event.getX();
			mLastTouchY = event.getY();
			mActivePointerId = event.getPointerId(0);
			// this should mean that I accept the touch out of all my views
			/*if (((mLastTouchX >= mPosX) && (mLastTouchX <= mPosX+ mImage.getIntrinsicWidth())
					&& (mLastTouchY >= mPosY) && (mLastTouchY <= mPosY + mImage.getIntrinsicHeight())))*/
			if (((mLastTouchX >= mPosX) && (mLastTouchX <= mPosX+ mImageWidthScaled)
					&& (mLastTouchY >= mPosY) && (mLastTouchY <= mPosY + mImageHeightScaled))){
				Log.i(TAG,"My view is here: "+mNumberView);
				intercept = true;
				mSelected = true;
				mStyle.setmCurrentView(mNumberView);

			}

			Log.i(TAG,"Action down");
			Log.i(TAG,"x is: "+mLastTouchX);
			Log.i(TAG,"y is: "+mLastTouchY);
			break;
		case MotionEvent.ACTION_UP:
			setFocusable(false);
			mImageWidthScaled = (int) (mImageWidth*mScaleFactor);
			mImageHeightScaled = (int) (mImageHeight*mScaleFactor);
			/*			mPosX = (int) event.getX();
			mPosY = (int) event.getY();*/
			mActivePointerId = INVALID_POINTER_ID;
			// stop the red rectangle from being drawn around the View
			mSelected = false;
			break;
		case MotionEvent.ACTION_CANCEL:
			mActivePointerId = INVALID_POINTER_ID;
			// stop the red rectangle from being drawn around the View
			mSelected = false;
			break;
		case MotionEvent.ACTION_MOVE:
			final int pointerIndex = event.findPointerIndex(mActivePointerId);
			final float x = event.getX(pointerIndex);
			final float y = event.getY(pointerIndex);
			if (!mScaleDetector.isInProgress()) {
				final float dx = x - mLastTouchX;
				final float dy = y - mLastTouchY;

				mPosX += dx;
				mPosY += dy;

				// Invalidate to request a redraw
				invalidate();
			}
			else{
				Log.i(TAG,"Now scaling is happening");
			}
			// Remember this touch position for the next move event
			mLastTouchX = x;
			mLastTouchY = y;

			break;
		case MotionEvent.ACTION_POINTER_UP:
			final int pointerIndex2 = (event.getAction() & MotionEvent.ACTION_POINTER_ID_MASK)
			>> MotionEvent.ACTION_POINTER_ID_SHIFT;
					final int pointerId = event.getPointerId(pointerIndex2);
					if (pointerId == mActivePointerId) {
						// This was our active pointer going up. Choose a new
						// active pointer and adjust accordingly.
						final int newPointerIndex = pointerIndex2 == 0 ? 1 : 0;
						mLastTouchX = event.getX(newPointerIndex);
						mLastTouchY = event.getY(newPointerIndex);
						mActivePointerId = event.getPointerId(newPointerIndex);
					}
					break;
					default:
						//return defaultResult;
		}
		return intercept;
	}

When first doing an ACION_DOWN I get the pixel values where the user is touching. The if statement is checking if these pixel values (x,y) are inside the image location. So my image is at position (100,200) with a width of 50 and height of 50, then it is checking if the touch falls within those bounds, if it does, then I set the boolean intercept to true, else to false. See that at the end we return intercept. This means that if onTouchEvent returns false, this view does not consume the touch and is passed to other views. Also mActivePointerId = event.getPointerId(0); is getting the pointerId for multitouch events.

Here is the code again for the case ACTION_DOWN:

case MotionEvent.ACTION_DOWN:
			mLastTouchX = event.getX();
			mLastTouchY = event.getY();
			mActivePointerId = event.getPointerId(0);
			if (((mLastTouchX >= mPosX) && (mLastTouchX <= mPosX+ mImageWidthScaled)
					&& (mLastTouchY >= mPosY) && (mLastTouchY <= mPosY + mImageHeightScaled))){
				Log.i(TAG,"My view is here: "+mNumberView);
				intercept = true;
				mSelected = true;
				mStyle.setmCurrentView(mNumberView);

			}

			Log.i(TAG,"Action down");
			Log.i(TAG,"x is: "+mLastTouchX);
			Log.i(TAG,"y is: "+mLastTouchY);
			break;

Now on ACTION_UP recalculates the width and height of the image in case it was stretched. It also makes the view unfocused. This is so that when we try to click on another object, the program doesn’t think we are still focused on this object and moves this one instead. Here it is again:

case MotionEvent.ACTION_UP:
			setFocusable(false);
			mImageWidthScaled = (int) (mImageWidth*mScaleFactor);
			mImageHeightScaled = (int) (mImageHeight*mScaleFactor);
			/*			mPosX = (int) event.getX();
			mPosY = (int) event.getY();*/
			mActivePointerId = INVALID_POINTER_ID;
			// stop the red rectangle from being drawn around the View
			mSelected = false;
			break;

ACTION_CANCEL doesn’t really do anything so I won’t go over it.

ACTION_MOVE check that currently the view is not being scaled (stretched) and if it is not, then it moves the image around the screen.

case MotionEvent.ACTION_MOVE:
			final int pointerIndex = event.findPointerIndex(mActivePointerId);
			final float x = event.getX(pointerIndex);
			final float y = event.getY(pointerIndex);
			if (!mScaleDetector.isInProgress()) {
				final float dx = x - mLastTouchX;
				final float dy = y - mLastTouchY;

				mPosX += dx;
				mPosY += dy;

				// Invalidate to request a redraw
				invalidate();
			}
			else{
				Log.i(TAG,"Now scaling is happening");
			}
			// Remember this touch position for the next move event
			mLastTouchX = x;
			mLastTouchY = y;

			break;

Finally POINTER_UP is used for multitouch events and mainly here for stretching the image when a user uses multitouch.

case MotionEvent.ACTION_POINTER_UP:
			final int pointerIndex2 = (event.getAction() & MotionEvent.ACTION_POINTER_ID_MASK)
			>> MotionEvent.ACTION_POINTER_ID_SHIFT;
					final int pointerId = event.getPointerId(pointerIndex2);
					if (pointerId == mActivePointerId) {
						// This was our active pointer going up. Choose a new
						// active pointer and adjust accordingly.
						final int newPointerIndex = pointerIndex2 == 0 ? 1 : 0;
						mLastTouchX = event.getX(newPointerIndex);
						mLastTouchY = event.getY(newPointerIndex);
						mActivePointerId = event.getPointerId(newPointerIndex);
					}
					break;

Now in order to do multitouch and be able to scale the image, we have to create a class inside this class. It extends ScaleGestureDetector and this is the reason why we need to use android 2.2.

private class ScaleListener extends ScaleGestureDetector.SimpleOnScaleGestureListener {
		@Override
		public boolean onScale(ScaleGestureDetector detector) {
			mScaleFactor *= detector.getScaleFactor();

			// Don't let the object get too small or too large.
			mScaleFactor = Math.max(0.05f, Math.min(mScaleFactor, 2.0f));
			invalidate();
			Log.i(TAG,"New Image size: widht: "+mImage.getIntrinsicWidth()+" height: "+mImage.getIntrinsicHeight());
			return true;
		}
	}

All it does it when we detect that scaling is happening, it calculates the scale factor. in the onDraw method we have canvas.scale(). This is where this value comes in and scales the image accordingly.

Finally as an added bonus, I do some image processing to turn the image from color to black and white

public void greyScaler() {
		ColorMatrix cm = new ColorMatrix();
		cm.set(new float[] {
				.21f, .71f, .07f, 0, 0,
				.21f, .71f, .07f, 0, 0,
				.21f, .71f, .07f, 0, 0,
				0, 0, 0, 1, 0 });
		mImage.setColorFilter(new ColorMatrixColorFilter(cm));
		invalidate();
	}

It took me a while to figure it out since I never worked with ColorMatrix before. The array you see is a multiplier. It comes from here: http://developer.android.com/reference/android/graphics/ColorMatrix.html

Basically the RGB colors + Alpha are multiplied by the matrix values above. One algorithm for black and white is to as follows .21*R + .71*G + .07B. This is what I have above. invalidate is called every time we want the onDraw() method to be called manually by us. In my case, after changing the image filter, it will not update until onDraw is called, thus I call it.

If you are following me so far, we are not done yet.We have created the Object that will take care of all the work for us to move the image, scale it, etc. This class can be extended and other methods added or you can add other methods yourself that you might need. Like some extra image processing, rotation, etc.

Style.java extends Activity and holds an ArrayList of type TouchView to keep track of our object creation. Let’s start with the variables and onCreate method:

public class Style extends Activity {

	private final static String TAG = "TESTESTESTEST";

	// to take a picture
	private static final int CAMERA_PIC_REQUEST = 1111;
	private static final int GALLERY_PIC_REQUEST = 1112;

	private Button mCameraButton;
	private Button mBwButton;
	private Button mTrashButton;

	// current view is the current selected view - hopefully this will work ok
	private int mCurrentView = 0;

	public int getmCurrentView() {
		return mCurrentView;
	}

	public void setmCurrentView(int mCurrentView) {
		this.mCurrentView = mCurrentView;
	}

	// this tells me how many views I currently have.
	private int mViewsCount = 0;

	private ArrayList mViewsArray = new ArrayList();

	private static Style mStyle;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);
		setContentView(R.layout.main);

		mStyle = this;

		mTrashButton = (Button) findViewById(R.id.trash_button);
		mTrashButton.setClickable(true);
		mTrashButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Log.i(TAG,"Trash clicked");
				Log.i(TAG,"Array size is: "+mViewsArray.size());
				if (mViewsArray.size() > 0){
					Log.i(TAG,"Should remove this view");
					RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
					layout.removeView(mViewsArray.get(mCurrentView));
					mViewsArray.remove(mCurrentView);
					mViewsCount -=1;
				}

			}
		});

		mCameraButton = (Button) findViewById(R.id.camera_button);
		mCameraButton.setClickable(true);
		mCameraButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext());
				builder.setTitle("Select:");
				final CharSequence[] chars = {"Take Picture", "Choose from Gallery"};
				builder.setItems(chars, new android.content.DialogInterface.OnClickListener(){

					@Override
					public void onClick(DialogInterface dialog, int which) {
						if(which == 0){
							Intent cameraIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
							startActivityForResult(cameraIntent, CAMERA_PIC_REQUEST);
						}else
							if(which == 1){
								Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI);
								startActivityForResult(intent,GALLERY_PIC_REQUEST);
							}
						dialog.dismiss();
					}

				}
				);
				builder.show();
			}
		});

		mBwButton = (Button) findViewById(R.id.bw_button);
		mBwButton.setClickable(true);
		mBwButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				if (mViewsArray.size() > 0){
					((TouchView) mViewsArray.get(mCurrentView)).greyScaler();
				}
				else{
					Toast.makeText(v.getContext(), "Please select an image first before using this function.", Toast.LENGTH_SHORT).show();
				}
			}
		});
	}

The onCreate method holds my click listeners for my buttons to erase, take photo and make black and white.

The trash button removes the view from both the layout and then ArrayList, mViewsArray. Here it is again:

mTrashButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				Log.i(TAG,"Trash clicked");
				Log.i(TAG,"Array size is: "+mViewsArray.size());
				if (mViewsArray.size() > 0){
					Log.i(TAG,"Should remove this view");
					RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
					layout.removeView(mViewsArray.get(mCurrentView));
					mViewsArray.remove(mCurrentView);
					mViewsCount -=1;
				}

			}
		});

mViewsCount keeps a count of TouchViews created.

mCameraButton creates an Alert to let a user choose between using a current image from the Gallery or take a picture. Here it is again:

mCameraButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				AlertDialog.Builder builder = new AlertDialog.Builder(v.getContext());
				builder.setTitle("Select:");
				final CharSequence[] chars = {"Take Picture", "Choose from Gallery"};
				builder.setItems(chars, new android.content.DialogInterface.OnClickListener(){

					@Override
					public void onClick(DialogInterface dialog, int which) {
						if(which == 0){
							Intent cameraIntent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
							startActivityForResult(cameraIntent, CAMERA_PIC_REQUEST);
						}else
							if(which == 1){
								Intent intent = new Intent(Intent.ACTION_PICK, android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI);
								startActivityForResult(intent,GALLERY_PIC_REQUEST);
							}
						dialog.dismiss();
					}

				}
				);
				builder.show();
			}
		});

It also uses android actions: android.provider.MediaStore.ACTION_IMAGE_CAPTURE and Intent.ACTION_PICK with android.provider.MediaStore.Images.Media.INTERNAL_CONTENT_URI.

mBwButton calls the greyScaler() method in the TouchView to make the image black and white.

When creating these classes, I thought it would be useful to not only load the images from the gallery or from taking a picture, but also to keep track of its path. However, when we call startActivityForResult(). We do not get the absolute path, we I needed to add this function so I could get it.

[soucecode language="java"]
public String getPath(Uri uri){
String[] filePathColumn={MediaStore.Images.Media.DATA};

Cursor cursor=getContentResolver().query(uri, filePathColumn, null, null, null);
cursor.moveToFirst();
int columnIndex=cursor.getColumnIndex(filePathColumn[0]);
Log.i(TAG,”Image path is: “+cursor.getString(columnIndex));
return cursor.getString(columnIndex);
}
[/sourcecode]

Finally, the last thing we need to do here is onActivityResult();

protected void onActivityResult(int requestCode, int resultCode, Intent data) {
		// usedView is a bool that checks is a view was destroyed and this was reused.
		// if it wasn't reused, this means we create a new one.
		if (requestCode == CAMERA_PIC_REQUEST) {
			try{
				Uri selectedImage = data.getData();
				getPath(selectedImage);
				InputStream is;
				is = getContentResolver().openInputStream(selectedImage);
				BitmapFactory.Options opts = new BitmapFactory.Options();
				opts.inJustDecodeBounds = true;
				//BitmapFactory.decodeStream(bis,null,opts);
				BitmapFactory.decodeStream(is,null,opts);

				//The new size we want to scale to
				final int REQUIRED_SIZE=200;

				//Find the correct scale value. It should be the power of 2.
				int scale=1;
				while(opts.outWidth/scale/2>=REQUIRED_SIZE || opts.outHeight/scale/2>=REQUIRED_SIZE)
					scale*=2;

				Log.i(TAG,"Scale is: "+scale);
				opts.inSampleSize = scale;
				opts.inJustDecodeBounds = false;
				is = null;
				System.gc();
				InputStream is2 = getContentResolver().openInputStream(selectedImage);

				Bitmap returnedImage = BitmapFactory.decodeStream(is2, null, opts);
				Log.i(TAG,"Image width from bitmap: "+returnedImage.getWidth());
				Log.i(TAG,"Image height from bitmap: "+returnedImage.getHeight());
				Log.i(TAG,"Creating another View");
				TouchView newView = new TouchView(this,mStyle,new BitmapDrawable(returnedImage),mViewsCount,1f);
				newView.setImageLocation(getPath(selectedImage));
				newView.setClickable(true);
				// below is to ensure red border is drawn on new selected image
				newView.setmSelected(true);
				mViewsArray.add(newView);
				RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
				layout.addView(mViewsArray.get(mViewsCount));
				newView.invalidate();
				mViewsCount+=1;
			}
			catch(NullPointerException e){
				//Do nothing
			} catch (FileNotFoundException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
		if (requestCode == GALLERY_PIC_REQUEST){
			try {
				Uri selectedImage = data.getData();
				getPath(selectedImage);
				InputStream is;
				is = getContentResolver().openInputStream(selectedImage);
				BitmapFactory.Options opts = new BitmapFactory.Options();
				opts.inJustDecodeBounds = true;
				//BitmapFactory.decodeStream(bis,null,opts);
				BitmapFactory.decodeStream(is,null,opts);

				//The new size we want to scale to
				final int REQUIRED_SIZE=200;

				//Find the correct scale value. It should be the power of 2.
				int scale=1;
				while(opts.outWidth/scale/2>=REQUIRED_SIZE || opts.outHeight/scale/2>=REQUIRED_SIZE)
					scale*=2;

				Log.i(TAG,"Scale is: "+scale);
				opts.inSampleSize = scale;
				opts.inJustDecodeBounds = false;
				is = null;
				System.gc();
				InputStream is2 = getContentResolver().openInputStream(selectedImage);

				Bitmap returnedImage = BitmapFactory.decodeStream(is2, null, opts);
				Log.i(TAG,"Image width from bitmap: "+returnedImage.getWidth());
				Log.i(TAG,"Image height from bitmap: "+returnedImage.getHeight());
				Log.i(TAG,"Creating another View");
				TouchView newView = new TouchView(this,mStyle,new BitmapDrawable(returnedImage),mViewsCount,1f);
				newView.setImageLocation(getPath(selectedImage));
				newView.setClickable(true);
				// below is to ensure red border is drawn on new selected image
				newView.setmSelected(true);
				mViewsArray.add(newView);
				RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
				layout.addView(mViewsArray.get(mViewsCount));
				newView.invalidate();
				mViewsCount+=1;
			} catch (FileNotFoundException e) {

			}
			catch (NullPointerException e){
			}
		}
	}

Now, this method is longer than it needs to be. Both GALLERY request and PIC REQUEST use the same algorithm. However, I decided to separate them just in case one of them needed something different than the other. Or if I wanted to change the size from grabbing images from Gallery vs taking the picture.

The algorithm is this:

Uri selectedImage = data.getData();
				getPath(selectedImage);
				InputStream is;
				is = getContentResolver().openInputStream(selectedImage);
				BitmapFactory.Options opts = new BitmapFactory.Options();
				opts.inJustDecodeBounds = true;
				//BitmapFactory.decodeStream(bis,null,opts);
				BitmapFactory.decodeStream(is,null,opts);

				//The new size we want to scale to
				final int REQUIRED_SIZE=200;

				//Find the correct scale value. It should be the power of 2.
				int scale=1;
				while(opts.outWidth/scale/2>=REQUIRED_SIZE || opts.outHeight/scale/2>=REQUIRED_SIZE)
					scale*=2;

				Log.i(TAG,"Scale is: "+scale);
				opts.inSampleSize = scale;
				opts.inJustDecodeBounds = false;
				is = null;
				System.gc();
				InputStream is2 = getContentResolver().openInputStream(selectedImage);

				Bitmap returnedImage = BitmapFactory.decodeStream(is2, null, opts);
				Log.i(TAG,"Image width from bitmap: "+returnedImage.getWidth());
				Log.i(TAG,"Image height from bitmap: "+returnedImage.getHeight());
				Log.i(TAG,"Creating another View");
				TouchView newView = new TouchView(this,mStyle,new BitmapDrawable(returnedImage),mViewsCount,1f);
				newView.setImageLocation(getPath(selectedImage));
				newView.setClickable(true);
				// below is to ensure red border is drawn on new selected image
				newView.setmSelected(true);
				mViewsArray.add(newView);
				RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
				layout.addView(mViewsArray.get(mViewsCount));
				newView.invalidate();
				mViewsCount+=1;

First I get the Uri of the image.I quickly found that I was running out of memory after loading only 3 images because I was loading the images to memory and it was exceeding my VM Budget (they were 8 megapixel images). Following this: http://developer.android.com/training/displaying-bitmaps/load-bitmap.html

I created a scaled version of my images which greatly reduced the memory usage. You can read about it, but the main part for this was:

BitmapFactory.Options opts = new BitmapFactory.Options();
				opts.inJustDecodeBounds = true;
				//BitmapFactory.decodeStream(bis,null,opts);
				BitmapFactory.decodeStream(is,null,opts);

				//The new size we want to scale to
				final int REQUIRED_SIZE=200;

				//Find the correct scale value. It should be the power of 2.
				int scale=1;
				while(opts.outWidth/scale/2>=REQUIRED_SIZE || opts.outHeight/scale/2>=REQUIRED_SIZE)
					scale*=2;

				Log.i(TAG,"Scale is: "+scale);
				opts.inSampleSize = scale;
				opts.inJustDecodeBounds = false;
				is = null;
				System.gc();
				InputStream is2 = getContentResolver().openInputStream(selectedImage);

				Bitmap returnedImage = BitmapFactory.decodeStream(is2, null, opts);

I won’t go over the details as you can read about it on the link above, but this was a great optimization to my code.

Finally, Once I have the bitmap I use BitmapDrawable to pass a Drawable from a Bitmap to the constructor of TouchView along with other values. I then call my RelativeLayout and add the view to relative layout (vs in the mTrashButton removes the view from my relative layout). This all happens here:

Bitmap returnedImage = BitmapFactory.decodeStream(is2, null, opts);
				Log.i(TAG,"Image width from bitmap: "+returnedImage.getWidth());
				Log.i(TAG,"Image height from bitmap: "+returnedImage.getHeight());
				Log.i(TAG,"Creating another View");
				TouchView newView = new TouchView(this,mStyle,new BitmapDrawable(returnedImage),mViewsCount,1f);
				newView.setImageLocation(getPath(selectedImage));
				newView.setClickable(true);
				// below is to ensure red border is drawn on new selected image
				newView.setmSelected(true);
				mViewsArray.add(newView);
				RelativeLayout layout = (RelativeLayout) findViewById(R.id.style_layout);
				layout.addView(mViewsArray.get(mViewsCount));
				newView.invalidate();
				mViewsCount+=1;

And that is it! You now have a basic library to use in your applications. Should save you a lot of time.

Connect to MYSQL remote server database using PHP and display ListView

guitarbaka — Tue, 21 Feb 2012 23:54:00 +0000

This article describes how to create/access a MYSQL database in a remote server from Android using PHP and display it on a ListView. Because most online tutorials did not show the full process or all source code, I decided how to create a fully functional prototype. Currently you can see my JSON objects by going to this link: http://www.ece301.com/food.php which accesses my database and extracts the information. This article uses Cpanel, php and Android API 2.1.

This can easily run in XAMPP, but because most online tutorials focus on running it this way, I will show how to run it in a real live server.

Download the APK file first and install in your phone (adb install) before you think about buying this article. Look at the php JSON request here: http://www.ece301.com/food.php:

DOWNLOAD APK FILE HERE

This article is exclusive, use Cleeng to view it in full.

Exclusive content

Already have a Cleeng account?

All articles you purchase here have a money back guarantee if you are not completely satisfied.

Customer rating:

Read for free

Watch for free

Access for free

Buy this article $0.99

Buy this video $0.99

Buy this item $0.99

Android SAX XML Parsing

guitarbaka — Fri, 17 Feb 2012 19:22:05 +0000

This article describes how to create an XML Parser for Android. The files are located in the SD card and use a SAX parser. Why use XML? If you are designing an application that has static data, it might be simpler to keep information in a flat file instead of creating a database and query for values.

Here is the sample XML file that we will parse:



	
		Super Mario Brothers
		/sdcard/games/supermario.png
		Mario must save the princess from Browser
	
	
		Call of Duty
		/sdcard/games/callofduty.png
		Play online against your friends
	
	
		Aliens vs Predator
		/sdcard/games/aliensvspredator.png
		They win, we lose
	
	
		The land of happiness
		/sdcard/games/landofhappiness.png
		Something gay

In here I am making some app that has game information and an image location from the sd card.

Create ContentObject.java

This class contains the elements from the XML file you created. It looks something like this:

public class ContentObject {
	private String mName;
	private String imageLocation;
	private String mDescription;

	/**
	 * Set functions
	 */
	public void setName (String name){
		mName = name;
	}
	public void setLocationImage(String location){
		imageLocation = location;
	}
	public void setDescription(String description){
		mDescription = description;
	}
	/**
	 * Get functions
	 */
	public String getName(){
		return mName;
	}
	public String getLocationImage(){
		return imageLocation;
	}
	public String getDescription(){
		return mDescription;
	}
}

If you notice the methods all they do is set and get:
1. Name
2. LocationImage
3. Description

It is just like the XML file I created.

The setter methods will set the objects when the XML SAX parser is called. We will use the getter methods to get the information later so it can be used in our app.

Create XmlSaxParser.java

Now we create the XML parser:

public class XmlSAXParser extends DefaultHandler{
	private String TAG = "JUAN";
	private String mLocation;
	private String mSelection;
	public List myContentObjects = new ArrayList();
	private String tempVal;

	private ContentObject tempContentObject;

	/**constructor that sets the file Location (mLocation) and mSelection(GAMES in this case)*/
	public XmlSAXParser(String location, String selection){
		mLocation = location;
		mSelection = selection;
	}

	/**the heart of the parser. Initializes a SAXParserFactory and
	 *  uses the java classes to parse my file*/
	public void runParser(){
		try{
			SAXParserFactory spf = SAXParserFactory.newInstance();
			SAXParser sp = spf.newSAXParser();
			XMLReader xr = sp.getXMLReader();
			File file = new File(mLocation);
			FileInputStream fis = new FileInputStream(file);
			xr.setContentHandler(this);
			xr.parse(new InputSource(fis));
		} catch (Exception e) {
			Log.i(TAG,"XML Pasing Excpetion = " + e);
			System.exit(-1);
		}
	}

	/**These classes below are my event handlers
	 * When the xr.parse above takes effect, the startElement and endElement
	 * will grab the data and put it in my created class ContentObject*/

	/**when the start Element is found to be "GAMES", I will create a new content object to hold
	 * my elements inside*/
	public void startElement
	(String uri, String localName, String qName, Attributes attributes) throws SAXException {
		if (localName.equals(null)){
			Log.i(TAG,"qName is empty");
		}
		tempVal = "";
		if(localName.equalsIgnoreCase(mSelection)) {
			/**create a new ContentObject to hold all XML elements*/
			tempContentObject = new ContentObject();
		}
	}

	public void characters(char[] ch, int start, int length) throws SAXException {
		tempVal = new String(ch,start,length);
	}
	/**Once the end tag is found in XML, I write the element's data to the content object
	 * If "GAMES" ending tag is found, then I add to the List of my content objects*/
	public void endElement(String uri, String localName, String qName) throws SAXException {
		/**add the content object with the elements inside to my List of Content objects*/
		if(localName.equalsIgnoreCase(mSelection)) {
			myContentObjects.add(tempContentObject);
		}else if (localName.equalsIgnoreCase("Name")) {
			tempContentObject.setName(tempVal);
		}else if (localName.equalsIgnoreCase("LocationImage")) {
			tempContentObject.setLocationImage(tempVal);
		}
		else if (localName.equalsIgnoreCase("Description")){
			tempContentObject.setDescription(tempVal);
		}
	}

	/**I return a List of ContentObjects to be ready to be itterated*/
	public List getParsedData(){
		return this.myContentObjects;
	}
}

Here we call a factory that returns a SAXParser instance, wrap our string as a file that is put into our parser and we parse (xr.parse()).

The methods startElement and endElement are called when in our XLM file an element tag is called. This parser here works with Element tags. If you add attributes, the code will have to be slightly modified. If you don’t know the difference between elements and attributes, just write everything like elements ( like I did above in my XML file) if its a simple XML file.
When the mSelection START TAG is found, I create a ContentObject object. This is then used to SET the name, locationimage and
description. the mSelection tag is “GAMES” because that is what my main tag to distinguish elements in my XML and you will see pretty
soon. When mSelection ENDING TAG is found, then I add that ContentObject object to a list of ContentObjects. So for this XML file, I will
have a List of 4 ContentObjects which contain all the information I collected.

NOTE: Why SAX? DOM keeps the whole file in memory. For an android device (embedded system) (your phone!) you don’t want to do that, so I choose SAX which is object modelled.

Create TestActivity.java

Create an Activity that will grab the information from your objects to whatever you want. In my case, I just display it using Logcat:

public class TestActivity extends Activity {
	/** Called when the activity is first created. */
	private final String TAG = "TAG";

	@Override
	public void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		/**I instantiate my class XmlSAXParser and give it the file location and an start element tag*/
		XmlSAXParser myXMLParser = new XmlSAXParser("/sdcard/test.xml","GAMES");

		/**run the parser calling the method runParser()*/
		myXMLParser.runParser();

		/**I create a class ContentObjects that holds all my objects*/
		List tempList;

		/**get the Parsed data from myXMLParser*/
		tempList=myXMLParser.getParsedData();

		Log.i(TAG,"Action objects are: "+tempList.size());
		Log.i(TAG,"myXMLParser has: "+myXMLParser.myContentObjects.size());

		/**iterate through the parsed objects contained in my XML using the Iterator class*/
		Iterator it = myXMLParser.myContentObjects.iterator();
		while(it.hasNext()) {
			ContentObject tempEmp = (ContentObject) it.next();
			Log.i(TAG,"This is an object");
			Log.i(TAG,"Name: "+tempEmp.getName());
			Log.i(TAG,"Image location: "+tempEmp.getLocationImage());
			Log.i(TAG,"Description: "+tempEmp.getDescription());
		}
	}
}

Ok, so one comment above says I create a class contentObjects that holds all my objects. I meant, I create an instance of.

Once I run the parser, the myXMLParser object contains all the information I need and I use myXMLParser.getParsedData() to pass it down to a list which I itterate through and display the information.

If you use this code, make sure to create the XmlSAXParser object in a method so that when the method is finished, the object is destroyed and you will not have it in memory somewhere doing nothing useful.

Well hope you understand all of this, if you dont, feel free to drop me a comment! Enjoy!

If you would like to display the results in a ListView, I suggest you look at my tutorials for JSON and/or SQLite

Alternative
I was asked, what if you need to grab the xml file from the res folder?

If you want it to put the xml into a project folder, you must change the implementation of the XmlSAXParser. The constructor in XMLSAXParser will be:

public XmlSAXParser(InputStream location, String selection){
mLocationStream = location;
mSelection = selection;
}

Then you need to change RunParser method:

public void runParser(){
     try{
          SAXParserFactory spf = SAXParserFactory.newInstance();
          SAXParser sp = spf.newSAXParser();
          XMLReader xr = sp.getXMLReader();
          xr.setContentHandler(this);
          xr.parse(new InputSource(mLocationStream));
     } catch (Exception e) {
     Log.i(TAG,"XML Pasing Excpetion = " + e);
     System.exit(-1);
     }
}

So that it takes an InputStream directly, not a FileInputStream that is created from the string path mLocation.

Finally, in TestActivity get the resource and give it to your constructor:

InputStream resource = this.getResources().openRawResource(R.raw.test);
XmlSAXParser myXMLParser = new XmlSAXParser(resource,"GAMES");

SQLite database

guitarbaka — Fri, 17 Feb 2012 17:45:19 +0000

This article describes how to create a project using an SQLite database. Most online tutorials show how to input one value. Here I will create a database of users with three values: first name, last name and age. This is then displayed in a ListView. This article includes adding and deleting users, using a Cursor, dynamically loading data to a ListView and using an AlertDialog to input user information.

The source code can be downloaded HERE

Fist, we define the main.xml file to be used:

For the alert dialog, we need to create another XML file called newuser.xml in order to insert new users into our database:

Create MYSQLiteHelper.java

Now lets create a class MYSQLiteHelper that extends SQLiteOpenHelper and paste the code below:

public class MySQLiteHelper extends SQLiteOpenHelper {

 public static final String TABLE_USERS = "users";
 public static final String COLUMN_ID = "_id";
 public static final String COLUMN_FIRST_NAME = "firstname";
 public static final String COLUMN_LAST_NAME = "lastname";
 public static final String COLUMN_AGE = "age";

 private static final String DATABASE_NAME = "users.db";
 private static final int DATABASE_VERSION = 1;

 // Database creation sql statement
 private static final String DATABASE_CREATE = "create table "
 + TABLE_USERS + "( " + COLUMN_ID
 + " integer primary key autoincrement, " + COLUMN_FIRST_NAME
 + " text not null," + COLUMN_LAST_NAME + " text not null," +
 COLUMN_AGE + " text not null);";

 public MySQLiteHelper(Context context) {
 super(context, DATABASE_NAME, null, DATABASE_VERSION);
 }

 @Override
 public void onCreate(SQLiteDatabase db) {
 db.execSQL(DATABASE_CREATE);

 }

 @Override
 public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {
 db.execSQL("DROP TABLE IF EXISTS "+TABLE_USERS);
 onCreate(db);

 }

}

The static final Strings represent the values of the database. Clearly you can see that my database’s name is users.db, I will create a table called “users”, with three columns, “firstname”, “lastname” and “age”.

IMPORTANT — COLUMN_ID = “_id” NEEDS TO BE INCLUDED FOR ANDROID DATABASES TO WORK PROPERLY.

For those that do not know mysql syntax, the String DATABASE_CREATE is just creating a TABLE (should name it TABLE_CREATE?). It is creating the structure of the database for adding values. Most importantly take close attention on how the columns are added:

String DATABASE_CREATE = "create table "
			+ TABLE_USERS + "( " + COLUMN_ID
			+ " integer primary key autoincrement, " + COLUMN_FIRST_NAME
			+ " text not null," + COLUMN_LAST_NAME + " text not null," +
			COLUMN_AGE + " text not null);";

SQLite syntax:

create table users(_id integer primary key autoincrement, firstname text not null, lastname text not null, age text not null);

If you want to create more tables or columns, write it out first in SQLite syntax then turn it to a string, for example:

create table workers(_id integer primary key autoincrement, firstname text not null, lastname text not null, age text not null, work_id text not null,
	work_extension);

In java, this would be:

public static final String TABLE_WORKERS = "workers"
public static final String COLUMN_ID = "_id";
public static final String COLUMN_FIRST_NAME = "firstname";
public static final String COLUMN_LAST_NAME = "lastname";
public static final String COLUMN_AGE = "age";
public static final String COLUMN_WORK_ID = "work_id";
public static final String COLUMN_WORK_EXTENSION = "work_extension";

String DATABASE_CREATE = "create table "
			+ TABLE_WORKERS + "( " + COLUMN_ID
			+ " integer primary key autoincrement, " + COLUMN_FIRST_NAME
			+ " text not null," + COLUMN_LAST_NAME + " text not null,"
			+ COLUMN_AGE + " text not null," + COLUMN_WORK_ID + "text not null,"
			+ COLUMN_WORK_EXTENSION + "text not null);";

I thought people might be confused as to how to create more columns, so there you go!

The methods that follow are just to create, update the database.

Create Users.java

Now create another class Users.java:

public class Users {

	private long mId;
	private String mFirstName;
	private String mLastName;
	private String mAge;

	public long getmId() {
		return mId;
	}
	public void setmId(long mId) {
		this.mId = mId;
	}
	public String getmFirstName() {
		return mFirstName;
	}
	public void setmFirstName(String mFirstName) {
		this.mFirstName = mFirstName;
	}
	public String getmLastName() {
		return mLastName;
	}
	public void setmLastName(String mLastName) {
		this.mLastName = mLastName;
	}
	public String getmAge() {
		return mAge;
	}
	public void setmAge(String mAge) {
		this.mAge = mAge;
	}

	@Override
	public String toString(){
		return mFirstName+" "+mLastName+";"+mAge;

	}

}

What this class will do is keep user information for first,last name and age that will be added to both the database and the Adapter of the ListView, thus the get and set methods. The last method is very important, public String toString() is what the ListView’s Adapter will use to display the information in the ListView.

Create DataSource.java

Create another class DataSource.java and paste the below:

public class DataSource {

	private SQLiteDatabase mSQLiteDatabase;
	private MySQLiteHelper mSQLiteHelper;

	private String[] mAllColumns = {MySQLiteHelper.COLUMN_ID,
			MySQLiteHelper.COLUMN_FIRST_NAME,
			MySQLiteHelper.COLUMN_LAST_NAME,
			MySQLiteHelper.COLUMN_AGE};

	public DataSource (Context context){
		mSQLiteHelper = new MySQLiteHelper(context);
	}

	public void open() throws SQLiteException {
		mSQLiteDatabase = mSQLiteHelper.getWritableDatabase();
	}

	public void close() {
		mSQLiteHelper.close();
	}

	public void addUser(String firstname, String lastname, String age){
		ContentValues values = new ContentValues();
		values.put(MySQLiteHelper.COLUMN_FIRST_NAME, firstname);
		values.put(MySQLiteHelper.COLUMN_LAST_NAME, lastname);
		values.put(MySQLiteHelper.COLUMN_AGE, age);
		mSQLiteDatabase.insert(MySQLiteHelper.TABLE_USERS, null, values);
	}

	public void deleteUser(Users user){
		long id = user.getmId();
		mSQLiteDatabase.delete(MySQLiteHelper.TABLE_USERS,
				MySQLiteHelper.COLUMN_ID+ " = " + id, null);
	}

This class creates a SQLiteDatabase object and MySQLiteHelper object to manage the database. It will open the database (or create it if it is the first time) when we call the method open().

It also adds and removes users. It will add user by passing user information, which will come from our AlertDialog (explained later) or deletes the user by passing a Users object (from the class created above with getters and setters).

	public List getAllUsers(){

		List  users = new ArrayList();

		Cursor cursor = mSQLiteDatabase.query(MySQLiteHelper.TABLE_USERS,
				mAllColumns, null, null, null, null, null);
		cursor.moveToFirst();
		while (!cursor.isAfterLast()){
			Users user = cursorToUser(cursor);
			users.add(user);
			cursor.moveToNext();
		}
		cursor.close();
		return users;
	}

	private Users cursorToUser(Cursor cursor) {
		Users user = new Users();
		user.setmId(cursor.getLong(0));
		user.setmFirstName(cursor.getString(1));
		user.setmLastName(cursor.getString(2));
		user.setmAge(cursor.getString(3));
		return user;
	}

}

Lastly we have a method to get a list of Users by using a cursor. When I query a database, the results are put into a Cursor. I use this cursor to extract the information (In this case the information is Users objects) and I use cursorToUser to transform the information to Users so that my ListView’s Adapter can add it to display.

Create TestDatabaseActivity.java

Finally, we add the last class, TestDatabaseActivity and extend ListActivity.

public class TestDatabaseActivity extends ListActivity {

	private DataSource mDataSource;
	private Button mAddButton;
	private Button mDeleteButton;
	private Context mContext;
	private ArrayAdapter mAdapter;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		mContext = this;
		mAddButton = (Button) findViewById(R.id.add);
		mDeleteButton = (Button) findViewById(R.id.delete);
		mDeleteButton.setClickable(true);
		mDeleteButton.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				deleteFirst();
			}
			private void deleteFirst() {
				Users user = null;
				if (getListAdapter().getCount() > 0){
					user = (Users) getListAdapter().getItem(0);
					mDataSource.deleteUser(user);
					mAdapter.remove(user);
					mAdapter.notifyDataSetChanged();
				}
			}
		});
		mAddButton.setClickable(true);
		mAddButton.setOnClickListener(new View.OnClickListener() {
			@Override
			public void onClick(View v) {
				inputUserInformation();
			}
		});

Simple enough I create button listeners to my add and delete buttons. For mAddButton I create a method inputUserInformation(). For mDeleteButton I create a method deleteFirst(). I am only deleting first element with this button. The deleteFirst() method simply look for the first Users element in my ArrayAdapter and remove it from both the database (by using DataSource.deleteUser(Users)) and from the ArrayAdapter list. We must call the notifyDataSetChanged() method so our ListView is updated.

		mDataSource = new DataSource(this);
		mDataSource.open();

		mAdapter = new ArrayAdapter(
				this,android.R.layout.simple_list_item_1,
				mDataSource.getAllUsers());
				setListAdapter(mAdapter);
	}

	@Override
	protected void onResume() {
		mDataSource.open();
		super.onResume();
	}

	@Override
	protected void onPause() {
		mDataSource.close();
		super.onPause();
	}

Here I am just creating a DataSource object and passing it the activity context and opening the database. Also, I am binding the ArrayAdapter to the ListView and making sure that I close the database when onPause() is called and opening it again when onResume() is called. Now finally, the method to add to the database:

	private void inputUserInformation() {
		LayoutInflater factory = LayoutInflater.from(this);
		final View textEntryView = factory.inflate(R.layout.newuser, null);

		AlertDialog.Builder alert = new AlertDialog.Builder(this);

		alert.setTitle("New User Information");
		alert.setMessage("Enter your information below");
		alert.setView(textEntryView);

		final EditText input1 = (EditText) textEntryView.findViewById(R.id.first_name);
		final EditText input2 = (EditText) textEntryView.findViewById(R.id.last_name);
		final EditText input3 = (EditText) textEntryView.findViewById(R.id.age_age);

		alert.setPositiveButton("New Account", new DialogInterface.OnClickListener() {
			public void onClick(DialogInterface dialog, int whichButton) {

				String fName = input1.getText().toString();
				String lName = input2.getText().toString();
				String age = input3.getText().toString();

				if ((fName.length() <=0) || (lName.length()<=0) || (age.length()<=0)){
                                    Toast toast = Toast.makeText(mContext,
							"Please fill in all data and try again", Toast.LENGTH_SHORT);
					toast.show();
				}
				else{
					Users user = new Users();
					user.setmAge(age);
					user.setmFirstName(fName);
					user.setmLastName(lName);
					mDataSource.addUser(fName, lName, age);
					mAdapter.add(user);
					mAdapter.notifyDataSetChanged();
				}
			}
		});
		alert.setNegativeButton("Cancel", new DialogInterface.OnClickListener() {
			public void onClick(DialogInterface dialog, int whichButton) {
			}
		});
		alert.show();
	}

Here I use the newuser.xml file to create an AlertDialog where I can input user information just like I showed at the beginning of the tutorial. On positive button click I check that the data is not empty and if it is not, then I create a Users object, populate it with the first, last name and age and then pass it to DataSource.add(Users) and ArrayAdapter.add(Users), then I call notifyDataSetChanged() to update the ListView.

NOTE THAT ArrayAdapter IN TURN CALLS Users’s toString() method to display the data in the format I gave it:

@Override
	public String toString(){
		return mFirstName+" "+mLastName+";"+mAge;

	}

And that is all. Happy coding!

SSL Sockets Android and server using a certificate

guitarbaka — Thu, 09 Feb 2012 23:58:46 +0000

This article describes how to create a secure socket from an android device to a server using a certificate. It explains how to create a key that Android can use, write a secure server socket, a client socket and send information back and forth between them.

First we can start by downloading the apk file for android and the jar file for your computer (server) along with the correct secure certificate and another certificate to test that other certificates will not work. Download link: http://ece301-examples.googlecode.com/files/ssl_sockets.zip

First I will go through the steps so you can see a working example before looking at the code.

The easiest way to test this:

1. First, make sure that you are using Wifi and that your laptop and your android device are both connected to the same Wifi.
2. From a terminal, run sslsocket.jar with the port number and the whole path of the certificate. In my case:

java -jar sslsocket.jar 9998 /home/juan/testserverkeys

3. Install the APK file in your android device. The certificate is inside the assets folder. When the screen comes up, you need to specify the IP address of your computer, the port number (I used 9998) and a message you like to send over. Then press the SEND button. Look at the image at the start of this article. Should look like that

In your server side you should see the following

Now if you use the wrong certificate:

java -jar sslsocket.jar 9998 /home/juan/testserverWrongKey

You will get an I/O exception in your android application. Try it!

And your server as well will give you an IO exception:

The rest of this article is available for $.99 cents. It has all the source code available to create the apk and jar file and it explains how to create the android SSL certificate as well as the server side certificate.

This article is exclusive, use Cleeng to view it in full.

Exclusive content

Already have a Cleeng account?

All articles you purchase here have a money back guarantee if you are not completely satisfied.

Customer rating:

Read for free

Watch for free

Access for free

Buy this article $0.99

Buy this video $0.99

Buy this item $0.99

A camera preview with a bounding box like Google goggles

guitarbaka — Thu, 09 Feb 2012 22:47:21 +0000

This article describes how to draw a bounding box on top of a camera preview to capture part of the image just like Google goggles does. This article mainly involves looking at a SurfaceView for generating a camera view and a View to create a canvas and draw on top of the camera view. Also shows how to use the onTouchInterceptEvent to pass touch events to lower Views. Android 2.2 API needs to be used for this.

After seeing Google goggle’s implementation, I thought there would be some API to do this, but I could not find any. I then decided to create my own. I did this for my app: Translanguage OCR.

You can download the source HERE
Password is: preview

Create the Project

Create a new android project. Here create the classes: CameraPreview, Preview, TouchView and Wait. Also you need two images, camera.png and corners.png. You can save them from here:

Your folder structure will look something like this:

Open the manifest and add the following permissions:

Now open the main.xml file and add the following:

Here we are adding a Preview and a TouchView which we will create so that the camera is used for a camera preview and a View to draw on top of it.

Wait.java

Now we will write to the Wait.java class. This is just a simple thread to wait some period of time. This will be useful for the autofocus.

public class Wait {
	public static void oneSec() {
		try {
			Thread.currentThread().sleep(1000);
		}
		catch (InterruptedException e) {
			e.printStackTrace();
		}
	}
	public static void manySec(long s) {
		try {
			Thread.currentThread().sleep(s * 1000);
		}
		catch (InterruptedException e) {
			e.printStackTrace();
		}
	}
}

Preview.java

Now open Preview.java and extend SurfaceView and implement SurfaceHolder.CallBack. Three methods will be created: surfaceCreated, surfaceDestroyed, surfaceChanged.

Preview.java is used to open a camera preview. It uses hardware.Camera and a SurfaceView to display the camera’s view on the screen. Now to write some code. The constructors and some extra methods:

class Preview extends SurfaceView implements SurfaceHolder.Callback {	

	private SurfaceHolder mHolder;
	private Camera mCamera;
	private Camera.Parameters mParameters;
	private byte[] mBuffer;

	public Preview(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}

	public Preview(Context context) {
		super(context);
		init();
	}

	public void init() {
		// Install a SurfaceHolder.Callback so we get notified when the
		// underlying surface is created and destroyed.
		mHolder = getHolder();
		mHolder.addCallback(this);
		mHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
	}

This is a pretty standard way of getting a Holder to hold the camera preview. The purpose of this view is to get the view onto the screen and be able to take the picture and save it. For this we need another method:

	public Bitmap getPic(int x, int y, int width, int height) {
		System.gc();
		Bitmap b = null;
		Size s = mParameters.getPreviewSize();

		YuvImage yuvimage = new YuvImage(mBuffer, ImageFormat.NV21, s.width, s.height, null);
		ByteArrayOutputStream outStream = new ByteArrayOutputStream();
		yuvimage.compressToJpeg(new Rect(x, y, width, height), 100, outStream); // make JPG
		b = BitmapFactory.decodeByteArray(outStream.toByteArray(), 0, outStream.size());
		if (b != null) {
			//Log.i(TAG, "getPic() WxH:" + b.getWidth() + "x" + b.getHeight());
		} else {
			//Log.i(TAG, "getPic(): Bitmap is null..");
		}
		yuvimage = null;
		outStream = null;
		System.gc();
		return b;
	}

This method is the one that will get an area of the image, or a set of coordinates in the image, and turn it into a Bitmap. The CameraPreview class will explain how the set of coordinates is taken. The reason API 2.2 is needed is because of the YuvImage class. This class is crucial for what we are trying to do here. YuvImage is used, compressed to jpeg and turned to bitmap.

In order to keep the image, we need to set up a buffer. This will ensure that when the image is captured, the buffer is big enough to hold the data.

	private void updateBufferSize() {
		mBuffer = null;
		System.gc();
		// prepare a buffer for copying preview data to
		int h = mCamera.getParameters().getPreviewSize().height;
		int w = mCamera.getParameters().getPreviewSize().width;
		int bitsPerPixel =
                     ImageFormat.getBitsPerPixel(mCamera.getParameters().getPreviewFormat());
		mBuffer = new byte[w * h * bitsPerPixel / 8];
		//Log.i("surfaceCreated", "buffer length is " + mBuffer.length + " bytes");
	}

Now the methods we need to Override:

	public void surfaceCreated(SurfaceHolder holder) {
		// The Surface has been created, acquire the camera and tell it where to draw.
		try {
			mCamera = Camera.open(); // WARNING: without permission in Manifest.xml, crashes
		}
		catch (RuntimeException exception) {
			//Log.i(TAG, "Exception on Camera.open(): " + exception.toString());
			Toast.makeText(getContext(), "Camera broken, quitting  ",Toast.LENGTH_LONG).show();
			// TODO: exit program
		}

		try {
			mCamera.setPreviewDisplay(holder);
			//updateBufferSize();
			mCamera.addCallbackBuffer(mBuffer); // where we'll store the image data
			mCamera.setPreviewCallbackWithBuffer(new PreviewCallback() {
				public synchronized void onPreviewFrame(byte[] data, Camera c) {

					if (mCamera != null) { // there was a race condition when onStop() was called..
						mCamera.addCallbackBuffer(mBuffer); // it was consumed by the call, add it back
					}
				}
			});
		} catch (Exception exception) {
			//Log.e(TAG, "Exception trying to set preview");
			if (mCamera != null){
				mCamera.release();
				mCamera = null;
			}
			// TODO: add more exception handling logic here
		}
	}

When the surface is created, this method is called. Here we have to open the hardware.Camera and set a Preview display (thus camera preview), set the buffer and start receiving data. Using hardware.Camera is sometimes annoying because you have to be sure to release the camera or you will have problems with your application or even other applications that need to access the camera after you are done. I remember having to reboot my phone a few times because I was not releasing the camera.

When SurfaceDestroyed gets called, we stop the preview let go of all the resources:

	public void surfaceDestroyed(SurfaceHolder holder) {
		// Surface will be destroyed when we return, so stop the preview.
		// Because the CameraDevice object is not a shared resource, it's very
		// important to release it when the activity is paused.
		//Log.i(TAG,"SurfaceDestroyed being called");
		mCamera.stopPreview();
		mCamera.release();
		mCamera = null;
	}

On SurfaceChanged, we set the parameters for the camera, which in this case is landscape. At first I initially set the preview size by using some algorithm from google that didn’t work well, so I just removed it and let it grab the current one set, and it seems to work very well. This is also where updateBufferSize() is called so that the buffer size is set for the next picture to be taken and we don’t get some error for running out of memory. And another method to get the camera parameters.

public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) {
		//Log.i(TAG, "Preview: surfaceChanged() - size now " + w + "x" + h);
		// Now that the size is known, set up the camera parameters and begin
		// the preview.
		try {
			mParameters = mCamera.getParameters();
			mParameters.set("orientation","landscape");
			for (Integer i : mParameters.getSupportedPreviewFormats()) {
				//Log.i(TAG, "supported preview format: " + i);
			} 

			List sizes = mParameters.getSupportedPreviewSizes();
			for (Size size : sizes) {
				//Log.i(TAG, "supported preview size: " + size.width + "x" + size.height);
			}
			mCamera.setParameters(mParameters); // apply the changes
		} catch (Exception e) {
			// older phone - doesn't support these calls
		}

		//updateBufferSize(); // then use them to calculate

		Size p = mCamera.getParameters().getPreviewSize();
		//Log.i(TAG, "Preview: checking it was set: " + p.width + "x" + p.height); // DEBUG
		mCamera.startPreview();
	}

	public Parameters getCameraParameters(){
		return mCamera.getParameters();
	}

Finally to set autoFocus and Flash we have two methods:

	public void setCameraFocus(AutoFocusCallback autoFocus){
		if (mCamera.getParameters().getFocusMode().equals(mCamera.getParameters().FOCUS_MODE_AUTO) ||
				mCamera.getParameters().getFocusMode().equals(mCamera.getParameters().FOCUS_MODE_MACRO)){
			mCamera.autoFocus(autoFocus);
		}
	}

	public void setFlash(boolean flash){
		Toast.makeText(Preview.this.getContext(), "Flash is: "+mParameters.getFlashMode(), Toast.LENGTH_LONG).show();
		if (flash){
			mParameters.setFlashMode(Parameters.FLASH_MODE_TORCH);
			mCamera.setParameters(mParameters);
		}
		else{
			mParameters.setFlashMode(Parameters.FLASH_MODE_OFF);
			mCamera.setParameters(mParameters);
		}
	}

TouchView.java

Things get progressively more difficult. This class is pretty important and the class that will create a canvas to draw on top of the camera preview. It implements View.
I will create Drawables for the corners of the bounding box and lines (Paint) to connect these boxes.

The constructor initializes our boxes and lines. The onDraw method draws them on top of the camera preview with the positions updated.
This update happens when the method invalidate() is called. Then the touch event method takes care of moving the bounding box.
First lets look at the data objects we need.

public class TouchView extends View {

	private Drawable mLeftTopIcon;
	private Drawable mRightTopIcon;
	private Drawable mLeftBottomIcon;
	private Drawable mRightBottomIcon;

	private boolean mLeftTopBool = false;
	private boolean mRightTopBool = false;
	private boolean mLeftBottomBool = false;
	private boolean mRightBottomBool = false;

	// Starting positions of the bounding box

	private float mLeftTopPosX = 30;
	private float mLeftTopPosY = 120;

	private float mRightTopPosX = 150;
	private float mRightTopPosY = 120;

	private float mLeftBottomPosX = 30;
	private float mLeftBottomPosY = 200;

	private float mRightBottomPosX = 150;
	private float mRightBottomPosY = 200;
	private float mPosX;
	private float mPosY;

	private float mLastTouchX;
	private float mLastTouchY;

	private Paint topLine;
	private Paint bottomLine;
	private Paint leftLine;
	private Paint rightLine;

	private Rect buttonRec;

	private int mCenter;

	private static final int INVALID_POINTER_ID = -1;
	private int mActivePointerId = INVALID_POINTER_ID;

	// you can ignore this for this code
	private ScaleGestureDetector mScaleDetector;
	private float mScaleFactor = 1.f;

Paints will draw lines, Drawables are the corners, floats are the locations and Booleans are so that we can only move one corner at a time.

The constructors set the line colors, size, etc. It also sets the positions of the paints.

	public TouchView(Context context){
		super(context);
		init(context);
	}

	public TouchView(Context context, AttributeSet attrs){
		super (context,attrs);
		init(context);
	}

	public TouchView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		init(context);
	}

	private void init(Context context) {

		// I need to create lines for the bouding box to connect

		topLine = new Paint();
		bottomLine = new Paint();
		leftLine = new Paint();
		rightLine = new Paint();

		setLineParameters(Color.WHITE,2);

		// Here I grab the image that will work as the corners of the bounding
		// box and set their positions.

		mLeftTopIcon = context.getResources().getDrawable(R.drawable.corners);

		mCenter = mLeftTopIcon.getMinimumHeight()/2;
		mLeftTopIcon.setBounds((int)mLeftTopPosX, (int)mLeftTopPosY,
				mLeftTopIcon.getIntrinsicWidth()+(int)mLeftTopPosX,
				mLeftTopIcon.getIntrinsicHeight()+(int)mLeftTopPosY);

		mRightTopIcon = context.getResources().getDrawable(R.drawable.corners);
		mRightTopIcon.setBounds((int)mRightTopPosX, (int)mRightTopPosY,
				mRightTopIcon.getIntrinsicWidth()+(int)mRightTopPosX,
				mRightTopIcon.getIntrinsicHeight()+(int)mRightTopPosY);

		mLeftBottomIcon = context.getResources().getDrawable(R.drawable.corners);
		mLeftBottomIcon.setBounds((int)mLeftBottomPosX, (int)mLeftBottomPosY,
				mLeftBottomIcon.getIntrinsicWidth()+(int)mLeftBottomPosX,
				mLeftBottomIcon.getIntrinsicHeight()+(int)mLeftBottomPosY);

		mRightBottomIcon = context.getResources().getDrawable(R.drawable.corners);
		mRightBottomIcon.setBounds((int)mRightBottomPosX, (int)mRightBottomPosY,
				mRightBottomIcon.getIntrinsicWidth()+(int)mRightBottomPosX,
				mRightBottomIcon.getIntrinsicHeight()+(int)mRightBottomPosY);
		// Create our ScaleGestureDetector
		mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());

	}

	private void setLineParameters(int color, float width){

		topLine.setColor(color);
		topLine.setStrokeWidth(width);

		bottomLine.setColor(color);
		bottomLine.setStrokeWidth(width);

		leftLine.setColor(color);
		leftLine.setStrokeWidth(width);

		rightLine.setColor(color);
		rightLine.setStrokeWidth(width);

	}

OnDraw draws the bounding box on top of the camera preview. invalidate() needs to be called every time an update happens. This is done in the Event Listeners.

	public boolean onTouchEvent(MotionEvent ev) {
		final int action = ev.getAction();
		boolean intercept = true;

		switch (action) {

		case MotionEvent.ACTION_DOWN: {

			final float x = ev.getX();
			final float y = ev.getY();

			// in CameraPreview we have Rect rec. This is passed here to return
			// a false when the camera button is pressed so that this view ignores
			// the touch event.
			if ((x >= buttonRec.left) && (x <=buttonRec.right) && (y>=buttonRec.top) && (y<=buttonRec.bottom)){
				intercept = false;
				break;
			}

			// is explained below, when we get to this method.
			manhattanDistance(x,y);

			// Remember where we started
			mLastTouchX = x;
			mLastTouchY = y;
			mActivePointerId = ev.getPointerId(0);
			break;
		}

		case MotionEvent.ACTION_MOVE: {

			final int pointerIndex = ev.findPointerIndex(mActivePointerId);
			final float x = ev.getX();
			final float y = ev.getY();
			//Log.i(TAG,"x: "+x);
			//Log.i(TAG,"y: "+y);

			// Only move if the ScaleGestureDetector isn't processing a gesture.
			// but we ignore here because we are not using ScaleGestureDetector.
			if (!mScaleDetector.isInProgress()) {
				final float dx = x - mLastTouchX;
				final float dy = y - mLastTouchY;

				mPosX += dx;
				mPosY += dy;

				invalidate();
			}

			// Calculate the distance moved
			final float dx = x - mLastTouchX;
			final float dy = y - mLastTouchY;

			// Move the object
			if (mPosX >= 0 && mPosX <=800){
				mPosX += dx;
			}
			if (mPosY >=0 && mPosY <= 480){
				mPosY += dy;
			}

			// while its being pressed n it does not overlap the bottom line or right line
			if (mLeftTopBool && ((y+mCenter*2) < mLeftBottomPosY) && ((x+mCenter*2) < mRightTopPosX)){
				if (dy != 0){
					mRightTopPosY = y;
				}
				if (dx != 0){
					mLeftBottomPosX = x;
				}
				mLeftTopPosX = x;//mPosX;
				mLeftTopPosY = y;//mPosY;
			}
			if (mRightTopBool && ((y+mCenter*2) < mRightBottomPosY) && (x > (mLeftTopPosX+mCenter*2))){
				if (dy != 0){
					mLeftTopPosY = y;
				}
				if (dx != 0){
					mRightBottomPosX = x;
				}
				mRightTopPosX = x;//mPosX;
				mRightTopPosY = y;//mPosY;
			}
			if (mLeftBottomBool && (y > (mLeftTopPosY+mCenter*2)) && ((x +mCenter*2) < mRightBottomPosX)){
				if (dx != 0){
					mLeftTopPosX = x;
				}
				if (dy != 0){
					mRightBottomPosY = y;
				}
				mLeftBottomPosX = x;
				mLeftBottomPosY = y;
			}
			if (mRightBottomBool && (y > (mLeftTopPosY+mCenter*2)) && (x > (mLeftBottomPosX+mCenter*2) )){
				if (dx != 0){
					mRightTopPosX = x;
				}
				if (dy != 0){
					mLeftBottomPosY = y;
				}
				mRightBottomPosX = x;
				mRightBottomPosY = y;
			}

			// Remember this touch position for the next move event
			mLastTouchX = x;
			mLastTouchY = y;

			// Invalidate to request a redraw
			invalidate();
			break;
		}
		case MotionEvent.ACTION_UP: {
			// when one of these is true, that means it can move when onDraw is called
			mLeftTopBool = false;
			mRightTopBool = false;
			mLeftBottomBool = false;
			mRightBottomBool = false;
			//mActivePointerId = INVALID_POINTER_ID;
			break;
		}

		case MotionEvent.ACTION_CANCEL: {
			mActivePointerId = INVALID_POINTER_ID;
			break;
		}

		case MotionEvent.ACTION_POINTER_UP: {
			// Extract the index of the pointer that left the touch sensor
			final int pointerIndex = (action & MotionEvent.ACTION_POINTER_INDEX_MASK)
			>> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
			final int pointerId = ev.getPointerId(pointerIndex);
			if (pointerId == mActivePointerId) {
				// This was our active pointer going up. Choose a new
				// active pointer and adjust accordingly.
				final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
				mLastTouchX = ev.getX(newPointerIndex);
				mLastTouchY = ev.getY(newPointerIndex);
				mActivePointerId = ev.getPointerId(newPointerIndex);
			}
			break;
		}
		}
		return intercept;
	}

Notice that I am returning intercept boolean. Why? Because I am using onInterceptTouchEvent on the CameraPreview.java class. This allows me to pass the touch event to lower Views of the GUI.

In order to identify which corner is being pressed I used simple math. I used the Manhattan distance to calculate when the user presses the screen, which of the corners it is close to and move it.

	// Where the screen is pressed, calculate the distance closest to one of the 4 corners
	// so that it can get the pressed and moved. Only 1 at a time can be moved.
	private void manhattanDistance(float x, float y) {

		double leftTopMan = Math.sqrt(Math.pow((Math.abs((double)x-(double)mLeftTopPosX)),2)
				+ Math.pow((Math.abs((double)y-(double)mLeftTopPosY)),2));

		double rightTopMan = Math.sqrt(Math.pow((Math.abs((double)x-(double)mRightTopPosX)),2)
				+ Math.pow((Math.abs((double)y-(double)mRightTopPosY)),2));

		double leftBottomMan = Math.sqrt(Math.pow((Math.abs((double)x-(double)mLeftBottomPosX)),2)
				+ Math.pow((Math.abs((double)y-(double)mLeftBottomPosY)),2));

		double rightBottomMan = Math.sqrt(Math.pow((Math.abs((double)x-(double)mRightBottomPosX)),2)
				+ Math.pow((Math.abs((double)y-(double)mRightBottomPosY)),2));

		//Log.i(TAG,"leftTopMan: "+leftTopMan);
		//Log.i(TAG,"RightTopMan: "+rightTopMan);

		if (leftTopMan < 50){
			mLeftTopBool = true;
			mRightTopBool = false;
			mLeftBottomBool = false;
			mRightBottomBool = false;
		}
		else if (rightTopMan < 50){
			mLeftTopBool = false;
			mRightTopBool = true;
			mLeftBottomBool = false;
			mRightBottomBool = false;
		}
		else if (leftBottomMan < 50){
			mLeftTopBool = false;
			mRightTopBool = false;
			mLeftBottomBool = true;
			mRightBottomBool = false;
		}
		else if (rightBottomMan < 50){
			mLeftTopBool = false;
			mRightTopBool = false;
			mLeftBottomBool = false;
			mRightBottomBool = true;
		}

	}

Then I need the setters and getters for the corner positions and finally a method for invalidating the view.

	public float getmLeftTopPosX(){
		return mLeftTopPosX;
	}
	public float getmLeftTopPosY(){
		return mLeftTopPosY;
	}
	public float getmRightTopPosX(){
		return mRightTopPosX;
	}
	public float getmRightTopPosY(){
		return mRightTopPosY;
	}
	public float getmLeftBottomPosX() {
		return mLeftBottomPosX;
	}
	public float getmLeftBottomPosY() {
		return mLeftBottomPosY;
	}
	public float getmRightBottomPosY() {
		return mRightBottomPosY;
	}
	public float getmRightBottomPosX() {
		return mRightBottomPosX;
	}
	public void setRec(Rect rec) {
		this.buttonRec = rec;
	}

	// calls the onDraw method, I used it in my app Translanguage OCR
	// because I have a thread that needs to invalidate, or redraw
	// you cannot call onDraw from a thread not the UI thread.
	public void setInvalidate() {
		invalidate();

	}

If you have followed me all this way, then lets move to the final class.

CameraPreview.java

This is the class that takes care of putting everything together and this is why its the last class to be explained.

public class CameraPreview extends Activity implements SensorEventListener {

	private Preview mPreview;
	private ImageView mTakePicture;
	private TouchView mView;

	private boolean mAutoFocus = true;

	private boolean mFlashBoolean = false;

	private SensorManager mSensorManager;
	private Sensor mAccel;
	private boolean mInitialized = false;
	private float mLastX = 0;
	private float mLastY = 0;
	private float mLastZ = 0;
	private Rect rec = new Rect();

	private int mScreenHeight;
	private int mScreenWidth;

	private boolean mInvalidate = false;

	private File mLocation = new File(Environment.
			getExternalStorageDirectory(),"test.jpg");

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//Log.i(TAG, "onCreate()");
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
				WindowManager.LayoutParams.FLAG_FULLSCREEN);

		// display our (only) XML layout - Views already ordered
		setContentView(R.layout.main);

		// the accelerometer is used for autofocus
		mSensorManager = (SensorManager) getSystemService(Context.
				SENSOR_SERVICE);
		mAccel = mSensorManager.getDefaultSensor(Sensor.
				TYPE_ACCELEROMETER);

		// get the window width and height to display buttons
		// according to device screen size
		DisplayMetrics displaymetrics = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
		mScreenHeight = displaymetrics.heightPixels;
		mScreenWidth = displaymetrics.widthPixels;
		// I need to get the dimensions of this drawable to set margins
		// for the ImageView that is used to take pictures
		Drawable mButtonDrawable = this.getResources().
		getDrawable(R.drawable.camera);

		mTakePicture = (ImageView) findViewById(R.id.startcamerapreview);

		// setting where I will draw the ImageView for taking pictures
		LayoutParams lp = new LayoutParams(mTakePicture.getLayoutParams());
		lp.setMargins((int)((double)mScreenWidth*.85),
				(int)((double)mScreenHeight*.70) ,
				(int)((double)mScreenWidth*.85)+mButtonDrawable.
				getMinimumWidth(),
				(int)((double)mScreenHeight*.70)+mButtonDrawable.
				getMinimumHeight());
		mTakePicture.setLayoutParams(lp);
		// rec is used for onInterceptTouchEvent. I pass this from the
		// highest to lowest layer so that when this area of the screen
		// is pressed, it ignores the TouchView events and passes it to
		// this activity so that the button can be pressed.
		rec.set((int)((double)mScreenWidth*.85),
				(int)((double)mScreenHeight*.10) ,
				(int)((double)mScreenWidth*.85)+mButtonDrawable.getMinimumWidth(),
				(int)((double)mScreenHeight*.70)+mButtonDrawable.getMinimumHeight());
		mButtonDrawable = null;
		mTakePicture.setClickable(true);
		mTakePicture.setOnClickListener(flashListener);
		// get our Views from the XML layout
		mPreview = (Preview) findViewById(R.id.preview);
		mView = (TouchView) findViewById(R.id.left_top_view);
		mView.setRec(rec);

	}

	// this is the autofocus call back
	private AutoFocusCallback myAutoFocusCallback = new AutoFocusCallback(){

		public void onAutoFocus(boolean autoFocusSuccess, Camera arg1) {
			//Wait.oneSec();
			mAutoFocus = true;
		}};

The onCreate method sets the accelerometer so it can be used to do autofocus for the camera. It also gets the screen’s width and height so it can place the imageviews in the same spot for the different screen sizes that android devices have. Then we create the autofocus method.

The code below has a method called getRatio(). This method is what translates from screen size to pixels so that the bounding rectangle grabs the right part of the image.

Below after that is the onClick listener previewListener( below the flashListener). This is the method that takes the picture. It opens a thread to take and save the picture. Notice that it calls Preview.getPic(), which we talked about before. This is the heart of saving the image in the sd card using savePhoto() which has not been explained or showed yet.

		// with this I get the ratio between screen size and pixels
		// of the image so I can capture only the rectangular area of the
		// image and save it.
		public Double[] getRatio(){
			Size s = mPreview.getCameraParameters().getPreviewSize();
			double heightRatio = (double)s.height/(double)mScreenHeight;
			double widthRatio = (double)s.width/(double)mScreenWidth;
			Double[] ratio = {heightRatio,widthRatio};
			return ratio;
		}

		// I am not using this in this example, but its there if you want
		// to turn on and off the flash.
		private OnClickListener flashListener = new OnClickListener(){

			@Override
			public void onClick(View v) {
				if (mFlashBoolean){
					mPreview.setFlash(false);
				}
				else{
					mPreview.setFlash(true);
				}
				mFlashBoolean = !mFlashBoolean;
			}

		};

		// This method takes the preview image, grabs the rectangular
		// part of the image selected by the bounding box and saves it.
		// A thread is needed to save the picture so not to hold the UI thread.
		private OnClickListener previewListener = new OnClickListener() {

			@Override
			public void onClick(View v) {
				//if (mAutoFocus){
					mAutoFocus = false;
					mPreview.setFlash(false);
					//mPreview.setCameraFocus(myAutoFocusCallback);
					Wait.oneSec();
					Log.i("TESTESTEST","Taking picture");
					Thread tGetPic = new Thread( new Runnable() {
						public void run() {
							Double[] ratio = getRatio();
							int left = (int) (ratio[1]*(double)mView.getmLeftTopPosX());
							// 0 is height
							int top = (int) (ratio[0]*(double)mView.getmLeftTopPosY());

							int right = (int)(ratio[1]*(double)mView.getmRightBottomPosX());

							int bottom = (int)(ratio[0]*(double)mView.getmRightBottomPosY());

							savePhoto(mPreview.getPic(left,top,right,bottom));
							mAutoFocus = true;
						}
					});
					tGetPic.start();
				//}
				boolean pressed = false;
				if (!mTakePicture.isPressed()){
					pressed = true;
				}
			}
		};

		// just to close the app and release resources.
		@Override
		public boolean onKeyDown(int keyCode, KeyEvent event) {

			if (keyCode == KeyEvent.KEYCODE_BACK){
				finish();
			}
			return super.onKeyDown(keyCode, event);
		}

		private boolean savePhoto(Bitmap bm) {
			FileOutputStream image = null;
			try {
				image = new FileOutputStream(mLocation);
			} catch (FileNotFoundException e) {
				e.printStackTrace();
			}
			bm.compress(CompressFormat.JPEG, 100, image);
			if (bm != null) {
				int h = bm.getHeight();
				int w = bm.getWidth();
				//Log.i(TAG, "savePhoto(): Bitmap WxH is " + w + "x" + h);
			} else {
				//Log.i(TAG, "savePhoto(): Bitmap is null..");
				return false;
			}
			return true;
		}

Below is the onInterceptTouch(). This is what allows the take picture button to be pressed and the TouchView onTouchEvents to be ignored.

		public boolean onInterceptTouchEvent(MotionEvent ev) {
			final int action = ev.getAction();
			boolean intercept = false;
			switch (action) {
			case MotionEvent.ACTION_UP:
				break;
			case MotionEvent.ACTION_DOWN:
				float x = ev.getX();
				float y = ev.getY();
				// here we intercept the button press and give it to this
				// activity so the button press can happen and we can take
				// a picture.
				if ((x >= rec.left) && (x <= rec.right) && (y>=rec.top) && (y<=rec.bottom)){
					intercept = true;
				}
				break;
			}
			return intercept;
		}

		// mainly used for autofocus to happen when the user takes a picture
		// I also use it to redraw the canvas using the invalidate() method
		// when I need to redraw things.
		public void onSensorChanged(SensorEvent event) {

			if (mInvalidate == true){
				mView.invalidate();
				mInvalidate = false;
			}
			float x = event.values[0];
			float y = event.values[1];
			float z = event.values[2];
			if (!mInitialized){
				mLastX = x;
				mLastY = y;
				mLastZ = z;
				mInitialized = true;
			}
			float deltaX  = Math.abs(mLastX - x);
			float deltaY = Math.abs(mLastY - y);
			float deltaZ = Math.abs(mLastZ - z);

			if (deltaX > .5 && mAutoFocus){ //AUTOFOCUS (while it is not autofocusing)
				mAutoFocus = false;
				//mPreview.setCameraFocus(myAutoFocusCallback);
			}
			if (deltaY > .5 && mAutoFocus){ //AUTOFOCUS (while it is not autofocusing)
				mAutoFocus = false;
				//mPreview.setCameraFocus(myAutoFocusCallback);
			}
			if (deltaZ > .5 && mAutoFocus){ //AUTOFOCUS (while it is not autofocusing) */
				mAutoFocus = false;
				//mPreview.setCameraFocus(myAutoFocusCallback);
			}

			mLastX = x;
			mLastY = y;
			mLastZ = z;

		}

		// extra overrides to better understand app lifecycle and assist debugging
		@Override
		protected void onDestroy() {
			super.onDestroy();
			//Log.i(TAG, "onDestroy()");
		}

		@Override
		protected void onPause() {
			super.onPause();
			//Log.i(TAG, "onPause()");
			mSensorManager.unregisterListener(this);
		}

		@Override
		protected void onResume() {
			super.onResume();
			mSensorManager.registerListener(this, mAccel, SensorManager.SENSOR_DELAY_UI);
			//Log.i(TAG, "onResume()");
		}

		@Override
		protected void onRestart() {
			super.onRestart();
			//Log.i(TAG, "onRestart()");
		}

		@Override
		protected void onStop() {
			super.onStop();
			//Log.i(TAG, "onStop()");
		}

		@Override
		protected void onStart() {
			super.onStart();
			//Log.i(TAG, "onStart()");
		}

		public void onAccuracyChanged(Sensor sensor, int accuracy) {
			// TODO Auto-generated method stub

		}

The onSensorChanged takes care of not only causing the autofocus but also invalidating (calling the onDraw()) the TouchView when a boolean is set to true.

Finally we have the Activity lifecycle methods that release resources (camera and sensors) onPause() and registers them onStart(). That is it guys. Try it out and make some cool apps.

Placing a call

guitarbaka — Wed, 08 Feb 2012 23:00:11 +0000

This article describes how to make an application to make calls in Android.

Open your manifest.xml and add the following permissions:

CALL_PRIVILEGED is optional if you want to call Emergency numbers directly without user intervention (like 911).
Create a class CallPhoneTest that extends Activity. This code is extremely simple, just create an intent with the ACTION_CALL and start the Activity:

public class CallPhoneTest extends Activity {

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.call_phone);
		call();
	}

	private void call() {
		try {
			Intent callIntent = new Intent(Intent.ACTION_CALL);
			callIntent.setData(Uri.parse("tel:911"));
			startActivity(callIntent);
		} catch (ActivityNotFoundException activityException) {
			Toast toast = Toast.makeText(this, "Cannot place a call",
					Toast.LENGTH_SHORT);
			toast.show();
		}
	}
}

And that is it!

Parse JSON data from a web server and display on ListView

guitarbaka — Wed, 08 Feb 2012 22:16:54 +0000

This article describes how to create an HTTP connection from an android device to a web server, grab JSON data, parse and display it on a ListView. The ListView is custom thus allowing me to add other Views along the ListView. This was written using Android 2.1 APIs.

Open your manifest.xml and add the following permissions outside of the tag:

Open the main.xml file and add a ListView

Notice here I am using

android:id/list

for the ListView. Why? Most people just implement the ListActivity with the custom layout simple_list_item_1 or any of the layouts that come with android. The problem is, when people want to add over Views (Buttons, TextView, etc) they cannot because they cannot set their main.xml as the contentView, so here I have done it differently.

Now to the code. Create a class JSONParser that extends ListActivity. The first thing we will do is add an ArrayAdapter that uses android’s simple_list_item_1 and uses an internal method populate() to give it the ArrayList.

public class JSONParser extends ListActivity {

	/** Called when the activity is first created. */
	@SuppressWarnings("unchecked")
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		setListAdapter(new ArrayAdapter(
				this,android.R.layout.simple_list_item_1,
				this.populate()));
	}

Now the JSON parsing part. Create the function populate(). Inside create an HttpURLConnection with the URL that contains the json objects.

	private ArrayList populate() {
		ArrayList items = new ArrayList();

		try {
			URL url = new URL
			("http://SOMETHING.json");
			HttpURLConnection urlConnection =
				(HttpURLConnection) url.openConnection();
			urlConnection.setRequestMethod("GET");
			urlConnection.connect();
                        // gets the server json data
			BufferedReader bufferedReader =
				new BufferedReader(new InputStreamReader(
						urlConnection.getInputStream()));

Finally, inside the same function, create a JSONArray and for the length of each JSONArray, get the JSONObject add the items by the TAG (in this case: text).


			String next;
			while ((next = bufferedReader.readLine()) != null){
				JSONArray ja = new JSONArray(next);

				for (int i = 0; i < ja.length(); i++) {
					JSONObject jo = (JSONObject) ja.get(i);
					items.add(jo.getString("text"));
				}
			}
		} catch (MalformedURLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (JSONException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		return items;
	}
}

Want to learn more?

Check out this article on how to connect to a remove server MYSQL database using PHP and display the results in a ListView

Camera API – Simple way to take pictures and save them on SD card

guitarbaka — Wed, 08 Feb 2012 19:18:54 +0000

This article describes a simple way to take pictures using Android’s built in classes and save them to the SD card. It also shows how to display the picture on the screen. All of this in less than 40 lines of code. This was written using Android 2.1 APIs.

Open your manifest.xml and add the following permissions outside of the tag:

Now open the main.xml file and create an ImageView. This will be used to display the picture.

Now for the code:

package com.camera.test;

import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;

import android.app.Activity;
import android.content.Intent;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.os.Environment;
import android.widget.ImageView;

public class CameraTest extends Activity {

	private static final int CAMERA_PIC_REQUEST = 1111;
	private ImageView mImage;

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.camera_test);

		mImage = (ImageView) findViewById(R.id.camera_image);
		//1
		Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);
		startActivityForResult(intent, CAMERA_PIC_REQUEST);
	}

	protected void onActivityResult(int requestCode, int resultCode, Intent data) {
		if (requestCode == CAMERA_PIC_REQUEST) {
			//2
			Bitmap thumbnail = (Bitmap) data.getExtras().get("data");
			mImage.setImageBitmap(thumbnail);
			//3
			ByteArrayOutputStream bytes = new ByteArrayOutputStream();
			thumbnail.compress(Bitmap.CompressFormat.JPEG, 100, bytes);
			//4
			File file = new File(Environment.getExternalStorageDirectory()+File.separator + "image.jpg");
			try {
				file.createNewFile();
				FileOutputStream fo = new FileOutputStream(file);
				//5
				fo.write(bytes.toByteArray());
				fo.close();
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}
	}
}

1. Using android.provider.MediaStore.ACTION_IMAGE_CAPTURE, we can launch an intent to take the picture without having to specify any Camera APIs.
2. From the data extras we get back from ActivityonResult, we can get the image Bitmap and put it in our ImageView.
3. The image Bitmap from number 2 gets compressed as a jpeg for saving and gets stored into a ByteArrayOutputStream.
4. Create a new file that will be stored in the SD card with a name; here “image.jpg”.
5. Write the Bitmap to the file by writing the BiteArrayOutputStream to the file using a FileOutputStream.