toggling between two layouts in a recycler view

Question

[The List layoutim new to using recyclerview, ive seen some questions and none really answers the question i have. i have 2 layouts, one a custom list view with text and a profile avatar, the text and image are nested in a cardview which matches the screen in width. the other is the same content(with same ids) but here the image and text are set to wrap content so that they appear in a grid format(like flash share/xender implementation of its mainActivity). what i really want to do is to toggle between these two layouts at runtime using the:

RecyclerView.setLayoutManager(new LinearLayout(this);

for the first layout and:

RecyclerView.setLayoutManager(new GridLayoutManager(ClassList.this, 3));

for the 2nd layout that has its width set to wrap content, so that it looks better when rendered. here's the list layout 1:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="100dp"
card_view:cardElevation="4dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="5dp"
android:padding="5dp"
android:layout_margin="5dp"
android:foreground="?attr/selectableItemBackground">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="2dp"
    android:layout_margin="2dp"
    android:orientation="horizontal">

    <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/student_avatar"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:src="@drawable/nothing"
        app:border_color="#FF000000" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <TextView
            android:id="@+id/student_name_edit_all"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Chinedum Ofomata Agu"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <TextView
            android:id="@+id/student_reg_number_edit_all"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Reg: 2014544402"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </LinearLayout>

</LinearLayout>
</android.support.v7.widget.CardView>

the second(grid) layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:padding="5dp"
android:layout_margin="5dp"
android:gravity="center"
android:background="?android:attr/selectableItemBackground"
android:scrollbarStyle="insideInset"
android:orientation="vertical">

<de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/student_avatar"
    android:layout_width="75dp"
    android:layout_height="75dp"
    android:layout_gravity="center"
    android:scaleType="centerCrop"
    android:src="@drawable/nothing"
    app:border_color="#FF000000" />

<TextView
    android:id="@+id/student_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="Chinedum Agu"
    android:textAppearance="?android:attr/textAppearanceMedium" />

<TextView
    android:id="@+id/student_reg_number"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical|center"
    android:text="Reg: 2014544402"
    android:textAppearance="?android:attr/textAppearanceSmall" />

</LinearLayout>

i implemented onClickListener my mainActivity, so i control the click response of the Recycler View in my Main Activity not inside my adapter class. most of the questions and answers i found around where on how to implement multiple views at once like a StaggeredGridView, but what i want is a way to inflate both layouts and switch them at runtime.

heres my adapter class(without any dataset yet):

public class ClassListAdapter extends RecyclerView.Adapter<ClassListAdapter.Holder> {

private static final String TAG = ClassListAdapter1.class.getSimpleName();
private static clickListener mClickListener;
View row;

public ClassListAdapter(clickListener listener) {
    mClickListener = listener;
}


@Override
public Holder onCreateViewHolder(ViewGroup parent, int viewType) {
    row = LayoutInflater.from(parent.getContext()).inflate(R.layout.class_list_listview_cardview, parent, false);
    return new Holder(row);
}

@Override
public void onBindViewHolder(Holder holder, int position) {
}

@Override
public int getItemCount() {
    return 10;
}

public class Holder extends RecyclerView.ViewHolder implements View.OnClickListener {
    private ImageView student_avatar;
    private TextView student_name, reg_number;
    View mview;

    public Holder(View itemView) {
        super(itemView);
        mview = itemView;

        student_avatar = (ImageView) itemView.findViewById(R.id.student_avatar);
        student_name = (TextView) itemView.findViewById(R.id.student_name);
        reg_number = (TextView) itemView.findViewById(R.id.student_reg_number);
        itemView.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        mClickListener.onItemClick(getLayoutPosition());
    }
}

public interface clickListener {
    void onItemClick(int position);
    //  void onItemLongClick(int position);
}
}

and heres my mainActivity code:

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.class_list_recyclerview);
toolbar = (Toolbar) findViewById(R.id.default_toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerView);
classListAdapter = new ClassListAdapter(ClassList.this);
configViews();
}

@Override
public void onItemClick(int position) {
Toast.makeText(ClassList.this, "You clicked item" + " " + position, Toast.LENGTH_SHORT).show();
intent = new Intent(ClassList.this, Profile.class);
startActivity(intent);
overridePendingTransition(R.anim.pull_in_right, R.anim.push_out_left);
}

private void configViews() {

mRecyclerView.setLayoutManager(new LinearLayoutManager(ClassList.this, LinearLayoutManager.VERTICAL, false));
mRecyclerView.setHasFixedSize(true);
mRecyclerView.setRecycledViewPool(new RecyclerView.RecycledViewPool());
mRecyclerView.setAdapter(classListAdapter);

}

I do not want the both layouts to show at once, but to display a certain one based on the user's choice. please any suggestion would be greatly appreciated. thanks.

Answer 1

Initially isList value is true

mLinearLayoutManager = new LinearLayoutManager(getActivity());
mLinearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
mGridLayourManager = new GridLayoutManager(getActivity(),3);
setLayoutManager();


private void setLayoutManager() {
        if (isList) {
            mRVList.setLayoutManager(mLinearLayoutManager);
        }else{
            mRVList.setLayoutManager(mGridLayourManager);
        }
    }

//press the list toggle button

isList=!isList;
setLayoutManager();
mAdapter.setList(isList);
mRVList.setAdapter(mAdapter);

Adapter Class changes

@Override
public AdapterRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext()).inflate(isList ? R.layout.row_layout_list : R.layout.row_layout_grid, null);
    AdapterRowHolder holder = new AdapterRowHolder(v);
    return holder;
}

Answer 2

You should use GridLayout all the way and setSpanSizeLookup for every item you want to add.

In your case I would've made the span count for the first item to be 2 and the items that follows to be 1

RecyclerView.setLayoutManager(new GridLayoutManager(ClassList.this, 2));
mLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
        @Override
        public int getSpanSize(int position) {
            if (position == 0) {
                return 2;
            } else {
                return 1;
            }
        }
    });