Touch to image view not working

Question

I've made a simple app in which I am using 3 tabs. Each tab is having separate classes and layouts. First tab shows map. Second tab will show the camera from which the user can take picture(s) and third tab is off Pictures in which the captured images are viewed in the GridView. All tabs are working good. Now I want is to show full ImageView when a user tap on any image.

For all of this I am using this tutorial. So I followed each and every step in it and the things are going good. But for full ImageView the code is not working.

Below is my picture Fragment

Pictures.java

public class Pictures extends Fragment implements MainActivity.Updateable {

private Utils utils;
private ArrayList<String> imagePaths = new ArrayList<String>();
private GridViewImageAdapter adapter;
private GridView gridView;
private int columnWidth;


@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    View rootView = inflater.inflate(R.layout.pictures, container, false);

    gridView = (GridView) rootView.findViewById(R.id.grid_view);
    utils = new Utils(getContext());

    // Initilizing Grid View
    InitilizeGridLayout();

    // loading all image paths from SD card
    imagePaths = utils.getFilePaths();

    // Gridview adapter

    adapter = new GridViewImageAdapter(getActivity(), imagePaths, columnWidth);
    /*adapter = new GridViewImageAdapter(Pictures.this, imagePaths,
            columnWidth);*/

    // setting grid view adapter
    gridView.setAdapter(adapter);

    //((BaseAdapter) adapter).notifyDataSetChanged();
    //adapter.notifyDataSetChanged();


    return rootView;
}

private void InitilizeGridLayout() {

    Resources r = getResources();
    float padding = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
            AppConstant.GRID_PADDING, r.getDisplayMetrics());

    columnWidth = (int) ((utils.getScreenWidth() - ((AppConstant.NUM_OF_COLUMNS + 1) * padding)) / AppConstant.NUM_OF_COLUMNS);

    gridView.setNumColumns(AppConstant.NUM_OF_COLUMNS);
    gridView.setColumnWidth(columnWidth);
    gridView.setStretchMode(GridView.NO_STRETCH);
    gridView.setPadding((int) padding, (int) padding, (int) padding,
            (int) padding);
    gridView.setHorizontalSpacing((int) padding);
    gridView.setVerticalSpacing((int) padding);
}


@Override
public void update() {
    if(adapter !=null)
    {
        adapter.notifyDataSetChanged();

    }
    else
    {
        Log.d(getTag(),"null");
    }
}}

Now for full screen view, I have made a new Activity a two separate Layouts one for screen and one for image as below

fullscreen.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" /></LinearLayout>

fullscreenImage.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
    android:id="@+id/imgDisplay"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:scaleType="fitCenter" />

<Button
    android:id="@+id/btnClose"
    android:layout_width="wrap_content"
    android:layout_height="30dp"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_marginRight="15dp"
    android:layout_marginTop="15dp"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    android:background="@drawable/button_background"
    android:textColor="#ffffff"
    android:text="Close" /></RelativeLayout>

Now i created a Adapter class

FullScreenImageAdapter.java

public class FullScreenImageAdapter extends PagerAdapter {

private Activity _activity;
private ArrayList<String> _imagePaths;
private LayoutInflater inflater;

// constructor
public FullScreenImageAdapter(Activity activity,
                              ArrayList<String> imagePaths) {
    this._activity = activity;
    this._imagePaths = imagePaths;
}

@Override
public int getCount() {
    return this._imagePaths.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
    return view == ((RelativeLayout) object);
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    ImageView imgDisplay;
    Button btnClose;

    inflater = (LayoutInflater) _activity
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View viewLayout = inflater.inflate(R.layout.layout_fullscreen_image, container,
            false);

    imgDisplay = (ImageView) viewLayout.findViewById(R.id.imgDisplay);
    btnClose = (Button) viewLayout.findViewById(R.id.btnClose);

    BitmapFactory.Options options = new BitmapFactory.Options();
    options.inPreferredConfig = Bitmap.Config.ARGB_8888;
    Bitmap bitmap = BitmapFactory.decodeFile(_imagePaths.get(position), options);
    imgDisplay.setImageBitmap(bitmap);

    // close button click event
    btnClose.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            _activity.finish();
        }
    });

    ((ViewPager) container).addView(viewLayout);

    return viewLayout;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    ((ViewPager) container).removeView((RelativeLayout) object);

}}

Now the full screen Activity

FullScreenViewActivity.java

public class FullScreenViewActivity extends Activity {

private Utils utils;
private FullScreenImageAdapter adapter;
private ViewPager viewPager;

@Override
protected void onCreate(Bundle savedInstanceState){

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

    viewPager = (ViewPager)findViewById(R.id.pager);

    utils = new Utils(getApplicationContext());

    Intent i = getIntent();

    int position = i.getIntExtra("position",0);

    adapter = new FullScreenImageAdapter(FullScreenViewActivity.this,
            utils.getFilePaths());

    viewPager.setAdapter(adapter);

    // displaying selected image first
    viewPager.setCurrentItem(position);

}}

Now when i click on any image nothing happens, I got no errors on logcat, no any warnings nor any app crash.

I have debugged the app but it doesn't goes to that point.

I'm stuck to it, and don't know what to do

Any help would be highly appreciated.

Answer 1

_{This might not be the answer that you are looking for! But still if your code does not work this will help you towards your solution.If you know the whole process you might be able to plug and play this.}

This answer is taken from the same tutorial guy that you followed which has kind of a same pattern with your code. Note image array is hard-coded.

Have a look, Take a special note at AndroidGridLayoutActivity !

Launcher Activity : HomeActivity Other activity you need in your Manifest :FullImageActivity

---

grid_layout.xml >

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:fitsSystemWindows="true"
    android:id="@+id/grid_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:numColumns="3"
    android:horizontalSpacing="5dp"
    android:verticalSpacing="5dp"
    android:gravity="center">
</GridView>

full_image.xml >

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

    <ImageView android:id="@+id/full_image_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout

HomeActivity >

public class HomeActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.grid_layout);
        GridView gridView = (GridView) findViewById(R.id.grid_view);
        // Instance of ImageAdapter Class
        gridView.setAdapter(new ImageAdapter(this));
    }
}

AndroidGridLayoutActivity > (_{check the comments in this})

public class AndroidGridLayoutActivity extends Activity {

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

        GridView gridView = (GridView) findViewById(R.id.grid_view);

        // Instance of ImageAdapter Class
        gridView.setAdapter(new ImageAdapter(this));

        gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View v, int position, long id) {
                //----------------------Seems In your code you are missing this Part----------------------
                // Sending image id to FullScreenActivity
                Intent i = new Intent(getApplicationContext(), FullImageActivity.class);
                // passing array index
                i.putExtra("id", position);
                startActivity(i);
            }
        });
    }
}

ImageAdapter >

 public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Keep all Images in array - I have hard coded this
    public Integer[] mThumbIds = {
            R.drawable.casper, R.drawable.casper,
            R.drawable.monkey, R.drawable.monkey,
            R.drawable.cub, R.drawable.cub,
            R.drawable.mouse, R.drawable.mouse,
            R.drawable.casper, R.drawable.casper,
            R.drawable.monkey, R.drawable.monkey,
            R.drawable.cub, R.drawable.cub,
            R.drawable.mouse
    };

    public ImageAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(150, 150));  /// IF YOU WANT TO CHANGE IMAGE SIZE CHANGE HERE
        return imageView;
    }

}

_{As a separate project this will work.In case if you cant fix your issue plug and play this.Just posting as a help!}

Output >

Answer 2

You can try using OnItemClickListener on your grid view like below

 gridView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                //Get your item here
                adapterView.getItemAtPosition(i);
               //Do your code here 
            }
        });

Please make sure that you removed your click listener from getView otherwise it will make conflict.

Answer 3

Please make sure you have to intent single imageview class

Send position id to imageview class I used below code for full screen image view

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {

        Intent i = new Intent(mContext, Singleimageview.class);
        i.putExtra("pos", (Integer) itemView.getTag() + "");

        mContext.startActivity(i);
        overridePendingTransition(R.anim.pull_in_left, R.anim.pull_out_right);
    }
});