Develop Reference

Text won't appear in TextView

I am making a Navigation Drawer in my Android app. The Navigation Drawer has an Header which includes a Account Icon and a Text View. But when I run the App, I can no longer see the Icon or the TextView.
This is what I have been getting,
Here is my code for my navigation drawer activity_admin.xml
<?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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.vishistvarugeese.ongc_app.AdminActivity">
<android.support.design.widget.NavigationView
app:headerLayout="#layout/admin_nav_header"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:background="#color/white"
app:itemIconTint="#color/black"
app:itemTextColor="#color/colorAccent"
app:menu="#menu/admin_menu"
android:layout_gravity="start"
app:theme="#style/menu_style">
</android.support.design.widget.NavigationView>
This is the code for my navigation header, admin_nav_header.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="160dp"
android:background="#drawable/headernav"
android:paddingTop="20dp"
android:paddingLeft="20dp"
android:paddingRight="20dp">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/ic_account_circle_white_48dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/navUserName"
android:text="#string/name"
android:textStyle="bold"
android:textColor="#color/white"
android:layout_marginTop="10dp"/>
</LinearLayout>
This is what I was trying to do
Can someone please help me with the issue?

Remove theme and other property from NavigationView.
<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:background="#color/homeDrawerColor"
android:fitsSystemWindows="true"
app:headerLayout="#layout/admin_nav_header"
app:menu="#menu/admin_menu" />
If not work then give a direct string to check any problem in string.xml or not...

navigation drawer header is over the content?

I'm trying to add a header in my navigation drawer.
I'm a beginner on android studio, so any tips would help me a lot
The problem is this header is over my navigation drawer itens, so I can't see some of my navigation drawer itens.
how can I add this header properly? also, my textview content is not showing, why?
<?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"
tools:context="com.sk.mf.UserAreaActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
android:id="#+id/drawerLayout">
<FrameLayout
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:id="#+id/content_frame">
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
app:menu="#layout/navigation_menu"
android:layout_gravity="start">
<RelativeLayout
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#color/colorPrimary">
<TextView
android:text="TextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
android:id="#+id/nh_User"
android:textSize="24sp"
android:textColor="#ffffff" />
</RelativeLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>

Create the Header in header tag of NavigationView:
<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:background="#color/white"
app:headerLayout="#layout/nav_header" //layout of Header
app:itemIconTint="#color/colorPrimary"
app:menu="#menu/menu_navigation" />
in your layout/nav_header.xml: add the header contents
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="190dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:scaleType="fitXY"
android:src="#drawable/drawer_header" />
</LinearLayout>
To access the Header layout contents use:
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
View header = navigationView.getHeaderView(0); //get the header view
TextView text = (TextView) header.findViewById(R.id.nh_User);
text.setText("Hello");

Is it possible to have both back and menu button in toolbar Android?

In iOS Amazon app, they implemented both back and menu button together. Is it possible to implement the same in Android?

You can create a custom toolbar design in XML as
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="?attr/actionBarSize">
<ImageView
android:id="#+id/backButton"
android:background="#drawable/back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/homeButton"
android:background="#drawable/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>
Then set listeners to perform task such as openDrawer and goto previous screen.
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
ImageView homeButton = (ImageView) toolbar.findViewById(R.id.homeButton);
homeButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawerLayout.openDrawer(GravityCompat.START);
}
});

you can create a Toolbar with custom layout like this:
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize">
<ImageView
android:id="#+id/backButton"
android:background="#drawable/ic_back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/hamburgerButton"
android:background="#drawable/ic_home_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/logo"
android:background="#drawable/logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.v7.widget.Toolbar>

If you want something special create it by your own :)
If you're using latest design library its possible to create your custom toolbar panel and add any item you want there.
I was achieving that behaviour this way:
main_activity.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<!-- this is top bar where you need to add both drawer toggle and back button-->
<include
layout="#layout/app_bar_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- Content of sliding menu-->
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end"
android:background="#color/primary_blue_dark"
android:fitsSystemWindows="true">
<!-- Custom menu list. Feel free to customize it as listview-->
<ListView
android:id="#+id/lv_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</android.support.design.widget.NavigationView>
layout/app_bar_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:fitsSystemWindows="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="#dimen/nav_header_size_pre5"
android:background="#color/primary_blue_dark"
android:padding="6dp">
<!-- This is where you need to place those items. I had title and imageview there. You may add anything-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:layout_centerHorizontal="true"
android:gravity="center">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_logo"
android:adjustViewBounds="true"/>
<TextView
android:id="#+id/tv_app_logo"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="#string/app_name"
android:layout_marginLeft="#dimen/activity_horizontal_margin"
android:textColor="#color/primary_yellow"
android:textSize="#dimen/middle_text"
android:gravity="center"/>
</LinearLayout>
<ImageView
android:id="#+id/iv_drawer_open"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="#drawable/ic_drawer_toggle"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:tint="#color/primary_white"/>
</RelativeLayout>
<!-- This is main content-->
<include layout="#layout/content_navigation" />

Yes absolutely possible you just have to hide the default toolbar by doing following in your Styles.xml :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
Then you have to create youe own xml file of toolbar let's name it custom_toolbar.xml
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp">
<ImageView
android:id="#+id/back_button"
android:background="#drawable/back_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/menu_button"
android:background="#drawable/menu_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginRight="10dp"
android:textColor="#android:color/black"
android:textSize="#dimen/actionbar_textsize"
android:textStyle="bold" />
</android.support.v7.widget.Toolbar>
Then you have to add that toolbar in your activity add toolbar like below
<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"
tools:context="betasoft.com.blankblank.ui.ui.activity.SignUp">
<include
android:id="#+id/toolbar"
layout="#layout/custom_toolbar" />
<FrameLayout
android:id="#+id/main_data"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar />
</RelativeLayout>
then you can access the toolbar in your activity like :
Toolbar mToolBar;
ImageView mToolBarBack,mToolBarMenu;
TextView mToolBarTitle;
//Inside onCreate
mToolBar = (Toolbar) findViewById(R.id.toolbar);
mToolBarBack = (ImageView) mToolBar.findViewById(R.id.toolbar_back);
mToolBarTitle = (TextView) mToolBar.findViewById(R.id.toolbar_title);
mToolBarMenu= (TextView) mToolBar.findViewById(R.id.menu_button);
// then create a public method so like below so that you can access the toolbar content at any fragment
public void setActionBarTitle(String title) {
mToolBarTitle.setText(title);
}

Can't place Floating Action Button (FAB) between header and items in DrawerLayout using RecyclerView

I can't get the Floating Action Button (FAB) to appear in the correct position. I want it to appear between the header and the first item in my nav drawer.
Currently, I've got it to appear in the bottom right corner of the header and NOT on top of the line between the 1st and 2nd elements (1st element = header & 2nd element = first item in recyclerview).
My app is using the following appcompat items:
appcompat-v7:23.0.0
recyclerview-v7:23.0.0
design:23.0.0
I'm using a nav drawer but I can't use the NavigationView because I need to customize the item entries and not load a simple menu.
As you know, the drawer is really not 2 different controls. The header is actually the '0' element in the RecyclerView. I don't know if this makes a difference.
Here is my current xml for the header/"0 view in RecyclerView":
<?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"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/navDrawerHeaderView"
android:layout_width="match_parent"
android:layout_height="#dimen/navdrawer_image_height">
<ImageView
android:id="#+id/navdrawer_image"
android:layout_width="wrap_content"
android:layout_height="#dimen/navdrawer_image_height"
android:contentDescription="#string/cd_navdrawer_image"
android:scaleType="centerCrop"
android:src="#drawable/bg_material_design" />
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_image"
android:layout_width="#dimen/navdrawer_user_picture_size"
android:layout_height="#dimen/navdrawer_user_picture_size"
android:src="#drawable/ic_launcher"
android:layout_marginTop="16dp"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
app:border_width="2dp"
app:border_color="#FF000000"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/appNameTextView"
android:text="App Name"
android:textStyle="bold"
android:layout_marginLeft="16dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:textColor="#android:color/white"/>
</RelativeLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="true"
android:src="#drawable/button_account"
app:layout_anchor="#id/navDrawerHeaderView"
app:layout_anchorGravity="bottom|right|end"
app:elevation="4dp"/>
</android.support.design.widget.CoordinatorLayout>
I think I might have the FAB in the wrong location/file. Here is the xml for the drawer.
<?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:id="#+id/drawerLayout"
android:layout_height="match_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true">
<!-- Content layout -->
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical">
<include
android:id="#+id/toolbar"
layout="#layout/tool_bar"/>
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/init_background">
</FrameLayout>
</LinearLayout>
<!-- Pages -->
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="320dp"
android:layout_height="match_parent"
android:layout_gravity="left"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true">
</android.support.v7.widget.RecyclerView>
</android.support.v4.widget.DrawerLayout>
HELP!!!!!

example drawer fragment layout containing your existing RecyclerView:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f00"
android:id="#+id/header"/>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
android:scrollbars="vertical"
android:clickable="true"
android:focusable="true"
android:focusableInTouchMode="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:layout_margin="5dp"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>

Bottom navigation bar hides on trying scroll

I have Activity with bottom navigation bar (via roughike BottomBar library). It's look like this:
When i'm trying to scroll page, bottom bar hides automatically. So, I get this:
I want avoid this effect. I do not want hide bottom bar when I'm just trying to scroll content but all content lies on screen.
But if page contains content more than one screen then bottom bar must hides on scroll (and now it's works fine).
My code doesn't have any listeners for scroll and my xml file looks like this:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".presentation.ui.mainactivity.MainActivity"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/mainCord" >
<android.support.design.widget.AppBarLayout
android:id="#+id/sliderContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="#color/primary"
android:theme="#style/ToolbarStyle"
app:titleTextAppearance="#style/ToolbarStyle" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:visibility="gone" />
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
</android.support.design.widget.CoordinatorLayout>
I'm looked for solution for my problem but found nothing. What can i do for avoid this effect?
UPDATED:
FAB is inside ViewPager. Layout for tab on screenshot look like this:
<?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"
android:id="#+id/eventCoordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/refresh"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v7.widget.RecyclerView
android:id="#+id/eventsRecyclerView"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity = "center"
android:gravity="center" >
<TextView
android:id="#+id/emptyText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:gravity="center"
android:text="#string/empty_events_text"
android:drawableTop="#drawable/ic_no_calendar"
android:drawablePadding="4dp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/create_event_text"
android:textColor="#color/secondary_text"
android:textSize="16sp"
android:visibility="gone" />
<TextView
android:id="#+id/createEventButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/primary"
android:text="#string/create_event"
android:textSize="16sp"
android:visibility="gone" />
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/createEvent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:src="#drawable/ic_add_white_24dp"
style="#style/floating_action_button"
app:layout_anchor="#id/eventsRecyclerView"
app:layout_anchorGravity="bottom|end"
app:borderWidth="0dp"
app:elevation="6dp"
app:pressedTranslationZ="12dp" />
<RelativeLayout
android:id="#+id/loadingPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center" >
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:indeterminate="true" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>

app:bb_behavior="underNavbar"
You have an issue in the following code
<com.roughike.bottombar.BottomBar
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_gravity="bottom"
app:bb_tabXmlResource="#xml/bottom_bar_tabs"
app:bb_activeTabColor="#color/white"
app:bb_inActiveTabColor="#color/bottom_bar_inactive_tab"
app:bb_inActiveTabAlpha="1"
app:bb_behavior="shy|shifting" />
replace the
app:bb_behavior="shy|shifting"
with
app:bb_behavior="underNavbar"
Hope this works for you!

Check your manifest FILE and make sure you're not using full screen theme...However, you can use the following code to hide and show the bar on android higher than API 19. To hide the bar, just change VISIBLE to GONE, and make sure you call the showNavBar() method in both your onCreate() and onResume() method
public void showNavBar() {
View view = getWindow().getDecorView();
view.setSystemUiVisibility(View.VISIBLE);
}

I had the same issue, I fixed it by doing this:
In activity_main.xml add this to the CoordinatorLayout:
android:fitsSystemWindows="true"
The viewpager should be like this:
<android.support.v4.view.ViewPager
android:background="#color/colorPrimary"
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
And in all your Fragments, they should start with NestedScrollView and must contain (fillViewport):
<android.support.v4.widget.NestedScrollView 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/constraintLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.khan.junaid.phonefans.MainActivity">
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/fans_list_view"
/>
</android.support.v4.widget.NestedScrollView>
These settings will make the fragments scrollable, and the content will no more be hiding behind the Navigation bar buttons.