TabLayout of ViewPager doesn't show the titles

Question

There are two problems which i am trying to solve.I will accept your answer even if you solve one: 1)My tabLayout does not show the title of the current page.It does not show any text.

2)I use instance of the same fragment across the viewPager.Each fragment fetches some data from net and displays in listView.When i move pages slowly across the viewPager all fragments work properly.But when i move fast or use tabs to reach another page some pages never load.Why would it be?

Activity:

public class WorldNews extends AppCompatActivity {

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

       AdView mAdView = (AdView) findViewById(R.id.adView);
       AdRequest adRequest = new AdRequest.Builder().build();
        mAdView.loadAd(adRequest);


        // Find the view pager that will allow the user to swipe between fragments
        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);

        // Create an adapter that knows which fragment should be shown on each page
        FragmentPageAdapter adapter = new FragmentPageAdapter(getSupportFragmentManager());

        // Set the adapter onto the view pager
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
        tabLayout.setupWithViewPager(viewPager,true);
        tabLayout.
    }
}

Adapter:

public class FragmentPageAdapter extends FragmentStatePagerAdapter {

    private String[] tabTitles = new String[]{"Tab1", "Tab2","Tab3" ,"Tab4" ,"Tab5","Tab6","Tab7","Tab8","Tab9","Tab10","Tab11","Tab12","Tab13","Tab14","Tab15"
            ,"Tab16","Tab17","Tab18","Tab19"};
    public FragmentPageAdapter(FragmentManager fm) {
        super(fm);
    }


    @Override
    public Fragment getItem(int position) {
        switch (position)
        {
            case 0:
                Log.d("Adapter","Case 0 called");
                return new LisViewFragment2();

            case 1:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=al-jazeera-english&sortBy=top&apiKey=6de");

            case 2:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=associated-press&sortBy=top&apiKey=6de");

            case 3:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=bbc-news&sortBy=top&apiKey=6de");

            case 4:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=cnn&sortBy=top&apiKey=6de");

            case 5:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=google-news&sortBy=top&apiKey=6de");

            case 6:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=independent&sortBy=top&apiKey=6de");

            case 7:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=metro&sortBy=top&apiKey=6de");

            case 8:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=mirror&sortBy=top&apiKey=6de");

            case 9:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=newsweek&sortBy=top&apiKey=6de");

            case 10:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=new-york-magazine&sortBy=top&apiKey=6de");

            case 11:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=reddit-r-all&sortBy=top&apiKey=6de");

            case 12:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=reuters&sortBy=top&apiKey=6de");

            case 13:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=the-guardian-uk&sortBy=top&apiKey=6de");

            case 14:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=the-hindu&sortBy=top&apiKey=6de");

            case 15:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=the-times-of-india&sortBy=top&apiKey=67de");

            case 16:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=the-new-york-times&sortBy=top&apiKey=6de");

            case 17:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=the-telegraph&sortBy=top&apiKey=6de");

            default:
                return ListViewFragment.newInstance("https://newsapi.org/v1/articles?source=usa-today&sortBy=top&apiKey=6de");


        }

    }

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

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


}

Here is the layout:

<RelativeLayout 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"
tools:context="com.example.android.gametalks.Activity.WorldNews">


    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
         />

<android.support.v4.view.ViewPager
    android:layout_below="@id/sliding_tabs"
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</android.support.v4.view.ViewPager>



    <com.google.android.gms.ads.AdView
        xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:id="@+id/adView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        ads:adSize="SMART_BANNER"
        ads:adUnitId="ca-app-pub-3940256099942544/6300978111">
    </com.google.android.gms.ads.AdView>
</RelativeLayout>

Here is the fragment:

public class ListViewFragment extends ListFragment implements LoaderManager.LoaderCallbacks<List<GameNews>> {

    public static ListViewFragment newInstance(String url) {
        Log.d("ListViewFragment","newInstance created");
        ListViewFragment f = new ListViewFragment();

        // Supply url input as an argument.
        Bundle args = new Bundle();
        args.putString("url", url);
        f.setArguments(args);
        return f;
    }

    List<GameNews> TotalNews;
     ListView gameListView;
     LinearLayout emptyView;
    Button retryButton;
    ListAdapter adapter ;
    private View progressBar;
    final   private int game_loader = 0;
    ArrayList<String> urls = new ArrayList<>();
    String mUrlString;
    int index;

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mUrlString = getArguments().getString("url");
        urls.add(mUrlString);

        TotalNews = new ArrayList<GameNews>();
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View rootView =  inflater.inflate(R.layout.fragment_list_view, container, false);

        ArrayList<GameNews> gameList = new ArrayList<>();
        adapter = new ListAdapter(getActivity(),gameList);
        return rootView;
    }

    @Override
    public void onViewCreated(View view, Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        emptyView = (LinearLayout) view.findViewById(R.id.no_internet_view);
        progressBar = view.findViewById(R.id.progress_bar);
        retryButton = (Button) view.findViewById(R.id.retry_button);
        gameListView = getListView();
        emptyView.setVisibility(View.INVISIBLE);
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        setListAdapter(adapter);

        //If connected to net start the loader
        if(isConnected())
        {
            getActivity().getSupportLoaderManager().restartLoader(game_loader, null, ListViewFragment.this);
            if(progressBar.getVisibility() == View.VISIBLE)
            {
                Log.d("Fragment","progress bar is still visible");
            }
        }
        //Otherwise show emptyView and hide listView
        else
        {
            emptyView.setVisibility(View.VISIBLE);
            gameListView.setVisibility(View.INVISIBLE);

        }
 }

    @Override
    public android.support.v4.content.Loader<List<GameNews>> onCreateLoader(int i, Bundle bundle) {
        AdManager manager =  new AdManager(getActivity());
        return new FragmentLoader(getActivity(),urls,1000);

    }

    @Override
    public void onLoadFinished(android.support.v4.content.Loader<List<GameNews>> loader, List<GameNews> games) {
       progressBar.setVisibility(View.INVISIBLE);
        adapter.clear();
        TotalNews.addAll(games);
        adapter.addAll(games);
       }

    @Override
    public void onLoaderReset(android.support.v4.content.Loader<List<GameNews>> loader) {
        adapter.clear();
    }

    //Method checks if there is internet
    public boolean isConnected() {
        ConnectivityManager manager = (ConnectivityManager)getActivity().getSystemService(CONNECTIVITY_SERVICE);
        NetworkInfo info = manager.getActiveNetworkInfo();
        if (info != null && info.isConnected()) {
            return true;
        }
        else {
            return false;
        }
    }
}

Answer 1

You are not seeing the title because you have a lot of tabs and there's no place for title. Consider using TabLayout.MODE_SCROLLABLE

tabLayout.setTabMode (TabLayout.MODE_SCROLLABLE);

Answer 2

For First Question try change tablayout in xml to:

<android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/red"
        android:minHeight="?attr/actionBarSize"
        android:elevation="10dp"
        app:tabIndicatorColor="@color/black"
        app:tabSelectedTextColor="@color/black"
        app:tabTextColor="@color/white"
        app:tabGravity="fill"
        />

choose your favorits colors