xml - Failed to display zoom image and other contents on same UI in Android?

Question

i am newbie in android can someone please help me,i am following this tutorial ZOOM IMAGEVIEW CLASS my problem is that i want to click on an imageview on clicking it will move to next activity that will show previous clicked activity zoom image in upper part and rest of contents in rest of the part but right now i am failed to load my XML file here by using this tutorial.Its just zooming the image

Code here:

 protected void onCreate(Bundle savedInstanceState)
    {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.sample); // i want to show this layout how can i show zoom image in this layout.
    Intent intent = getIntent();
    String stringData = intent.getStringExtra("imageName");//this is image file name
    Log.i("stringData",""+stringData);

    String PACKAGE_NAME = getApplicationContext().getPackageName();
    int imgId = getResources().getIdentifier(PACKAGE_NAME+":drawable/"+stringData , null, null);
    System.out.println("IMG ID :: "+imgId);
    System.out.println("PACKAGE_NAME :: "+PACKAGE_NAME);
     Bitmap bitmap = BitmapFactory.decodeResource(getResources(),imgId);
     TouchImageView touch = new TouchImageView(this);
    touch.setImageBitmap(bitmap);
    touch.setMaxZoom(4f); //change the max level of zoom, default is 3f

    //ImageView image = (ImageView)findViewById(R.id.img1);
    //image.setImageBitmap(bitmap);
    setContentView(touch);
}

Here is the Xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

        <ImageView
            android:id="@+id/img1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:src="@drawable/icon_ask_fatwa_one" />

    <LinearLayout 
        android:id="@+id/layout_buttons"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
    <ImageView 
        android:id="@+id/btn_email_fatwa"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/email"
        android:layout_weight="1"/>    
     <ImageView 
        android:id="@+id/btn_share_fatwa"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/share_fatwa"
        android:layout_weight="1"/> 
        <ImageView 
        android:id="@+id/btn_save_fatwa"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/save_fatwa"
        android:layout_weight="1"/>    

    </LinearLayout>    

</LinearLayout>

Answer 1

You are using setContentView(touch); that is hiding your previously setup of setContentView(R.layout.sample);
All you need do is to put this TouchImageView in your sample.xml Layout file like this.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" >

    <ImageView
        android:id="@+id/img1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/icon_ask_fatwa_one" />

   <com.example.zoomimagesample.TouchImageView
        android:id="@+id/YOUR_DESIRED_ID"
        android:layout_width="fill_parent"
        android:layout_height="OUR_DESIRED_HEIGHT"
         />

<LinearLayout 
    android:id="@+id/layout_buttons"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
<ImageView 
    android:id="@+id/btn_email_fatwa"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/email"
    android:layout_weight="1"/>    
 <ImageView 
    android:id="@+id/btn_share_fatwa"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/share_fatwa"
    android:layout_weight="1"/> 
    <ImageView 
    android:id="@+id/btn_save_fatwa"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/save_fatwa"
    android:layout_weight="1"/>    

</LinearLayout>    

And edit your onCreate(...) method like this:

protected void onCreate(Bundle savedInstanceState)
{

super.onCreate(savedInstanceState);
setContentView(R.layout.sample); // i want to show this layout how can i show zoom image in this layout.
Intent intent = getIntent();
String stringData = intent.getStringExtra("imageName");//this is image file name
Log.i("stringData",""+stringData);

String PACKAGE_NAME = getApplicationContext().getPackageName();
int imgId = getResources().getIdentifier(PACKAGE_NAME+":drawable/"+stringData , null, null);
System.out.println("IMG ID :: "+imgId);
System.out.println("PACKAGE_NAME :: "+PACKAGE_NAME);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),imgId);
TouchImageView touch = (TouchImageView)findViewById(R.id.ID_THAT_YOU_ASSIGNED_TO_THE_TOUCH_IMAGE)VIEW);
touch.setImageBitmap(bitmap);
touch.setMaxZoom(4f); //change the max level of zoom, default is 3f

//ImageView image = (ImageView)findViewById(R.id.img1);
//image.setImageBitmap(bitmap);
//setContentView(touch);
}

EDIT :
You are missing the constructors that is used to invoke your View via XML:

Here add these two constructors:

public TouchImageView(Context context, AttributeSet attrs, int defStyle) {
   super(context, attrs, defStyle);
   super.setClickable(true);
   this.context = context;
   mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
   matrix.setTranslate(1f, 1f);
   m = new float[9];
   setImageMatrix(matrix);
   setScaleType(ScaleType.MATRIX);

   setOnTouchListener(new OnTouchListener() {

       @Override
       public boolean onTouch(View v, MotionEvent event) {
           mScaleDetector.onTouchEvent(event);

           matrix.getValues(m);
           float x = m[Matrix.MTRANS_X];
           float y = m[Matrix.MTRANS_Y];
           PointF curr = new PointF(event.getX(), event.getY());

           switch (event.getAction()) {
               case MotionEvent.ACTION_DOWN:
                   last.set(event.getX(), event.getY());
                   start.set(last);
                   mode = DRAG;
                   break;
               case MotionEvent.ACTION_POINTER_DOWN:
                   last.set(event.getX(), event.getY());
                   start.set(last);
                   mode = ZOOM;
                   break;
               case MotionEvent.ACTION_MOVE:
                   if (mode == ZOOM || (mode == DRAG && saveScale > minScale)) {
                       Log.d("******", "ZOOM OR DRAG");
                       float deltaX = curr.x - last.x;
                       float deltaY = curr.y - last.y;
                       float scaleWidth = Math.round(origWidth * saveScale);
                       float scaleHeight = Math.round(origHeight * saveScale);
                       if (scaleWidth < width) {
                           deltaX = 0;
                           if (y + deltaY > 0)
                               deltaY = -y;
                           else if (y + deltaY < -bottom)
                               deltaY = -(y + bottom);
                       } else if (scaleHeight < height) {
                           deltaY = 0;
                           if (x + deltaX > 0)
                               deltaX = -x;
                           else if (x + deltaX < -right)
                               deltaX = -(x + right);
                       } else {
                           if (x + deltaX > 0)
                               deltaX = -x;
                           else if (x + deltaX < -right)
                               deltaX = -(x + right);

                           if (y + deltaY > 0)
                               deltaY = -y;
                           else if (y + deltaY < -bottom)
                               deltaY = -(y + bottom);
                       }
                       matrix.postTranslate(deltaX, deltaY);
                       last.set(curr.x, curr.y);
                   }else if(mode == DRAG && saveScale == minScale) {
                       Log.d("******", "DRAG");
                   }
                   break;

               case MotionEvent.ACTION_UP:
                   mode = NONE;
                   int xDiff = (int) Math.abs(curr.x - start.x);
                   int yDiff = (int) Math.abs(curr.y - start.y);
                   if (xDiff < CLICK && yDiff < CLICK)
                       performClick();
                   break;

               case MotionEvent.ACTION_POINTER_UP:
                   mode = NONE;
                   break;
           }
           setImageMatrix(matrix);
           invalidate();
           return true; // indicate event was handled
       }

   });
  }

  public TouchImageView(Context context, AttributeSet attrs) {
   super(context, attrs);
   super.setClickable(true);
   this.context = context;
   mScaleDetector = new ScaleGestureDetector(context, new ScaleListener());
   matrix.setTranslate(1f, 1f);
   m = new float[9];
   setImageMatrix(matrix);
   setScaleType(ScaleType.MATRIX);

   setOnTouchListener(new OnTouchListener() {

       @Override
       public boolean onTouch(View v, MotionEvent event) {
           mScaleDetector.onTouchEvent(event);

           matrix.getValues(m);
           float x = m[Matrix.MTRANS_X];
           float y = m[Matrix.MTRANS_Y];
           PointF curr = new PointF(event.getX(), event.getY());

           switch (event.getAction()) {
               case MotionEvent.ACTION_DOWN:
                   last.set(event.getX(), event.getY());
                   start.set(last);
                   mode = DRAG;
                   break;
               case MotionEvent.ACTION_POINTER_DOWN:
                   last.set(event.getX(), event.getY());
                   start.set(last);
                   mode = ZOOM;
                   break;
               case MotionEvent.ACTION_MOVE:
                   if (mode == ZOOM || (mode == DRAG && saveScale > minScale)) {
                       Log.d("******", "ZOOM OR DRAG");
                       float deltaX = curr.x - last.x;
                       float deltaY = curr.y - last.y;
                       float scaleWidth = Math.round(origWidth * saveScale);
                       float scaleHeight = Math.round(origHeight * saveScale);
                       if (scaleWidth < width) {
                           deltaX = 0;
                           if (y + deltaY > 0)
                               deltaY = -y;
                           else if (y + deltaY < -bottom)
                               deltaY = -(y + bottom);
                       } else if (scaleHeight < height) {
                           deltaY = 0;
                           if (x + deltaX > 0)
                               deltaX = -x;
                           else if (x + deltaX < -right)
                               deltaX = -(x + right);
                       } else {
                           if (x + deltaX > 0)
                               deltaX = -x;
                           else if (x + deltaX < -right)
                               deltaX = -(x + right);

                           if (y + deltaY > 0)
                               deltaY = -y;
                           else if (y + deltaY < -bottom)
                               deltaY = -(y + bottom);
                       }
                       matrix.postTranslate(deltaX, deltaY);
                       last.set(curr.x, curr.y);
                   }else if(mode == DRAG && saveScale == minScale) {
                       Log.d("******", "DRAG");
                   }
                   break;

               case MotionEvent.ACTION_UP:
                   mode = NONE;
                   int xDiff = (int) Math.abs(curr.x - start.x);
                   int yDiff = (int) Math.abs(curr.y - start.y);
                   if (xDiff < CLICK && yDiff < CLICK)
                       performClick();
                   break;

               case MotionEvent.ACTION_POINTER_UP:
                   mode = NONE;
                   break;
           }
           setImageMatrix(matrix);
           invalidate();
           return true; // indicate event was handled
       }

   });
 }

I hope this helps.