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: T

Answer 1

This is very straight forward and easy. Just follow what I tried to say below.

You replace any View by using:

**

getFragmentManager().beginTransaction()
                .replace(R.id.blankFragment, new SettingsFragment())
                .commit();

** //Here, blackFragment is id of FrameLayout View. You replace FrameLayout View with Fragment's Layout. Note: It should be FrameLayout or FrameLayout's derivatives Layout.

My whole code is:

1) SettingsActivity.java

**

public class SettingsActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment);
        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar2);
        mToolbar.setTitle("Settings");
////        remove the left margin from the logo
        mToolbar.setPadding(2, 0, 0, 0);//for tab otherwise give space in tab
        mToolbar.setContentInsetsAbsolute(0, 0);
        setSupportActionBar(mToolbar);
        // Display the fragment as the main content
        getFragmentManager().beginTransaction()
                .replace(R.id.blankFragment, new SettingsFragment())
                .commit();
    }
}

**

2) activity_fragment.xml

**

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="horizontal">
    <!--scroll|snap-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/statusbar"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ThemeOverlay.AppCompat.ActionBar" />
    <FrameLayout
        android:id="@+id/blankFragment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize"
        android:layout_gravity="top"
        android:fitsSystemWindows="true"
        android:orientation="horizontal" />
</FrameLayout>

** You can see my Screen after I replaced FrameLayout's View with Fragment's View

Answer 2

I have two activities and attach one fragment to them. In first activity it is shown right, while in second it overlaps Toolbar. Though android:layout_marginTop="?android:attr/actionBarSize" in a layout of the fragment may be a solution, I found an error.

Because Kotlin caches ids of views of layouts (instead of findViewById(R.id.some_id) you can write some_id), there is a big problem. Every time you should be very careful when copy an activity or a fragment. So, every time check your imports and attached layouts.

I copied FirstActivity to SecondActivity, copied activity_first to activity_second, but forgot to change:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_first) // Don't forget to change.

Similarly, in a fragment don't forget:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                          savedInstanceState: Bundle?): View? {

    val view = inflater.inflate(R.layout.fragment_yours, container, false)

So, in my imports I had:

import kotlinx.android.synthetic.main.activity_second.*

In this case toolbar referenced to activity_second, while activity_first was actually attached. Then the fragment moved upper - just below the Toolbar. In most cases Kotlin never shows any problem with cached ids during compile or run time. It's a big pain.

Answer 3

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>

Answer 4

Add this line in your FrameLayout

app:layout_behavior="@string/appbar_scrolling_view_behavior"

Answer 5

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