0

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

Ajeet Choudhary
  • 1,969
  • 1
  • 17
  • 41
Sayed Imteaj
  • 17
  • 8

4 Answers4

2

Even though the question has already been answered the another cheeky way to do is add this in your frame layout
android:layout_marginTop="?attr/actionBarSize

bikash giri
  • 1,444
  • 1
  • 10
  • 15
0

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"
 />
Chathuranga Shan Jayarathna
  • 606
  • 3
  • 11
  • 45
0

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.

HB.
  • 4,116
  • 4
  • 29
  • 53
  • It's not showing the fragment actually... BLANK/EMPTY. – Sayed Imteaj Jul 02 '17 at 06:29
  • Error in Line 28 : You must specify a layout in the include tag. – Sayed Imteaj Jul 02 '17 at 06:43
  • There is no app_bar xml file. I've updated my original post and added toolbar.xml and list_view.xml code. Please check. – Sayed Imteaj Jul 02 '17 at 07:15
  • I have made stupid mistake. this will definitely work. please try and please make as correct. – HB. Jul 02 '17 at 07:24
  • if the drawer is still overlaying the toolbar, you can just set it below toolbar. like this `android:layout_below="@+id/toolbar"` inside ` – HB. Jul 02 '17 at 07:29
  • Drawer is not overlapping anymore... THANKS! But it created another major issue. Navagation Drawer's Hamburger Icon is not responding anymore, not opening drawer. Check this screenshot : http://i.imgur.com/qqwtSQn.jpg – Sayed Imteaj Jul 02 '17 at 07:37
  • ok, please marked this question a correct as it fixed the problem you are asking about. I will still help you with hamburger... do you use a custom image as hamburger? – HB. Jul 02 '17 at 07:43
  • Yes I marked it as correct answer. It fixed the fragment overlapping but created new issue. Now navigation drawer toggle icon is not working. I used default hamburger/back-arrow icon for navigation drawer. Screenshot : http://i.imgur.com/qqwtSQn.jpg – Sayed Imteaj Jul 02 '17 at 07:58
  • Ok can you please edit your question and include your java where you handle Hamburger/Drawer `toggle` – HB. Jul 02 '17 at 08:01
  • Sorry I made a wrong feedback in my last comment. Originally Hamburger icon and Swipe both working perfectly. Now hamburger icon is not working at all. But swipe left/right is working but broken view, screenshot : http://i.imgur.com/XZ8QUsH.jpg – Sayed Imteaj Jul 02 '17 at 08:45
  • Ok we must avoid long conversations in comment and you don't have enough points for private chat. I you would like, look on my profile, my email is there. Send me a mail with screenshots before all of this and how it now looks. – HB. Jul 02 '17 at 08:50
  • Thank you. I have mailed you. – Sayed Imteaj Jul 02 '17 at 09:03
0

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>
M J Learner
  • 171
  • 2
  • 11