Android Fragment is overlapping Toolbar Layout

Question

[Updated] I've used Bottombar library and default android Navigation Drawer in my project. Now simple TextView Fragment is overlapping top Toolbar . This is my activity layout code.

You can check Screenshot of Layout here.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

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

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

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

        <include
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            layout="@layout/list_view" />
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>
<!-- Start - Container to show Fragments -->
<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_above="@+id/bottomBar" />
<!-- End - Container to show Fragments -->
<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />
</RelativeLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    android:background="@color/main_color_500"
    app:popupTheme="@style/Theme.AppCompat.Light.DarkActionBar"
    app:theme="@style/AppTheme.Title" />

list_view.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/list_view"
    style="@style/ListViewStyle" />

OnCreate method(Navigation Drawer Code) of MainActivity

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    //getSupportActionBar().setTitle("Sample Title");
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mTitle = mDrawerTitle = getTitle();
    mDrawerList = (ListView) findViewById(R.id.list_view);

    mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow,
            GravityCompat.START);

    View headerView = getLayoutInflater().inflate(
            R.layout.header_navigation_drawer_social, mDrawerList, false);

    ImageView iv = (ImageView) headerView.findViewById(R.id.image);

    // init universal image loader library
    ImageUtil.initImageUtil(this);

    ImageUtil.displayRoundImage(iv, "http://www.sample.com/0.jpg", null);

    mDrawerList.addHeaderView(headerView);// Add header before adapter (for pre-KitKat)
    mDrawerList.setAdapter(new DrawerSocialAdapter(this));
    mDrawerList.setOnItemClickListener(new MainActivity.DrawerItemClickListener());
    int color = ContextCompat.getColor(getApplicationContext(),R.color.material_grey_100);
    color = Color.argb(0xCD, Color.red(color), Color.green(color),
            Color.blue(color));
    mDrawerList.setBackgroundColor(color);
    mDrawerList.getLayoutParams().width = (int) getResources()
            .getDimension(R.dimen.drawer_width_social);

    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, toolbar,
            R.string.drawer_open, R.string.drawer_close) {
        public void onDrawerClosed(View view) {
            getSupportActionBar().setTitle(mTitle);
            invalidateOptionsMenu();
        }

        public void onDrawerOpened(View drawerView) {
            getSupportActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu();
        }
    };
    mDrawerLayout.addDrawerListener(mDrawerToggle);

    if (savedInstanceState == null) {
        // open drawer oncreate
        //mDrawerLayout.openDrawer(mDrawerList);
    }

How to fix it?

Thanks in advance.

Answer 1

即使问题已经得到解答，另一个轻松的方法是将其添加到框架布局中
android:layout_marginTop="?attr/actionBarSize

Answer 2

You need to use android:layout_below on FrameLayout to get it under tool bar.

<include
android:id="@+id/tool_bar"
layout="@layout/toolbar" />

and change FrameLayout code to.

<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottomBar"
android:layout_below="@+id/tool_bar"
 />

Answer 3

Give you LinearLayout a id of something like android:id="@+id/ToolBar" and in your FrameLayout set below like android:layout_below="@+id/ToolBar"

Try this, I just tested and it works:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/nav"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottomBar">

    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>

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

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

        <include
            android:layout_width="@dimen/drawer_width"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            layout="@layout/list_view" />
    </android.support.v4.widget.DrawerLayout>

    <!-- Start - Container to show Fragments -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"

        />
    <!-- End - Container to show Fragments -->

</RelativeLayout>


<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />

</RelativeLayout>

---

Please see if the following fixes the problem:

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start">

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

    <include
        android:layout_width="@dimen/drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        layout="@layout/list_view" />
</android.support.v4.widget.DrawerLayout>

<RelativeLayout
    android:id="@+id/nav"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >

    <include layout="@layout/toolbar"
        android:id="@+id/toolbar"/>


    <!-- Start - Container to show Fragments -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/toolbar"

        />
    <!-- End - Container to show Fragments -->

</RelativeLayout>


<com.roughike.bottombar.BottomBar
    android:id="@+id/bottomBar"
    android:layout_width="match_parent"
    android:layout_height="55dp"
    android:layout_alignParentBottom="true"
    android:background="@color/main_color_500"
    app:bb_activeTabAlpha="1"
    app:bb_inActiveTabAlpha="0.3"
    app:bb_activeTabColor="@android:color/white"
    app:bb_inActiveTabColor="@android:color/white"
    app:bb_titleTextAppearance="@style/TextAppearance.AppCompat.Caption"
    app:bb_showShadow="true"
    app:bb_tabXmlResource="@xml/menu_bottombar" />
</RelativeLayout>

If this doesn't fix it I will have to give you a totally different approach.. Let me know.

Answer 4

This approach might help (I faced a similar problem and this technique worked, but I wanted to add few views and not a complete fragment.) Define a new xml layout and set whatever content you want to in that. (If you used the standard Navigation Drawer activity then an xml file by the name of content_test.xml or something similar might have been created automatically for you). In your toolbar.xml add

<include layout="content_test.xml">

For example

content_test.xml

<android.support.constraint.ConstraintLayout 
    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"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.yourdomain.yourappname.YourActivity"
    tools:showIn="@layout/toolbar.xml">

    <!--Add your views/layouts here. Don't forget to set
     android:layout_below="@id/idOfToolbarDefinedInYourActivity-->

</android.support.constraint.ConstraintLayout>

Continuing with the example

toolbar.xml
<?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"
    tools:context="com.yourdomain.yourappname.YourActivity">

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

    <include layout="@layout/content_test" />

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