Android ViewPagerがTabLayoutの上にビューを表示

Question

私はTabLayoutに2つのタブを設定しようとしています。最初のタブはプロファイルを表示し、2番目のタブはアクティビティを表示します。 TabLayoutとViewPagerの設定があります。また、2つのフラグメントをタブレイアウトにリンクするために必要なアダプタを作成しました。これを私の携帯電話で実行すると、2つの画面とタブが表示されますが、タブ領域には表示されません。実際のタブは覆い隠されています。私はデザインサポートライブラリ（v23.1.1）を使用しています

私は、ユーザーが何をしたいかに応じてビューを変更するフラグメント領域を持つ主なアクティビティファイルを持っています。

タブのコンテンツがタブの内側に表示されるようにするにはどうすればよいですか？ここに私のコードです：

EDIT：

<RelativeLayout 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="Fragments.ProfileFragment"> 

<!-- TODO: Update blank fragment layout --> 
<android.support.design.widget.TabLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id = "@+id/ProfileTabLayout" 
    android:background="@color/colorPrimary" 
    app:tabGravity="fill" 
    app:tabMode="fixed" 
    app:tabTextColor="@color/colorIcons" 
    > 
</android.support.design.widget.TabLayout> 
<android.support.v4.view.ViewPager 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:id = "@+id/ProfilePager" 
    ></android.support.v4.view.ViewPager> 

user_profile_tab_layout.xml

<?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="wrap_content"> 
    <android.support.v7.widget.CardView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="@color/colorPrimaryLight" 
     android:layout_alignParentTop="true"> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical"> 
      <ImageView 
       android:layout_width="100dp" 
       android:layout_height="100dp" 
       android:layout_gravity="center" 
       android:src="@drawable/person_profile" 
       android:layout_margin="5dp"/> 
      <TextView 
       style="@style/TextViewStyle" 
       android:id = "@+id/userTitleTextView" 
       android:textSize="24sp" 
       android:textStyle="bold" 
       android:text = "@string/sample_profile_nameSurname" 
       /> 

      <TextView 
       style="@style/TextViewStyle" 
       android:id = "@+id/UserTypeTextView" 
       android:text="@string/sample_user_type" 
       android:textStyle="bold|italic" 
       android:textSize="18dp"/> 
      <TextView 
       style="@style/EditTexStyle" 
       android:id = "@+id/profileDeatilsHead" 
       android:background="@color/colorPrimaryDark" 
       android:text="@string/sample_profile_details" 
       android:textColor="@color/colorIcons" 
       /> 
      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/club_reg_string" 
        android:id = "@+id/clubNameLabel" 
        android:layout_alignParentLeft="true" 
        android:layout_margin="5dp"/> 
       <TextView 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:text="@string/sample_club_string" 
        android:id = "@+id/clubNameText" 
        android:layout_toRightOf="@id/clubNameLabel" 
        android:layout_alignBaseline="@id/clubNameLabel" 
        android:layout_alignParentRight="true" 
        android:layout_margin="5dp"/> 
      </RelativeLayout> 
     </LinearLayout> 

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

</RelativeLayout> 

：ここprofile_fragment.xmlファイル（私はタブが起こるしたいところですが）であります

ProfileFragment - このフラグメントは、2つのタブを表示するために使用されます。

public class ProfileFragment extends Fragment { 

private TabLayout profileTabLayout; 
private ViewPager profileViewPager; 
private ProfileViewPageAdapter profileViewPageAdapter; 
public ProfileFragment() { 
    // Required empty public constructor 
} 


@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, 
         Bundle savedInstanceState) { 
    // Inflate the layout for this fragment 
    View myView = inflater.inflate(R.layout.fragment_profile, container, false); 
    profileTabLayout = (TabLayout) myView.findViewById(R.id.ProfileTabLayout); 
    profileViewPager = (ViewPager) myView.findViewById(R.id.ProfilePager); 
    profileViewPageAdapter = new ProfileViewPageAdapter(getFragmentManager()); 
    profileViewPageAdapter.addFragmentWithTitle(new UserProfileTabFragment(), "My Profile"); 
    profileViewPageAdapter.addFragmentWithTitle(new UserActivityTabFragment(), "My Activity"); 
    profileViewPager.setAdapter(profileViewPageAdapter); 
    profileTabLayout.setupWithViewPager(profileViewPager); 

    return myView; 
}} 

UserProfileTabLayout

public class UserProfileTabFragment extends Fragment { 

public UserProfileTabFragment() 
{ 

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

Answer 1

RelativeLayoutは、その子がオーバーラップすることができます。 ViewPagerは2番目の子であるため、オーバーラップすると上に表示されます。高さを拘束するものは何もないので、画面全体の高さを取っているので、TabLayoutをカバーしています。

最も簡単な修正はLinerLayoutにRelativeLayoutを変更することです：

<LinearLayout 
    android:orientation="vertical" 
    ... > 

    <TabLayout 
     android:layout_height="wrap_content" 
     ... /> 

    <ViewPager 
     android:layout_height="0dp" 
     android:layout_weight="1" 
     ... /> 

</LinearLayout> 

あなたはRelativeLayoutを使用し続けたい場合は、あなたの代わりにこれを行うことができます：あなたが投稿

<RelativeLayout ... > 

    <TabLayout 
     android:id="@+id/ProfileTabLayout" 
     android:layout_height="wrap_content" 
     ... /> 

    <ViewPager 
     android:layout_height="0dp" 
     android:layout_alignParentBottom="true" 
     android:layout_below="@+id/ProfileTabLayout" 
     ... /> 

</RelativeLayout>