Sliding Tabs With RecyclerView

Question

I want to display text and images in sliding tabs using the RecyclerView. I think I have it setup correctly to this point and I think the last piece of the puzzle is the LayoutManager but it gives me an error under the onCreateView I already made a variable for it so I am not sure how to go on further.

This is how it must look at the end

Main Activity

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    ViewPager pager = (ViewPager) findViewById(R.id.viewPager);
    pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setBackgroundColor(getResources().getColor(R.color.colorPrimaryDark));
    tabs.setIndicatorColor(getResources().getColor(R.color.colorAccent));
    tabs.setDividerColor(getResources().getColor(R.color.colorPrimary));
    tabs.setTextColor(getResources().getColor(R.color.colorTest));
    tabs.setViewPager(pager);


}

class MyPagerAdapter extends FragmentPagerAdapter {

    String[] adapter_one_tabs;


    public MyPagerAdapter(FragmentManager fm) {
        super(fm);
        adapter_one_tabs = getResources().getStringArray(R.array.adapter_one_tabs);
    }

    @Override
    public Fragment getItem(int position) {

        return MyFragment.getInstance(position);
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return adapter_one_tabs[position];
    }

    @Override
    public int getCount() {
        return 4;
    }
}


public static class MyFragment extends Fragment {
    public static final String TAB_POSITION_KEY = "TAB_POSITION_KEY";
    private RecyclerView mRecyclerView;
    private RecyclerView.LayoutManager mLayoutManager;
    private RecyclerView.Adapter mAdapter;


    public static MyFragment getInstance(int position) {

        MyFragment myFragment = new MyFragment();
        Bundle args = new Bundle();
        args.putInt(TAB_POSITION_KEY, position);
        myFragment.setArguments(args);
        return myFragment;
    }

    @Override

    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View layout = inflater.inflate(R.layout.recyclerview_fragment, container, false);

        Bundle bundle = getArguments();

        int position = bundle.getInt(TAB_POSITION_KEY);

        mRecyclerView = (RecyclerView) layout.findViewById(R.id.recycler_view);

        switch (position) {

            case 0:

                mAdapter = new AdapterOne();
                mRecyclerView.setAdapter(mAdapter);


                break;

            case 1:

                mAdapter = new AdapterTwo();
                mRecyclerView.setAdapter(mAdapter);


                break;

            case 2:

                mAdapter = new AdapterThree();
                mRecyclerView.setAdapter(mAdapter);


                break;

            case 3:

                mAdapter = new AdapterFour();
                mRecyclerView.setAdapter(mAdapter);


                break;

        }

        return layout;
    }

}

}

AdapterOne

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

List<AdapterData> mItems;

public AdapterOne() {
    super();
    mItems = new ArrayList<AdapterData>();
    AdapterData data = new AdapterData();
    data.setThumbnail(R.drawable.afghanistan);
    data.setName("Afghanistan");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.albania);
    data.setName("Albania");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.algeria);
    data.setName("Algeria");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.american_samoa);
    data.setName("American Samoa");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.andorra);
    data.setName("Andorra");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.angola);
    data.setName("Angola");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.anguilla);
    data.setName("Anguilla");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.antigua_and_barbuda);
    data.setName("Antigua and Barbuda");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.argentina);
    data.setName("Argentina");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.armenia);
    data.setName("Armenia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.aruba);
    data.setName("Aruba");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.australia);
    data.setName("Australia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.austria);
    data.setName("Austria");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.azerbaijan);
    data.setName("Azerbaijan");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bahamas);
    data.setName("Bahamas");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bahrain);
    data.setName("Bahrain");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bangladesh);
    data.setName("Bangladesh");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.barbados);
    data.setName("Barbados");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.belarus);
    data.setName("Belarus");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.belgium);
    data.setName("Belgium");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.belize);
    data.setName("Belize");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.benin);
    data.setName("Benin");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bermuda);
    data.setName("Bermuda");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bhutan);
    data.setName("Bhutan");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bolivia);
    data.setName("Bolivia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bosnia_and_herzegovina);
    data.setName("Bosnia and Herzegovina");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.botswana);
    data.setName("Botswana");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.brazil);
    data.setName("Brazil");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.british_virgin_islands);
    data.setName("British Virgin Islands");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.brunei);
    data.setName("Brunei");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.bulgaria);
    data.setName("Bulgaria");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.burkina_faso);
    data.setName("Burkina Faso");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.burundi);
    data.setName("Burundi");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cambodia);
    data.setName("Cambodia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cameroon);
    data.setName("Cameroon");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.canada);
    data.setName("Canada");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cape_verde);
    data.setName("Cape Verde");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cayman_islands);
    data.setName("Cayman Islands");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.central_african_republic);
    data.setName("Central African Republic");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.chad);
    data.setName("Chad");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.chile);
    data.setName("Chile");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.china);
    data.setName("China");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.colombia);
    data.setName("Colombia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.comoros);
    data.setName("Comoros");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cook_islands);
    data.setName("Cook Islands");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.costa_rica);
    data.setName("Costa Rica");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cote_divoire);
    data.setName("Cote d'Ivoire");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.croatia);
    data.setName("Croatia");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cuba);
    data.setName("Cuba");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cayman_islands);
    data.setName("Cayman Island");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.curacao);
    data.setName("Curacao");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.cyprus);
    data.setName("Cyprus");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.czech_republic);
    data.setName("Czech Republic");
    mItems.add(data);

    data = new AdapterData();
    data.setThumbnail(R.drawable.democratic_republic_of_the_congo);
    data.setName("Democratic Republic of the Congo");
    mItems.add(data);


}

@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
    View v = LayoutInflater.from(viewGroup.getContext())
            .inflate(R.layout.recycler_view_card_item, viewGroup, false);
    return new ViewHolder(v);
}

@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
    AdapterData movie = mItems.get(i);
    viewHolder.natThumbnail.setImageResource(movie.getThumbnail());
    viewHolder.natName.setText(movie.getName());
}

@Override
public int getItemCount() {

    return mItems.size();
}

class ViewHolder extends RecyclerView.ViewHolder{

    public ImageView natThumbnail;
    public TextView natName;


    public ViewHolder(View itemView) {
        super(itemView);
        natThumbnail = (ImageView)itemView.findViewById(R.id.layoutThumbnail);
        natName = (TextView)itemView.findViewById(R.id.layoutName);
    }
}
}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ads="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@color/colorBackground"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:background="@color/colorPrimary"
    android:minHeight="?attr/actionBarSize" >
</android.support.v7.widget.Toolbar>

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip" />

<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0dp" />


</LinearLayout>

recyclerview_fragment.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

</LinearLayout>

recycler_view_card_item.xml

<LinearLayout 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="match_parent"
android:orientation="vertical">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:foreground="?android:attr/selectableItemBackground"
    card_view:cardCornerRadius="3dp"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#DDD">

        <ImageView
            android:id="@+id/layoutThumbnail"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:src="@drawable/afghanistan"
            android:gravity="center_vertical"
            android:layout_centerHorizontal="true"
            />
        <TextView

            android:id="@+id/layoutName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Country Name"
            android:textSize="@dimen/abc_text_size_body_1_material"
            android:layout_below="@id/layoutThumbnail"
            android:layout_centerInParent="true"

            />
    </RelativeLayout>

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

</LinearLayout>

Answer 1

All right I get what your error is :

The log say no suitable constructor found for GridLayoutManager(MyFragment, int).

The available constructor for GridLayoutManager are :

// Constructor used when layout manager is set in XML by RecyclerView attribute "layoutManager".
GridLayoutManager(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) 

// Creates a vertical GridLayoutManager
GridLayoutManager(Context context, int spanCount)

GridLayoutManager(Context context, int spanCount, int orientation, boolean reverseLayout)

As you can see the first parameter is the Context not a Fragment :)

So simply change this to the context :

mLayoutManager = new GridLayoutManager(getActivity(), 3); 
mRecyclerView.setLayoutManager(mLayoutManager); 

And it will normally work :)

EDIT

I put you the code where the lines can be put :

public static class MyFragment extends Fragment {

    ...

    @override
    public void onCreate (Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // HERE YOU INITIALIZE THE GRID LAYOUT MANAGER
        mLayoutManager = new GridLayoutManager(getActivity(), 3); 
    }

    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {

        View layout = inflater.inflate(R.layout.recyclerview_fragment, container, false);
        Bundle bundle = getArguments();
        int position = bundle.getInt(TAB_POSITION_KEY);

        mRecyclerView = (RecyclerView) layout.findViewById(R.id.recycler_view);

        switch (position) {
            ...
        }

       // HERE YOU SET THE RECYCLER VIEW
       mRecyclerView.setLayoutManager(mLayoutManager); 

       return layout;
    }

}