Android ViewPager zeigt Ansichten oben auf TabLayout an

Question

Ich versuche, zwei Tabs in meinem TabLayout einzurichten. Auf der ersten Registerkarte wird das Profil angezeigt, auf der zweiten Registerkarte wird die Aktivität angezeigt. Ich habe den TabLayout und ViewPager Setup. Ich habe auch den benötigten Adapter erstellt, um die beiden Fragmente in das Tablayout zu verlinken. Wenn ich das auf meinem Telefon starte, werden die zwei Bildschirme und Registerkarten zwar angezeigt, aber sie werden nicht im Registerbereich angezeigt - sie verdecken die eigentlichen Registerkarten. Ich verwende die Design-Support-Bibliothek (v23.1.1)

Ich habe eine Hauptaktivitätsdatei mit einem Fragmentbereich, der die Ansicht ändert, je nachdem, was der Benutzer tun möchte.

Was kann ich tun, damit der Tab-Inhalt in den Tabs und nicht über den Tabs angezeigt wird? Hier ist mein Code:

EDIT: Hier ist die profile_fragment.xml-Datei (das ist, wo ich die Tabs wollen passieren):

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

ProfileFragment - Dieses Fragment wird verwendet, um die zwei Registerkarten anzuzeigen.

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 ermöglicht es seinen Kindern überlappen. Der ViewPager ist das zweite Kind, also wird es oben liegen, wenn es überlappt. Es gibt nichts, was seine Höhe einschränkt, also nimmt es die gesamte Bildschirmhöhe und deckt somit das TabLayout ab.

Die einfachste Lösung ist die RelativeLayout zu einem LinerLayout zu ändern:

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

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

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

</LinearLayout> 

Wenn Sie möchten, mit RelativeLayout zu halten, können Sie diese stattdessen tun:

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