Android does not show tabs

问题

I am in a process of changing home activity to include tabs. I use https://github.com/saulmm/CoordinatorExamples as a source. For unknown reason I do not see the tabs in my AppBarLayout. I can see the Fragment content but tab headers are not displayed at all. I use appcompat-v7:23.3.0.

Shortened layout:

<android.support.design.widget.CoordinatorLayout
  <android.support.design.widget.AppBarLayout
    <android.support.design.widget.CollapsingToolbarLayout
        <ImageView ..
        <android.support.v7.widget.Toolbar ..
    </android.support.design.widget.CollapsingToolbarLayout>
    <android.support.design.widget.TabLayout
        android:id="@+id/main.tabs"
        android:layout_width="fill_parent"
        android:layout_height="?attr/actionBarSize"
        app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
        app:tabIndicatorHeight="4dp" />
  </android.support.design.widget.AppBarLayout>

  <android.support.v4.view.ViewPager
    android:id="@+id/dashboard.viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    />

Activity:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_dashboard);

    CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.main_collapsing);
    collapsingToolbarLayout.setTitle(getString(R.string.app_name));

    ViewPager viewPager  = (ViewPager) findViewById(R.id.dashboard_viewpager);
    viewPager.setAdapter(new TabsAdapter(getSupportFragmentManager()));
    TabLayout tabLayout = (TabLayout) findViewById(R.id.main_tabs);
    tabLayout.setupWithViewPager(viewPager);
}

class TabsAdapter extends FragmentPagerAdapter {
    public TabsAdapter(FragmentManager fm) {
        super(fm);
    }

    public int getCount() {
        return 1;
    }

    public Fragment getItem(int i) {
        switch(i) {
            case 0: return DashboardHomeFragment.newInstance();
        }
        return null;
    }

    public CharSequence getPageTitle(int position) {
        return "Home";
    }
}

Fragment:

public class DashboardHomeFragment extends Fragment implements View.OnClickListener {
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
    return inflater.inflate(R.layout.fragment_dashboard_home, container, false);
}

public void onActivityCreated(@Nullable Bundle state) {
    log.debug("onActivityCreated()");
    super.onActivityCreated(state);
}

and its layout:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hry"
    android:textAppearance="@style/TextAppearance.Header"
    android:paddingRight="8dp"
    android:paddingLeft="8dp"
    style="@style/TextComponent.ItemRow"/>

<TextView
    android:id="@+id/main.button.puzzle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Najdi výsledek"
    android:textAppearance="@style/TextAppearance.Item"
    android:drawableRight="@drawable/ic_arrow_forward_24dp"
    style="@style/TextComponent.ItemRow.Selectable"/>

There is a second problem but I will post it in separate question linked to this question.

Update:

It was caused by CoordinatorLayout misconfiguration. I changed:

android:layout_height="150dp"

to

android:layout_height="wrap_content"

and the tabs appeared suddenly.

回答1:

According to the guidelines of Android and the material design, it is correct to use the coordinatorLayout.

The appBarLayout should be max 256dp and inside we find the toolbar and the views that you need.

If you want the views collapsing insert into collapsingToolbarLayout.

If you want the toolbar expandable will be inserted inside the collapsingToolbarLayout.

The tabLayout often is insert into appBarLayout but out collapsingToolbarLayout.

The sum of views height is equals at appBarLayout height (or use wrap_content for appBarLayout).

This is an example of expandable toolbar with tabLayout, in this case appBarLayout has a fixed height but you can use wrap_content.

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="202dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/your_color"
            android:fitsSystemWindows="true">

            <--Your views-->

            <android.support.v7.widget.Toolbar
               android:id="@+id/toolbar"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:gravity="top"
               app:titleMarginTop="13dp"
               android:minHeight="?attr/actionBarSize"
               app:popupTheme="@style/AppTheme.PopupOverlay"
               app:layout_collapseMode="pin"
            />
        </android.support.design.widget.CollapsingToolbarLayout>

       <android.support.design.widget.TabLayout
               android:id="@+id/tabs"
               android:layout_width="match_parent"
               android:layout_height="?attr/actionBarSize"
               android:layout_gravity="bottom"
               android:background="@color/your_color"
               app:tabSelectedTextColor="@color/your_color"
               app:tabTextColor="@color/your_color"
               app:tabIndicatorColor="@color/your_color"
               app:tabMode="fixed"
               app:tabGravity="fill"
           />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
</android.support.design.widget.CoordinatorLayout>

来源：https://stackoverflow.com/questions/37009292/android-does-not-show-tabs