TabLayout旁添加Navigation Drawer Button，求助Appbar/Toolbar配置

Hey there! Since you’ve already got TabLayout and DrawerLayout sorted out, let’s focus on getting that AppBar/Toolbar configured properly. Looking at your current code, the main gap is that you’re missing the actual Toolbar widget inside your AppBarLayout—right now you only have the TabLayout there. Let’s adjust this step by step.

Step 1: Add the Toolbar to AppBarLayout #

First, we’ll insert a Toolbar as the first child of AppBarLayout. This will give you the top app bar you need, and we can position the TabLayout below it (we’ll also tweak small details to make everything play nice together).

Step 2: Adjust Layout Behavior for Smooth Scrolling #

Your DrawerLayout structure is mostly correct, but we’ll move the scrolling behavior attribute to the right place so the main content interacts properly with the AppBar.

Here’s the revised full code:

<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:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

    <!-- AppBarLayout now contains Toolbar + TabLayout -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/appbar_padding_top"
        android:theme="@style/AppTheme.AppBarOverlay">

        <!-- New Toolbar widget -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay"/>

        <!-- Your existing TabLayout, positioned below the Toolbar -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMode="fixed"
            app:tabGravity="fill"/>

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

    <!-- DrawerLayout holds main content and navigation drawer -->
    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Main content ViewPager -->
        <android.support.v4.view.ViewPager
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

        <!-- Navigation Drawer -->
        <android.support.design.widget.NavigationView
            android:id="@+id/nav_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:fitsSystemWindows="true"
            app:menu="@menu/menu_nav"
            app:headerLayout="@layout/nav_header"/>

    </android.support.v4.widget.DrawerLayout>

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

Key Details Explained: #

• Toolbar Configuration: The Toolbar uses ?attr/actionBarSize to match the system’s standard action bar height, and ?attr/colorPrimary for the background to align with your app’s theme. The popupTheme ensures dropdown menus look consistent with your app style.
• TabLayout Placement: By putting the TabLayout below the Toolbar inside AppBarLayout, you get the classic top app bar + tab strip setup. If you want the TabLayout to scroll off-screen when the user scrolls the ViewPager, add app:layout_scrollFlags="scroll|enterAlways" to the TabLayout (and the Toolbar too if you want both to scroll).
• Scroll Behavior: Moving app:layout_behavior="@string/appbar_scrolling_view_behavior" to the DrawerLayout ensures the entire drawer content (including the ViewPager) scrolls smoothly with the AppBarLayout.

Final Setup in Your Activity #

Don’t forget to link the Toolbar to your activity’s action bar (and set up the hamburger menu for the drawer) in MainActivity:

// Java code example
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

// Add hamburger menu toggle for the drawer
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
        this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawerLayout.addDrawerListener(toggle);
toggle.syncState();

That’s all! This will give you the standard AppBar/Toolbar setup you’re looking for, with your existing TabLayout and DrawerLayout working seamlessly alongside it.

内容的提问来源于stack exchange，提问作者Blood_Working