Android Fragment is overlapping Toolbar Layout - android

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


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


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.


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


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>

Related

Why is my comman navigation darwerlayout and content.xml overlapping each other

Question: Why my common navigation drawer layout and content.xml is overlapping each other
I want to implement common navigation drawer for all the multiple activities by using include. I have created a separated XML file for navigation drawer and also include toolbar code inside it.
Navigation.xml
This the navigation part where we include toolbar and drawer code.so here we are implementing simple navigation code by using drawer layout and recycle view
<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/navigation_Drawerlayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="#layout/navigation_drawerlayout" />
<android.support.design.widget.NavigationView
android:id="#+id/navigation_View"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include layout="#layout/navigation_headerview" />
<android.support.v7.widget.RecyclerView
android:visibility="gone"
android:id="#+id/navigationRecycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</LinearLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
Toolbar.xml
this the common toolbar for all the activities.the most uses of it we can easily reuse the code.in which I've simply use CoordinatorLayout and AppBarLayout inside it use toolbar layout with a title.so that I can show toolbar title with a toolbar.
<?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.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextColor="#android:color/white">
<!-- Screen title -->
<TextView
android:id="#+id/toolbarTitle"
style="#style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=""
android:textColor="#android:color/white"></TextView>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
contents.xml
this the content file where we define my code logic and implementation and also similar to all the activities which use the common navigation drawer
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context=".Activities.EventsActivity"
tools:showIn="#layout/toolbar"
>
<!-- Events -->
<include
layout="#layout/toolbar" />
<android.support.v7.widget.RecyclerView
android:layout_marginTop="55dp"
android:id="#+id/events_recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</FrameLayout>

FrameLayout within a DrawerLayout

I would like to wrap into a DrawerLayout a FrameLayout (to replace it on demand with other FrameLayouts at runtime). The Code below is from the GitHub project over here.
But If I add a FrameLayout in the LinearLayout below the widget.Toolbar, I receive following exception
Unhandled Exception:
System.InvalidCastException: Unable to convert instance of type 'Android.Widget.FrameLayout' to type 'Android.Support.Design.Widget.NavigationView'.
Without the FrameLayout it works perfectly. Where should I place the FrameLayout to achieve my goal?
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/drawer_layout"
android:fitsSystemWindows="true">
<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"
android: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>
<android.support.design.widget.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="#+id/nav_view"
app:menu="#menu/navmenu"
app:headerLayout="#menu/header" />
</android.support.v4.widget.DrawerLayout>
The MainAcitivty.cs
drawerLayout = FindViewById<DrawerLayout>(Resource.Id.drawer_layout);
// Init toolbar
var toolbar = FindViewById<Android.Support.V7.Widget.Toolbar>(Resource.Id.toolbar);
SetSupportActionBar(toolbar);
// Attach item selected handler to navigation view
var navigationView = FindViewById<NavigationView>(Resource.Id.nav_view);
navigationView.NavigationItemSelected += NavigationView_NavigationItemSelected;
// Create ActionBarDrawerToggle button and add it to the toolbar
var drawerToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, Resource.String.open_drawer, Resource.String.close_drawer);
drawerLayout.AddDrawerListener(drawerToggle);
drawerToggle.SyncState();

<?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"
android:background="#color/white"
tools:openDrawer="start">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include layout="#layout/toolbar" android:id="#+id/drawer_toolbar"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/framelayout"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main">
<!-- app:menu="#menu/activity_main_drawer"-->
<ExpandableListView
android:id="#+id/navigationmenu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start|right"
android:divider="#f0f0f0"
android:dividerHeight="1.5dp"
android:indicatorEnd="?android:attr/expandableListPreferredItemIndicatorRight"
android:layout_marginTop="170dp"
android:background="#android:color/white"
android:visibility="visible">
</ExpandableListView>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Visible part of Navigation View when collapsed?

How to set visible part of Navigation View when collapsed and the items are also clickable, but when the user drags the drawer full appears. Im trying to use layout_margionRight but it doesnt work. I want to create Navigation View is like aNavigationSlidingPanel`. Help please. Here is my 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:fab="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:layout_height="match_parent"
android:layout_width="match_parent">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" >
</FrameLayout>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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_actionbar"
android:layout_width="match_parent"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="55dp"
android:background="#drawable/bg_color_toolbar" >
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#drawable/bg_color2"
app:itemTextColor="#color/colorWhite"
app:itemIconTint="#color/colorWhite"
app:menu="#menu/menu_navigation"
app:headerLayout="#layout/nd_head"
android:layout_marginRight="64dp"
android:layout_marginEnd="64dp"
/>
</android.support.v4.widget.DrawerLayout>

opendrawer() throwing null pointer error in drawerlayout

I am new on Android.
Through this simple program I want to to open a drawer using button onclick().But This gives null exception error.I tried the solution by googling but unfortunately didn't solve it.
This is onCreate() method
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
navListener();
}
navListener()
public void navListener(){
final DrawerLayout mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);
ImageView nav = (ImageView) findViewById(R.id.navbarimagebutton);
nav.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
mDrawerLayout.openDrawer(GravityCompat.START);
}
});
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<include layout="#layout/app_bar" />
</RelativeLayout>
DrawerLayout
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerlayout"
android:layout_height="match_parent"
android:layout_width="120dp"
xmlns:android="http://schemas.android.com/apk/res/android">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="start"></ListView>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
app_bar
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/red">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:id="#+id/navbarimagebutton"
android:layout_width="0dp"
android:layout_weight=".25"
android:layout_height="fill_parent"
android:src="#drawable/menu"
/>
<View
android:id="#+id/homepagefirstview"
android:layout_width="10dp"
android:layout_height="fill_parent"></View>
<ImageView
android:layout_weight="1"
android:layout_width="0dp"
android:src="#drawable/hometitle"
android:layout_height="fill_parent" />
<View
android:layout_width="10dp"
android:layout_height="fill_parent"/>
<ImageView
android:layout_weight=".25"
android:layout_width="0dp"
android:src="#drawable/search"
android:layout_height="fill_parent" />
</LinearLayout>
</android.support.v7.widget.Toolbar>

Your problem is your Asking your activity to setContentView(R.layout.activity_main);
And this file does not include your DrawerLayout
you need to do:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:paddingBottom="#dimen/activity_vertical_margin"
android:paddingLeft="#dimen/activity_horizontal_margin"
android:paddingRight="#dimen/activity_horizontal_margin"
android:paddingTop="#dimen/activity_vertical_margin"
tools:context=".MainActivity">
<!-- add an id here since your using RelativeLayout -->
<include layout="#layout/app_bar" android:id="#+id/app_bar" />
<!-- include the drawer this way, probably need to add layout_below="#+id/app_bar" or whatever the id is for your app bar -->
<!-- Uncomment this <include layout="#layout/drawer_layout"/> -->
<!-- Or simply copy the drawer layout xml and add layout_below="#+id/app_bar" -->
<android.support.v4.widget.DrawerLayout
android:id="#+id/drawerlayout"
android:layout_below="#+id/app_bar"
android:layout_height="match_parent"
android:layout_width="match_parent">
<!-- main content area -->
<FrameLayout
android:id="#+id/content_area"
android:layout_height="match_parent"
android:layout_width="match_parent"/>
<!-- Slide out drawer section -->
<FrameLayout
android:layout_gravity="start"
android:layout_width="320dp"
android:layout_height="match_parent">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</android.support.v4.widget.DrawerLayout>
</RelativeLayout>
You are running into NullPointerException because your inflated view does not contain this DrawerLayout you are referencing

Layout for Fragment overlapping Toolbar

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.

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

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>

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.

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>

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>

Finally I figured out the solution
Suppose you have Two Fragment Class FragmentOne and FragmentTwowhich 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

I replaced CoordinateLayout with LinearLayout in the app_bar layout, it worked for me but still it's not the right way.

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

Categories

Resources