Develop Reference

Shared element transaction with 2 activity

I had 2 activity in which one one activity_1 I have RecyclerView with images and activity_2 have view pager with image. I just want to perform image shared element transaction from activity_1 recycler view to activity_2 viewpager image as shown in image.
every thing was working fine except the transaction.
please help
activity_2 code
int position = getIntent().getIntExtra(TestActivity.EXTRA_POSITION, 1);
ArrayList<AnimalItem> filelist = (ArrayList<AnimalItem>) getIntent().getSerializableExtra(TestActivity.EXTRA_ANIMAL_ARRAYLIST);
ViewPager viewPager = findViewById(R.id.animal_view_pager);
MyCustomPagerAdapter myCustomPagerAdapter = new MyCustomPagerAdapter(PageViewerActivity.this, filelist);
// myCustomPagerAdapter.getItem(position).setTransitionName(getResources().getString(R.string.transition_contenet_topic));
viewPager.setAdapter(myCustomPagerAdapter);
viewPager.setCurrentItem(position);
CustomPageAdapter.class
public class MyCustomPagerAdapter extends PagerAdapter {
private Context context;
private ArrayList<AnimalItem> images;
private LayoutInflater layoutInflater;
public MyCustomPagerAdapter(Context context, ArrayList<AnimalItem> images) {
this.context = context;
this.images = images;
layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
#Override
public int getCount() {
return images.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == ((LinearLayout) object);
}
#Override
public Object instantiateItem(#NonNull ViewGroup container, final int position) {
View itemView = layoutInflater.inflate(R.layout.test_image_card, container, false);
ImageView imageView =itemView.findViewById(R.id.id_main_image);
Picasso.with(context).load(images.get(position).imageUrl).into(imageView);
container.addView(itemView);
//listening to image click
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
Toast.makeText(context, "you clicked image " + (position + 1), Toast.LENGTH_LONG).show();
}
});
return itemView;
}
#Override
public void destroyItem(#NonNull ViewGroup container, int position, #NonNull Object object) {
container.removeView((LinearLayout) object);
}
}
activity_1 (on recycler item click code)
Intent intent = new Intent(this, PageViewerActivity.class);
intent.putExtra(EXTRA_POSITION,pos);
intent.putExtra(EXTRA_ANIMAL_ARRAYLIST, Utils.generateAnimalItems(getApplicationContext()));
intent.putExtra(EXTRA_ANIMAL_IMAGE_TRANSITION_NAME, ViewCompat.getTransitionName(sharedImageView));
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(this,
sharedImageView,
ViewCompat.getTransitionName(sharedImageView));
startActivity(intent, options.toBundle());

You may use one activity to achieve this target, And consider activity_1#RecyclerView view item as FlipView, and on top of flipView imageView and viewPager and on flip action animate imageView with viewPager.
Implementation 'eu.davidea:flipview:1.1.3'
<eu.davidea.flipview.FlipView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/flip_layout"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:animateDesignLayoutOnly="true" // This line is important
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Put ImageView on top to hide ViewPager until flip action -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<ViewPager
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</eu.davidea.flipview.FlipView>

ViewPager Loads Blank Screen Until User Clicks Anywhere On Screen

I have implemented a viewpager adapter, the scrolling and contents returned works fine but the issue is, when I start my app, the screen is blank and only when I click anywhere on the blank screen does the viewpager load the first page (item 0) and everything else works fine after that. How can I get my app to load viewpager items without having to click first:
MainActivity:
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(new ViewPagerAdapter(getApplicationContext(), userid, names, status, phonenumbers, rates, urls, dobyear, dobmonth, dobday, starrate));
viewPager.setOnPageChangeListener(new OnPageChangeListener() {
public void onPageScrollStateChanged(int state) {
}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
public void onPageSelected(int position) {
}
});
}
ViewPagerAdapter:
#Override
public int getCount() {
return this._userid.size();
}
#Override
public int getCount() {
return this._userid.size();
}
#Override
public boolean isViewFromObject(View view, Object object) {
return view == (object);
}
#Override
public Object instantiateItem(ViewGroup container, final int position) {
ImageView imgDisplay, ivRateBar;
TextView tvName, tvPhoneNumber, tvRate, tvStatus, tvYear, tvDistance;
inflater = (LayoutInflater) c.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View viewLayout = inflater.inflate(R.layout.viewpager_item, container,false);
....
//set my textviews and imges
I tried:
private static int currentPage = 0;
public void onPageSelected(int position) {
currentPage = position;
}

OK, it works when I use a handler.postDelayedof half a second before setting my viewPager adapter, the logical reason behind this may be that the viewpager loads before all my data can be retrieved from the database.

After you get the data you are looking for try calling
myAdapter.notifyDataSetChanged();
You just have to save the Adapter instance like so:
// Change this
viewPager.setAdapter(new ViewPagerAdapter(getApplicationContext(), userid, names, status, phonenumbers, rates, urls, dobyear, dobmonth, dobday, starrate));
// To this
ViewPagerAdapter myAdapter = new ViewPagerAdapter(getApplicationContext(), userid, names, status, phonenumbers, rates, urls, dobyear, dobmonth, dobday, starrate);
viewPager.setAdapter(myAdapter);
...
// When the data is finished loading (wherever you load the data)
if (myAdapter != null) {
myAdapter.notifyDataSetChanged();
}
And the adapter should refresh itself with the correct data.

The only way worked for me:
if(viewPager.getAdapter()!=null){
viewPager.getAdapter().notifyDataSetChanged();
container.removeView(viewPager);
container.addView(viewPager);
}

Cannot update views on left and right side of view pager

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();
}

Viewpager slide next page lags

I've a gridview with clickable items. When I click on an item the gridview is became hidden and I show a ViewPager.
In my case this ViewPager should work like slideshow.
So I've tried to follow the Google example here: http://developer.android.com/training/animation/screen-slide.html
If I open a new activity on gridview item click, the viewpager is working well (like the Google example). But if I open the ViewPager hiding the gridview the slide animation become lagging.
Obviously I've tried to open the viewpager with same graphics/bitmaps etc..
Unfortunately my application need to work in the same activity, and I cannot open a new one.
Is there some limitations about ViewPager? Or I should give attention on something particular?

Quite Simple.
Unfortunately my application need to work in the same activity, and I cannot open a new one.
I presume when a user click one of the grid view of the item (maybe containing image), a view pagers shows up with the image and the user can slide the ViewPager for next image and so on.
In this case, use a Dialog Fragment.
Layout for ViewPager's Image :
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/black">
<ImageView
android:id="#+id/image_preview"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:scaleType="fitCenter" />
</RelativeLayout>
Dialog Fragment Code :
public class SlideshowDialogFragment extends DialogFragment {
private String TAG = SlideshowDialogFragment.class.getSimpleName();
private ArrayList<Image> images;
private ViewPager viewPager;
private MyViewPagerAdapter myViewPagerAdapter;
private TextView lblCount, lblTitle, lblDate;
private int selectedPosition = 0;
static SlideshowDialogFragment newInstance() {
SlideshowDialogFragment f = new SlideshowDialogFragment();
return f;
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View v = inflater.inflate(R.layout.fragment_image_slider, container, false);
viewPager = (ViewPager) v.findViewById(R.id.viewpager);
lblCount = (TextView) v.findViewById(R.id.lbl_count);
lblTitle = (TextView) v.findViewById(R.id.title);
lblDate = (TextView) v.findViewById(R.id.date);
images = (ArrayList<Image>) getArguments().getSerializable("images");
selectedPosition = getArguments().getInt("position");
Log.e(TAG, "position: " + selectedPosition);
Log.e(TAG, "images size: " + images.size());
myViewPagerAdapter = new MyViewPagerAdapter();
viewPager.setAdapter(myViewPagerAdapter);
viewPager.addOnPageChangeListener(viewPagerPageChangeListener);
setCurrentItem(selectedPosition);
return v;
}
private void setCurrentItem(int position) {
viewPager.setCurrentItem(position, false);
displayMetaInfo(selectedPosition);
}
// page change listener
ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {
#Override
public void onPageSelected(int position) {
displayMetaInfo(position);
}
#Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}
#Override
public void onPageScrollStateChanged(int arg0) {
}
};
private void displayMetaInfo(int position) {
lblCount.setText((position + 1) + " of " + images.size());
Image image = images.get(position);
lblTitle.setText(image.getName());
lblDate.setText(image.getTimestamp());
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setStyle(DialogFragment.STYLE_NORMAL, android.R.style.Theme_Black_NoTitleBar_Fullscreen);
}
// adapter
public class MyViewPagerAdapter extends PagerAdapter {
private LayoutInflater layoutInflater;
public MyViewPagerAdapter() {
}
#Override
public Object instantiateItem(ViewGroup container, int position) {
layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.image_fullscreen_preview, container, false);
ImageView imageViewPreview = (ImageView) view.findViewById(R.id.image_preview);
Image image = images.get(position);
Glide.with(getActivity()).load(image.getLarge())
.thumbnail(0.5f)
.crossFade()
.diskCacheStrategy(DiskCacheStrategy.ALL)
.into(imageViewPreview);
container.addView(view);
return view;
}
#Override
public int getCount() {
return images.size();
}
#Override
public boolean isViewFromObject(View view, Object obj) {
return view == ((View) obj);
}
#Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
}
Send the image link and its description/ title through this code:
Bundle bundle = new Bundle();
bundle.putSerializable("images", images);
bundle.putInt("position", position);
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
SlideshowDialogFragment newFragment = SlideshowDialogFragment.newInstance();
newFragment.setArguments(bundle);
newFragment.show(ft, "slideshow");
The array List being used :
private ArrayList<Image> images = new ArrayList<>();
Image image = new Image();
image.setName("Image Title");
image.setLarge("ImageUrl");

FragmentPagerAdapter + BaseAdapter + UIL not Updating

I am trying to setup a tab title strip using swipes to switch between the fragments as demoed in the documentation here. It works, up to a point. The gridview shows all the images as required however, both fragment 1 and fragment 2 are showing the same images. It appears that fragment 2 is overwriting the images because if you click on the image in fragment 1, the fragment 1 details screen pops up (even though it shows an image from fragment 2).
Basically, I need my ImageAdapter (BaseAdapter) to show the correct images for each separate fragment. I don't see how the second fragment is interacting with the first if there are no static elements.
Edit: I tried changing to Picasso and the same error occurred so there has to be something in my code.
Edit2: I found this answer and it does let me redraw the grid when a fragment becomes visible but that causes a noticeable flicker and it is obvious the images were wrong. The problem has to lie somwhere with UIL/Picasso thinking the gridview in the separate fragments are the same object (they do have the same images but in different orders).
public void setupFragmentSwipes() {
mDemoCollectionPagerAdapter =
new DemoCollectionPagerAdapter(
getFragmentManager());
mViewPager = (ViewPager) mRootView.findViewById(R.id.pager);
mViewPager.setAdapter(mDemoCollectionPagerAdapter);
}
public class DemoCollectionPagerAdapter extends FragmentStatePagerAdapter {
String[] array = getResources().getStringArray(R.array.SortOptions);
public DemoCollectionPagerAdapter(FragmentManager fm) {
super(fm);
}
#Override
public Fragment getItem(int i) {
Fragment fragment = new FragmentGrid();
Bundle args = new Bundle();
args.putInt("mMode", mMode);
args.putInt("mSortAorD", mSortAorD);
args.putInt("mSortType", i);
fragment.setArguments(args);
return fragment
}
#Override
public int getCount() {
return array.length;
}
#Override
public CharSequence getPageTitle(int position) {
return array[position];
}
}
FragmentGrid
public class FragmentGrid extends Fragment {
public int mode;
private ArrayList<Theme> mThemes;
private GridView listView;
private static DisplayImageOptions options;
protected ImageLoader imageLoader = ImageLoader.getInstance();
protected int mSavedPosition;
private int sortType;
private int sortAorD;
#Override
public View onCreateView(LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
// The last two arguments ensure LayoutParams are inflated
// properly.
View rootView = inflater.inflate(
R.layout.fragment_collection_object, container, false);
Bundle args = getArguments();
mode = args.getInt("mMode", BaseConstants.ViewModes.NORMAL);
sortType = args.getInt("mSortType", BaseConstants.Sort.POPULAR);
sortAorD = args.getInt("mSortAorD", BaseConstants.Sort.DESC);
listView = (GridView) rootView.findViewById(R.id.gridview2);
options = new DisplayImageOptions.Builder()
.showStubImage(R.drawable.ic_stub)
.showImageForEmptyUri(R.drawable.ic_error)
.showImageOnFail(R.drawable.ic_error)
.cacheOnDisc(true)
.imageScaleType(ImageScaleType.EXACTLY)
.bitmapConfig(Bitmap.Config.RGB_565)
.build();
return rootView;
}
#Override
public void onResume() {
super.onResume();
listView.setSelection(mSavedPosition);
ThemeManager tm = new ThemeManager(getActivity().getApplicationContext());
mThemes = tm.getModifiedThemeList(mode);
mThemes = tm.compare(sortType, sortAorD, checkIfTesting());
listView.setAdapter(new ImageAdapter(mThemes));
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
mSavedPosition = position;
Intent intent = new Intent(getActivity(), ImagePagerActivity.class);
intent.putExtra("mMode", mode);
intent.putExtra("mSortAorD", sortAorD);
intent.putExtra("mSortType", sortType);
intent.putExtra("mPosition", position);
startActivity(intent);
}
});
}
public class ImageAdapter extends BaseAdapter {
ArrayList<Theme> imageAdapterThemeList;
public ImageAdapter(ArrayList<Theme> themes) {
imageAdapterThemeList = themes;
}
#Override
public int getCount() {
int result = 0;
if (imageAdapterThemeList != null) {
result = imageAdapterThemeList.size();
}
return result;
}
#Override
public Object getItem(int position) {
return null;
}
#Override
public long getItemId(int position) {
return position;
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ImageView imageView;
if (convertView == null) {
imageView = (ImageView) getActivity().getLayoutInflater().inflate(R.layout.item_grid_image, parent, false);
} else {
imageView = (ImageView) convertView;
}
Theme theme = imageAdapterThemeList.get(position);
imageLoader.displayImage(theme.getImageURL(), imageView, options);
return imageView;
}
}
fragment_collection_object.xml
<GridView
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/gridview2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:horizontalSpacing="4dip"
android:numColumns="auto_fit"
android:columnWidth="150dip"
android:scrollbars="vertical"
android:stretchMode="columnWidth"
android:verticalSpacing="4dip"
android:padding="4dip" />

The only difference between your two fragment instances is that you have mSortType in your arguments Bundle set to 0 or 1 based on the page. You only use that to set up mThemes, which you never seem to use in your ImageAdapter.
So, if you are expecting your two ImageAdapter instances to return separate results, you need to either have it pay attention to mSortType or otherwise have it vary based on the page.

I encountered a problem that sounds very similar to this a while ago. It turned out to be the animations used when swapping pages and nothing to do with the pager or adapter at all. Essentially the animation resulted in fragment1 being on top of the fragment2 but completely transparent, so the user thought they were touching fragment2, but the events were received by fragment1..which makes it behave very much like the adapter was returning the wrong fragment...
In short, if you are using animations (particularly z-order altering animations) try disabling them and see if the problem goes away. If it does, you have a problem in your animations.
Hope that helps,
Good Luck.

Ok, I found the answer but I don't know why. I had to change the following from:
ArrayList<Theme> imageAdapterThemeList;
public ImageAdapter(ArrayList<Theme> themes) {
imageAdapterThemeList = themes;
}
to:
ArrayList<Theme> imageAdapterThemeList = new ArrayList<Theme>();
public ImageAdapter(ArrayList<Theme> themes) {
for (int i = 0; i< themes.size() ;i++) {
imageAdapterThemeList.add(i, themes.get(i));
}
}
I think, rather than creating a new ArrayList I was merely pointing to the old one. This new method actually recreates it but I'm sure it's not very efficient.