Fragment overlaps the AppCompat toolbar

Question

I'm working with the v7 support library and trying to have a navigation drawer on the left. As read elsewhere I set up:

1. DrawerTest.java: The main activity that holds the drawer, into which I load my Toolbar with setSupportActionBar(), from a custom XML layout that holds just the Toolbar;

2. toolbar.xml: A XML layout holding the toolbar;

3. activity_drawer_listview.xml: A DrawerLayout XML resource, that holds containers for my fragment (a FrameLayout <including> the layout mentioned in 2.) and for the navigation drawer (a ListView);

4. FragmentTest.java: Some really simple fragment code, extending Fragment;

5. fragment_test_layout.xml: Some really simple fragment layout, with just a TextView inside.

I'll paste some code here, anyway my problem is that the fragment layout seems to start from the top of the screen, and not from the bottom of the Toolbar. Any text put in 5. will overlap the app title on the action bar. Where am I wrong?

(1.) DrawerTest.java

    public class DrawerTest extends ActionBarCompat {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_listview);

        DrawerLayout drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        Toolbar tb = (Toolbar) findViewById(R.id.toolbar_main2);
        ActionBarDrawerToggle abDrawerToggle = new ActionBarDrawerToggle(
                        this, drawerLayout, tb,
                        R.string.navigation_drawer_open,
                        R.string.navigation_drawer_close )
        {
            // onDrawerClosed() { ... }
            // onDrawerOpened() { ... }
        };
        drawerLayout.setDrawerListener(abDrawerToggle);
        setSupportActionBar(tb);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        abDrawerToggle.syncState();

        //code to load my fragment
        if (savedInstanceState == null) {
            getSupportFragmentManager().beginTransaction()
                    .add(R.id.frame_layout_test, new FragmentTest()).commit();

        }
    }

(3.) activity_drawer_listview.xml

    <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:id="@+id/drawer_layout"
    android:layout_width="match_parent" android:layout_height="match_parent"
    tools:context="miav.ciotole.DrawerTest">

    <FrameLayout android:id="@+id/frame_layout_test" android:layout_width="match_parent"
        android:layout_height="match_parent" >
    <include layout="@layout/toolbar"/> <!-- What is this line about? -->
    </FrameLayout>

<ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>

(4.) FragmentTest.java

    public class FragmentTest extends Fragment {

    public FragmentTest() { }

    @Override
    public View onCreateView(LayoutInflater infl, ViewGroup container, Bundle SavedInstanceState) {
        View rootView = infl.inflate(R.layout.fragment_test_layout, container, false);
        return rootView;
    }
}

(5.) fragment_test_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
// padding ...
>

<TextView android:id="@+id/section_label" android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world"/>

Note: I found some questions (and answers), but in most cases, the issue was related to AppCompat versions < 19, which is not my case.

Note2: I am inheriting from Theme.AppCompat.NoActionBar, as I'm setting the toolbar on runtime. Probably I could solve inheriting from Theme.AppCompat and avoid using setSupportActionBar(), but if possible I would stay with the actual configuration, as it makes easier to control the ActionBar.

Solution 1

The reason is because you place it in a frame layout and then you add the fragment ontop of the toolbar. you need to do something like this

<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

       <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:minHeight="?attr/actionBarSize"
           android:background="?attr/colorPrimary"
           app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
           app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

       <FrameLayout
           android:id="@+id/content_frame"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

       </LinearLayout>

       <FrameLayout
       android:id="@+id/left_drawer"
       android:layout_width="325dp"
       android:layout_height="match_parent"
       android:layout_gravity="start"
       android:background="#FFFFFF"/>

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

Solution 2

Add this line in your FrameLayout

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Solution 3

You put the toolbar in the same Framelayout (with the id = frame_layout_test). FrameLayout overlaps views.

I guess you are trying to do something like this:

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" 
android:layout_height="match_parent"
android:orientation="vertical" >

<include layout="@layout/toolbar"/> 
<!-- I don't know what your Toolbar layout is -->


    <android.support.v4.widget.DrawerLayout 
        android:layout_width="match_parent" 
        android:layout_height="0dp"
        android:layout_weight="1" 
        tools:context="miav.ciotole.DrawerTest">

        <FrameLayout android:id="@+id/frame_layout_test"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

        <ListView
            android:id="@+id/left_drawer"
            android:layout_width="240dp"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            android:choiceMode="singleChoice"
            android:divider="@android:color/transparent"
            android:dividerHeight="0dp" />

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

The layout from above takes a linear layout and aligns the framelayout (where you will inflate your framgemt) below the toolbar ...

This lines

android:layout_height="0dp"
android:layout_weight="1"

says that the DrawerLayout should take the remaining height below the toolbar.

However, if you want to display a traditional actionbar / toolbar, you don't have to add a toolbar in the xml layout. You simply can change the Theme of the activity to @style/Theme.AppCompat.Light.DarkActionBar

Comments

[natario]

Have not tried it yet, but I feel like this way the drawer will slide below the Action Bar without covering it, which is actually my desired behavior. I want only the fragments to be below.

[sockeqwe]

yes, this way the drawer is below the action bar ... If you want to display drawer over the actionbar, then you should do it like described by @tyczj

[natario]

Easier than I thought, thank you. My fragments loaded in your @id/content_frame will have, themselves, some layers of nested layouts. Is it so bad for performance as I read?

[tyczj]

I do this for a few of my apps and I see no performance problems

[Anand Kumar]

You can use this link for reference https://developer.android.com/reference/android/support/desi‌​gn/widget/AppBarLayo‌​ut.html

[Geert Berkers]

Thank you for the answer, but I prefer to use attribute layout_marginTop in the content_frame: android:layout_marginTop="?attr/actionBarSize". After all fragments you replace it with have the correct height. (I know this is a 2014 question but this was my best solution)

[Rickless]

Actually, this is against google material design best practices. Drawer should be on top of ToolBar