Android viewpager plus imageview

Question

I'm trying to create an Android app which will work in the following manner:

I have a ViewPager item loaded with 10 images: that isn't a problem.

Now, when I click into the image shown in the ViewPager, I must display it on an ImageView field below the ViewPager.

How do I implement the method to copy the image from the ViewPager to the ImageView?

Here is my code:

SecondActivity.java

package com.example.logger;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.widget.ImageView;
import android.view.ViewGroup;

public class SecondActivity extends Activity {

    private static final int NUM_PAGES = 10;

    private ViewPager mpager;

    private MyPagerAdapter mPagerAdapter;
    private int [] pics = {R.drawable.android_interfaz_layout_estructura_final, R.drawable.baixa, R.drawable.baixada, R.drawable.greenprogressbar,
            R.drawable.layout_keyboard, R.drawable.linerlay, R.drawable.merge1, R.drawable.o2zds, R.drawable.regbd,
            R.drawable.s7qrs};

    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);
        mPagerAdapter = new MyPagerAdapter();
        mpager = (ViewPager) findViewById(R.id.viewer);
        mpager.setAdapter (mPagerAdapter);
    }

    private class MyPagerAdapter extends PagerAdapter
    {

        @Override
        public int getCount() {
            // TODO Auto-generated method stub
            return pics.length;
        }

        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            // TODO Auto-generated method stub
            return false;
        }

        @Override
        public Object instantiateItem(View collection, int position) {
            ImageView view = new ImageView (SecondActivity.this);
            view.setImageResource (pics[position]);
            ((ViewPager) collection).addView(view, 0);
            return view;
        }

        }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.second, menu);
        return true;
    }

     public void onClick (View v)
     {
        // TODO Auto-generated method stub
         //aquí anirà la funció per traslladar la image de la gallery a la pantalla
         mpager.setVisibility(View.VISIBLE);
         mpager.setCurrentItem(v.getId());

     }

        }

End .java

And here is my layout as well:

activity_second.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".SecondActivity" >


    <android.support.v4.view.ViewPager
        android:padding="16dp"
        android:id="@+id/viewer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         android:layout_marginTop="10dp"
         android:layout_weight="0.70"
        />

    <ImageView 

        android:id="@+id/big_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_below="viewer"
         android:layout_weight="0.30"

        />

</RelativeLayout>

end .xml

I would be very grateful if you could help me out.

Yours sincerely,

Mauro.

Answer 1

You can use tag for putting additional information in a view.

 @Override
 public Object instantiateItem(View collection, int position) {
     ImageView view = new ImageView (SecondActivity.this);
     view.setImageResource (pics[position]);
     ((ViewPager) collection).addView(view, 0);

     //I use Integer, but you can use any object.
     view.setTag (Integer.valueOf(pics[position]));
     view.setOnClickListener(mPageClickListener);
     return view;
 }

 //ViewPaged don't have itemClickListener.
 //You should use own OnClickListener for every created View.
 private OnClickListener mPageClickListener = new OnClickListener() {   
    @Override
    public void onClick(View v) {
        //Getting tag from view.
        Integer picId = (Integer) v.getTag();
        // ... 
    }
};

Answer 2

you can have function called showImage in your activity as following:

public void showImage (int position,View view){
   //View is your view that you returned from instantiateItem and position is it's postion in array you can get the image resource id using this position ans set it to the ImageView
}

And in adapter:

private class MyPagerAdapter extends PagerAdapter {

    <YourActivityClass> activity;
    public MyPagerAdapter(<YourActivityClass> activity){
        this.activity=activity;
    }
    public Object instantiateItem(View collection, int position) {
        //return a view for view pager
    }

    @Override
public void setPrimaryItem(ViewGroup container, int position,
                Object object) {
   // TODO Auto-generated method stub
       super.setPrimaryItem(container, position, object);
       activity.showImage(position,(View)object);
}

} 

Answer 3

You could hold a reference to the current drawable which you set in instantiateItem and set that to your big image when clicking the item.