Название Tablayout не отображается в Android

Question

Как видно из названия, я не могу видеть заголовок в tablayout. Я выполнил учебник по youtube для создания этих настраиваемых вкладок. Здесь ссылка на tutorial

Я выполнил все инструкции, показанные на видео, но я не смог получить аналогичные результаты.

Вот мой код

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

В вашем activity_main.xml, добавьте эту строку в 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> 

Причиной тому является, так как вы используете координатор, вы должны указать, на какой взгляд он должен реагировать. В этом случае, ваш ViewPager

EDIT: Это также кажется, что ваш адаптер не выполняет необходимую функцию для названий:

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