Layout for Fragment overlapping Toolbar

Question

Am replacing/placing my Fragments in a FrameLayout inside of a DrawerLayout with this code:

<?xml version="1.0" encoding="utf-8"?>
  <android.support.v4.widget.DrawerLayout      
  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/drawer_layout"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  tools:openDrawer="start">


<include
    layout="@layout/app_bar_base"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />


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


<!--drawer items-->
<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:headerLayout="@layout/nav_header_base"
    app:menu="@menu/activity_base_drawer" />

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

app_bar_base.xml contains a Toolbar and a FAB:

<?xml version="1.0" encoding="utf-8"?>
    <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:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fitsSystemWindows="true"
     tools:context=".BaseActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:id="@+id/appBar"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <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" />

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



<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email" />

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

When I run my app, this is the result:

As you can see, the layout for the fragment overlaps the Toolbar.How can I fix this?

I've tried placing both the Toolbar and FrameLayout inside a LinearLayout like this:

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <include
            layout="@layout/app_bar_base"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

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

but then the FrameLayout gets hidden.

Answer 1

Try adding android:layout_marginTop="?attr/actionBarSize" to the FrameLayout you use to put the Fragments in.

<FrameLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize"/>

Worked for me :)

Answer 2

Please do not forget to add app:layout_behavior="@string/appbar_scrolling_view_behavior" to your content layout

<android.support.design.widget.CoordinatorLayout  
   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.support.design.widget.AppBarLayout
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

           <android.support.v7.widget.Toolbar
              android:layout_width="match_parent"
              android:layout_height="?attr/actionBarSize"
              android:background="?attr/colorPrimary"
              app:layout_scrollFlags="scroll|enterAlways"
              app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

           <android.support.design.widget.TabLayout
              android:layout_width="match_parent"
              android:layout_height="wrap_content" />
       </android.support.design.widget.AppBarLayout>

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

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

Answer 3

I tried all the answers, none worked for me. Because I was hiding the action bar, it was complicated further.

But I finally added android:paddingTop="?attr/actionBarSize" to the FrameLayout and that worked for me. Hope that helps someone.

Answer 4

Use below code

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <include
            layout="@layout/app_bar_base"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

    </LinearLayout>

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>

Answer 5

You can also use RelativeLayout instead of LinearLayout with attribute android:weight . It's good for performance

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <include
           layout="@layout/app_bar_base"
           android:layout_width="match_parent"
           android:layout_height="wrap_content" />


        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
           android:layout_below="@id/app_bar_base"
        />
    </RelativeLayout>

Answer 6

Finally I figured out the solution

Suppose you have Two Fragment Class FragmentOne and FragmentTwo which you are replacing in your main activity and one of them is overlapping the actionbar/toolbar

In your activity_main.xml create a FrameLayout which you will be using to replace as a fragment activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

    <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" />

</android.support.design.widget.AppBarLayout>
<!--We will use this framelayout to be replace with fragment so that the above toolbar does not get overlap-->
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/fragment_container"></FrameLayout>

</LinearLayout>

Now in your MainActivity.java

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //Set your toolbar in your MainActivity
    Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    FragmentManager fragmentManager=getFragmentManager();
    FragmentTransaction transaction=fragmentManager.beginTransaction();

    if(yourOwnConditionToReplaceFragment()){
        FragmentOne fragmentOne=new FragmentOne();
        //Notice the id passed in replace function it will make sure that FrameLayout is replaced so fragment will occupy only that portion of screen that is taken by FrameLayout in activity_main.xml
        transaction.replace(R.id.fragment_container,fragmentOne);
    }else{
        FragmentTwo fragmentTwo=new FragmentTwo();
        transaction.replace(R.id.fragment_container,fragmentTwo);
    }

    transaction.commit();
}

FragmentOne And FragmentTwo are classes that are extended Fragment in it. If still there is problem let me know

Answer 7

我在 app_bar 布局中用LinearLayout替换了CoordinateLayout ，它对我有用，但仍然不是正确的方法。

Answer 8

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