Tablayout-Titel sind in Android nicht sichtbar

Question

Wie der Titel erklärt, kann ich den Titel nicht im Tablayout sehen. Ich habe ein Tutorial auf Youtube verfolgt, um diese swipable Tabs zu erstellen. Hier der Link der tutorial

Ich habe alle Anweisungen im Video gefolgt, aber ich konnte die ähnlichen Ergebnisse nicht erhalten.

Hier ist mein Code

MainActivity.class

package com.example.kuro.bloodpressure; 

import android.annotation.TargetApi; 
import android.app.Activity; 
import android.app.AlertDialog; 
import android.content.DialogInterface; 
import android.os.Build; 
import android.os.Bundle; 
import android.support.design.widget.FloatingActionButton; 
import android.support.design.widget.Snackbar; 
import android.support.design.widget.TabLayout; 
import android.support.v4.view.ViewPager; 
import android.support.v7.app.AppCompatActivity; 
import android.support.v7.widget.Toolbar; 
import android.view.View; 
import android.view.Menu; 
import android.view.MenuItem; 
import android.widget.ImageView; 
import android.app.Fragment; 

public class MainActivity extends AppCompatActivity { 
    public Toolbar toolbar; 
    public TabLayout tabLayout; 
    public ViewPager viewPager; 
    public ViewPagerAdapter viewPagerAdapter; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 
     toolbar = (Toolbar) findViewById(R.id.toolbar); 
     setSupportActionBar(toolbar); 

     tabLayout = (TabLayout)findViewById(R.id.tablayout); 
     viewPager = (ViewPager)findViewById(R.id.viewpager); 
     viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager()); 
     viewPagerAdapter.addFragments(new Measure(), "MEASURE"); 
     viewPagerAdapter.addFragments(new People(), "PEOPLE"); 
     viewPager.setAdapter(viewPagerAdapter); 
     tabLayout.setupWithViewPager(viewPager); 

    } 


    @Override 
    public boolean onCreateOptionsMenu(Menu menu) { 
     // Inflate the menu; this adds items to the action bar if it is present. 
     getMenuInflater().inflate(R.menu.menu_main, menu); 
     return true; 
    } 

    @TargetApi(Build.VERSION_CODES.LOLLIPOP) 
    @Override 
    public boolean onOptionsItemSelected(MenuItem item) { 
     switch (item.getItemId()) { 
      case R.id.add_person: 
       AlertDialog.Builder add_people_form = new AlertDialog.Builder(MainActivity.this); 
       add_people_form.setView(R.layout.add_form) 
         .setCancelable(false) 
         .setPositiveButton("DONE", new DialogInterface.OnClickListener() { 
          @Override 
          public void onClick(DialogInterface dialog, int which) { 
           finish(); 
          } 
         }) 
         .setNegativeButton("CANCLE", new DialogInterface.OnClickListener() { 
          @Override 
          public void onClick(DialogInterface dialog, int which) { 
           dialog.cancel(); 
          } 
         }); 
       AlertDialog alert = add_people_form.create(); 
       alert.show(); 
       return true; 
      default: 
       return super.onOptionsItemSelected(item); 
     } 
    } 

} 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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" 
    android:fitsSystemWindows="true" 
    tools:context="com.example.kuro.bloodpressure.MainActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

     <include 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      layout="@layout/toolbar" 
      /> 
     <android.support.design.widget.TabLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:tabMode="fixed" 
      app:tabGravity="fill" 
      app:tabTextAppearance="@style/MyTabText" 
      android:id="@+id/tablayout"> 

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

    </android.support.design.widget.AppBarLayout> 
    <android.support.v4.view.ViewPager 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/viewpager"> 

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

    <!--<include layout="@layout/content_main"/>--> 

    <!--<android.support.design.widget.FloatingActionButton--> 
     <!--android:id="@+id/fab"--> 
     <!--android:layout_width="wrap_content"--> 
     <!--android:layout_height="wrap_content"--> 
     <!--android:layout_gravity="bottom|end"--> 
     <!--android:layout_margin="@dimen/fab_margin"--> 
     <!--android:src="@android:drawable/ic_dialog_email" />--> 

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

ViewPagerAdapter.class

package com.example.kuro.bloodpressure; 

import android.support.v4.app.Fragment; 
import android.support.v4.app.FragmentManager; 
import android.support.v4.app.FragmentPagerAdapter; 
import android.support.v4.view.PagerAdapter; 
import android.support.v4.view.ViewPager; 
import android.view.View; 

import java.util.ArrayList; 

/** 
* Created by Kuro on 4/16/2016. 
*/ 
public class ViewPagerAdapter extends FragmentPagerAdapter { 
    ArrayList<Fragment> fragments = new ArrayList<>(); 
    ArrayList<String> tabTitles = new ArrayList<>(); 

    public void addFragments(Fragment fragment, String title) { 
     this.fragments.add(fragment); 
     this.tabTitles.add(title); 

    } 

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

    @Override 
    public Fragment getItem(int position) { 

     return fragments.get(position); 
    } 

    @Override 
    public int getCount() { 

     return fragments.size(); 
    } 

    public String getPageTitles(int position) { 

     return tabTitles.get(position); 
    } 
} 

toolbar.xml

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.Toolbar 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@color/colorPrimary" 
    android:minHeight="?attr/actionBarSize" 
    android:fitsSystemWindows="true" 
    android:id="@+id/toolbar" 
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    > 

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

style.xml

<resources> 

    <!-- Base application theme. --> 
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 
     <!-- Customize your theme here. --> 
     <item name="colorPrimary">@color/colorPrimary</item> 
     <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
     <item name="colorAccent">@color/colorAccent</item> 
    </style> 

    <style name="MyEditTextTheme"> 
     <!-- Used for the bottom line when not selected/focused --> 
     <item name="colorControlNormal">#98ffffff</item> 
     <item name="android:colorControlActivated">#ffffff</item> 
     <!-- colorControlActivated & colorControlHighlight use the colorAccent color by default --> 
    </style> 

    <style name="AppTheme.NoActionBar"> 
     <item name="windowActionBar">false</item> 
     <item name="windowNoTitle">false</item> 
    </style> 

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" /> 

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /> 

    <style name="MyTabText" parent="@android:style/Widget.Holo.Light.ActionBar.TabText"> 
     <item name="android:textColor">#fff</item> 
    </style> 

</resources> 

Answer 1

In Ihrem activity_main.xml, fügen Sie folgende Zeile zu ViewPager:

<android.support.v4.view.ViewPager 
android:layout_width="match_parent" 
android:layout_height="wrap_content" 
android:id="@+id/viewpager"app:layout_behavior="android.support.design.widget.AppBarLayout$ScrollingViewBehavior"> 
</android.support.v4.view.ViewPager> 

Der Grund dafür ist, da Sie verwenden In einem Coordinator-Layout müssen Sie angeben, auf welche Ansicht es reagieren soll. In diesem Fall Ihre ViewPager

EDIT: Es scheint auch, dass Ihr Adapter nicht die gewünschte Funktion für Titel nicht implementiert:

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