ViewPager2 with RecyclerView not displaying correctly

Question

I've been working on an app that uses a vertical RecyclerView inside a fragment, all inside a ViewPager2 object with a tabLayout. I can't seem to figure out how to make all these things work together. Currently, it looks like I got it to show the recycler view with the data but the tabs aren't showing up and the items in the list are spaced like they're different pages. Could someone explain how I'm messing up?

It looks like this:

I'd like it to be like this:

Here's the code so far:

Classes

MainActivity.java

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.Style;

public class MainActivity extends AppCompatActivity {

    private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Mapbox Access token
        Mapbox.getInstance(getApplicationContext(), getString(R.string.mapbox_api_key));

        setContentView(R.layout.activity_main);

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(mapboxMap -> mapboxMap.setStyle(Style.DARK, style -> {

            // Map is set up and the style has loaded. Now you can add data or make other map adjustments


        }));

        ViewPager2 pager = findViewById(R.id.view_pager);

        ViewPageAdapter pageAdapter = new ViewPageAdapter(getSupportFragmentManager(), getLifecycle());
        pager.setAdapter(pageAdapter);

        pager.setOrientation(ViewPager2.ORIENTATION_HORIZONTAL);

        TabLayout tabLayout = findViewById(R.id.tabLayout2);
        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        new TabLayoutMediator(tabLayout, pager,
                (tab, position) -> {
                    switch (position) {
                        case 0:
                            tab.setText(getString(R.string.stats_tab));
                            break;
                        case 1:
                            tab.setText(getString(R.string.news_tab));
                            break;
                        case 2:
                            tab.setText(getString(R.string.symptoms_tab));
                            break;
                        case 3:
                            tab.setText(getString(R.string.safety_tab));
                            break;
                        default:
                            break;
                    }
                }).attach();

        // Get data
        new StatsLoader("https://api.covid19api.com/summary", pageAdapter, pager).execute();

    }
}

StatsFragment.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import org.json.JSONArray;

public class StatsFragment extends Fragment {

    View view;
    RecyclerView recyclerView;
    JSONArray covidData;

    public StatsFragment(JSONArray data) {
        covidData = data;
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.view_page, container, false);
        recyclerView = view.findViewById(R.id.recyclerView2);
        LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setHasFixedSize(false);
        RecyclerView.Adapter mAdapter = new CustomListAdapter(covidData);
        recyclerView.setAdapter(mAdapter);
        return view;
    }
}

StatsLoader.java

import android.os.AsyncTask;
import android.util.Log;
import androidx.annotation.Nullable;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.ArrayList;
import javax.net.ssl.HttpsURLConnection;

public class StatsLoader extends AsyncTask {

    Exception exception;
    String urlString = "";
    static JSONArray covidData = new JSONArray();
    ViewPageAdapter pageAdapter;

    public StatsLoader(String url, ViewPageAdapter adapter) {
        super();
        urlString = url;
        pageAdapter = adapter;
    }

    @Nullable
    @Override
    public JSONArray doInBackground(String ... urls) {
        HttpsURLConnection connection = null;
        BufferedReader reader = null;

        try {

            URL url = new URL(urlString);
            connection = (HttpsURLConnection) url.openConnection();
            connection.connect();
            InputStream inputStream = connection.getInputStream();
            reader = new BufferedReader(new InputStreamReader(inputStream));

            StringBuilder buffer = new StringBuilder();
            String line = "";

            while ((line = reader.readLine()) != null) {
                buffer.append(line);
            }

            JSONObject json = new JSONObject(buffer.toString());
            covidData = json.getJSONArray("Countries");
            ArrayList

user_12553303 · Answer

for tablayout :

take/make tablayout outside the CollapsingToolbarLayout

and for "list are spaced" :

make wrap_content height in view_page code

also list_view LinearLayout height to wrap_content

hope it helped :)

user_6579192 · Answer

In your list_view , Use your parent layout height wrap_content not match_parent

ViewPager2 with RecyclerView not displaying correctly

Classes

MainActivity.java

StatsFragment.java

StatsLoader.java

Layouts

activity_main

view_page

list_view

2 Answers