Displaying TabLayout and fragments with ViewPager inside card view

Question

I want to display two fragments in a cardview, i was able to display tablayout but not the fragments, tried everything, help me as this might be simple I guess. I uploaded screenshot as well, as seen from the screenshot tablayout is displayed correctly but not the fragment below it

Code in the Activity.

 ....
     //Creating our pager adapter
            Pager adapter = new Pager(getSupportFragmentManager(), Titles, 2);
    ...
    viewPager = (ViewPager) findViewById(R.id.srviewpager);
            //Adding adapter to pager
            viewPager.setAdapter(adapter);


        final TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        tabLayout.setupWithViewPager(viewPager);

..
public class Pager extends FragmentStatePagerAdapter {

        CharSequence Titles[]; // This will Store the Titles of the Tabs which are Going to be passed when ViewPagerAdapter is created
        int NumbOfTabs; // Store the number of tabs, this will also be passed when the ViewPagerAdapter is created
        private static final String TAG = "ViewPagerAdapter";

        // Build a Constructor and assign the passed Values to appropriate values in the class
        public Pager(FragmentManager fm, CharSequence mTitles[], int mNumbOfTabsumb) {
            super(fm);

            this.Titles = mTitles;
            this.NumbOfTabs = mNumbOfTabsumb;

        }

        //Overriding method getItem
        @Override
        public Fragment getItem(int position) {
            //Returning the current tabs
            switch (position) {
                case 0:
                    return new ShippingFragment();

                case 1:
                    return new ReturnsFragment();

            }
            return null;
        }

        // Overriden method getCount to get the number of tabs
        @Override
        public int getCount() {
            return NumbOfTabs;
        }
        @Override
        public CharSequence getPageTitle(int position) {
            return Titles[position];
        }
    }

this is my layout file, contains 3 cardview, the last cardview has to display two fragments, shipping and returns. So far I am able to display only tablayout with two tabs but not the fragments.

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

    <android.support.v7.widget.CardView
        android:id="@+id/description_cd"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="8dp"
        cardview:cardCornerRadius="8dp"
        cardview:cardElevation="15dp"
        cardview:cardBackgroundColor="@color/cardview_light_background"
        cardview:contentPadding="2dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true">



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

    <android.support.v7.widget.CardView
    android:id="@+id/features_cd"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    cardview:cardCornerRadius="8dp"
    cardview:cardElevation="15dp"
    cardview:cardBackgroundColor="@color/cardview_light_background"
    cardview:contentPadding="2dp"
        android:layout_below="@+id/description_cd"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="false"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_margin="8dp">



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

    <android.support.v7.widget.CardView
    android:id="@+id/sp_cd"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center"
    cardview:cardCornerRadius="8dp"
    cardview:cardElevation="15dp"
    cardview:cardBackgroundColor="@color/cardview_light_background"
    cardview:contentPadding="2dp"
        android:layout_below="@+id/features_cd"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="false"
        android:layout_margin="8dp">

    <com.spoorthy.apsaratrendz.thirdpartyviews.RippleView
        android:id="@+id/shipping_payment_rpv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        cardview:rv_color="@color/green"
        cardview:rv_type="rectangle"
        cardview:rv_rippleDuration="@integer/ripduration_rpv">


        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/shippingandreturns"
            android:id="@+id/textViewsp"
            android:layout_alignParentTop="true"
            android:singleLine="true"
            android:textSize="25sp"
            android:textStyle="bold"
            android:background="#FFFFFF"
            android:textColor="#d52e9e"
            android:inputType="text"
            android:padding="1dp"
            android:paddingEnd="1dp"
            android:paddingStart="1dp" />
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            android:layout_below="@+id/textViewsp"/>
        <android.support.v4.view.ViewPager
        android:id="@+id/srviewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
            android:layout_below="@+id/tabs"/>

    </com.spoorthy.apsaratrendz.thirdpartyviews.RippleView>

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



    </RelativeLayout>

Here are my two fragment layouts shippingfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<com.spoorthy.apsaratrendz.thirdpartyviews.ReadMoreTextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragmentText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textStyle="bold"
        android:text="@string/returns"
        android:layout_margin="4dp"
    android:padding="4dp" />

returnsfragment.xml

<?xml version="1.0" encoding="utf-8"?>
<com.spoorthy.apsaratrendz.thirdpartyviews.ReadMoreTextView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/fragmentText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:textStyle="bold"
        android:text="@string/returns"
        android:layout_margin="4dp"
    android:padding="4dp" />

And my two fragment java files..

public class ReturnsFragment extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.returnsfragment, null);

        return v;
    }

}

public class ShippingFragment extends Fragment {


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View v = inflater.inflate(R.layout.shippingfragment, null);

        return v;
    }

}

Answer 1

Solved the problem by changing the CardView layout height to 350dp, instead of match_parent.

<android.support.v7.widget.CardView
android:id="@+id/sp_cd"
android:layout_width="match_parent"
android:layout_height="350dp".../>