Fragment content not visible on adding it to view pager of an activity?

Question

I have put viewpager in an activity and view pager contains 3 fragments but on running app it doesn't show the fragment related data.Following is the aatached code, please help.

Its not throwing any error but the fragment content is not visible though the tab-titles are visible. I saw certain links where they ask you to add getChildFragmentManager() but after searching i got to know that its not supported in activity.

MainActivity.java

package kbg.com.kbgpos;

import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;


public class MainActivity extends AppCompatActivity {
Toolbar toolbar;
DrawerLayout drawerLayout;
ActionBarDrawerToggle actionBarDrawerToggle;
TabLayout tabLayout;
ViewPager viewPager;
ViewPagerAdapter viewPagerAdapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        toolbar=(Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        drawerLayout=(DrawerLayout) findViewById(R.id.drawer_layout);
        actionBarDrawerToggle=new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.drawer_open,R.string.drawer_close);
        actionBarDrawerToggle.getDrawerArrowDrawable().setColor(getResources().getColor(R.color.hamburgerColor));
        drawerLayout.setDrawerListener(actionBarDrawerToggle);
        tabLayout=(TabLayout) findViewById(R.id.tabLayout);
        viewPager=(ViewPager) findViewById(R.id.viewPager);
        viewPagerAdapter=new ViewPagerAdapter(getSupportFragmentManager());
        viewPagerAdapter.addFragments(new Personal_Info_Fragment(),"Personal Info");
        viewPagerAdapter.addFragments(new EducationalExperience_Info_Fragment(),"Edu & Exp Info");
        viewPagerAdapter.addFragments(new OtherInfo_Fragment(),"Official Info");
        viewPager.setAdapter(viewPagerAdapter);
        tabLayout.setupWithViewPager(viewPager);
    }

    @Override
    protected void onPostCreate(@Nullable Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        actionBarDrawerToggle.syncState();
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawer_layout">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

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

    <android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:background="#b3d9ff"
        app:tabTextAppearance="@style/TabLayoutStyle">

    </android.support.design.widget.TabLayout>

</android.support.design.widget.AppBarLayout>

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

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

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_drawer_header"
        app:itemIconTint="#006699"
        app:menu="@menu/drawer_menu">

    </android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

Personal_Info_Fragment

package kbg.com.kbgpos;


import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class Personal_Info_Fragment extends Fragment {


    public Personal_Info_Fragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_personal__info_, container, false);
    }

}

ViewPagerAdapter.java

package kbg.com.kbgpos;

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

public class ViewPagerAdapter extends FragmentPagerAdapter {
    ArrayList<Fragment> fragments=new ArrayList<>();
    ArrayList<String> tabTitles=new ArrayList<>();

    public void addFragments(Fragment fragments,String titles){
        this.fragments.add(fragments);
        this.tabTitles.add(titles);
    }

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    @Override
    public int getCount() {
        return fragments.size();
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitles.get(position);
    }
}

fragment_personal__info_.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".Personal_Info_Fragment">


   <android.support.v7.widget.CardView
       android:id="@+id/info_cardView"
       android:layout_width="match_parent"
       android:layout_height="80dp"
       android:layout_margin="5dp"
       card_view:cardElevation="2dp"
       card_view:contentPadding="5dp"
       card_view:cardCornerRadius="2dp"
       card_view:cardBackgroundColor="#e5c68b">

       <RelativeLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content">
           <ImageView
               android:id="@+id/infoIcon"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:src="@drawable/ic_info_black_24dp"
               android:layout_centerVertical="true"
               android:layout_marginRight="2dp"/>
           <TextView
               android:layout_toRightOf="@id/infoIcon"
               android:layout_marginLeft="4dp"
               android:layout_width="match_parent"
               android:layout_height="wrap_content"
               android:text="Please Enter Complete and Valid Information Within the Forms As This Will Be Treated As Final Info"
               android:textColor="@android:color/white"
               android:textSize="14sp"
               android:textAllCaps="true"
               android:textStyle="bold"/>

       </RelativeLayout>

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

</FrameLayout>

Please help as how can i see the content of fragments on viewpager tabs which are shown empty at the moment.

Answer 1

A DrawerLayout is supposed to have 2 children, the main content and the navigation view.

In your case you have 3 children:

<DrawerLayout ...>
    <AppBarLayout /> 
    <ViewPager />
    <NavigationView />
</DrawerLayout>

So try to wrap the AppBarLayout and ViewPager into a LinearLayout so that in the end the DrawerLayout to have just 2 children as expected.

<DrawerLayout ...>
    <LinearLayout orientation="vertical">
         <AppBarLayout /> 
         <ViewPager />
    </LinearLayout>
    <NavigationView />
</DrawerLayout>