Hidden tab headers on Tabbed Activity

As a beginner of Android Studio, I have a main activity with an image button that starts Tabbed activity. I've added a new activity using

Right Click > New > Activity > Tabbed Activity

It creates activity_tabbed.xml and fragment_tabbed.xml

fragmented_tabbed.xml contgains :

<RelativeLayout xmlns:android="http://ift.tt/nIICcg"
    xmlns:tools="http://ift.tt/LrGmb4" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="com.webraya.t0.t0.Tabbed$PlaceholderFragment">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/imageView"
        android:src="@drawable/a"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true" />
</RelativeLayout>

and activity_tabbed.xml contains :

<android.support.v4.view.ViewPager xmlns:android="http://ift.tt/nIICcg"
xmlns:tools="http://ift.tt/LrGmb4" android:id="@+id/pager"
android:layout_width="match_parent" android:layout_height="match_parent"
tools:context="com.webraya.t0.t0.Tabbed" />

When I run the app and touch the imagebutton and the Tabbed activity starts, the result is :

when I swipe from right to left, it seems I have 3 tabs with the same picture. I don't know why there is no tab header, and why there are three tabs with the same content, how to create headers and change tabs contents? My theme is Theme.AppCombat.Light.DarkActionBar

Any help would be appreciated.