Monday, December 24, 2012

Handle onClick for our custom LinearLayout for Gallery-like HorizontalScrollView

The post "Implement Gallery-like HorizontalScrollView" and "Implement custom LinearLayout for Gallery-like HorizontalScrollView" explain how to implement Gallery-like HorizontalScrollView.

In this post, we will implement OnClickListener for the ImageView(s) to handle user click.

Handle onClick for our custom LinearLayout for Gallery-like HorizontalScrollView


Modify MyHorizontalLayout.java from the exercise "Implement custom LinearLayout for Gallery-like HorizontalScrollView" to call setOnClickListener() when create ImageView, in getImageView() method. For "Implement Gallery-like HorizontalScrollView" without custom LinearLayout, you can do the same in insertPhoto() method.

package com.example.androidhorizontalscrollviewgallery;
import java.util.ArrayList;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MyHorizontalLayout extends LinearLayout {
 
 Context myContext;
 ArrayList<String> itemList = new ArrayList<String>();

 public MyHorizontalLayout(Context context) {
  super(context);
  myContext = context;
 }

 public MyHorizontalLayout(Context context, AttributeSet attrs) {
  super(context, attrs);
  myContext = context;
 }

 public MyHorizontalLayout(Context context, AttributeSet attrs,
   int defStyle) {
  super(context, attrs, defStyle);
  myContext = context;
 }
 
 void add(String path){
  int newIdx = itemList.size();
  itemList.add(path);
  addView(getImageView(newIdx));
 }
 
 ImageView getImageView(final int i){
  Bitmap bm = null;
  if (i < itemList.size()){
   bm = decodeSampledBitmapFromUri(itemList.get(i), 220, 220);
  }
  
  ImageView imageView = new ImageView(myContext);
     imageView.setLayoutParams(new LayoutParams(220, 220));
     imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
     imageView.setImageBitmap(bm);
     
     imageView.setOnClickListener(new OnClickListener(){

   @Override
   public void onClick(View v) {
    Toast.makeText(myContext, 
      "Clicked - " + itemList.get(i), 
      Toast.LENGTH_LONG).show();
   }});

  return imageView;
 }
 
 public Bitmap decodeSampledBitmapFromUri(String path, int reqWidth, int reqHeight) {
     Bitmap bm = null;
     
     // First decode with inJustDecodeBounds=true to check dimensions
     final BitmapFactory.Options options = new BitmapFactory.Options();
     options.inJustDecodeBounds = true;
     BitmapFactory.decodeFile(path, options);
     
     // Calculate inSampleSize
     options.inSampleSize = calculateInSampleSize(options, reqWidth, reqHeight);
     
     // Decode bitmap with inSampleSize set
     options.inJustDecodeBounds = false;
     bm = BitmapFactory.decodeFile(path, options); 
     
     return bm;  
    }
    
    public int calculateInSampleSize(
      
     BitmapFactory.Options options, int reqWidth, int reqHeight) {
     // Raw height and width of image
     final int height = options.outHeight;
     final int width = options.outWidth;
     int inSampleSize = 1;
        
     if (height > reqHeight || width > reqWidth) {
      if (width > height) {
       inSampleSize = Math.round((float)height / (float)reqHeight);   
      } else {
       inSampleSize = Math.round((float)width / (float)reqWidth);   
      }   
     }
     
     return inSampleSize;   
    }
 
}


download filesDownload the files.

5 comments:

Anonymous said...

can you give me example to set background container for image in your scrollable list.. like cover for each image into your list

Anonymous said...

Great tutorial.
How put a imageview bellow the ribbon of pictures to show each picture that the user click? and is it also possible to enable sweep with finger on that imageview.

Thanks a lot.

pranav said...

How to start another avtivity with onClick on image and get Bitmap of image there?

Anonymous said...

Is there someway to have multiple scrollviews and the user selects an image from each to be passed to a new activity?

Quách Thiên said...

Great tutorial,

I add code to startActivity when click on the image, but I don't know how to back to the position of the clicked image when I click on Back button. Could you help?

Thank you so much!