I'm making use of Viewpager in my application.. when the user swipes left or right, I'll show next or previous image - basically a slideshow (of images) kind of app..
If the user taps on the app, I want to flip a view in ViewPager.. a view behind every single view - user must be able to flip the view when he taps on it.
This is the code,
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
.... <some code> ....
viewPager = (ViewPager) findViewById(R.id.main_viewpager);
ImagePagerAdapter adapter = new ImagePagerAdapter();
viewPager.setAdapter(adapter);
PageListener pageListener = new PageListener();
viewPager.setOnPageChangeListener((OnPageChangeListener) pageListener);
final GestureDetector tapGestureDetector = new GestureDetector(this, new TapGestureListener());
viewPager.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
tapGestureDetector.onTouchEvent(event);
return false;
}
});
}
private class TapGestureListener extends GestureDetector.SimpleOnGestureListener{
#Override
public boolean onSingleTapConfirmed(MotionEvent e) {
// HERE I CAPTURED SINGLE TAP.. HOW DO I CHANGE THE VIEW OF VIEWPAGER?
return false;
}
}
I think you should set onTouchEvent to the View inside the page, not to the whole viewpager.
In the ImageViewPagerAdapter, you have
#Override
public Object instantiateItem(ViewGroup container, final int position) {
when create the view, I assume an ImageView, set the onTouchListener to it so you have a reference to the view that can be touched.
For the flipping itself take a look at this example, it's very clear.
EDIT:
here an example I copy pasted from an app I made, I cut off the actual code inside the onclicklistener because it was quite long and not relevant. I used this method because inside istantiateItem() you create the view you want to attach the listener to.
#Override
public Object instantiateItem(ViewGroup container, final int position) {
Context context = MainActivity.this;
Log.e("InstantiateItem",Integer.toString(position));
ImageView imageView = new ImageView(context);
imageView.setImageResource(mImages[position]);
imageView.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// do some stuf when clicked...to see if it works you could try
Log.e("Click on image",Integer.toString(position));
}
});
((ViewPager) container).addView(imageView, 0);
return imageView;
}
Related
In my activity I have a OnPageChangeListener and view Pager implemented.
On onPageSelectedin function I call function name viewPagerHandler, when I have all the logic for single viewPager Page (Buttons, actions depended of current page etc.)
public class ActivityClass extends Activity implements ViewPager.OnPageChangeListener, View.OnClickListener{
protected void onCreate(Bundle savedInstanceState) {
viewPager=(ViewPager)findViewById(R.id.Pager);
adapter= new
ViewPageAdapter(ActivityClass.this,list,imagesList);
viewPager.setAdapter(adapter);
viewPager.setCurrentItem(0);
viewPager.addOnPageChangeListener(ActivityClass.this);
}
#Override
public void onClick(View v) {
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
this.position=position;
viewPagerHandler(viewPager.findViewWithTag(position),position);
}
#Override
public void onPageScrollStateChanged(int state) {
}
public View viewPagerHandler(final View view, final int position){
//ALL LOGIC BUTTONS ACTIONS ETC.
view.invalidate();
return view;
}
}
public class ViewPageAdapter extends PagerAdapter{
#Override
public Object instantiateItem(final ViewGroup container, final int position) {
final View itemView = LayoutInflater.from(mContext).inflate(R.layout.art_work_item, container, false);
itemView.setTag(position);
container.add(itemView); // edited after suggested
if(mContext instanceof ActivityClass && position==0) //The page listener in ActivityClass is trigger only when page is changed so i tried to hack it when the viewPager is instantiate for the first time
return ((ActivityClass) mContext).viewPagerHandler(itemView,position);
return itemView;
}
}
EDIT: The logic works perfectly on the first and the last item. For rest of them the view is not refreshing (however its still working, because i have buttons which changing color after clicked, when I click on them and then slide to next item and back to the previous one the color is changed so its trigger)
You are missing the line in the instantiateItem() method,
public Object instantiateItem(final ViewGroup container, final int position) {
final View itemView = LayoutInflater.from(mContext).inflate(R.layout.art_work_item, container, false);
itemView.setTag(position);
container.addView(itemView);
if(mContext instanceof ActivityClass && position==0) //The page listener in ActivityClass //is trigger only when page is changed so i tried to hack it when the viewPager is //instantiate for the first time
return ((ActivityClass) mContext).viewPagerHandler(itemView,position);
return itemView;
}
I have used viewpager which displays view with an image and radiobutton below. Each swipe screen is not a fragment, they are layouts which just swipe the same view with different imageview. The problem is that, I am unable to deselect the radio button which is in left and right side of the current view after i select the radio button of the current screen. If I return POSITION_NONE in getItemPosition(), it refresh the screen and radio button also deselected but the view is flickered. If i am able to call instantiateItem(), my problem is solved . But this method is called only when view is destroyed based on the setOffsetScreenPageLimit(). How can I achieved such requirements, if view pager cannot help?
Fragment:
public class AnswerImageDialogFragment extends DialogFragment implements ViewPager.OnPageChangeListener {
//member declaration
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
String strQuestion = null;
View rootView = inflater.inflate(R.layout.activity_viewpager_demo, container,
false);
getDialog().getWindow().requestFeature(Window.FEATURE_NO_TITLE);
intro_images = (ViewPager) rootView.findViewById(R.id.pager_introduction);
pager_indicator = (LinearLayout) rootView.findViewById(R.id.viewPagerCountDots);
//do some stuff
//set the adapter
mAdapter = new ViewPagerAdapter(getContext(), map);
intro_images.setAdapter(mAdapter);
intro_images.setCurrentItem(clickPosition);
intro_images.setOnPageChangeListener(this);
setUiPageViewController();
bus = EventBus.getDefault();
bus.register(this);
return rootView;
}
//other method
}
PagerAdapter:
public class ViewPagerAdapter extends PagerAdapter {
// member declaration
public ViewPagerAdapter(Context mContext, HashMap<String, Object> map) {
//other initialization
}
#Override
public int getCount() {
return optionImages.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
View itemView = LayoutInflater.from(mContext).inflate(R.layout.pager_item, container, false);
final ImageView ivOption = (ImageView) itemView.findViewById(R.id.answerId); // this is used as radio button in this case
/*The code snippet is to select the answer option based on whether answer is choosen or not.
If choosen, select as default in the pop up answer.
*/
if (null != ans) {
Iterator iterator = ans.iterator();
if (ans.size() > 0) {
int value = (int) iterator.next();
if (value == position) {
ivOption.setImageResource(R.drawable.ic_radio_button_tick);
} else {
ivOption.setImageResource(R.drawable.ic_radio_button_nontick);
}
}
}
p = position;
/*The code snippet is to change the answer value based on the user selection.
This means if user choosen another answer then clear the earlier choosen answer
*/
ivOption.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
//do stuff
}
});
txtQuestion.setText(question);
txtOption.setText(optionsList.get(position));
imageView.setParseFile(optionImages.get(position));
imageView.loadInBackground();
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
LinearLayout ll = (LinearLayout) object;
/*RelativeLayout ivOption = (RelativeLayout) ll.getChildAt(2);
ImageView iv = (ImageView) ivOption.getChildAt(1);
iv.setImageResource(R.drawable.ic_radio_button_tick);*/
container.removeView(ll);
}
#Override
public int getItemPosition(Object object) {
return super.getItemPosition(object);
}
public void refresh(ArrayList object) {
this.object = new ArrayList();
this.object.addAll(object);
this.notifyDataSetChanged();
}
i Want to make a slideshow with viewpager where pages are changed automatically every 5 sec. Ive done the viewpager , but got blocked till here , any advise??
Adapter.class (its inner class in my fragment)
class CustomPagerAdapter extends PagerAdapter {
Context mContext;
LayoutInflater mLayoutInflater;
public CustomPagerAdapter(Context context) {
mContext = context;
mLayoutInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return mResources.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
View itemView = mLayoutInflater.inflate(R.layout.slide_show_item, container, false);
ImageView imageView = (ImageView) itemView.findViewById(R.id.imageView);
imageView.setImageResource(mResources[position]);
container.addView(itemView);
return itemView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((LinearLayout) object);
}
}
}
Here is the function i call in my fragment
public void setSlideShow(){
mCustomPagerAdapter = new CustomPagerAdapter(getActivity());
mViewPager = (ViewPager)rootView.findViewById(R.id.slide_show);
mViewPager.setAdapter(mCustomPagerAdapter);
}
Well, android does not provide any function to automatically flip views inside ViewPager but it provides you with something called TimerTask class which you can use to achieve your goal.
You can look at this link to do it this way.
There is one more easy way to achieve this but for that you will have to drop the idea of using ViewPager. Instead you can use ViewFlipper.
ViewFlipper has its own methods to flip automatically. You just need to add these two lines to make your views automatically flippable:
mViewFlipper.setAutoStart(true);
mViewFlipper.setFlipInterval(2000); // flip every 2 seconds (2000ms)
You can get ViewFlipper example here.
I am using this code for showing between bunch of images.I want to show all images one by one through swipe to left or right.Can anyone help me how is it possible to make a round swipe images, it means that you be able to see the first image again after reaching the last one in the list?
and how is it possible to put arrows or part of other images in the current page just to give an ides to the user which needs to swipe to left or right for changing the current picture.
And the last question is that how am I able to make each image clickable in order to user goes to another activity page after clicking on an image? I put the function "public void onClick(View arg0) " in the adopter to go to another activity page after clicking on the images but it does not work.
thanks for your help in advance.
public class DestinationActivity extends ActionBarActivity implements View.OnClickListener {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.destination);
ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
DestinationAdapter adapter = new DestinationAdapter(this);
viewPager.setAdapter(adapter);
}
The adapter class :
public class DestinationAdapter extends PagerAdapter {
Context context;
private int[] GalImages = new int[] {
R.drawable.ufficio_204,
R.drawable.ufficio_203,
R.drawable.ufficio_202,
R.drawable.ufficio_201
};
DestinationAdapter(Context context){
this.context=context;
}
#Override
public int getCount() {
return GalImages.length;
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((ImageView) object);
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
imageView.setImageResource(GalImages[position]);
((ViewPager) container).addView(imageView, 0);
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View arg0) {
if (arg0.getId() == R.id.destination) {
Intent intent = new Intent(context, DetailDestinationActivity.class);
context.startActivity(intent);
}
}
});
return imageView;
}
}
Try to use a View Flipper, follow this tutorial to do that
Viee Flipper
I have a ViewPager/FragmentPagerAdapter combo with a negative page margin so that the pages slightly overlap each other. Problem is, the center page is not on top. The page to the left of it obscures it. I would like it so that the center page is always displayed on top. Is there an elegant way to do this?
The z-order of the pages are determined by the order of their creation, so the latter page will be resting on top of the page created earlier (refer first image below).
In normal case, this shouldn't be any problem as the pages are arrange side-by-side with no overlapping region, so the z-order doesn't really matters. However, in the case of multiple visible page with negative margin(overlapping), the selected page might be blocked partially by the page beside it.
One way to overcome this is to keep a reference of the page during instantiation and use it to change it's z-order with view.bringToFront().
To put this in code:
public class MyActivity extends Activity {
private ViewPager vp = null;
private SparseArray<View> viewCollection = new SparseArray<View>();
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_activity);
vp = (ViewPager)findViewById(R.id.viewpager);
vp.setPageMargin(-20);
vp.setOffscreenPageLimit(3);
vp.setOnPageChangeListener(new ViewPager.OnPageChangeListener(){
#Override
public void onPageSelected(int pos) {
View view = viewCollection.get(pos); // ### Get target page reference
view.bringToFront(); // ### change z-order to the top
}
});
vp.setAdapter(new MyAdapter());
}
public class MyAdapter extends PagerAdapter {
#Override
public Object instantiateItem(ViewGroup container, int position) {
View pageLayout = getLayoutInflater().inflate(R.layout.page_layout, container, false);
final Integer pageId = position;
TextView pageText = (TextView)pageLayout.findViewById(R.id.page_id);
pageText.setText(String.valueOf(position));
pageText.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
vp.setCurrentItem(pageId); // ### select the clicked page
}
});
// paint gray shades onto the page background
pageLayout.setBackgroundColor(Color.argb(255, position*40, position*40, position*40));
viewCollection.put(position, pageLayout); // ### store the reference
container.addView(pageLayout);
return(pageLayout);
}
#Override
public int getCount() {
return 8; // any arbitrary number
}
#Override
public float getPageWidth(int position) {
return(0.33f);
}
#Override
public boolean isViewFromObject(View view, Object obj) {
return (view == obj);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View)object);
viewCollection.remove(position); // ### remove the reference
}
}
}