Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Android StaggeredGrid RecyclerView moves the item automatically

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:

enter image description here

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:

enter image description here

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();
}
}
like image 706
yami Avatar asked Nov 08 '22 18:11

yami


1 Answers

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

like image 157
Prudhvi Avatar answered Nov 15 '22 08:11

Prudhvi