Recyclerview animation issue - android

I have a Recyclerview the items of which contain icons that I am trying to rotate by specific degrees (counter clockwise). Problem is some of the icons do not rotate at all, or after I scroll (or when the activity resumes) they are set back to their initial position. As seen in the image below, the first 3 arrows have not been rotated at all, while the 4th arrow is pointing correctly.
Below is the custom adapter
public class CustomListAdapter extends RecyclerView.Adapter<CustomListAdapter.TransportationViewHolder> {
Context ctx;
ArrayList<Transportation> transportationArrayList, copy;
public CustomListAdapter(Context ctx, ArrayList<Transportation> transportation) {
this.ctx = ctx;
this.transportationArrayList = new ArrayList<>(transportation);
}
#NonNull
#Override
public TransportationViewHolder onCreateViewHolder(#NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext())
.inflate(R.layout.transportation_item_layout, parent, false);
return new CustomListAdapter.TransportationViewHolder(view);
}
#Override
public void onBindViewHolder(#NonNull TransportationViewHolder holder, int position) {
Transportation transportation = transportationArrayList.get(position);
holder.transportationFleetTypeTextView.setText(description);
rotateHeading((float)transportation.getHeading(), holder.headingImageView);
}
#Override
public int getItemCount() {
return transportationArrayList.size();
}
public static class TransportationViewHolder extends RecyclerView.ViewHolder {
TextView transportationFleetTypeTextView;
ImageView transportationImageView, headingImageView;
public TransportationViewHolder(View itemView) {
super(itemView);
transportationFleetTypeTextView = itemView.findViewById(R.id.transportation_item_text);
transportationImageView = itemView.findViewById(R.id.transportation_item_image);
headingImageView = itemView.findViewById(R.id.heading_image);
}
public void clearAnimation() {
itemView.clearAnimation();
}
}
#Override
public long getItemId(int position) {
return position;
}
public void rotateHeading(float rotation, ImageView imageView)
{
AnimationSet animSet = new AnimationSet(true);
animSet.setInterpolator(new DecelerateInterpolator());
animSet.setFillAfter(true);
animSet.setFillEnabled(true);
final RotateAnimation animRotate = new RotateAnimation(0f, 360f-rotation,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
animRotate.setDuration(0);
animRotate.setFillAfter(true);
animSet.addAnimation(animRotate);
imageView.startAnimation(animSet);
}
#Override
public void onViewDetachedFromWindow(#NonNull final TransportationViewHolder holder) {
super.onViewDetachedFromWindow(holder);
holder.clearAnimation();
}
}
And below is the way I initialize the adapter (which is within a class that extends AsyncTask).
mainActivity.customListAdapter = new CustomListAdapter(mainActivity, transportationArrayList);
mainActivity.customListAdapter.setHasStableIds(true);
mainActivity.customListAdapter.notifyDataSetChanged();
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mainActivity);
recyclerView = findViewById(R.id.transportationRecyclerView);
recyclerView.setHasFixedSize(true);
recyclerView.setLayoutManager(linearLayoutManager);
recyclerView.setAdapter(customListAdapter);
Could someone explain to me what I am doing wrong and why this is happening?

Since the duration is zero and you only want the result of the animation and not the animation itself, I suggest that you simplify the code by replacing the line
rotateHeading((float)transportation.getHeading(), holder.headingImageView);
with
holder.headingImageView.seRotation(360 = (float)transportation.getHeading())
and deleting all the animation code.
This change may not fix the underlying issue that you are having, but it will eliminate animation as the source of the problem.

Related

smoothScrollToPosition not working in recyclerView

I created custom LinearLayoutManager class.My goal is to smoothScrollToPosition with animation.Here is a my code:
public class LinearLayoutManagerWithSmoothScroller extends LinearLayoutManager {
private static final float MILLISECONDS_PER_INCH = 100f;
public LinearLayoutManagerWithSmoothScroller(Context context) {
super(context, VERTICAL, false);
}
#Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state,
int position) {
RecyclerView.SmoothScroller smoothScroller = new TopSnappedSmoothScroller(recyclerView.getContext());
smoothScroller.setTargetPosition(position);
startSmoothScroll(smoothScroller);
}
private class TopSnappedSmoothScroller extends LinearSmoothScroller {
public TopSnappedSmoothScroller(Context context) {
super(context);
}
#Override
public PointF computeScrollVectorForPosition(int targetPosition) {
return LinearLayoutManagerWithSmoothScroller.this
.computeScrollVectorForPosition(targetPosition);
}
#Override
protected float calculateSpeedPerPixel
(DisplayMetrics displayMetrics) {
return MILLISECONDS_PER_INCH/displayMetrics.densityDpi;
}
#Override
protected int getVerticalSnapPreference() {
return SNAP_TO_START;
}
}
}
Also,I created custom LayoutAnimation in RecyclerView.Here is a xml code
<layoutAnimation
xmlns:android="http://schemas.android.com/apk/res/android"
android:animation="#anim/item_animation_from_bottom"
android:delay="15%"
android:animationOrder="normal"
/>
And here is my java code.
leaderBoardAdapter = new SPGamificationLeaderBoardAdapter(response.list, getContext());
leaderBoardRecyclerView.setAdapter(leaderBoardAdapter);
leaderBoardRecyclerView.setHasFixedSize(true);
leaderBoardRecyclerView.setNestedScrollingEnabled(false);
LayoutAnimationController controller =
AnimationUtils.loadLayoutAnimation(getContext(), R.anim.layout_animation_from_bottom);
leaderBoardRecyclerView.setLayoutManager(smoothScroller);
leaderBoardRecyclerView.setLayoutAnimation(controller);
leaderBoardRecyclerView.scheduleLayoutAnimation();
leaderBoardRecyclerView.post(() -> leaderBoardRecyclerView.smoothScrollToPosition(getPosition(response)));
My problem is that, both options(smoothScrollToPosition and LayoutAnimation) does not working same time.I removed smoothScrollToPosition and layout animation worked ,and removed smoothScrollToPosition - layout animation has worked.
Is any way to use both functions same time? what's wrong in my code?
You can use the scrollToPosition(itemNo) for achieving your goal.
Like below:
recyclerview.scrollToPosition(20);
Using smoothScrollToPosition , items are scroll very fast thats why animation is not worked.

How to load cardview GridView with Animations in Android?

I have created android app like gallery which have some images using gridview fragment.
Functionality of my application is working fine and image showing in fragment gridview and also my second activity open when i click on item but i want to show cardview GridView with Animations.
Also if it is easier default image in place of loading images instead of progress bar will be fine.
Here is my application fragment code :
public class CallFragment extends Fragment {
GridView grid;
String[] plan = {
"Student Bundle",
"SMS Plus Bundle",
"Instagram",
"Facebook",
"Flickr"
} ;
String[] web = {
"*3000",
"*106*1",
"Instagram",
"Facebook",
"Flickr"
} ;
int[] imageId = {
R.drawable.calla,
R.drawable.smsb,
R.drawable.person7,
R.drawable.person7,
R.drawable.person7
};
int[] fullimg = {
R.drawable.callaa,
R.drawable.smsbb,
R.drawable.person7,
R.drawable.person7,
R.drawable.person7
};
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
setHasOptionsMenu(true);
View view = inflater.inflate(R.layout.fragment_call,container,false);
CustomGrid adapter = new CustomGrid(getActivity(), plan, web, imageId, fullimg);
grid=(GridView) view.findViewById(R.id.grid);
grid.setAdapter(adapter);
grid.setOnItemClickListener(new AdapterView.OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
String value=(String)grid.getItemAtPosition(i);
Intent intent=new Intent(getActivity(),Book.class);
intent.putExtra("web", web[i]);
intent.putExtra("plan", plan[i]);
intent.putExtra("imageId", imageId[i]);
intent.putExtra("fullimg", fullimg[i]);
startActivity(intent);
}
});
return view;
}
Here is my application CustomAdapter code :
public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {
ArrayList<String> personNames;
ArrayList<String> personCode;
ArrayList<Integer> personImages;
ArrayList<Integer> personImages1;
Context context;
public CustomAdapter(Context context, ArrayList<String> personNames, ArrayList<String> personCode, ArrayList<Integer> personImages, ArrayList<Integer> personImages1) {
this.context = context;
this.personCode = personCode;
this.personNames = personNames;
this.personImages = personImages;
this.personImages1 = personImages1;
}
#Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
// infalte the item Layout
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.rowlayout, parent, false);
// set the view's size, margins, paddings and layout parameters
MyViewHolder vh = new MyViewHolder(v); // pass the view to View Holder
return vh;
}
#Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
// set the data in items
//holder.name.setText(personNames.get(position));
holder.image.setImageResource(personImages.get(position));
//holder.image.setImageResource(personImages1.get(position));
// implement setOnClickListener event on item view.
holder.itemView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
// open another activity on item click
Intent intent = new Intent(context, SecondActivity.class);
//intent.putExtra("image", personImages.get(position)); // put image data in Intent
intent.putExtra("name", personNames.get(position)); // put image data in Intent
intent.putExtra("code", personCode.get(position)); // put image data in Intent
intent.putExtra("image", personImages1.get(position)); // put image data in Intent
context.startActivity(intent); // start Intent
}
});
}
#Override
public int getItemCount() {
return personNames.size();
}
public class MyViewHolder extends RecyclerView.ViewHolder {
// init the item view's
TextView name;
TextView code;
ImageView image;
public MyViewHolder(View itemView) {
super(itemView);
// get the reference of item view's
name = (TextView) itemView.findViewById(R.id.name);
code = (TextView) itemView.findViewById(R.id.code);
image = (ImageView) itemView.findViewById(R.id.image);
}
}
}
Here is example of my requirement :
My gridview looks like this :
Create an separate XML file under anim and apply in the onBindViewHolder.
#Override
public void onBindViewHolder(ViewHolder holder, int position)
{
// Here you apply the animation when the view is bound
setAnimation(holder.itemView, position);
}
/**
* Here is the key method to apply the animation
*/
private void setAnimation(View viewToAnimate, int position)
{. int lastPosition=0;
// If the bound view wasn't previously displayed on screen, it's animated
if (position > lastPosition)
{
Animation animation = AnimationUtils.loadAnimation(context, android.R.anim.slide_in_left);
viewToAnimate.startAnimation(animation);
lastPosition = position;
}
}
}
You can apply animations on RecyclerView using this tutorial.
and for default image just put a src property inside your imageview in R.layout.rowlayout XML file
Used this Recyclerview with Load animation
Recyclerview Load Animation

Clear Animation in ViewHolder's item RecyclerView

I am using RecyclerView and have some animation where I scaleup one of RelativeLayout in ViewHolder item.
Note: It is not the add/remove/insert animation. It starts when user interacts in ViewHolder item. Hence I am not using ItemAnimator here.
Animation works fine but it reappears (final state) in some random View item. I know it is due to reuse of items and I am clearing animation too but it didn't help.
#Override
public void onBindViewHolder(ViewHolder viewHolder, int position) {
Model model = getModelObject(position);
((Model) viewHolder.itemView).showItem(position);
}
I am doing this in showItem
relativeLayout.clearAnimation();
relativeLayout.setAnimation(null);
In onViewDetachedFromWindow
#Override
public void onViewDetachedFromWindow(ViewHolder holder) {
((ItemView) holder.itemView).clearAllAnimations();
super.onViewDetachedFromWindow(holder);
}
ClearAllAnimations
public void clearAllAnimations() {
for (RelativeLayout layout : layoutArray) {
optionLayout.clearAnimation();
optionLayout.setAnimation(null);
}
Here how I am animating the view
public AnimatorSet onDragStartAnimation(RelativeLayout group[]) {
AnimatorSet big = new AnimatorSet();
for (RelativeLayout relativeLayout : group) {
ObjectAnimator scaleXSmall = ObjectAnimator.ofFloat(relativeLayout, "scaleX", 1.0f, 0.85f);
ObjectAnimator scaleYSmall = ObjectAnimator.ofFloat(relativeLayout, "scaleY", 1.0f, 0.85f);
big.playTogether(scaleXSmall, scaleYSmall);
}
return big;
}
it is not working. RelativeLayout not resetting and appearing in scaledup state in some random View Item.
Update
I did small experiment: Set alpha animation on ImageView in ViewHolder item like this
Animation fadeInAnimation = AnimationUtils.loadAnimation(mContext, R.anim.fadein);
imageView.startAnimation(fadeInAnimation);
and used clear animation. imageView.clearAnimation(); it worked and ImageView was visible normal when next time ViewItem appears on the screen.
But same is not working if I do this
alphaAnimator = ObjectAnimator.ofFloat(centerImageView, "alpha", 1.0f, 0.5f);
alphaAnimator.start();
And to clear this
alphaAnimator.removeAllListeners();
alphaAnimator.cancel();
alphaAnimator.end();
this didn't work. Alpha animation remains in ViewHolder image item.
I solved the problem in this way. Everything works fine.
GroupsViewHolder - it is custom RecyclerView.ViewHolder
#Override
public void onViewAttachedToWindow(GroupsViewHolder holder) {
super.onViewAttachedToWindow(holder);
//here add animation
}
#Override
public void onViewDetachedFromWindow(GroupsViewHolder holder) {
//here clear animation
super.onViewDetachedFromWindow(holder);
}
By inspiring from crymson's answer from Crymson's answer I have made little easy and useful solution using tag method of View instead setting a boolean in complicated logic of your custom adapter.
#Override
public void onViewDetachedFromWindow(RecyclerView.ViewHolder holder) {
super.onViewDetachedFromWindow(holder);
if (holder.getItemViewType() == TYPE_AD)
((ViewHolderForAd) holder).ivStory.setTag(false);
}
public class ViewHolderForAd extends RecyclerView.ViewHolder {
private ImageView ivStory;
TextView tvName;
public ViewHolderForAd(View view) {
super(view);
ivStory = (ImageView) view.findViewById(R.id.ivStoryImage);
tvName = (TextView) view.findViewById(R.id.tvAppName);
view.setOnClickListener(new OnClickListener() {
#Override
public void onClick(View v) {
int pos = getAdapterPosition();
if (pos < 0) {
pos = (int) v.getTag();
}
customItemClickListener.onItemClicked(v, pos);
}
});
//ivStory.startAnimation(AnimationUtils.loadAnimation(context, R.anim.pulse_story));
ivStory.setTag(false); //Set default tag false to decrease risk of null
}
}
#Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int i) {
//...Your code...
if (!(boolean) holder1.ivStory.getTag()) {
holder1.ivStory.setTag(true);
holder1.ivStory.startAnimation(AnimationUtils.loadAnimation(context, R.anim.pulse_story));
}
//...Your code...//
}
You can use setTag(key, object) instead of setTag(object) if you already tagged something(like position) in your imageView. Hope this helps someone.
I solved it by doing reverse animation of all animators in onViewDetachedFromWindow.
#Override
public void onViewDetachedFromWindow(ViewHolder holder) {
if (holder.getItemViewType() == 1) ((MyItemView) holder.itemView).reverseAllAnimations();
}

RecyclerView with GridLayoutManager and Picasso showing wrong image

Update #1
Added hasStableIds(true) and updated Picasso to version 2.5.2.
It does not solve the issue.
Reproduction:
RecyclerView with GridLayoutManager (spanCount = 3).
List items are CardViews with ImageView inside.
When all the items does not fit the screen calling notifyItemChanged on one item causes more than one calls to onBindViewHolder().
One call is for position from notifyItemChanged others for items not visible on the screen.
Issue:
Sometimes the item at position passed to the notifyItemChanged is loaded with an image belonging to an item that is not on the screen (most likely due to recycling of the view holder - although I would assume that if the item remains in place then the passed viewholder would be the same).
I have found Jake's comment on other issue here about calling load() even if the file/uri is null. Image is loaded on every onBindViewHolder here.
Simple sample app:
git clone https://github.com/gswierczynski/recycler-view-grid-layout-with-picasso.git
Tap on an item calls notifyItemChanged with parameter equal to the position of that item.
Code:
public class MainActivity extends ActionBarActivity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
if (savedInstanceState == null) {
getSupportFragmentManager().beginTransaction()
.add(R.id.container, new PlaceholderFragment())
.commit();
}
}
public static class PlaceholderFragment extends Fragment {
public PlaceholderFragment() {
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_main, container, false);
RecyclerView rv = (RecyclerView) rootView.findViewById(R.id.rv);
rv.setLayoutManager(new GridLayoutManager(getActivity(), 3));
rv.setItemAnimator(new DefaultItemAnimator());
rv.setAdapter(new ImageAdapter());
return rootView;
}
}
private static class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder> implements ClickableViewHolder.OnClickListener {
public static final String TAG = "ImageAdapter";
List<Integer> resourceIds = Arrays.asList(
R.drawable.a0,
R.drawable.a1,
R.drawable.a2,
R.drawable.a3,
R.drawable.a4,
R.drawable.a5,
R.drawable.a6,
R.drawable.a7,
R.drawable.a8,
R.drawable.a9,
R.drawable.a10,
R.drawable.a11,
R.drawable.a12,
R.drawable.a13,
R.drawable.a14,
R.drawable.a15,
R.drawable.a16,
R.drawable.a17,
R.drawable.a18,
R.drawable.a19,
R.drawable.a20);
#Override
public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
return new ImageViewHolder(v, this);
}
#Override
public void onBindViewHolder(ImageViewHolder holder, int position) {
Log.d(TAG, "onBindViewHolder position: " + position + " | holder obj:" + holder.toString());
Picasso.with(holder.iv.getContext())
.load(resourceIds.get(position))
.fit()
.centerInside()
.into(holder.iv);
}
#Override
public int getItemCount() {
return resourceIds.size();
}
#Override
public void onClick(View view, int position) {
Log.d(TAG, "onClick position: " + position);
notifyItemChanged(position);
}
#Override
public boolean onLongClick(View view, int position) {
return false;
}
}
private static class ImageViewHolder extends ClickableViewHolder {
public ImageView iv;
public ImageViewHolder(View itemView, OnClickListener onClickListener) {
super(itemView, onClickListener);
iv = (ImageView) itemView.findViewById(R.id.iv);
}
}
}
public class ClickableViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener, View.OnLongClickListener {
OnClickListener onClickListener;
public ClickableViewHolder(View itemView, OnClickListener onClickListener) {
super(itemView);
this.onClickListener = onClickListener;
itemView.setOnClickListener(this);
itemView.setOnLongClickListener(this);
}
#Override
public void onClick(View view) {
onClickListener.onClick(view, getPosition());
}
#Override
public boolean onLongClick(View view) {
return onClickListener.onLongClick(view, getPosition());
}
public static interface OnClickListener {
void onClick(View view, int position);
boolean onLongClick(View view, int position);
}
}
I spent more time than I'd like to admit to work around oddities with RecyclerView and the new adapter that comes with it. The only thing that finally worked for me in terms of correct updates and making sure notifyDataSetChanges and all of its other siblings didn't cause odd behavior was this:
On my adapter, I set
setHasStableIds(true);
In the constructor. I then overrode this method:
#Override
public long getItemId(int position) {
// return a unique id here
}
And made sure that all my items returned a unique id.
How you achieve this is up to you. For me, the data was supplied from my web service in the form of a UUID and I cheated by converting parts of the UUID to long using this:
SomeContent content = _data.get(position);
Long code = Math.abs(content.getContentId().getLeastSignificantBits());
Obviously this is not a very safe approach but chances are it works for my lists which will contain < 1000 items. So far I haven't run into any trouble with it.
What I recommend is to try this approach and see if it works for you. Since you have an array, getting a unique number for you should be simple. Maybe try returning the position of the actual item (and not the position that is passed in the getItemId()) or create a unique long for each of your records and pass that in.
Have you tried calling the mutate() method on the Drawable? See here, for instance.
here a working solution but has graphics glitches when calling notifyDataSetChanged()
holder.iv.post(new Runnable() {
#Override
public void run() {
Picasso.with(holder.iv.getContext())
.load(resourceIds.get(position))
.resize(holder.iv.getWidth(), 0)
.into(holder.iv);
});
it works because at this point image has a width, unfortunately when I need to update all the checkboxes the in the viewholder (like a select all action), and I call notifyDataSetChanged() and the effect is very ugly
still searching for a better solution
edit:
this solution works for me:
holder.iv.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
#Override
public void onGlobalLayout() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
holder.iv.getViewTreeObserver().removeOnGlobalLayoutListener(this);
else
holder.iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
Picasso.with(holder.iv.getContext())
.load(resourceIds.get(position))
.resize(holder.iv.getMeasuredWidth(), 0)
.into(holder.iv);
}
});

StaggeredGridLayoutManager and moving items

I have created a very simple project, displaying 28 images with StaggeredGridLayoutManager by recyclerview. but as I scroll the recyclerview it moves items for example from left to right or swap the column of left and right.
codes:
import java.util.ArrayList;
import java.util.List;
import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
public class MainActivity extends Activity {
String mImageDir;
private RecyclerView mRecyclerView;
private StaggeredGridLayoutManager mLayoutManager;
MyRecyclerAdapter myRecyclerAdapter;
List<ImageModel> mImageList;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview_rootview);
mLayoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
mLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
mRecyclerView.setLayoutManager(mLayoutManager);
mRecyclerView.setHasFixedSize(false);
mImageList = new ArrayList<ImageModel>();
for (int i = 1; i < 29 ; i++) {
ImageModel img = new ImageModel();
img.setTitle("Image No " + i);
int drawableResourceId = this.getResources().getIdentifier("image"+String.valueOf(i), "drawable", this.getPackageName());
img.setResId(drawableResourceId);
mImageList.add(img);
}
myRecyclerAdapter = new MyRecyclerAdapter(MainActivity.this,mImageList);
mRecyclerView.setAdapter(myRecyclerAdapter);
}
}
And the adapter:
public class MyRecyclerAdapter extends RecyclerView.Adapter<MyRecyclerAdapter.ViewHolder> {
private List<ImageModel> mItems;
Context mContext;
public MyRecyclerAdapter(Context context,List<ImageModel> objects) {
mContext = context;
mItems = objects;
}
static class ViewHolder extends RecyclerView.ViewHolder{
public ImageView mImageView;
public TextView mTextView;
public View rootView;
public ViewHolder(View itemView) {
super(itemView);
rootView = itemView;
mImageView =(ImageView)itemView.findViewById(R.id.image);
mTextView =(TextView)itemView.findViewById(R.id.title);
}
}
#Override
public int getItemCount() {
return mItems.size();
}
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
ImageModel item = mItems.get(position);
Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
holder.mTextView.setText(item.getTitle());
}
#Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int arg1) {
LayoutInflater inflater =
(LayoutInflater) mContext.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
View convertView = inflater.inflate(R.layout.item, parent, false);
return new ViewHolder(convertView);
}
}
and a sample moving item:
http://i.imgur.com/FUapm2K.gif?1
if you play (scroll up and down) you can discover more interesting animation :-)
How to prevent that and having stable layout like an ordinary listview?
Edit
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
ImageModel item = mItems.get(position);
RelativeLayout.LayoutParams rlp = (RelativeLayout.LayoutParams)holder.mImageView.getLayoutParams();
float ratio = item.getHeight()/item.getWidth();
rlp.height = (int)(rlp.width * ratio);
holder.mImageView.setLayoutParams(rlp);
Picasso.with(mContext).load(item.getResId()).into(holder.mImageView);
holder.mTextView.setText(item.getTitle());
}
This is happening because SGLM does not keep any w/h information about the views. So each time a View is rebound, it gets the place holder size first and then the final size when the image is loaded.
Loading the actual image w/ different size (than place holder) triggers a new layout request, and during that layout request, SGLM detects that there will be gaps in the UI (or some item w/ higher position appears below an item w/ lower position) thus re-orders items w/ an animation.
You can avoid it by setting your place holder image to the dimensions of the actual image. If you don't have it ahead of time, you can save them after the image is loaded for the first-time and use it in the next onBind call.
What worked for me was to disable all animation on the recycle view when using StaggeredGridLayoutManager.
mRecyclerView.setItemAnimator(null);
You can create your own animator if you only want to restrict moving animations and keep the add and remove item animations.
You can try this
StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(2, OrientationHelper.VERTICAL);
manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
mRecyclerView.setLayoutManager(manager);
after you set this, you'll find there is a blank at the top when you scroll to the top. continue to set this
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
((StaggeredGridLayoutManager)recyclerView.getLayoutManager()).invalidateSpanAssignments();
}
});
It's work for me, I get this way somewhere. I hope it can help you!
Change this line
mLayoutManager.setGapStrategy(
StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
to this line
mLayoutManager.setGapStrategy(
StaggeredGridLayoutManager.GAP_HANDLING_NONE);
Add the following line at the end of the method:
holder.mImageView.requestLayout();
#Override
public void onBindViewHolder(ViewHolder holder, int position) {
...
holder.mImageView.requestLayout();
}
This fixed the issue for me.
Maybe this is a more efficient way:
mBrandRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
#Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
if(newState == RecyclerView.SCROLL_STATE_IDLE){
mBrandRecyclerView.invalidateItemDecorations();
}
}
});
For more information:
https://github.com/ibosong/CommonItemDecoration
Set your recyclerview's height fixed and item height and width wrap-content for staggered-layout-manager
First set gap strategy like following code :
mLayoutManager = new StaggeredGridLayoutManager(SPAN_COUNT, StaggeredGridLayoutManager.VERTICAL);
mLayoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
and then add your item to mItems and then use:
mAdapter.notifyItemInserted(mItems.size() - 1);
this method is better than using:
mAdapter.notifyDataSetChanged();

Categories

Resources