Android StaggeredGrid RecyclerView moves the item automatically

Question

I'm trying to show any pictures with Staggered Grid, but many problems are occuring.

Firstly, when I pulled up to the top, it moves items for example from left to right, or swap the column of left and right.

See below .gif:

I have searched for a solution to this problem via Google already. I am using the this code in my project:

StaggeredGridLayoutManager Layoutmanager = new StaggeredGridLayoutManager(3, OrientationHelper.VERTICAL);
manager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
recyclerView.setLayoutManager(manager);

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        super.onScrollStateChanged(recyclerView, newState);
        ((StaggeredGridLayoutManager)recyclerView.getLayoutManager()).invalidateSpanAssignments();
    }
});

Unfortunately, there is still a serious problem occurring when I scroll up. The item still moves and it will scrolls far though even if I just scroll shortly.

See below .gif:

How can I deal with these problems, or otherwise achieve this effect?

MainActivity:

public class MainActivity extends AppCompatActivity {

private DrawerLayout mDrawerLayout;

private photos[] photoses = {
        new photos("Tags:",R.drawable.timg),
        new photos("Tags:",R.drawable.timg1),
        new photos("Tags:",R.drawable.timg2),
        new photos("Tags:",R.drawable.timg3),
        new photos("Tags:",R.drawable.timg4),
        new photos("Tags:",R.drawable.timg5),
        new photos("Tags:",R.drawable.timg6),
        new photos("Tags:",R.drawable.timg7),
        new photos("Tags:",R.drawable.timg8),
        new photos("Tags:",R.drawable.timg9),
        new photos("Tags:",R.drawable.timg10),
        new photos("Tags:",R.drawable.timg11),
        new photos("Tags:",R.drawable.timg12),
};

private List<photos> photosList = new ArrayList<>();

private photoAdapter adapter;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar,menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            break;
        case R.id.edit_bar:
            Toast.makeText(this,"edit",Toast.LENGTH_SHORT).show();
            break;
        case R.id.search_bar:
            Toast.makeText(this,"search",Toast.LENGTH_SHORT).show();
            break;
        default:break;
    }
    return true;
}

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    ActionBar actionBar = getSupportActionBar();
    if (actionBar!=null){
        actionBar.setDisplayHomeAsUpEnabled(true);
        actionBar.setHomeAsUpIndicator(R.drawable.homemenu);
    }
    FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(view,"Hello World",Snackbar.LENGTH_SHORT).show();
        }
    });
    initPhotos();
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
    final StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(layoutManager);
    adapter = new photoAdapter(photosList);
    recyclerView.setAdapter(adapter);
}

private void initPhotos() {
    photosList.clear();
    for (int i = 0;i<100;i++){
        Random random = new Random();
        int index = random.nextInt(photoses.length);
        photosList.add(photoses[index]);
    }
}
}

photoAdapter:

public class photoAdapter extends RecyclerView.Adapter<photoAdapter.ViewHolder> {

private Context mcontext;

private List<Integer> mHeights;

private List<photos> mPhotoList;

static class ViewHolder extends RecyclerView.ViewHolder{
    CardView cardView;
    ImageView photoView;
    TextView photoTag;

    public ViewHolder(View view){
        super(view);
        cardView = (CardView) view;
        photoView = (ImageView) view.findViewById(R.id.photo_view);
        photoTag = (TextView) view.findViewById(R.id.photo_tag);
    }
}

public photoAdapter(List<photos> photoList){
    mPhotoList = photoList;
}


@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (mcontext==null){
        mcontext = parent.getContext();
    }
    View view = LayoutInflater.from(mcontext).inflate(R.layout.photo_item,parent,false);
    return new ViewHolder(view);
}

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    photos photo = mPhotoList.get(position);
    holder.photoTag.setText(photo.getTag());
    Glide.with(mcontext).load(photo.getImageId()).into(holder.photoView);
}

@Override
public int getItemCount() {
    return mPhotoList.size();
}
}

Answer 1

From the Android docs

Staggered grids are likely to have gaps at the edges of the layout. To avoid these gaps, StaggeredGridLayoutManager can offset spans independently or move items between spans. You can control this behavior via setGapStrategy(int)

Reference: https://developer.android.com/reference/android/support/v7/widget/StaggeredGridLayoutManager.html

https://stackoverflow.com/a/34274327/3701433