Friday, August 12, 2011

Gesture based action

Here we are discussing about how to set that as the gesture listener for the views that I add.
My requirement : I have list of images in a listview with url. When the user wants view the full image then user click the image on the list view
it will take to me the anonther activity and open in a imageview. and as a user wants to tee the next nexe or previous image with come back to listview page

Solution : I have created the HashMap Contains the list of images and pass the selected images name as bundle string. In a detail view created the async task the fetch image from the internet
implement the gestureListener. In this article we discussing about that

Related : gesture move action, gesture based action, example geatures

1. Create a Activity implements OnClickListener
public class MySample1Activity extends Activity implements OnClickListener {
........
}
2. Initialize below required object for gestureListener
ViewConfiguration vc;

static int SWIPE_MAX_OFF_PATH = 250;
static int SWIPE_MIN_DISTANCE = 100;
static int SWIPE_THRESHOLD_VELOCITY = 100;

private GestureDetector gestureDetector;
View.OnTouchListener gestureListener;

3. Set Densitybased velocity
vc = ViewConfiguration.get(this);
SWIPE_MIN_DISTANCE = vc.getScaledTouchSlop();
SWIPE_THRESHOLD_VELOCITY = vc.getScaledMinimumFlingVelocity();

4. Create a Custom GestureListener class which extends SimpleOnGestureListener
class MyGestureDetector extends SimpleOnGestureListener {

}

5. Override the onFling() and implement the geature move action
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
Toast.makeText(MySample1Activity.this, "Left Swipe",
Toast.LENGTH_SHORT).show();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
Toast.makeText(MySample1Activity.this, "Right Swipe",
Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
// nothing
}
return false;
}

Full SourceCode
public class MySample1Activity extends Activity implements OnClickListener {
/** Called when the activity is first created. */
TextView tView;

ViewConfiguration vc;

static int SWIPE_MAX_OFF_PATH = 250;
static int SWIPE_MIN_DISTANCE = 100;
static int SWIPE_THRESHOLD_VELOCITY = 100;

private GestureDetector gestureDetector;
View.OnTouchListener gestureListener;

@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
tView = (TextView) findViewById(R.id.textview1);
vc = ViewConfiguration.get(this);
SWIPE_MIN_DISTANCE = vc.getScaledTouchSlop();
SWIPE_THRESHOLD_VELOCITY = vc.getScaledMinimumFlingVelocity();

gestureDetector = new GestureDetector(new MyGestureDetector());
gestureListener = new View.OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
if (gestureDetector.onTouchEvent(event)) {
return true;
}
return false;
}
};
tView.setOnClickListener(this);
tView.setOnTouchListener(gestureListener);
}

class MyGestureDetector extends SimpleOnGestureListener {
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
float velocityY) {
try {
if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH)
return false;
// right to left swipe
if (e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
Toast.makeText(MySample1Activity.this, "Left Swipe",
Toast.LENGTH_SHORT).show();
} else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE
&& Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) {
Toast.makeText(MySample1Activity.this, "Right Swipe",
Toast.LENGTH_SHORT).show();
}
} catch (Exception e) {
// nothing
}
return false;
}
}

@Override
public void onClick(View v) {
// TODO Auto-generated method stub

}

}

Friday, July 29, 2011

In this blog we are selecting multiple images.Here I have created the custom view components and activity used to get the selected images.

1. Custom ViewComponet

< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
< ImageView android:id="@+id/thumbImage" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_centerInParent="true" />
< CheckBox android:id="@+id/itemCheckBox" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
< /RelativeLayout>

2. SampleActivity

1. Create a ImageAdapter
public class ImageAdapter extends BaseAdapter {
}

2. Inflate the View
mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.mygallert, null);
3. find the required View
imageview = (ImageView) convertView.findViewById(R.id.thumbImage);
checkbox = (CheckBox) convertView.findViewById(R.id.itemCheckBox);

4. Control the image selection
imageview.setBackgroundResource(R.drawable.icon);
checkbox.setId(position);
checkbox.setChecked(false);
checkbox.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
CheckBox cb = (CheckBox) v;
if (cb.isChecked()) {
cb.setChecked(true);
selectedImage.add(v.getId());
} else {
cb.setChecked(false);
selectedImage.remove(v.getId());
}
}
});

4. Track the image selection
selectedImage.add(v.getId());
selectedImage.remove(v.getId());

5. displays the selected Image Position
Toast.makeText(SampleActivity.this,"" + SampleActivity.this.selectedImage, 10).show();

Sample

public class SampleActivity extends Activity {
private ImageAdapter imageAdapter;
private Set selectedImage = new HashSet();

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
GridView imagegrid = (GridView) findViewById(R.id.PhoneImageGrid);
Button selectedImage = (Button) findViewById(R.id.selectBtn);
imageAdapter = new ImageAdapter();
imagegrid.setAdapter(imageAdapter);
selectedImage.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
Toast.makeText(SampleActivity.this,
"" + SampleActivity.this.selectedImage, 10).show();

}
});

}

public class ImageAdapter extends BaseAdapter {
private LayoutInflater mInflater;

public ImageAdapter() {
mInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}

public Object getItem(int position) {
return position;
}

public long getItemId(int position) {
return position;
}

public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageview;
CheckBox checkbox;
convertView = mInflater.inflate(R.layout.mygallert, null);
imageview = (ImageView) convertView.findViewById(R.id.thumbImage);
checkbox = (CheckBox) convertView.findViewById(R.id.itemCheckBox);
imageview.setBackgroundResource(R.drawable.icon);
checkbox.setId(position);
checkbox.setChecked(false);
checkbox.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
CheckBox cb = (CheckBox) v;
if (cb.isChecked()) {
cb.setChecked(true);
selectedImage.add(v.getId());
} else {
cb.setChecked(false);
selectedImage.remove(v.getId());
}
}
});
return convertView;
}

public int getCount() {
return 5;
}
}

}

Required XML
main.xml
< ?xml version="1.0" encoding="utf-8"?>
< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
< Button android:id="@+id/selectBtn" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="Select"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" android:minWidth="200px" />
< GridView android:id="@+id/PhoneImageGrid"
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:numColumns="auto_fit" android:verticalSpacing="10dp"
android:horizontalSpacing="10dp" android:columnWidth="90dp"
android:stretchMode="columnWidth" android:gravity="center"
android:layout_above="@id/selectBtn" />
< /RelativeLayout>

mygallery.xml
< ?xml version="1.0" encoding="utf-8"?>
< RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent" android:layout_height="fill_parent">
< ImageView android:id="@+id/thumbImage" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_centerInParent="true" />
< CheckBox android:id="@+id/itemCheckBox" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentRight="true"
android:layout_alignParentTop="true" />
< /RelativeLayout>