viewPager not displaying fragment

Question

for this project, I have tabs that have to display something under them and i'm using view pager but for some reason, the fragment layout isn't showing up on screen. I get a blank screen but there is no error or anything. I have been googling and searching for hours now and even started a new project just to make sure it was not a build error but still no luck in finding a solution to my problem. I have done examples like this many times and used the exact same steps but for some reason, it just isn't working this time. Any help would be greatly appreciated

Here is my mainActivity class

public class MainActivity extends ActionBarActivity {

Toolbar toolbar;
ViewPager myViewPager;
SlidingTabLayout mySlidingTabs;

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

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

    myViewPager = (ViewPager) findViewById(R.id.viewPager);
    myViewPager.setAdapter(new MyPagerAdapter(getSupportFragmentManager(), this));

    mySlidingTabs = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
    mySlidingTabs.setViewPager(myViewPager);
    }
}

Here is my custom adapter class

public class MyPagerAdapter extends FragmentPagerAdapter {

private Context context;
private String[] tabNames = {"Beverages", "Deli & Bakery", "Fresh Produce", "Health & Beauty", "Meat & Seafood", "Natural Foods", "Pet Care"};

public MyPagerAdapter(FragmentManager fm, Context context) {
    super(fm);
    this.context = context;
}

@Override
public Fragment getItem(int position) {

    if (position == 0) {
        return new Beverages();
    }

    else if (position == 1) {
        return new DeliBakery();
    }

    return null;
}

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

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

Here is my main activty.xml

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

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar_layout"
    android:layout_height="wrap_content"
    android:layout_width="match_parent" />

<!-- The Sliding tab -->
<bello.myapplication.SlidingTabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/sliding_tabs"/>

<!-- The pager that allows us to swipe between fragments -->
<android.support.v4.view.ViewPager
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="0px"
    android:layout_weight="1"
    android:background="@android:color/white" />

</LinearLayout>

and here is one of my tab's xml file

<?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">


<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Tab fragment 1"
    android:textSize="50dp"
    android:padding="5dp" />

</RelativeLayout>

Here is one of my fragment classes

public class Beverages extends Fragment {

@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View view = inflater.inflate(R.layout.beverages_tab, container, false);
    return view;
}
}

Answer 1

Figured out the problem. The viewpager background color and the background color of the tabs where the same so it made it look like there was a black activity. So for anyone else out there with the same problem, try changing either the text color of your tabs.xml or change the background of your viewpager

Answer 2

When something strange like this happens, try to use Log.i("title", "message") to track if every class/methods are being called.

In your case, it seens that your viewpager isn't in the screen.

If I understood your code, your <include> tag is including the second xml code you posted right?

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">


<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Tab fragment 1"
    android:textSize="50dp"
    android:padding="5dp" />

</RelativeLayout>

It looks like your layout_height="match_parent" is filling all the space on your screen, giving no space to your ViewPager being inflated by the system, try to change it to layout_height="wrap_content and you should be done.

If not, try to change the background of your ViewPager to check if it is on the screen and is not being hided by something else.