Monday, March 28, 2011

In Android import xml into another xml

Its very common in the UI design that some common element appear many time.
Just like some common signature in all the activities (pages) and all.
Its common that we need to set some component as reusable component.

In this case we can use the <include /> tag. This element does exactly what its name suggest.
To use this is very simple
Declare the reusable component as one layout in the /res/layout, let say commonlayout.xml
Then where ever you need to refer this you can use the following code
<include android:id="@+id/id" layout="@layout/commonlayout"/>
Note that:
  • Here you can override all the layout parameters. This means that any android:layout_* attribute can be used with the <include /> tag
  •  If you want to override the layout dimensions, you must override both android:layout_height and android:layout_width you cannot override only the height or only the width. If you override only one, it will not take effect. (Other layout properties, such as weight, are still inherited from the source layout.)
Refer Creating Reusable UI Components



Monday, March 21, 2011

Pinch Zoom to view completely

Hope you have gone through my previous post Zooming a view completely 
Now to apply pinch zoom we need to override the OnTouchListener.
There are many blogs and code to do pinch zoom in image view me used that logic here
So my main activity class will be like this

public class PinchZoomLayout extends Activity {
 View mainView = null;

 // Remember some things for zooming
 PointF start = new PointF();
 PointF mid = new PointF();

 float oldDist = 1f;
 PointF oldDistPoint = new PointF();

 public static String TAG = "ZOOM";

 static final int NONE = 0;
 static final int DRAG = 1;
 static final int ZOOM = 2;
 int mode = NONE;

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mainView = (LinearLayout) findViewById(R.id.linearLayout);

  Button buttonZoomOut = (Button) findViewById(R.id.buttonZoomOut);
  Button buttonNormal = (Button) findViewById(R.id.buttonNormal);
  Button buttonZoomIn = (Button) findViewById(R.id.buttonZoomIn);

  buttonZoomOut.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(0.5f, 0.5f, new PointF(0, 0));
   }
  });
  buttonNormal.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(1f, 1f, new PointF(0, 0));
   }
  });
  buttonZoomIn.setOnClickListener(new OnClickListener() {
   @Override
   public void onClick(View v) {
    zoom(2f, 2f, new PointF(0, 0));
   }
  });

  mainView.setOnTouchListener(new OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
    Log.d(TAG, "mode=DRAG");
    switch (event.getAction() & MotionEvent.ACTION_MASK) {
    case MotionEvent.ACTION_DOWN:
     start.set(event.getX(), event.getY());
     Log.d(TAG, "mode=DRAG");
     mode = DRAG;

     break;
    case MotionEvent.ACTION_POINTER_DOWN:
     oldDist = spacing(event);
     oldDistPoint = spacingPoint(event);
     Log.d(TAG, "oldDist=" + oldDist);
     if (oldDist > 10f) {
      midPoint(mid, event);
      mode = ZOOM;
      Log.d(TAG, "mode=ZOOM");
     }
     System.out.println("current time :" + System.currentTimeMillis());
     break;// return !gestureDetector.onTouchEvent(event);
    case MotionEvent.ACTION_UP:
    case MotionEvent.ACTION_POINTER_UP:
     Log.d(TAG, "mode=NONE");
     mode = NONE;
     break;
    case MotionEvent.ACTION_MOVE:
     if (mode == DRAG) {

     } else if (mode == ZOOM) {
      PointF newDist = spacingPoint(event);
      float newD = spacing(event);
      Log.e(TAG, "newDist=" + newDist);
      float[] old = new float[9];
      float[] newm = new float[9];
      Log.e(TAG, "x=" + old[0] + ":&:" + old[2]);
      Log.e(TAG, "y=" + old[4] + ":&:" + old[5]);
      float scale = newD / oldDist;
      float scalex = newDist.x / oldDistPoint.x;
      float scaley = newDist.y / oldDistPoint.y;
      zoom(scale, scale, start);
     }
     break;
    }
    return true;
   }
  });
 }

 /** 
  * zooming is done from here 
  */
 public void zoom(Float scaleX, Float scaleY, PointF pivot) {
  mainView.setPivotX(pivot.x);
  mainView.setPivotY(pivot.y);
  mainView.setScaleX(scaleX);
  mainView.setScaleY(scaleY);
 }

 /**
  * space between the first two fingers
  */
 private float spacing(MotionEvent event) {
  // ...
  float x = event.getX(0) - event.getX(1);
  float y = event.getY(0) - event.getY(1);
  return FloatMath.sqrt(x * x + y * y);
 }

 private PointF spacingPoint(MotionEvent event) {
  PointF f = new PointF();
  f.x = event.getX(0) - event.getX(1);
  f.y = event.getY(0) - event.getY(1);
  return f;
 }

 /**
  * the mid point of the first two fingers
  */
 private void midPoint(PointF point, MotionEvent event) {
  // ...
  float x = event.getX(0) + event.getX(1);
  float y = event.getY(0) + event.getY(1);
  point.set(x / 2, y / 2);
 }
}
 
But this zoom is not much smooth :(.

Zooming a view completely

Here I'm discussing how to zoom a complete view with different UI controls in it.
For this i used setScaleX and setScaleY.

mainView.setScaleX(scaleX);
mainView.setScaleY(scaleY);
 
This will Scale the the view in X and Y axis. A value of scale 1 means that no scaling is applied.
In order to work this correctly it need to specify the pivot point correctly. We can set our pivot point using setPivotX and setPivotY.

mainView.setPivotX(pivot.x);
mainView.setPivotY(pivot.y);
 
My complete code 

Main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:id="@+id/linearLayout"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <LinearLayout
  android:layout_width="wrap_content"
  android:orientation="horizontal"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <Button
   android:text="Zoom In"
   android:id="@+id/buttonZoomIn"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Normal"
   android:id="@+id/buttonNormal"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
  <Button
   android:text="Zoom Out"
   android:id="@+id/buttonZoomOut"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 </LinearLayout>
 <TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/hello" />
 <ProgressBar
  android:id="@+id/progressBar"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <ImageView
  android:id="@+id/imageView"
  android:src="@drawable/honeycombdroid"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" />
 <LinearLayout
  android:layout_width="200dp"
  android:orientation="vertical"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayout1">
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <EditText
   android:id="@+id/editText1"
   android:layout_height="wrap_content"
   android:text="EditText"
   android:layout_width="match_parent"></EditText>
  <Button
   android:text="Button"
   android:id="@+id/button2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"></Button>
 </LinearLayout>
</LinearLayout>
 

Here me only use that three buttons
buttonZoomIn , buttonNormal and buttonZoomOut
Then My main activity class

public class ZoomLayout extends Activity {
 View mainView = null;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  mainView =(LinearLayout)findViewById(R.id.linearLayout);
  
  Button buttonZoomOut = (Button)findViewById(R.id.buttonZoomOut);
  Button buttonNormal = (Button)findViewById(R.id.buttonNormal);
  Button buttonZoomIn = (Button)findViewById(R.id.buttonZoomIn);
  
  buttonZoomOut.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(0.5f,0.5f,new PointF(0,0));    
   }
  });
  buttonNormal.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(1f,1f,new PointF(0,0));  
   }
  });
  buttonZoomIn.setOnClickListener(new OnClickListener() {
   
   @Override
   public void onClick(View v) {
    zoom(2f,2f,new PointF(0,0));   
   }
  });
 }
 
 /** zooming is done from here */
 public void zoom(Float scaleX,Float scaleY,PointF pivot){
  mainView.setPivotX(pivot.x);
  mainView.setPivotY(pivot.y);  
  mainView.setScaleX(scaleX);
  mainView.setScaleY(scaleY);  
 } 
}
buttonZoomOut
Here zoom is the main function for zooming

Friday, March 18, 2011

Load Image from server using thread

This is a project where I implemented how to load image form server
Here we have a image URL and need to load that image to a image view

In the layout xml I defined a web view

main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 <TextView
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/hello" />
 <ProgressBar    
   android:id="@+id/progressBar"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content" />
 <ImageView
   android:id="@+id/imageView"
   android:visibility="gone"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"/>
 
</LinearLayout>

Then in my activity i have used a thread (ImageDownlaodThread) to load the image from server. Where the function LoadImageFromWebOperations will read to image to InputStream, this is later converted to Drawable by Drawable.createFromStream

Using the Handler, when the thread convert to drawable it will be set to the image view


Then my main activity ImageDownload.java


import java.io.IOException;
import java.io.InputStream;
import java.net.MalformedURLException;
import java.net.URL;

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.widget.ImageView;
import android.widget.ProgressBar;

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

  ImageView mainImageView = (ImageView) findViewById(R.id.imageView);
  ProgressBar progressBar = (ProgressBar) findViewById(R.id.progressBar);
  String imageurl = "http://developer.android.com/assets/images/home/honeycomb-android.png";
  
  ImageDownloadMessageHandler imageDownloadMessageHandler1= new ImageDownloadMessageHandler(progressBar, mainImageView);
  ImageDownlaodThread imageDownlaodThread = new ImageDownlaodThread(imageDownloadMessageHandler1,imageurl);
  imageDownlaodThread.start();
  
 }
 
 class ImageDownlaodThread extends Thread {
  ImageDownloadMessageHandler imageDownloadMessageHandler;
  String imageUrl;

  public ImageDownlaodThread(ImageDownloadMessageHandler imageDownloadMessageHandler, String imageUrl) {
   this.imageDownloadMessageHandler = imageDownloadMessageHandler;
   this.imageUrl = imageUrl;
  }

  @Override
  public void run() {
   Drawable drawable = LoadImageFromWebOperations(imageUrl);
   Message message = imageDownloadMessageHandler.obtainMessage(1, drawable);
   imageDownloadMessageHandler.sendMessage(message);
   System.out.println("Message sent");
  }

 }

 class ImageDownloadMessageHandler extends Handler {
  ProgressBar progressBar;
  View imageTextView;

  public ImageDownloadMessageHandler(ProgressBar progressBar, View imageTextView) {
   this.progressBar = progressBar;
   this.imageTextView = imageTextView;
  }

  @Override
  public void handleMessage(Message message) {
   progressBar.setVisibility(View.GONE);
   imageTextView.setBackgroundDrawable(((Drawable) message.obj));
   imageTextView.setVisibility(View.VISIBLE);
  }

 }

 Drawable LoadImageFromWebOperations(String url) {
  Drawable d = null;
  InputStream is = null;
  try {
   is = (InputStream) new URL(url).getContent();
   d = Drawable.createFromStream(is, "src name");
  } catch (MalformedURLException e) {
   e.printStackTrace();
  } catch (IOException e) {
   e.printStackTrace();
  }
  return d;
 }

}