Android RecyclerView: Change layout file LIST to GRID onOptionItemSelected

Question

I am developing an Android Application for Online Shopping. I have created following view for List of Products using RecyclerView, in that i want to change view

Answer 1

I found solution with the starting of activity I have set LinearLayoutManager like:

mLayoutManager = new LinearLayoutManager(this);
mProductListRecyclerView.setLayoutManager(mLayoutManager);

after that onOptionsItemSelected written like:

case R.id.menu_product_change_view:
     isViewWithCatalog = !isViewWithCatalog;
     supportInvalidateOptionsMenu();
     //loading = false;
     mProductListRecyclerView.setLayoutManager(isViewWithCatalog ? new LinearLayoutManager(this) : new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));
     mProductListRecyclerView.setAdapter(mAdapter);
     break;

and changing view in onCreateViewHolder like:

@Override
public ProductRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(isViewWithCatalog ? R.layout.product_row_layout_list : R.layout.product_row_layout_grid, null);
    ProductRowHolder mh = new ProductRowHolder(v);
    return mh;
}

From Starting to Ending you have to manage isViewWithCatalog variable for displaying which layout first.

Answer 2

I think after scrolling and changed back to grid view, the first item is not recreated. I solved this by override getItemViewType() and inflate the layout files in onCreateViewHolder accordingly.

Answer 3

i use viewflipper and change type show list with animation . and beautiful .

in main xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<ViewFlipper android:id="@+id/view_flipper"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v7.widget.RecyclerView 
        android:id="@+id/small_list"   android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:overScrollMode="never" />
    <android.support.v7.widget.RecyclerView android:scrollbarStyle="insideInset"
        android:id="@+id/big_list"  android:scrollbars="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:overScrollMode="never" />
    <android.support.v7.widget.RecyclerView android:scrollbarStyle="insideInset"
        android:id="@+id/grid_list" android:paddingLeft="2.0dip" android:paddingRight="2.0dip" android:layout_width="match_parent" android:layout_height="match_parent" android:overScrollMode="never" />
</ViewFlipper>

all code in activity

    private RecyclerView smallRecycleView;
private RecyclerView gridRecycleView;
private RecyclerView bigRecycleView;

private StaggeredGridLayoutManager gridLayoutManager;
private LinearLayoutManager bigLayoutManager;
private LinearLayoutManager smallLayoutManager;

private AAdapter adapterGrid;
private AAdapter adapterSmall;
private AAdapter adapterBig;

private ViewFlipper viewFlipper;


private TypeShow typeShowList = TypeShow.Small;


private AList list = null;

@Override
protected void onCreate(Bundle savedInstanceState) {
    setLayout( R.layout.main_layout);
    super.onCreate(savedInstanceState);

    try {

        list = getItems(10);


        viewFlipper = ((ViewFlipper)findViewById(R.id.view_flipper));
        viewFlipper.setOutAnimation(MainActivity.this, R.anim.anim_fade_out_flip);
        viewFlipper.setInAnimation(MainActivity.this, R.anim.anim_fade_in_flip);

        smallRecycleView = ((RecyclerView)findViewById(R.id.small_list));
        gridRecycleView = ((RecyclerView)findViewById(R.id.grid_list));
        bigRecycleView = ((RecyclerView)findViewById(R.id.big_list));

        smallRecycleView.setHasFixedSize(false);
        gridRecycleView.setHasFixedSize(false);
        bigRecycleView.setHasFixedSize(false);

        smallLayoutManager = new LinearLayoutManager(MainActivity.this);
        smallRecycleView.setLayoutManager(smallLayoutManager);
        gridLayoutManager = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
        gridRecycleView.setLayoutManager(gridLayoutManager);
        gridRecycleView.setItemAnimator(null);
        bigLayoutManager = new LinearLayoutManager(MainActivity.this);
        bigRecycleView.setLayoutManager(bigLayoutManager);


        adapterSmall = new AAdapter(MainActivity.this,list,MainActivity.this,TypeShow.Small);
        smallRecycleView.setAdapter(adapterSmall);

        adapterGrid = new AAdapter(MainActivity.this,list,MainActivity.this,TypeShow.Grid);
        gridRecycleView.setAdapter(adapterGrid);

        adapterBig = new AAdapter(MainActivity.this,list,MainActivity.this,TypeShow.Big);
        bigRecycleView.setAdapter(adapterBig);





        if (Build.VERSION.SDK_INT >= 11)
        {
            smallRecycleView.setVerticalScrollbarPosition(1);
            gridRecycleView.setVerticalScrollbarPosition(1);
            bigRecycleView.setVerticalScrollbarPosition(1);
        }

        final FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.floating_action_button);
               fab.setOnClickListener(new View.OnClickListener() {
                       @Override
                       public void onClick(View view) {
                           smallRecycleView.setSelected(false);
                           bigRecycleView.setSelected(false);
                           gridRecycleView.setSelected(false);
                           viewFlipper.showNext();

                           if(typeShowList == TypeShow.Small){
                               typeShowList = TypeShow.Big;
                               fab.setImageResource(R.drawable.ic_type_grid);
                           }
                           else if(typeShowList == TypeShow.Big){
                               typeShowList = TypeShow.Grid;
                               fab.setImageResource(R.drawable.ic_atype_small);
                           }
                           else {
                               typeShowList = TypeShow.Small;
                               fab.setImageResource(R.drawable.ic_type_big);
                           }
                        }
               });
        fab.setImageResource(R.drawable.ic_type_big);

    }
    catch (Exception e){
    }
}

type

public enum TypeShow {
Grid,
Small,
Big }

adapter

public class AAdapter extends RecyclerView.Adapter<AAdapter.PersonViewHolder> {

private AList noteList = null;
private MainActivity mContext;
private TypeShow typeShow; 

public AAdapter(MainActivity mContext, AList noteList, OnItemClickListener mListener, TypeShow typeShow){
    this.noteList = noteList;
    this.mContext= mContext;
    this.mListener= mListener;
    this.typeShow= typeShow; 
}

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

@Override
public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    if(typeShow == TypeShow.Grid) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.activity_row_grid, viewGroup, false);
        return new PersonViewHolder(v);
    }
    else if(typeShow == TypeShow.Small) {

        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.activity_row_small, viewGroup, false);
        return new PersonViewHolder(v);
    }
    else {  
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.activity_row_big, viewGroup, false);
        return new PersonViewHolder(v);
    }
}


@Override
public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
 }


public static class PersonViewHolder extends RecyclerView.ViewHolder {

    PersonViewHolder(View itemView) {
        super(itemView);

    }
}
}

Answer 4

I solved this problem by setting the adapter again to the RecyclerView, after changing the layout manager.

listView.setLayoutManager(new LinearLayoutManager(this));
listView.setAdapter(adapter);

Answer 5

In this SDK samples there is a complete example however it uses one layout file for both LayoutManagers

For keeping the scrolling position when switching the layout they used this function

public void setRecyclerViewLayoutManager(LayoutManagerType layoutManagerType) {
    int scrollPosition = 0;

    // If a layout manager has already been set, get current scroll position.
    if (mRecyclerView.getLayoutManager() != null) {
        scrollPosition = ((LinearLayoutManager) mRecyclerView.getLayoutManager())
                .findFirstCompletelyVisibleItemPosition();
    }

    switch (layoutManagerType) {
        case GRID_LAYOUT_MANAGER:
            mLayoutManager = new GridLayoutManager(getActivity(), SPAN_COUNT);
            mCurrentLayoutManagerType = LayoutManagerType.GRID_LAYOUT_MANAGER;
            break;
        case LINEAR_LAYOUT_MANAGER:
            mLayoutManager = new LinearLayoutManager(getActivity());
            mCurrentLayoutManagerType = LayoutManagerType.LINEAR_LAYOUT_MANAGER;
            break;
        default:
            mLayoutManager = new LinearLayoutManager(getActivity());
            mCurrentLayoutManagerType = LayoutManagerType.LINEAR_LAYOUT_MANAGER;
    }

    mRecyclerView.setLayoutManager(mLayoutManager);
    mRecyclerView.scrollToPosition(scrollPosition);
}