Develop Reference

View Pager Issue in Android

I m using a viewpager which is rendering fragments one after the other. The problem which I m facing is that once I touch the current fragment visible,it takes the touch event of the next fragment which is yet to be loaded. How should I make sure the current/visible fragment is touched & the touch event is handled accordingly.
This is my adapter which renders the fragments.
private class ScreenSlidePagerAdapter extends FragmentStatePagerAdapter {
public ScreenSlidePagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int position) {
Log.d("zambob",position+":"+slideShowItems.get(position).name);
Fragment fragment = new ScreenSlidePageFragment();
Bundle bundle = new Bundle();
bundle.putString("IMAGE_URL",slideShowItems.get(position).image);
bundle.putString("CAPTION", slideShowItems.get(position).name);
fragment.setArguments(bundle);
return fragment;
}
#Override
public int getCount() {
return slideShowItems.size();
}
}
This is the Fragment Class which handles the touch event as well.
public class ScreenSlidePageFragment extends Fragment {
String imageUrl,text;
UWSharedPreference preference;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
ViewGroup rootView = (ViewGroup) inflater.inflate(
R.layout.fragment_slide_show, container, false);
rootView.getBackground().setAlpha(200);
preference = new UWSharedPreference(getActivity());
imageUrl = getArguments().getString("IMAGE_URL");
text = getArguments().getString("CAPTION");
TouchImageView iv_image = (TouchImageView) rootView.findViewById(R.id.jj_image);
TextView tv_caption = (TextView) rootView.findViewById(R.id.caption_text);
iv_image.setImageUrl(imageUrl, AppController.getInstance().getImageLoader());
if (text != null && text.equals("custom")){
tv_caption.setText("");
}
else {
tv_caption.setText(text);
}
iv_image.setOnTouchListener(new OnTouchListener());
return rootView;
}
class OnTouchListener implements View.OnTouchListener {
public boolean onTouch(View v, MotionEvent event) {
Log.d("zambob","On Touch Called for text" + text +" diner txn id" + preference.getDinerTxnID());
if (text.equals("custom") && preference.getDinerTxnID()!=0 ){
startActivity(new Intent(getActivity(), FBCheckInActivity.class));
getActivity().finish();
}
else {
getActivity().onBackPressed();
}
return true;
}
}
}
Now the problem is that in view pager, 3 fragments are loaded initially. The one visible, one behind it & the one which will come next. When i touch the fragment which is required to start the intent process doesn't work. But when i touch the fragment before the above one, then the required process is going on .
How should i make sure that when i touch the visible fragment, then the required process starts?

Finally I found the solution myself & a little help from Google as well :P.
Actually i was using Depth Page Transformer to show the swipe movements between the fragments. So i just tweaked the page transformer by using this-:
mPager.setPageTransformer(true, new ViewPager.PageTransformer() {
#Override
public void transformPage(View page, float position) {
float translationX;
float scale;
float alpha;
if (position >= 1 || position <= -1) {
// Fix for https://code.google.com/p/android/issues/detail?id=58918
translationX = 0;
scale = 1;
alpha = 1;
} else if (position >= 0) {
translationX = -page.getWidth() * position;
scale = -0.2f * position + 1;
alpha = Math.max(1 - position, 0);
} else {
translationX = 0.5f * page.getWidth() * position;
scale = 1.0f;
alpha = Math.max(0.1f * position + 1, 0);
}
mPager.setTranslationX(translationX);
mPager.setScaleX(scale);
mPager.setScaleY(scale);
mPager.setAlpha(alpha);
}
});
This simply makes sure the visible fragment is getting touched and not the one behind the visible fragment by setting the scale, alpha & translation of the View Pager. Also make the root layout of View Pager as clickable.
XML for the activity rendering the View Pager.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:urbanwand="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
tools:context="com.urbanwand.diner.SlideShowActivity">
<com.urbanwand.MyViewPager
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/pager"
urbanwand:scrollduration="500"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
Hope this answer helps !

how is it possible to make a clickable drawable?

I am newer in developing android app , can anybody tell me how is it possible to add an onClick listener to a drawable image? This is the code for putting the drawable images in the swapping mode but I want the user be able to go to another page by clicking on each of the drawable images. how can I add the onClick method to my code?
public class ViewAdapter extends PagerAdapter {
Context context;
private int[] GalImages = new int[] {
R.drawable.image_1,
R.drawable.image_2,
R.drawable.image_3,
R.drawable.image_4
};
ViewAdapter(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);
return imageView;
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
((ViewPager) container).removeView((ImageView) object);
}
}

Add an onClickListener to the ImageView displaying the drawable:
#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 OnClickListener() {
#Override
public void onClick(View v) {
// do something
}
});
return imageView;
}

How to set setAlpha() on one item in a GridView?

is it possible to set a single item in a GridView as transparent?
I got a GridView with an ImageAdapter and want to set the item in center without transparency and the others with setAlpha().
gridView.setOnScrollListener(new AbsListView.OnScrollListener() {
#Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
Log.v("firstVisibleItem", firstVisibleItem+"");
Log.v("visibleItemCount", visibleItemCount+"");
Log.v("totalItemCount", totalItemCount+"");
}
}
and this should be done in the OnScrollListener.
EDIT:
This is my getView in the ImageAdapter class
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = new ImageView(mContext);
imageView.setLabelFor(position);
imageView.setLayoutParams(new GridView.LayoutParams(100,100));
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
imageView.setPadding(8, 8, 8, 8); //left, top, right, bottom
} else {
imageView = (ImageView) convertView;
}
imageView.setImageResource(mThumbIds[position]);
return imageView;
}
public ArrayList<View> getListView() {
return listView;
}
and i want to store the imageView in an array and pass it to my main activity.
Any suggestions?

I would probably approach it this way:
Keep a reference to every view inflated in my adapter, in some sort of an array.
Control which view (which index in this array) is in the center at a specific moment (based on heights, widths, number of columns, number of rows)
Set a proper alpha to all the views in the array apart from the view identified as the one that is in the center (step 2).

how to set size of imageview in viewpager programmatically?

i want to resizing imageview, but my code doesn't works. here's the code:
private class ImagePagerAdapter extends PagerAdapter {
private int[] mImages = new int[] {
R.drawable.kuhpps,
R.drawable.kuhpps,
R.drawable.kuhpps
};
part of error code:
#Override
public Object instantiateItem(ViewGroup container, int position){
Context context = MainActivity.this;
ImageView imageView = new ImageView(context);
int padding = context.getResources().getDimensionPixelSize(
R.dimen.padding_medium);
imageView.setPadding(padding, padding, padding, padding);
imageView.getLayoutParams().height = 30;
imageView.getLayoutParams().width = 30;
imageView.setImageResource(mImages[position]);
((ViewPager) container).addView(imageView, 0);
return imageView;
}

You need to set the Layout Params with the height and wight . You are updating the LayoutParams instance from getLayoutParams , but that won't change the view.
Do like this to change the ImageView Layout size.
ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(300,300);
imageView.setLayoutParams(layoutParams);

In the viewpager's adapter:
#Override
public Object instantiateItem(ViewGroup container, int position) {
Context context = ActivityGallery.this;
ImageView imageView = new ImageView(context);
imageView.setLayoutParams(new ViewGroup.LayoutParams(mScreenWidth, ViewGroup.LayoutParams.WRAP_CONTENT));
imageView.setAdjustViewBounds(true);
imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
Drawable drawable = Drawable.createFromPath(Environment.getExternalStorageDirectory() + "/Android/data/" + getPackageName() +
"/"+....+".jpg");
if(drawable != null)
imageView.setImageDrawable(drawable);
((ViewPager) container).addView(imageView, 0);
return imageView;
}
mScreenWidth is the current screen width fetched earlier.

Insert 3 images dynamically to horizontal scrollview or Viewpager

There is an image shown below for what I am looking for. Currently I am using view pager & circle indicator. In view page it is showing only a single image.
I want in one viewpager three images as shown in pic. When I slide that page, again three different images loaded form server with text below. How to do this? Any idea regarding this or any other way to achieve this?
My code is shown below.
I add some xml layout here: homespizzaview.xml
<LinearLayout
android:id="#+id/linearLayoutbutton"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dip" >
<android.support.v4.view.ViewPager
android:id="#+id/pagerMenu"
android:layout_width="0dip"
android:layout_height="100dip"
android:layout_weight="1"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip">
</android.support.v4.view.ViewPager>
</LinearLayout>
<RelativeLayout
android:id="#+id/relativeLayoutDot1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dip">
<com.viewpagerindicator.CirclePageIndicator
android:id="#+id/indicatorMenu"
android:layout_width="fill_parent"
android:layout_height="25dip"
android:layout_marginLeft="10dip"
android:layout_marginRight="10dip"
android:padding="10dip" />
</RelativeLayout>
HomeView .java
public class HomeView extends Activity {
adaptermenu = new MenuPagerAdapter();
pagerMenu = (ViewPager)findViewById(R.id.pagerMenu);
pagerMenu.setAdapter(adaptermenu);
pagerMenu.setCurrentItem(0);
pagerMenu.setOffscreenPageLimit(adapter.getCount());
pagerMenu.getAdapter().notifyDataSetChanged();
pagerMenu.setPageMargin(15);
indicator = (CirclePageIndicator)findViewById(R.id.indicatorMenu);
indicator.setViewPager(pagerMenu);
final float density1 = getResources().getDisplayMetrics().density;
indicator.setRadius(5 * density1);
indicator.setPageColor(0xFF000000);
indicator.setFillColor(0xFF888888);
indicator.setStrokeWidth(2 * density1);
//We set this on the indicator, NOT the pager
indicator.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
// Toast.makeText(HomeSpizzaView.this, "Changed to page " + position, Toast.LENGTH_SHORT).show();
pagerMenu.setCurrentItem(position, false);
}
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageScrollStateChanged(int state) {
}
});
indicator.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
pagerMenu.setCurrentItem(0);
Log.i("", "getCurrentItem"+ mPager.getCurrentItem());
pagerMenu.getAdapter().notifyDataSetChanged();
}
});
}
}
MenuPagerAdapter.java
public class MenuPagerAdapter extends PagerAdapter {
public int getCount() {
return 3;
}
public Object instantiateItem(View collection, int position) {
ImageView image = new ImageView(collection.getContext());
image.setPadding(20, 0, 20, 0);
int resId = 0;
switch (position) {
case 0:
resId = R.drawable.promotion1;
break;
case 1:
resId = R.drawable.promotion2;
break;
case 2:
resId = R.drawable.promotion3;
break;
}
image.setImageResource(resId);
((ViewPager) collection).addView(image, 0);
return image;
}
#Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
#Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
#Override
public Parcelable saveState() {
return null;
}
}
here is update code which is showing single image view with below textview. i am looking for dynamic image & text.. means In 1 view pager 3 images with 3 text.. currently its showing 1 image view with below text.. I am looking for 3 images in single viewpager.. if i add linear layout it shows 3 image. but i add relative layout its showing single images.. ANY IDEA WHAT I MADE MISTIKE.
public Object instantiateItem(View collection, int position) {
RelativeLayout lLayout;
RelativeLayout.LayoutParams relativeLayout;
lLayout = new RelativeLayout (collection.getContext());
relativeLayout = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.FILL_PARENT, RelativeLayout.LayoutParams.FILL_PARENT);
for (int i = 0; i < 3; i++) {
image = new ImageView(collection.getContext());
image.setPadding(20, 0, 20, 0);
image.setId(1);
int res = 0;
switch (0) {
case 0:
res = R.drawable.menu_antipasti;
break;
case 1:
res = R.drawable.menu_combos;
break;
case 2:
res = R.drawable.menu_drinks;
break;
}
image.setImageResource(res);
lLayout.addView(image);
textview = new TextView(collection.getContext());
textview.setTextColor(Color.BLACK);
textview.setId(2);
textview.setText("pizza");
textview.setPadding(60, 0, 20, 0);
relativeLayout.addRule(RelativeLayout.BELOW, image.getId());
lLayout.addView(textview, relativeLayout);
}
((ViewPager) collection).addView(lLayout, 0);
return lLayout;
}

Now you're returning ImageView from instantiateItem method. If you want to have 3 images on 1 page you need to create layout, place 3 images on it and return it. E.g:
public Object instantiateItem(View collection, int position) {
LinearLayour images = new LinearLayout(collection.getContext());
for (int i = 0; i < 3; i++) {
ImageView image = new ImageView(collection.getContext());
image.setPadding(20, 0, 20, 0);
images.addView(image);
int res = someResource depending on i and position.
image.setImageResource(res);
}
((ViewPager) collection).addView(images, 0);
return images;
}